fix: restore copy button in tabs (#1326)

denoland · Jan 21, 2025 · fd20f71 · fd20f71
1 parent f8d233e
commit fd20f71
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 31 deletions.
diff --git a/copy.client.ts b/copy.client.ts
@@ -1,10 +1,31 @@
-const copyBtns = document.querySelectorAll("button[data-copy]");
-
-copyBtns.forEach((btn) => {
-  btn.addEventListener("click", () => {
-    let textToCopy = btn.getAttribute("data-copy") as string;
-    // CLEAN COMMANDS:  Remove leading spaces, $, and > from each line
-    textToCopy = textToCopy.replace(/^[\$>\s]+/, "");
-    navigator?.clipboard?.writeText(textToCopy);
+document.addEventListener("click", (event) => {
+  const btn = (event.target as HTMLElement).closest("button[data-copy]");
+
+  if (!btn) {
+    return;
+  }
+
+  let textToCopy = btn.getAttribute("data-copy") as string;
+
+  // CLEAN COMMANDS:  Remove leading spaces, $, and > from each line
+  textToCopy = textToCopy.replace(/^[\$>\s]+/, "");
+
+  navigator?.clipboard?.writeText(textToCopy).then(() => {
+    if (!btn) {
+      return;
+    }
+
+    const copyIcon = btn.querySelector(".copy-icon");
+    const checkIcon = btn.querySelector(".check-icon");
+
+    if (copyIcon && checkIcon) {
+      copyIcon.classList.add("hidden");
+      checkIcon.classList.remove("hidden");
+
+      setTimeout(() => {
+        copyIcon.classList.remove("hidden");
+        checkIcon.classList.add("hidden");
+      }, 2000);
+    }
   });
 });
diff --git a/markdown-it/codeblock-copy.ts b/markdown-it/codeblock-copy.ts
@@ -30,28 +30,6 @@ export default function codeblockCopyPlugin(md: any) {
       </button>
     `;
 
-    const script = `
-      <script>
-        (function() {
-          const button = document.getElementById('${uniqueId}');
-          button.addEventListener('click', function() {
-            let textToCopy = this.getAttribute('data-copy');
-            // CLEAN COMMANDS:  Remove leading spaces, $, and > from each line
-            textToCopy = textToCopy.replace(/^[\$>\s]+/, '');
-
-            navigator.clipboard.writeText(textToCopy).then(() => {
-              this.querySelector('.copy-icon').classList.add('hidden');
-              this.querySelector('.check-icon').classList.remove('hidden');
-              setTimeout(() => {
-                this.querySelector('.copy-icon').classList.remove('hidden');
-                this.querySelector('.check-icon').classList.add('hidden');
-              }, 2000);
-            });
-          });
-        })();
-      </script>
-    `;
-
-    return `<div class="relative">${render}${buttonHtml}${script}</div>`;
+    return `<div class="relative">${render}${buttonHtml}</div>`;
   };
 }