Cocoon のコードブロックにコピーボタンを追加

WordPress のコードブロックにコピーボタン、やっぱりほしい。
ということで、Cocoon に Copy button を追加してみた。

実装は、JavaScript で <pre> タグの中に <code> を含むものを探して、コピーボタンを配置するという方針に。

実装した JavaScript コード:

document.addEventListener("DOMContentLoaded", () => {
    // Get all <pre> elements
    const preElements = document.querySelectorAll("pre");

    preElements.forEach(pre => {
        const code = pre.querySelector("code");
        
        if (code) {
            // Create a copy button
            const copyButton = document.createElement("button");
            copyButton.textContent = "Copy";
            copyButton.style.position = "absolute";
            copyButton.style.top = "5px";
            copyButton.style.right = "5px";
            copyButton.style.padding = "5px 10px";
            copyButton.style.fontSize = "12px";
            copyButton.style.cursor = "pointer";

            // Add click action
            copyButton.addEventListener("click", () => {
                const codeText = code.textContent;
                navigator.clipboard.writeText(codeText).then(() => {
                    copyButton.textContent = "Copied!";
                    setTimeout(() => {
                        copyButton.textContent = "Copy";
                    }, 2000);
                }).catch(err => {
                    console.error("Failed to copy", err);
                });
            });

            // To maintain the position of the copy button, wrap the <pre> element in a div element
            const container = document.createElement("div");
            container.style.position = "relative";
            container.style.width = "100%";

            pre.parentNode.insertBefore(container, pre);
            container.appendChild(pre);
            container.appendChild(copyButton);
        }
    });
});

JavaScript は、「外観」→「テーマファイルエディター」→「javascript.js」から追加

JavaScript 導入後のコードブロック表示：

コードブロックのテキストがコピー可能になり、理想に一歩近づいた。

---

参考にさせていただいたサイト:
https://lovagelab.com/posts/3406/