feat: copy to clipboard (#18963)

* feat: copy to clipboard

* fix: CI failure related issue

* fix: CI failure issue

* fix: copy to clipboard button bug

* feat: copy pragmadots value to clipboard

3 files changed, 118 insertions, 2 deletions

diff --git a/doc/nimdoc.css b/doc/nimdoc.css
index 4abea9ce0..3353f1cda 100644
--- a/doc/nimdoc.css
+++ b/doc/nimdoc.css
@@ -38,6 +38,10 @@ Modified by Boyd Greenfield and narimiran
   --program: #6060c0;

   --option: #508000;

   --raw-data: #a4255b;

+

+  --clipboard-image-normal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='color: black' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E %3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2' /%3E %3C/svg%3E");

+  --clipboard-image-selected: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='color: black' viewBox='0 0 20 20' fill='currentColor'%3E %3Cpath d='M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z' /%3E %3Cpath d='M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z' /%3E %3C/svg%3E");

+  --clipboard-image: var(--clipboard-image-normal)

 }

 

 [data-theme="dark"] {

@@ -68,6 +72,10 @@ Modified by Boyd Greenfield and narimiran
   --program: #9090c0;

   --option: #90b010;

   --raw-data: #8be9fd;

+

+  --clipboard-image-normal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='color: lightgray' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E %3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2' /%3E %3C/svg%3E");

+  --clipboard-image-selected: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='color: lightgray' viewBox='0 0 20 20' fill='currentColor'%3E %3Cpath d='M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z' /%3E %3Cpath d='M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z' /%3E %3C/svg%3E");

+  --clipboard-image: var(--clipboard-image-normal);

 }

 

 .theme-switch-wrapper {

@@ -572,6 +580,10 @@ span.tok {
   margin-right: 0.2em;

 }

 

+.copyToClipBoard {

+  position: relative;

+}

+

 pre {

   font-family: "Source Code Pro", Monaco, Menlo, Consolas, "Courier New", monospace;

   color: var(--text);

@@ -590,7 +602,25 @@ pre {
   border: 1px solid var(--border);

   -webkit-border-radius: 6px;

   -moz-border-radius: 6px;

-  border-radius: 6px; }

+  border-radius: 6px; 

+}

+

+.copyToClipBoardBtn {

+  visibility: hidden;

+  position: absolute;

+  width: 24px;

+  border-radius: 4px;

+  background-image: var(--clipboard-image);

+  right: 5px;

+  top: 13px;

+  background-color: var(--secondary-background);

+  padding: 11px;

+  border: 0;

+}

+

+.copyToClipBoard:hover .copyToClipBoardBtn {

+  visibility: visible;

+} 

 

 .pre-scrollable {

   max-height: 340px;

diff --git a/nimdoc/testproject/expected/nimdoc.out.css b/nimdoc/testproject/expected/nimdoc.out.css
index 4abea9ce0..3353f1cda 100644
--- a/nimdoc/testproject/expected/nimdoc.out.css
+++ b/nimdoc/testproject/expected/nimdoc.out.css
@@ -38,6 +38,10 @@ Modified by Boyd Greenfield and narimiran
   --program: #6060c0;

   --option: #508000;

   --raw-data: #a4255b;

+

+  --clipboard-image-normal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='color: black' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E %3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2' /%3E %3C/svg%3E");

+  --clipboard-image-selected: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='color: black' viewBox='0 0 20 20' fill='currentColor'%3E %3Cpath d='M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z' /%3E %3Cpath d='M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z' /%3E %3C/svg%3E");

+  --clipboard-image: var(--clipboard-image-normal)

 }

 

 [data-theme="dark"] {

@@ -68,6 +72,10 @@ Modified by Boyd Greenfield and narimiran
   --program: #9090c0;

   --option: #90b010;

   --raw-data: #8be9fd;

+

+  --clipboard-image-normal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='color: lightgray' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E %3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2' /%3E %3C/svg%3E");

+  --clipboard-image-selected: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='color: lightgray' viewBox='0 0 20 20' fill='currentColor'%3E %3Cpath d='M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z' /%3E %3Cpath d='M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z' /%3E %3C/svg%3E");

+  --clipboard-image: var(--clipboard-image-normal);

 }

 

 .theme-switch-wrapper {

@@ -572,6 +580,10 @@ span.tok {
   margin-right: 0.2em;

 }

 

+.copyToClipBoard {

+  position: relative;

+}

+

 pre {

   font-family: "Source Code Pro", Monaco, Menlo, Consolas, "Courier New", monospace;

   color: var(--text);

@@ -590,7 +602,25 @@ pre {
   border: 1px solid var(--border);

   -webkit-border-radius: 6px;

   -moz-border-radius: 6px;

-  border-radius: 6px; }

+  border-radius: 6px; 

+}

+

+.copyToClipBoardBtn {

+  visibility: hidden;

+  position: absolute;

+  width: 24px;

+  border-radius: 4px;

+  background-image: var(--clipboard-image);

+  right: 5px;

+  top: 13px;

+  background-color: var(--secondary-background);

+  padding: 11px;

+  border: 0;

+}

+

+.copyToClipBoard:hover .copyToClipBoardBtn {

+  visibility: visible;

+} 

 

 .pre-scrollable {

   max-height: 340px;

diff --git a/tools/dochack/dochack.nim b/tools/dochack/dochack.nim
index 4a491cf88..83e81f1c0 100644
--- a/tools/dochack/dochack.nim
+++ b/tools/dochack/dochack.nim
@@ -341,3 +341,59 @@ proc search*() {.exportc.} =
 
   if timer != nil: clearTimeout(timer)
   timer = setTimeout(wrapper, 400)
+
+proc copyToClipboard*() {.exportc.} =
+    {.emit: """
+
+    function updatePreTags() {
+
+      const allPreTags = document.querySelectorAll("pre")
+    
+      allPreTags.forEach((e) => {
+      
+          const div = document.createElement("div")
+          div.classList.add("copyToClipBoard")
+    
+          const preTag = document.createElement("pre")
+          preTag.innerHTML = e.innerHTML
+    
+          const button = document.createElement("button")
+          button.value = e.textContent.replace('...', '') 
+          button.classList.add("copyToClipBoardBtn")
+    
+          div.appendChild(preTag)
+          div.appendChild(button)
+    
+          e.outerHTML = div.outerHTML
+      
+      })
+    }
+
+
+    function copyTextToClipboard(e) {
+        const clipBoardContent = e.target.value
+        navigator.clipboard.writeText(clipBoardContent).then(function() {
+            e.target.style.setProperty("--clipboard-image", "var(--clipboard-image-selected)")
+        }, function(err) {
+            console.error("Could not copy text: ", err);
+        });
+    }
+
+    window.addEventListener("click", (e) => {
+        if (e.target.classList.contains("copyToClipBoardBtn")) {
+            copyTextToClipboard(e)
+          }
+    })
+
+    window.addEventListener("mouseover", (e) => {
+        if (e.target.nodeName === "PRE") {
+            e.target.nextElementSibling.style.setProperty("--clipboard-image", "var(--clipboard-image-normal)")
+        }
+    })
+    
+    window.addEventListener("DOMContentLoaded", updatePreTags)
+
+    """
+    .}
+    
+copyToClipboard()
\ No newline at end of file