From 156f1eb9623a54843a728936b08851cdb7aa21e3 Mon Sep 17 00:00:00 2001
From: Arun Mathai <me@arunmathaisk.in>
Date: Tue, 14 Jan 2025 17:27:28 +0530
Subject: feat(copy-code): To allow user to copy contents within code block to
 clipboard

fix(ui): corrections told by tomfran

fix(ui): add more contrast to button.

fix(ui): loading js as deferred
---
 static/js/copy-code.js | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 static/js/copy-code.js

(limited to 'static/js/copy-code.js')

diff --git a/static/js/copy-code.js b/static/js/copy-code.js
new file mode 100644
index 0000000..67fd936
--- /dev/null
+++ b/static/js/copy-code.js
@@ -0,0 +1,33 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const codeBlocks = document.querySelectorAll("pre");
+
+  codeBlocks.forEach((codeBlock) => {
+    const copyButton = document.createElement("button");
+    copyButton.className = "copy-code-button";
+    copyButton.textContent = "copy";
+
+    // Insert the button inside the <pre> block
+    codeBlock.appendChild(copyButton);
+
+    copyButton.addEventListener("click", function () {
+      const code = codeBlock.querySelector("code");
+      // Get the code content
+      const textToCopy = code.textContent || code.innerText;
+
+      // Use the Clipboard API to copy the text
+      navigator.clipboard
+        .writeText(textToCopy)
+        .then(() => {
+          // Change button text to "Copied"
+          copyButton.textContent = "copied";
+
+          setTimeout(() => {
+            copyButton.textContent = "copy";
+          }, 2000); // Reset the button text after 2 seconds
+        })
+        .catch((err) => {
+          console.error("Unable to copy text:", err);
+        });
+    });
+  });
+});
-- 
cgit v1.2.3