@riebeckite/plugin-code-enhance 0.0.13 → 0.0.15
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 +6 -1
- package/README_ja.md +5 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.js +67 -56
- package/dist/src/init.d.ts +2 -0
- package/dist/src/types.d.ts +5 -5
- package/package.json +2 -2
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/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,60 @@ 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 = button.dataset.code ?? "";
|
|
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 toggleWrap(button) {
|
|
45
|
+
const figure = button.closest(".rr-code");
|
|
46
|
+
const pre = figure?.querySelector(".rr-code__pre");
|
|
47
|
+
if (!pre) return;
|
|
48
|
+
const enabled = pre.classList.toggle("rr-code__pre--wrap");
|
|
49
|
+
button.setAttribute("aria-pressed", String(enabled));
|
|
50
|
+
}
|
|
51
|
+
function toggleCollapse(button) {
|
|
52
|
+
const figure = button.closest(".rr-code");
|
|
53
|
+
const body = figure?.querySelector(".rr-code__body");
|
|
54
|
+
if (!figure || !body) return;
|
|
55
|
+
const collapsed = figure.dataset.collapsed !== "true";
|
|
56
|
+
figure.dataset.collapsed = String(collapsed);
|
|
57
|
+
body.hidden = collapsed;
|
|
58
|
+
button.setAttribute("aria-expanded", String(!collapsed));
|
|
59
|
+
button.textContent = collapsed ? "Expand" : "Collapse";
|
|
60
|
+
}
|
|
61
|
+
|
|
8
62
|
// src/rehype.ts
|
|
9
63
|
import rehypePrettyCode from "rehype-pretty-code";
|
|
10
64
|
|
|
@@ -244,7 +298,7 @@ function buildHeader(input) {
|
|
|
244
298
|
className: "rr-code__action",
|
|
245
299
|
dataCodeCopy: "true",
|
|
246
300
|
dataCode: input.rawCode,
|
|
247
|
-
ariaLabel: "
|
|
301
|
+
ariaLabel: "Copy code"
|
|
248
302
|
},
|
|
249
303
|
[text("Copy")]
|
|
250
304
|
)
|
|
@@ -364,74 +418,31 @@ function visitMdast(node, visitor) {
|
|
|
364
418
|
for (const child of node.children ?? []) visitMdast(child, visitor);
|
|
365
419
|
}
|
|
366
420
|
|
|
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
421
|
// index.ts
|
|
422
422
|
function codeEnhance(options = {}) {
|
|
423
423
|
return definePlugin({
|
|
424
424
|
name: "code-enhance",
|
|
425
|
+
processedContentCache: {
|
|
426
|
+
version: "code-enhance-v2",
|
|
427
|
+
dependencyMode: "none"
|
|
428
|
+
},
|
|
425
429
|
options,
|
|
426
430
|
remarkPlugins: [remarkCodeMeta],
|
|
427
431
|
extendHtmlPipeline: (pipeline) => {
|
|
428
432
|
pipeline.use(rehypeCodeEnhance, options);
|
|
429
433
|
},
|
|
430
434
|
assets: [createStyleAsset("code-enhance")],
|
|
431
|
-
clientEntries: [
|
|
435
|
+
clientEntries: [
|
|
436
|
+
createClientEntry("code-enhance", "initCodeEnhance", {
|
|
437
|
+
copyLabel: options.copyLabel ?? DEFAULT_COPY_LABEL,
|
|
438
|
+
copiedLabel: options.copiedLabel ?? DEFAULT_COPIED_LABEL
|
|
439
|
+
})
|
|
440
|
+
]
|
|
432
441
|
});
|
|
433
442
|
}
|
|
434
443
|
export {
|
|
444
|
+
DEFAULT_COPIED_LABEL,
|
|
445
|
+
DEFAULT_COPY_LABEL,
|
|
435
446
|
codeEnhance,
|
|
436
447
|
initCodeEnhance,
|
|
437
448
|
rehypeCodeEnhance,
|
package/dist/src/init.d.ts
CHANGED
package/dist/src/types.d.ts
CHANGED
|
@@ -2,7 +2,11 @@ export type CodeEnhanceTheme = string | {
|
|
|
2
2
|
light: string;
|
|
3
3
|
dark: string;
|
|
4
4
|
};
|
|
5
|
-
export type
|
|
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.
|
|
3
|
+
"version": "0.0.15",
|
|
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.
|
|
26
|
+
"@riebeckite/core": "0.0.15"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"tsx": "^4.22.4"
|