feat(codeblock): add title support

This commit is contained in:
ZhenShuo Leo
2025-12-15 21:17:35 +08:00
parent f487e616bf
commit 0e3bad2be7
5 changed files with 73 additions and 36 deletions

View File

@@ -2,31 +2,26 @@ var scriptBundle = document.getElementById("script-bundle");
var copyText = scriptBundle?.getAttribute("data-copy") || "Copy";
var copiedText = scriptBundle?.getAttribute("data-copied") || "Copied";
function createCopyButton(highlightDiv) {
function createCopyButton(highlightWrapper) {
const button = document.createElement("button");
button.className = "copy-button";
button.type = "button";
button.ariaLabel = copyText;
button.innerText = copyText;
button.addEventListener("click", () => copyCodeToClipboard(button, highlightDiv));
highlightDiv.insertBefore(button, highlightDiv.firstChild);
const wrapper = document.createElement("div");
wrapper.className = "highlight-wrapper";
highlightDiv.parentNode.insertBefore(wrapper, highlightDiv);
wrapper.appendChild(highlightDiv);
button.addEventListener("click", () => copyCodeToClipboard(button, highlightWrapper));
highlightWrapper.insertBefore(button, highlightWrapper.firstChild);
}
async function copyCodeToClipboard(button, highlightDiv) {
const codeToCopy = getCodeText(highlightDiv);
async function copyCodeToClipboard(button, highlightWrapper) {
const codeToCopy = getCodeText(highlightWrapper);
function fallback(codeToCopy, highlightDiv) {
function fallback(codeToCopy, highlightWrapper) {
const textArea = document.createElement("textArea");
textArea.contentEditable = "true";
textArea.readOnly = "false";
textArea.className = "copy-textarea";
textArea.value = codeToCopy;
highlightDiv.insertBefore(textArea, highlightDiv.firstChild);
highlightWrapper.insertBefore(textArea, highlightWrapper.firstChild);
const range = document.createRange();
range.selectNodeContents(textArea);
const sel = window.getSelection();
@@ -34,7 +29,7 @@ async function copyCodeToClipboard(button, highlightDiv) {
sel.addRange(range);
textArea.setSelectionRange(0, 999999);
document.execCommand("copy");
highlightDiv.removeChild(textArea);
highlightWrapper.removeChild(textArea);
}
try {
@@ -42,10 +37,10 @@ async function copyCodeToClipboard(button, highlightDiv) {
if (result.state == "granted" || result.state == "prompt") {
await navigator.clipboard.writeText(codeToCopy);
} else {
fallback(codeToCopy, highlightDiv);
fallback(codeToCopy, highlightWrapper);
}
} catch (_) {
fallback(codeToCopy, highlightDiv);
fallback(codeToCopy, highlightWrapper);
} finally {
button.blur();
button.innerText = copiedText;
@@ -55,7 +50,10 @@ async function copyCodeToClipboard(button, highlightDiv) {
}
}
function getCodeText(highlightDiv) {
function getCodeText(highlightWrapper) {
const highlightDiv = highlightWrapper.querySelector(".highlight");
if (!highlightDiv) return "";
const codeBlock = highlightDiv.querySelector("code");
const inlineLines = codeBlock?.querySelectorAll(".cl"); // linenos=inline
const tableCodeCell = highlightDiv?.querySelector(".lntable .lntd:last-child code"); // linenos=table
@@ -75,5 +73,5 @@ function getCodeText(highlightDiv) {
}
window.addEventListener("DOMContentLoaded", (event) => {
document.querySelectorAll(".highlight").forEach((highlightDiv) => createCopyButton(highlightDiv));
document.querySelectorAll(".highlight-wrapper").forEach((highlightWrapper) => createCopyButton(highlightWrapper));
});