✨ feat: add copy button to code blocks

static/js/copyCodeToClipboard.js

@@ -0,0 +1,37 @@
+const changeIcon = (copyDiv, className) => {
+    copyDiv.classList.add(className);
+    setTimeout(() => copyDiv.classList.remove(className), 2500);
+};
+
+const addCopyEventListenerToDiv = (copyDiv, block) => {
+    copyDiv.addEventListener("click", () => copyCodeAndChangeIcon(copyDiv, block));
+};
+
+const copyCodeAndChangeIcon = async (copyDiv, block) => {
+    const code = block.querySelector('table') ? getTableCode(block) : getNonTableCode(block);
+    try {
+        await navigator.clipboard.writeText(code);
+        changeIcon(copyDiv, "checked");
+    } catch (error) {
+        changeIcon(copyDiv, "error");
+    }
+};
+
+const getNonTableCode = (block) => {
+    return [...block.querySelectorAll('code')]
+        .map(code => code.textContent)
+        .join('');
+};
+
+const getTableCode = (block) => {
+    return [...block.querySelectorAll('tr')]
+        .map(row => row.querySelector('td:last-child')?.innerText ?? '')
+        .join('');
+};
+
+document.querySelectorAll("pre").forEach((block) => {
+    const copyDiv = document.createElement("div");
+    copyDiv.className = "copy-code";
+    block.prepend(copyDiv);
+    addCopyEventListenerToDiv(copyDiv, block);
+});

static/js/copyCodeToClipboard_min.js

@@ -0,0 +1 @@
+const changeIcon=(e,t)=>{e.classList.add(t),setTimeout(()=>e.classList.remove(t),2500)},addCopyEventListenerToDiv=(e,t)=>{e.addEventListener("click",()=>copyCodeAndChangeIcon(e,t))},copyCodeAndChangeIcon=async(e,t)=>{let o=t.querySelector("table")?getTableCode(t):getNonTableCode(t);try{await navigator.clipboard.writeText(o),changeIcon(e,"checked")}catch(c){changeIcon(e,"error")}},getNonTableCode=e=>[...e.querySelectorAll("code")].map(e=>e.textContent).join(""),getTableCode=e=>[...e.querySelectorAll("tr")].map(e=>e.querySelector("td:last-child")?.innerText??"").join("");document.querySelectorAll("pre").forEach(e=>{let t=document.createElement("div");t.className="copy-code",e.prepend(t),addCopyEventListenerToDiv(t,e)});

static/js/copy_button.js

@@ -1,19 +0,0 @@
-function changeIcon(copyDiv, className) {
-    copyDiv.classList.add(className);
-    setTimeout(() => copyDiv.classList.remove(className), 2500);
-}
-
-document.querySelectorAll("pre").forEach((block) => {
-    const copyDiv = document.createElement("div");
-    copyDiv.className = "copy-code";
-    block.prepend(copyDiv);
-
-    copyDiv.addEventListener("click", function () {
-        const code = block.innerText;
-        navigator.clipboard.writeText(code).then(() => {
-            changeIcon(copyDiv, "checked");
-        }, () => {
-            changeIcon(copyDiv, "error");
-        });
-    });
-});