Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add copy to clipboard in code blocks
- Loading branch information
1 parent
f8e1ad8
commit 0ca1e96
Showing
3 changed files
with
95 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
/* "Copy" code block button */ | ||
pre { | ||
position: relative; | ||
} | ||
|
||
pre .btnIcon { | ||
position: absolute; | ||
top: -5px; | ||
right: 16px; | ||
z-index: 2; | ||
cursor: pointer; | ||
border: 1px solid transparent; | ||
padding: 0; | ||
background-color: transparent; | ||
height: 30px; | ||
transition: all 0.25s ease-out; | ||
display: none; | ||
} | ||
|
||
pre .btnIcon:hover { | ||
text-decoration: none; | ||
display: block; | ||
} | ||
|
||
pre code[class*="language-"]:hover + .btnIcon { | ||
display: block; | ||
} | ||
|
||
.btnIcon__body { | ||
align-items: center; | ||
display: flex; | ||
color: #535b64; | ||
} | ||
|
||
.btnIcon svg { | ||
fill: currentColor; | ||
margin-right: 0.4em; | ||
} | ||
|
||
.btnIcon__label { | ||
font-size: 11px; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
"use strict"; | ||
|
||
window.addEventListener("load", () => { | ||
function button(label, ariaLabel, icon, className) { | ||
const btn = document.createElement("button"); | ||
btn.classList.add("btnIcon", className); | ||
btn.setAttribute("type", "button"); | ||
btn.setAttribute("aria-label", ariaLabel); | ||
btn.innerHTML = | ||
'<div class="btnIcon__body">' + | ||
icon + | ||
'<strong class="btnIcon__label">' + | ||
label + | ||
"</strong>" + | ||
"</div>"; | ||
return btn; | ||
} | ||
|
||
function addButtons(codeBlockSelector, btn) { | ||
for (const code of document.querySelectorAll(codeBlockSelector)) { | ||
code.parentNode.appendChild(btn.cloneNode(true)); | ||
} | ||
} | ||
|
||
const copyIcon = | ||
'<svg width="12" height="12" viewBox="340 364 14 15" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M342 375.974h4v.998h-4v-.998zm5-5.987h-5v.998h5v-.998zm2 2.994v-1.995l-3 2.993 3 2.994v-1.996h5v-1.995h-5zm-4.5-.997H342v.998h2.5v-.997zm-2.5 2.993h2.5v-.998H342v.998zm9 .998h1v1.996c-.016.28-.11.514-.297.702-.187.187-.422.28-.703.296h-10c-.547 0-1-.452-1-.998v-10.976c0-.546.453-.998 1-.998h3c0-1.107.89-1.996 2-1.996 1.11 0 2 .89 2 1.996h3c.547 0 1 .452 1 .998v4.99h-1v-2.995h-10v8.98h10v-1.996zm-9-7.983h8c0-.544-.453-.996-1-.996h-1c-.547 0-1-.453-1-.998 0-.546-.453-.998-1-.998-.547 0-1 .452-1 .998 0 .545-.453.998-1 .998h-1c-.547 0-1 .452-1 .997z" fill-rule="evenodd"/></svg>'; | ||
|
||
addButtons( | ||
".hljs", | ||
button("Copy", "Copy code to clipboard", copyIcon, "btnClipboard") | ||
); | ||
// eslint-disable-next-line no-undef | ||
const clipboard = new ClipboardJS(".btnClipboard", { | ||
target(trigger) { | ||
return trigger.parentNode.querySelector("code"); | ||
}, | ||
}); | ||
|
||
clipboard.on("success", (event) => { | ||
event.clearSelection(); | ||
const textEl = event.trigger.querySelector(".btnIcon__label"); | ||
textEl.textContent = "Copied"; | ||
setTimeout(() => { | ||
textEl.textContent = "Copy"; | ||
}, 2000); | ||
}); | ||
}); |