From 7417e1c45feef312c5941660bae4212bc344e6fd Mon Sep 17 00:00:00 2001 From: "Abishek P.Y" Date: Wed, 6 Oct 2021 17:16:01 +0530 Subject: [PATCH 1/5] feat: copy to clipboard --- doc/nimdoc.css | 22 +++++++++++++++++- tools/dochack/dochack.nim | 49 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 70 insertions(+), 1 deletion(-) diff --git a/doc/nimdoc.css b/doc/nimdoc.css index 4abea9ce0a6a..940c68a70b3d 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 { @@ -590,7 +598,19 @@ pre { border: 1px solid var(--border); -webkit-border-radius: 6px; -moz-border-radius: 6px; - border-radius: 6px; } + border-radius: 6px; + position:relative; } + +pre:hover:after { + content: ''; + position: absolute; + width: 24px; + height: 24px; + border-radius: 4px; + background-image: var(--clipboard-image); + right: 5px; + top: 5px; +} .pre-scrollable { max-height: 340px; diff --git a/tools/dochack/dochack.nim b/tools/dochack/dochack.nim index 4a491cf88340..f7bf2b43eaa2 100644 --- a/tools/dochack/dochack.nim +++ b/tools/dochack/dochack.nim @@ -341,3 +341,52 @@ proc search*() {.exportc.} = if timer != nil: clearTimeout(timer) timer = setTimeout(wrapper, 400) + +proc copyToClipboard*() {.exportc.} = + {.emit: """ + + function fallbackCopyTextToClipboard(e) { + if (document.selection) { // IE + var range = document.body.createTextRange(); + range.moveToElementText(e.target); + range.select(); + } else if (window.getSelection) { + var range = document.createRange(); + range.selectNode(e.target); + window.getSelection().removeAllRanges(); + window.getSelection().addRange(range); + } + document.execCommand("copy"); + e.target.style.setProperty("--clipboard-image", "var(--clipboard-image-selected)") + } + + function copyTextToClipboard(e) { + if (!navigator.clipboard) { + fallbackCopyTextToClipboard(e); + return; + } + + navigator.clipboard.writeText(e.target.innerText).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.nodeName === "PRE") { + copyTextToClipboard(e) + } + }) + + window.addEventListener('mouseover', (e) => { + if (e.target.nodeName === "PRE") { + e.target.style.setProperty("--clipboard-image", "var(--clipboard-image-normal)") + } + + }) + + """ + .} + +copyToClipboard() \ No newline at end of file From c0c69ea8335db0fa51a51c45c235b58962fb891f Mon Sep 17 00:00:00 2001 From: "Abishek P.Y" Date: Fri, 8 Oct 2021 10:01:44 +0530 Subject: [PATCH 2/5] fix: CI failure related issue --- doc/nimdoc.css | 2 +- nimdoc/testproject/expected/nimdoc.out.css | 22 +++++++++++++++++++++- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/doc/nimdoc.css b/doc/nimdoc.css index 940c68a70b3d..d3ded0c9859c 100644 --- a/doc/nimdoc.css +++ b/doc/nimdoc.css @@ -599,7 +599,7 @@ pre { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; - position:relative; } + position:relative; } pre:hover:after { content: ''; diff --git a/nimdoc/testproject/expected/nimdoc.out.css b/nimdoc/testproject/expected/nimdoc.out.css index 4abea9ce0a6a..e0e5548c7df9 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 { @@ -590,7 +598,19 @@ pre { border: 1px solid var(--border); -webkit-border-radius: 6px; -moz-border-radius: 6px; - border-radius: 6px; } + border-radius: 6px; + position:relative;} + +pre:hover:after { + content: ''; + position: absolute; + width: 24px; + height: 24px; + border-radius: 4px; + background-image: var(--clipboard-image); + right: 5px; + top: 5px; +} .pre-scrollable { max-height: 340px; From 58317d0a4b8bcaef532c62715e9ce936adb61363 Mon Sep 17 00:00:00 2001 From: "Abishek P.Y" Date: Fri, 8 Oct 2021 10:20:45 +0530 Subject: [PATCH 3/5] fix: CI failure issue --- nimdoc/testproject/expected/nimdoc.out.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/nimdoc/testproject/expected/nimdoc.out.css b/nimdoc/testproject/expected/nimdoc.out.css index e0e5548c7df9..d3ded0c9859c 100644 --- a/nimdoc/testproject/expected/nimdoc.out.css +++ b/nimdoc/testproject/expected/nimdoc.out.css @@ -72,7 +72,7 @@ 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); @@ -598,8 +598,8 @@ pre { border: 1px solid var(--border); -webkit-border-radius: 6px; -moz-border-radius: 6px; - border-radius: 6px; - position:relative;} + border-radius: 6px; + position:relative; } pre:hover:after { content: ''; From b754c2a840776fb64db1fffee9169946dc6ed76d Mon Sep 17 00:00:00 2001 From: "Abishek P.Y" Date: Thu, 21 Oct 2021 20:39:14 +0530 Subject: [PATCH 4/5] fix: copy to clipboard button bug --- doc/nimdoc.css | 22 ++++++--- nimdoc/testproject/expected/nimdoc.out.css | 22 ++++++--- tools/dochack/dochack.nim | 57 ++++++++++++---------- 3 files changed, 64 insertions(+), 37 deletions(-) diff --git a/doc/nimdoc.css b/doc/nimdoc.css index d3ded0c9859c..3353f1cda177 100644 --- a/doc/nimdoc.css +++ b/doc/nimdoc.css @@ -580,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); @@ -598,20 +602,26 @@ pre { border: 1px solid var(--border); -webkit-border-radius: 6px; -moz-border-radius: 6px; - border-radius: 6px; - position:relative; } + border-radius: 6px; +} -pre:hover:after { - content: ''; +.copyToClipBoardBtn { + visibility: hidden; position: absolute; width: 24px; - height: 24px; border-radius: 4px; background-image: var(--clipboard-image); right: 5px; - top: 5px; + top: 13px; + background-color: var(--secondary-background); + padding: 11px; + border: 0; } +.copyToClipBoard:hover .copyToClipBoardBtn { + visibility: visible; +} + .pre-scrollable { max-height: 340px; overflow-y: scroll; } diff --git a/nimdoc/testproject/expected/nimdoc.out.css b/nimdoc/testproject/expected/nimdoc.out.css index d3ded0c9859c..3353f1cda177 100644 --- a/nimdoc/testproject/expected/nimdoc.out.css +++ b/nimdoc/testproject/expected/nimdoc.out.css @@ -580,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); @@ -598,20 +602,26 @@ pre { border: 1px solid var(--border); -webkit-border-radius: 6px; -moz-border-radius: 6px; - border-radius: 6px; - position:relative; } + border-radius: 6px; +} -pre:hover:after { - content: ''; +.copyToClipBoardBtn { + visibility: hidden; position: absolute; width: 24px; - height: 24px; border-radius: 4px; background-image: var(--clipboard-image); right: 5px; - top: 5px; + top: 13px; + background-color: var(--secondary-background); + padding: 11px; + border: 0; } +.copyToClipBoard:hover .copyToClipBoardBtn { + visibility: visible; +} + .pre-scrollable { max-height: 340px; overflow-y: scroll; } diff --git a/tools/dochack/dochack.nim b/tools/dochack/dochack.nim index f7bf2b43eaa2..326bfc30bc52 100644 --- a/tools/dochack/dochack.nim +++ b/tools/dochack/dochack.nim @@ -345,28 +345,34 @@ proc search*() {.exportc.} = proc copyToClipboard*() {.exportc.} = {.emit: """ - function fallbackCopyTextToClipboard(e) { - if (document.selection) { // IE - var range = document.body.createTextRange(); - range.moveToElementText(e.target); - range.select(); - } else if (window.getSelection) { - var range = document.createRange(); - range.selectNode(e.target); - window.getSelection().removeAllRanges(); - window.getSelection().addRange(range); - } - document.execCommand("copy"); - e.target.style.setProperty("--clipboard-image", "var(--clipboard-image-selected)") + 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.innerText + button.classList.add("copyToClipBoardBtn") + + div.appendChild(preTag) + div.appendChild(button) + + e.outerHTML = div.outerHTML + + }) } - function copyTextToClipboard(e) { - if (!navigator.clipboard) { - fallbackCopyTextToClipboard(e); - return; - } - navigator.clipboard.writeText(e.target.innerText).then(function() { + 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); @@ -374,17 +380,18 @@ proc copyToClipboard*() {.exportc.} = } window.addEventListener("click", (e) => { - if (e.target.nodeName === "PRE") { + if (e.target.classList.contains("copyToClipBoardBtn")) { copyTextToClipboard(e) - } + } }) - window.addEventListener('mouseover', (e) => { - if (e.target.nodeName === "PRE") { - e.target.style.setProperty("--clipboard-image", "var(--clipboard-image-normal)") + window.addEventListener("mouseover", (e) => { + if (e.target.classList.contains("copyToClipBoard")) { + e.target.children[1].style.setProperty("--clipboard-image", "var(--clipboard-image-normal)") } - }) + + window.addEventListener("DOMContentLoaded", updatePreTags) """ .} From 27e6a22c08bc4c67c051b6ab94fa273f48073777 Mon Sep 17 00:00:00 2001 From: "Abishek P.Y" Date: Fri, 22 Oct 2021 09:46:42 +0530 Subject: [PATCH 5/5] feat: copy pragmadots value to clipboard --- tools/dochack/dochack.nim | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tools/dochack/dochack.nim b/tools/dochack/dochack.nim index 326bfc30bc52..83e81f1c0648 100644 --- a/tools/dochack/dochack.nim +++ b/tools/dochack/dochack.nim @@ -358,7 +358,7 @@ proc copyToClipboard*() {.exportc.} = preTag.innerHTML = e.innerHTML const button = document.createElement("button") - button.value = e.innerText + button.value = e.textContent.replace('...', '') button.classList.add("copyToClipBoardBtn") div.appendChild(preTag) @@ -386,8 +386,8 @@ proc copyToClipboard*() {.exportc.} = }) window.addEventListener("mouseover", (e) => { - if (e.target.classList.contains("copyToClipBoard")) { - e.target.children[1].style.setProperty("--clipboard-image", "var(--clipboard-image-normal)") + if (e.target.nodeName === "PRE") { + e.target.nextElementSibling.style.setProperty("--clipboard-image", "var(--clipboard-image-normal)") } })