From 5a17c5aac0fd31d7ad9539d85de5697d52f6a17b Mon Sep 17 00:00:00 2001
From: Himanshu Ramavat <himanshuramavat07@gmail.com>
Date: Tue, 19 Nov 2024 22:20:43 +0530
Subject: [PATCH] [FEATURE] Added a copy button to the SVG code snippet for
 easy copying

---
 assets/js/main.js                | 22 ++++++++++++++++
 assets/scss/docs/_misc.scss      | 44 ++++++++++++++++++++++++++++++++
 tmpl/html/docs/_makros.html.twig |  5 +++-
 3 files changed, 70 insertions(+), 1 deletion(-)

diff --git a/assets/js/main.js b/assets/js/main.js
index ee7f12197..e1aaa1084 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -18,6 +18,28 @@ document.addEventListener("DOMContentLoaded", () => {
             }
         }
     }
+
+    document.querySelectorAll('.copy-btn').forEach((button) => {
+        button.addEventListener('click', () => {
+            const codeBlock = button.nextElementSibling?.querySelector('code');
+
+            if (codeBlock) {
+                const textToCopy = codeBlock.textContent.trim();
+
+                navigator.clipboard
+                    .writeText(textToCopy)
+                    .then(() => {
+                        button.textContent = 'Copied!';
+                        setTimeout(() => {
+                            button.textContent = 'Copy';
+                        }, 2000);
+                    })
+                    .catch((error) => {
+                        console.error('Failed to copy text:', error);
+                    });
+            }
+        });
+    });
 });
 
 // Theme
diff --git a/assets/scss/docs/_misc.scss b/assets/scss/docs/_misc.scss
index d7e62646b..434e818e5 100644
--- a/assets/scss/docs/_misc.scss
+++ b/assets/scss/docs/_misc.scss
@@ -48,3 +48,47 @@
         font-family: monospace;
     }
 }
+
+/* Container for Code Block */
+.code-container {
+    position: relative;
+    border-radius: 6px;
+    font-family: monospace;
+    overflow: hidden;
+
+    /* Code Block */
+    .code-block {
+        margin: 0;
+        padding: 16px;
+        overflow-x: auto;
+        font-size: 14px;
+        line-height: 1.5;
+    }
+
+    /* Copy Button */
+    .copy-btn {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        padding: 4px 8px;
+        font-size: 12px;
+        color: #24292f;
+        background-color: #f3f4f6;
+        border: 1px solid #d0d7de;
+        border-radius: 6px;
+        cursor: pointer;
+        box-shadow:
+            0 1px 0 rgba(27, 31, 35, 0.04),
+            inset 0 1px 0 rgba(255, 255, 255, 0.25);
+
+        &:hover {
+            background-color: #e1e4e8;
+            border-color: #c9d1d9;
+        }
+
+        &:active {
+            background-color: #d7dbe0;
+            box-shadow: inset 0 1px 0 rgba(27, 31, 35, 0.15);
+        }
+    }
+}
diff --git a/tmpl/html/docs/_makros.html.twig b/tmpl/html/docs/_makros.html.twig
index e6d08605d..9caeca509 100644
--- a/tmpl/html/docs/_makros.html.twig
+++ b/tmpl/html/docs/_makros.html.twig
@@ -1,3 +1,6 @@
 {% macro codeblock(markup, language = 'html') %}
-    <pre class="p-3 rounded bg-adapt-light"><code class="language-{{ language }}">{{ markup|trim|escape }}</code></pre>
+    <div class="code-container position-relative">
+        <button class="copy-btn" aria-label="Copy code" title="Copy">Copy</button>
+        <pre class="p-3 rounded bg-adapt-light code-block"><code class="language-{{ language }}">{{ markup|trim|escape }}</code></pre>
+    </div>
 {% endmacro %}