@riebeckite/plugin-code-enhance 0.0.14 → 0.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -63,9 +63,12 @@ export default defineConfig({
63
63
  | `commandPrompt` | `boolean` | `true` | `$` prompt prefix on terminal lines |
64
64
  | `wrapToggle` | `boolean` | `true` | Show the wrap toggle button |
65
65
  | `defaultCollapsed` | `boolean` | `false` | Start collapsed (requires `collapsible`) |
66
+ | `copyLabel` | `string` | `"Copy"` | Copy button label forwarded to the client |
67
+ | `copiedLabel` | `string` | `"Copied"` | Label after copying, forwarded to the client |
66
68
 
67
69
  ## Client
68
70
 
71
+ `codeEnhance()` forwards `copyLabel` / `copiedLabel` to the client entry.
69
72
  `initCodeEnhance(options?)` installs a document-level click handler for copy,
70
73
  wrap, and collapse buttons.
71
74
 
@@ -79,8 +82,10 @@ wrap, and collapse buttons.
79
82
  - `codeEnhance(options?)` — plugin factory
80
83
  - `rehypeCodeEnhance(options?)` — rehype transform
81
84
  - `initCodeEnhance(options?)` — client initializer
85
+ - `DEFAULT_COPY_LABEL`, `DEFAULT_COPIED_LABEL` — default copy labels
82
86
  - Types: `CodeEnhanceOptions`, `CodeEnhanceClientOptions`, `CodeEnhanceTheme`
83
87
 
84
88
  ## See also
85
89
 
86
- - [Plugin guide](../../../docs/en/reference/plugin-api.md)
90
+ - [Plugin guide](../../../docs/en/docs/reference/plugin-api.md)
91
+
package/README_ja.md CHANGED
@@ -38,16 +38,19 @@ export default defineConfig({
38
38
  | `collapsible` / `defaultCollapsed` | `false` | 折りたたみと初期状態 |
39
39
  | `terminal` / `commandPrompt` | `true` | 端末風表示と `$` の付与 |
40
40
  | `wrapToggle` | `true` | 折り返し切替を表示するか |
41
+ | `copyLabel` / `copiedLabel` | `"Copy"` / `"Copied"` | コピー前後のボタン文言(クライアントへ渡す) |
41
42
 
42
- `initCodeEnhance({ copyLabel, copiedLabel })` では、コピー前後のボタン文言を変更できます。
43
+ `codeEnhance({ copyLabel, copiedLabel })` はコピー前後のボタン文言をクライアントへ渡します。`initCodeEnhance({ copyLabel, copiedLabel })` を直接呼ぶ場合も同じ文言を指定できます。
43
44
 
44
45
  ## 公開 API
45
46
 
46
47
  - `codeEnhance(options?)` — プラグインファクトリ
47
48
  - `rehypeCodeEnhance(options?)` — Rehype 変換
48
49
  - `initCodeEnhance(options?)` — ブラウザ初期化関数
50
+ - `DEFAULT_COPY_LABEL`、`DEFAULT_COPIED_LABEL` — 既定のコピー文言
49
51
  - `CodeEnhanceOptions`、`CodeEnhanceClientOptions`、`CodeEnhanceTheme` — 型
50
52
 
51
53
  ## 関連資料
52
54
 
53
- - [プラグインシステム](../../../docs/ja/reference/plugin-api.md)
55
+ - [プラグインシステム](../../../docs/ja/docs/reference/plugin-api.md)
56
+
package/dist/client.js CHANGED
@@ -26,7 +26,7 @@ function initCodeEnhance(options = {}) {
26
26
  });
27
27
  }
28
28
  async function copyCode(button, copyLabel, copiedLabel) {
29
- const code = button.dataset.code ?? "";
29
+ const code = getCodeText(button);
30
30
  if (!code) return;
31
31
  await navigator.clipboard.writeText(code);
32
32
  button.textContent = copiedLabel;
@@ -34,6 +34,11 @@ async function copyCode(button, copyLabel, copiedLabel) {
34
34
  button.textContent = copyLabel;
35
35
  }, 1500);
36
36
  }
37
+ function getCodeText(button) {
38
+ const figure = button.closest(".rr-code");
39
+ const code = figure?.querySelector(".rr-code__code");
40
+ return code?.textContent ?? "";
41
+ }
37
42
  function toggleWrap(button) {
38
43
  const figure = button.closest(".rr-code");
39
44
  const pre = figure?.querySelector(".rr-code__pre");
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { CodeEnhanceOptions } from "./src/types.js";
2
- export { initCodeEnhance } from "./src/init.js";
2
+ export { DEFAULT_COPIED_LABEL, DEFAULT_COPY_LABEL, initCodeEnhance, } from "./src/init.js";
3
3
  export { rehypeCodeEnhance } from "./src/rehype.js";
4
4
  export { remarkCodeMeta } from "./src/remark.js";
5
5
  export type { CodeEnhanceClientOptions, CodeEnhanceOptions, CodeEnhanceTheme, } from "./src/types.js";
package/dist/index.js CHANGED
@@ -5,6 +5,65 @@ import {
5
5
  definePlugin
6
6
  } from "@riebeckite/core";
7
7
 
8
+ // src/init.ts
9
+ var DEFAULT_COPY_LABEL = "Copy";
10
+ var DEFAULT_COPIED_LABEL = "Copied";
11
+ function initCodeEnhance(options = {}) {
12
+ const copyLabel = options.copyLabel ?? DEFAULT_COPY_LABEL;
13
+ const copiedLabel = options.copiedLabel ?? DEFAULT_COPIED_LABEL;
14
+ document.addEventListener("click", async (event) => {
15
+ const target = event.target;
16
+ if (!(target instanceof Element)) return;
17
+ const copyButton = target.closest("[data-code-copy]");
18
+ if (copyButton) {
19
+ await copyCode(copyButton, copyLabel, copiedLabel);
20
+ return;
21
+ }
22
+ const wrapButton = target.closest(
23
+ "[data-code-wrap-toggle]"
24
+ );
25
+ if (wrapButton) {
26
+ toggleWrap(wrapButton);
27
+ return;
28
+ }
29
+ const collapseButton = target.closest(
30
+ "[data-code-collapse-toggle]"
31
+ );
32
+ if (collapseButton) toggleCollapse(collapseButton);
33
+ });
34
+ }
35
+ async function copyCode(button, copyLabel, copiedLabel) {
36
+ const code = getCodeText(button);
37
+ if (!code) return;
38
+ await navigator.clipboard.writeText(code);
39
+ button.textContent = copiedLabel;
40
+ window.setTimeout(() => {
41
+ button.textContent = copyLabel;
42
+ }, 1500);
43
+ }
44
+ function getCodeText(button) {
45
+ const figure = button.closest(".rr-code");
46
+ const code = figure?.querySelector(".rr-code__code");
47
+ return code?.textContent ?? "";
48
+ }
49
+ function toggleWrap(button) {
50
+ const figure = button.closest(".rr-code");
51
+ const pre = figure?.querySelector(".rr-code__pre");
52
+ if (!pre) return;
53
+ const enabled = pre.classList.toggle("rr-code__pre--wrap");
54
+ button.setAttribute("aria-pressed", String(enabled));
55
+ }
56
+ function toggleCollapse(button) {
57
+ const figure = button.closest(".rr-code");
58
+ const body = figure?.querySelector(".rr-code__body");
59
+ if (!figure || !body) return;
60
+ const collapsed = figure.dataset.collapsed !== "true";
61
+ figure.dataset.collapsed = String(collapsed);
62
+ body.hidden = collapsed;
63
+ button.setAttribute("aria-expanded", String(!collapsed));
64
+ button.textContent = collapsed ? "Expand" : "Collapse";
65
+ }
66
+
8
67
  // src/rehype.ts
9
68
  import rehypePrettyCode from "rehype-pretty-code";
10
69
 
@@ -171,7 +230,6 @@ function enhancePrettyCodeFigures(tree, options) {
171
230
  const titleNode = findTitleNode(node);
172
231
  const title = titleNode ? getTextContent(titleNode) : null;
173
232
  const language = getLanguage(pre, code);
174
- const rawCode = code ? getTextContent(code) : getTextContent(pre);
175
233
  const isTerminal = options.terminal !== false && isTerminalLanguage(language);
176
234
  node.properties = {
177
235
  ...node.properties,
@@ -203,7 +261,6 @@ function enhancePrettyCodeFigures(tree, options) {
203
261
  buildHeader({
204
262
  title: options.filename === false ? null : title,
205
263
  language,
206
- rawCode,
207
264
  copyButton: options.copyButton !== false,
208
265
  wrapToggle: options.wrapToggle !== false,
209
266
  collapsible: options.collapsible === true
@@ -243,8 +300,7 @@ function buildHeader(input) {
243
300
  type: "button",
244
301
  className: "rr-code__action",
245
302
  dataCodeCopy: "true",
246
- dataCode: input.rawCode,
247
- ariaLabel: "コードをコピー"
303
+ ariaLabel: "Copy code"
248
304
  },
249
305
  [text("Copy")]
250
306
  )
@@ -364,74 +420,31 @@ function visitMdast(node, visitor) {
364
420
  for (const child of node.children ?? []) visitMdast(child, visitor);
365
421
  }
366
422
 
367
- // src/init.ts
368
- var DEFAULT_COPY_LABEL = "Copy";
369
- var DEFAULT_COPIED_LABEL = "Copied";
370
- function initCodeEnhance(options = {}) {
371
- const copyLabel = options.copyLabel ?? DEFAULT_COPY_LABEL;
372
- const copiedLabel = options.copiedLabel ?? DEFAULT_COPIED_LABEL;
373
- document.addEventListener("click", async (event) => {
374
- const target = event.target;
375
- if (!(target instanceof Element)) return;
376
- const copyButton = target.closest("[data-code-copy]");
377
- if (copyButton) {
378
- await copyCode(copyButton, copyLabel, copiedLabel);
379
- return;
380
- }
381
- const wrapButton = target.closest(
382
- "[data-code-wrap-toggle]"
383
- );
384
- if (wrapButton) {
385
- toggleWrap(wrapButton);
386
- return;
387
- }
388
- const collapseButton = target.closest(
389
- "[data-code-collapse-toggle]"
390
- );
391
- if (collapseButton) toggleCollapse(collapseButton);
392
- });
393
- }
394
- async function copyCode(button, copyLabel, copiedLabel) {
395
- const code = button.dataset.code ?? "";
396
- if (!code) return;
397
- await navigator.clipboard.writeText(code);
398
- button.textContent = copiedLabel;
399
- window.setTimeout(() => {
400
- button.textContent = copyLabel;
401
- }, 1500);
402
- }
403
- function toggleWrap(button) {
404
- const figure = button.closest(".rr-code");
405
- const pre = figure?.querySelector(".rr-code__pre");
406
- if (!pre) return;
407
- const enabled = pre.classList.toggle("rr-code__pre--wrap");
408
- button.setAttribute("aria-pressed", String(enabled));
409
- }
410
- function toggleCollapse(button) {
411
- const figure = button.closest(".rr-code");
412
- const body = figure?.querySelector(".rr-code__body");
413
- if (!figure || !body) return;
414
- const collapsed = figure.dataset.collapsed !== "true";
415
- figure.dataset.collapsed = String(collapsed);
416
- body.hidden = collapsed;
417
- button.setAttribute("aria-expanded", String(!collapsed));
418
- button.textContent = collapsed ? "Expand" : "Collapse";
419
- }
420
-
421
423
  // index.ts
422
424
  function codeEnhance(options = {}) {
423
425
  return definePlugin({
424
426
  name: "code-enhance",
427
+ processedContentCache: {
428
+ version: "code-enhance-v2",
429
+ dependencyMode: "none"
430
+ },
425
431
  options,
426
432
  remarkPlugins: [remarkCodeMeta],
427
433
  extendHtmlPipeline: (pipeline) => {
428
434
  pipeline.use(rehypeCodeEnhance, options);
429
435
  },
430
436
  assets: [createStyleAsset("code-enhance")],
431
- clientEntries: [createClientEntry("code-enhance", "initCodeEnhance")]
437
+ clientEntries: [
438
+ createClientEntry("code-enhance", "initCodeEnhance", {
439
+ copyLabel: options.copyLabel ?? DEFAULT_COPY_LABEL,
440
+ copiedLabel: options.copiedLabel ?? DEFAULT_COPIED_LABEL
441
+ })
442
+ ]
432
443
  });
433
444
  }
434
445
  export {
446
+ DEFAULT_COPIED_LABEL,
447
+ DEFAULT_COPY_LABEL,
435
448
  codeEnhance,
436
449
  initCodeEnhance,
437
450
  rehypeCodeEnhance,
@@ -1,2 +1,4 @@
1
1
  import type { CodeEnhanceClientOptions } from "./types.js";
2
+ export declare const DEFAULT_COPY_LABEL = "Copy";
3
+ export declare const DEFAULT_COPIED_LABEL = "Copied";
2
4
  export declare function initCodeEnhance(options?: CodeEnhanceClientOptions): void;
@@ -2,7 +2,11 @@ export type CodeEnhanceTheme = string | {
2
2
  light: string;
3
3
  dark: string;
4
4
  };
5
- export type CodeEnhanceOptions = {
5
+ export type CodeEnhanceClientOptions = {
6
+ copyLabel?: string;
7
+ copiedLabel?: string;
8
+ };
9
+ export type CodeEnhanceOptions = CodeEnhanceClientOptions & {
6
10
  theme?: CodeEnhanceTheme;
7
11
  lineNumbers?: boolean;
8
12
  copyButton?: boolean;
@@ -15,10 +19,6 @@ export type CodeEnhanceOptions = {
15
19
  wrapToggle?: boolean;
16
20
  defaultCollapsed?: boolean;
17
21
  };
18
- export type CodeEnhanceClientOptions = {
19
- copyLabel?: string;
20
- copiedLabel?: string;
21
- };
22
22
  export type ElementNode = {
23
23
  type: string;
24
24
  tagName?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@riebeckite/plugin-code-enhance",
3
- "version": "0.0.14",
3
+ "version": "0.0.16",
4
4
  "license": "Apache-2.0",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -23,7 +23,7 @@
23
23
  "dependencies": {
24
24
  "rehype-pretty-code": "^0.14.1",
25
25
  "shiki": "^3.13.0",
26
- "@riebeckite/core": "0.0.14"
26
+ "@riebeckite/core": "0.0.16"
27
27
  },
28
28
  "devDependencies": {
29
29
  "tsx": "^4.22.4"