@riebeckite/plugin-code-enhance 0.0.30 → 0.0.32

package/dist/client.js

@@ -4,12 +4,13 @@ var DEFAULT_COPIED_LABEL = "Copied";
 function initCodeEnhance(options = {}) {
   const copyLabel = options.copyLabel ?? DEFAULT_COPY_LABEL;
   const copiedLabel = options.copiedLabel ?? DEFAULT_COPIED_LABEL;
-  document.addEventListener("click", async (event) => {
+  const timers = /* @__PURE__ */ new Set();
+  const onClick = async (event) => {
     const target = event.target;
     if (!(target instanceof Element)) return;
     const copyButton = target.closest("[data-code-copy]");
     if (copyButton) {
-      await copyCode(copyButton, copyLabel, copiedLabel);
+      await copyCode(copyButton, copyLabel, copiedLabel, timers);
       return;
     }
     const wrapButton = target.closest(
@@ -23,16 +24,26 @@ function initCodeEnhance(options = {}) {
       "[data-code-collapse-toggle]"
     );
     if (collapseButton) toggleCollapse(collapseButton);
-  });
+  };
+  document.addEventListener("click", onClick);
+  return () => {
+    document.removeEventListener("click", onClick);
+    for (const timer of timers) window.clearTimeout(timer);
+    timers.clear();
+  };
 }
-async function copyCode(button, copyLabel, copiedLabel) {
+async function copyCode(button, copyLabel, copiedLabel, timers) {
   const code = getCodeText(button);
   if (!code) return;
   await navigator.clipboard.writeText(code);
+  button.dataset.codeCopyState = "success";
   button.textContent = copiedLabel;
-  window.setTimeout(() => {
+  const timer = window.setTimeout(() => {
+    timers.delete(timer);
+    delete button.dataset.codeCopyState;
     button.textContent = copyLabel;
   }, 1500);
+  timers.add(timer);
 }
 function getCodeText(button) {
   const figure = button.closest(".rr-code");

package/dist/index.js

@@ -11,12 +11,13 @@ var DEFAULT_COPIED_LABEL = "Copied";
 function initCodeEnhance(options = {}) {
   const copyLabel = options.copyLabel ?? DEFAULT_COPY_LABEL;
   const copiedLabel = options.copiedLabel ?? DEFAULT_COPIED_LABEL;
-  document.addEventListener("click", async (event) => {
+  const timers = /* @__PURE__ */ new Set();
+  const onClick = async (event) => {
     const target = event.target;
     if (!(target instanceof Element)) return;
     const copyButton = target.closest("[data-code-copy]");
     if (copyButton) {
-      await copyCode(copyButton, copyLabel, copiedLabel);
+      await copyCode(copyButton, copyLabel, copiedLabel, timers);
       return;
     }
     const wrapButton = target.closest(
@@ -30,16 +31,26 @@ function initCodeEnhance(options = {}) {
       "[data-code-collapse-toggle]"
     );
     if (collapseButton) toggleCollapse(collapseButton);
-  });
+  };
+  document.addEventListener("click", onClick);
+  return () => {
+    document.removeEventListener("click", onClick);
+    for (const timer of timers) window.clearTimeout(timer);
+    timers.clear();
+  };
 }
-async function copyCode(button, copyLabel, copiedLabel) {
+async function copyCode(button, copyLabel, copiedLabel, timers) {
   const code = getCodeText(button);
   if (!code) return;
   await navigator.clipboard.writeText(code);
+  button.dataset.codeCopyState = "success";
   button.textContent = copiedLabel;
-  window.setTimeout(() => {
+  const timer = window.setTimeout(() => {
+    timers.delete(timer);
+    delete button.dataset.codeCopyState;
     button.textContent = copyLabel;
   }, 1500);
+  timers.add(timer);
 }
 function getCodeText(button) {
   const figure = button.closest(".rr-code");
@@ -182,6 +193,7 @@ function restoreCodeMeta(tree) {
   });
 }
 var LANGUAGE_CLASS_PREFIX = "language-";
+var SOURCE_FILE_TITLE_PREFIX = "source-file:";
 function normalizeCodeLanguages(tree) {
   visitElements(tree, (node) => {
     if (node.tagName !== "code") return;
@@ -229,12 +241,16 @@ function enhancePrettyCodeFigures(tree, options) {
     const code = findDirectChild(pre, "code");
     const titleNode = findTitleNode(node);
     const title = titleNode ? getTextContent(titleNode) : null;
+    const sourceFileTitle = title?.startsWith(SOURCE_FILE_TITLE_PREFIX) ? title : null;
+    const isSourceFile = sourceFileTitle !== null;
+    const displayTitle = sourceFileTitle ? sourceFileTitle.slice(SOURCE_FILE_TITLE_PREFIX.length) : title;
     const language = getLanguage(pre, code);
     const isShell = isTerminalLanguage(language);
     node.properties = {
       ...node.properties,
       className: mergeClassName(node.properties?.className, "rr-code"),
-      dataLanguage: language
+      dataLanguage: language,
+      ...isSourceFile ? { dataSourceFile: "true" } : {}
     };
     pre.properties = {
       ...pre.properties,
@@ -250,6 +266,7 @@ function enhancePrettyCodeFigures(tree, options) {
         className: mergeClassName(code.properties?.className, "rr-code__code")
       };
       if (options.lineNumbers) markLineNumbers(code);
+      if (isSourceFile) markSourceFileLines(code);
       if (options.diffHighlight !== false && isDiffLanguage(language))
         markDiffLines(code);
       if (options.commandPrompt !== false && isShell) markCommandPrompts(code);
@@ -258,7 +275,7 @@ function enhancePrettyCodeFigures(tree, options) {
     const body = element("div", { className: "rr-code__body" }, bodyChildren);
     node.children = [
       buildHeader({
-        title: options.filename === false ? null : title,
+        title: options.filename === false ? null : displayTitle,
         language,
         copyButton: options.copyButton !== false,
         wrapToggle: options.wrapToggle !== false,
@@ -334,6 +351,15 @@ function markLineNumbers(code) {
     };
   }
 }
+function markSourceFileLines(code) {
+  for (const [index, line] of getCodeLines(code).entries()) {
+    line.properties = {
+      ...line.properties,
+      id: `L${index + 1}`,
+      tabindex: "-1"
+    };
+  }
+}
 function markDiffLines(code) {
   for (const line of getCodeLines(code)) {
     const content = getTextContent(line);

package/dist/src/init.d.ts

@@ -1,4 +1,4 @@
 import type { CodeEnhanceClientOptions } from "./types.js";
 export declare const DEFAULT_COPY_LABEL = "Copy";
 export declare const DEFAULT_COPIED_LABEL = "Copied";
-export declare function initCodeEnhance(options?: CodeEnhanceClientOptions): void;
+export declare function initCodeEnhance(options?: CodeEnhanceClientOptions): () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-code-enhance",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -23,7 +23,7 @@
   "dependencies": {
     "rehype-pretty-code": "^0.14.1",
     "shiki": "^3.13.0",
-    "@riebeckite/core": "0.0.30"
+    "@riebeckite/core": "0.0.32"
   },
   "devDependencies": {
     "tsx": "^4.22.4"

package/style.css

@@ -1,6 +1,9 @@
 .rr-code {
-  --rr-code-paper: var(--rb-color-ink, #000000);
-  --rr-code-ink: var(--rb-color-paper, #ffffff);
+  --rr-code-paper: var(
+    --rb-color-code-background,
+    var(--rb-color-ink, #000000)
+  );
+  --rr-code-ink: var(--rb-color-code-ink, var(--rb-color-ink, #ffffff));
   --rr-code-muted: color-mix(in srgb, var(--rr-code-ink) 56%, transparent);
   --rr-code-rule: color-mix(in srgb, var(--rr-code-ink) 18%, transparent);
   --rr-code-accent: var(--rb-color-accent, #686868);
@@ -53,8 +56,12 @@
 
 .rr-code__action:hover,
 .rr-code__action:focus-visible {
-  border-color: var(--rr-code-accent);
-  color: var(--rr-code-accent);
+  border-color: color-mix(in srgb, var(--rr-code-ink) 42%, transparent);
+  background: var(
+    --rb-code-action-hover-background,
+    color-mix(in srgb, var(--rr-code-ink) 14%, var(--rb-color-paper, #ffffff))
+  );
+  color: var(--rr-code-ink);
   outline: none;
 }
 
@@ -133,15 +140,3 @@
 .rr-code__pre--wrap .rr-code__line {
   white-space: pre-wrap;
 }
-
-:is(:root, .rb-theme-root)[data-theme="dark"] .rr-code {
-  --rr-code-paper: var(--rb-color-paper, #000000);
-  --rr-code-ink: var(--rb-color-ink, #ffffff);
-}
-
-@media (prefers-color-scheme: dark) {
-  :is(:root, .rb-theme-root):not([data-theme]) .rr-code {
-    --rr-code-paper: var(--rb-color-paper, #000000);
-    --rr-code-ink: var(--rb-color-ink, #ffffff);
-  }
-}