@riebeckite/plugin-code-enhance 0.0.31 → 0.0.33

package/README.md

@@ -35,6 +35,16 @@ export default defineConfig({
 });
 ```
 
+## Live example
+
+The block below uses a filename header, line numbers, and a highlighted line.
+
+~~~ts title="greeting.ts" {2}
+export function greet(name: string) {
+  return `Hello, ${name}`;
+}
+~~~
+
 ## Features
 
 - Syntax highlighting via Shiki (rehype-pretty-code)

package/README_ja.md

@@ -2,7 +2,7 @@
 
 <!-- Generated from docs/docs/plugins/code-enhance.ja.md. Edit the canonical documentation in docs/docs/plugins and run `pnpm docs:sync`. -->
 
-Shiki によるシンタックスハイライトへ、コピー、折り返し、折りたたみなどの操作を加えるプラグインです。
+Shiki のシンタックスハイライトに、ファイル名ヘッダーとコピー、折り返し、折りたたみの操作を加えたコードブロックを提供するプラグインです。
 
 [English](./README.md)
 
@@ -20,6 +20,16 @@ export default defineConfig({
 
 `codeEnhance()` は `rehype-pretty-code` を使ってコードブロックを処理し、ファイル名と操作ボタンを持つ `.rr-code` 要素に整えます。ボタンの操作はクライアントエントリーが担当します。
 
+## 実行例
+
+次のブロックでは、ファイル名ヘッダー、行番号、行ハイライトを同時に使っています。
+
+~~~ts title="greeting.ts" {2}
+export function greet(name: string) {
+  return `Hello, ${name}`;
+}
+~~~
+
 ## 表示と操作
 
 - Shiki のテーマによる色付け、行番号、メタデータによる行・文字の強調
@@ -29,7 +39,7 @@ export default defineConfig({
 - `bash`、`console`、`sh` などのシェル言語の行に `$` を付ける
 - キーボードで内容を確認できるよう、`<pre>` をフォーカス可能にする
 
-Theme は `rr-code` の root に `--rr-code-syntax` を指定すると、ハイライト済みコードの
+テーマは `rr-code` のルート要素に `--rr-code-syntax` を指定すると、ハイライト済みコードの
 子要素を選択せずに構文色を指定できます。
 
 ## オプション
@@ -51,12 +61,12 @@ Theme は `rr-code` の root に `--rr-code-syntax` を指定すると、ハイ
 
 ## クライアント側の初期化
 
-`codeEnhance()` は `copyLabel` と `copiedLabel` をクライアントエントリーへ渡します。`initCodeEnhance(options?)` はコピー、折り返し、折りたたみボタンのために document 全体のクリックハンドラーを登録します。直接呼び出す場合も同じ二つの文言を指定できます。
+`codeEnhance()` は `copyLabel` と `copiedLabel` をクライアントエントリーへ渡します。`initCodeEnhance(options?)` はコピー、折り返し、折りたたみボタンのためにドキュメント全体のクリックハンドラーを登録します。直接呼び出す場合も同じ 2 つの文言を指定できます。
 
 ## 公開 API
 
 - `codeEnhance(options?)`：プラグインファクトリ
-- `rehypeCodeEnhance(options?)`：Rehype 変換
+- `rehypeCodeEnhance(options?)`：rehype 変換
 - `initCodeEnhance(options?)`：ブラウザ初期化関数
 - `DEFAULT_COPY_LABEL`、`DEFAULT_COPIED_LABEL`：既定のコピー文言
 - `CodeEnhanceOptions`、`CodeEnhanceClientOptions`、`CodeEnhanceTheme`：型

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/hast.d.ts

@@ -1,6 +1,5 @@
 import type { ElementNode, HastNode, TextNode } from "./types.js";
 export declare function visitElements(node: HastNode, visitor: (node: ElementNode, parent?: ElementNode, index?: number) => void, parent?: ElementNode, index?: number): void;
-export declare function isElementNode(node: HastNode): node is ElementNode;
 export declare function text(value: string): TextNode;
 export declare function element(tagName: string, properties?: Record<string, unknown>, children?: HastNode[]): ElementNode;
 export declare function getStringProperty(node: ElementNode, key: string): string | null;

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.31",
+  "version": "0.0.33",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,9 +21,9 @@
     "./style.css": "./style.css"
   },
   "dependencies": {
+    "@riebeckite/core": "0.0.33",
     "rehype-pretty-code": "^0.14.1",
-    "shiki": "^3.13.0",
-    "@riebeckite/core": "0.0.31"
+    "shiki": "^3.13.0"
   },
   "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);
-  }
-}