Skip to content

Commit

Permalink
feat: copy to clipboard (nim-lang#18963)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@vj-abishek @PMunch
vj-abishek authored and PMunch committed Mar 28, 2022
1 parent 38c1b44 commit 749b5e4
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 2 deletions.
32 changes: 31 additions & 1 deletion doc/nimdoc.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"] {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
Expand All @@ -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;
Expand Down
32 changes: 31 additions & 1 deletion nimdoc/testproject/expected/nimdoc.out.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"] {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
Expand All @@ -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;
Expand Down
56 changes: 56 additions & 0 deletions tools/dochack/dochack.nim
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()

0 comments on commit 749b5e4

Please sign in to comment.