@haklex/rich-renderer-codeblock 0.0.25 → 0.0.27
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/dist/CodeBlockEditRenderer.d.ts.map +1 -1
- package/dist/CodeBlockRenderer.d.ts.map +1 -1
- package/dist/index.mjs +7 -12
- package/dist/rich-renderer-codeblock.css +1 -1
- package/dist/shiki.d.ts +1 -1
- package/dist/shiki.d.ts.map +1 -1
- package/dist/shiki.mjs +2 -2
- package/dist/styles.css.d.ts.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlockEditRenderer.d.ts","sourceRoot":"","sources":["../src/CodeBlockEditRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAEjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAQ1C,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,sBAAsB,
|
|
1
|
+
{"version":3,"file":"CodeBlockEditRenderer.d.ts","sourceRoot":"","sources":["../src/CodeBlockEditRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAEjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAQ1C,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,sBAAsB,CAiLvE,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlockRenderer.d.ts","sourceRoot":"","sources":["../src/CodeBlockRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAEjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAQ1C,eAAO,MAAM,iBAAiB,EAAE,aAAa,CAAC,sBAAsB,
|
|
1
|
+
{"version":3,"file":"CodeBlockRenderer.d.ts","sourceRoot":"","sources":["../src/CodeBlockRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAEjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAQ1C,eAAO,MAAM,iBAAiB,EAAE,aAAa,CAAC,sBAAsB,CAiEnE,CAAA;AAED,eAAe,iBAAiB,CAAA"}
|
package/dist/index.mjs
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useVariant
|
|
2
|
+
import { useVariant } from "@haklex/rich-editor";
|
|
3
3
|
import { useState, useRef, useEffect, useCallback, useMemo } from "react";
|
|
4
4
|
import { Check, Copy, ChevronDown } from "lucide-react";
|
|
5
5
|
import { normalizeLanguage, getLanguageDisplayName, languageToColorMap } from "./constants.mjs";
|
|
6
6
|
import "@iconify/utils";
|
|
7
7
|
import "@iconify-json/material-icon-theme";
|
|
8
8
|
import { c as card, s as semanticClassNames, l as lang, h as hasLanguageIcon, L as LanguageIcon, a as copyButton, b as bodyBackground, e as expandWrap, d as expandButton, f as scroll, g as scrollCollapsed, i as lined, j as linedWithNumbers, k as body, m as bodyReadonly } from "./language-AfAZN4lZ.js";
|
|
9
|
-
import { getHighlighterWithLang,
|
|
9
|
+
import { getHighlighterWithLang, SHIKI_DUAL_THEMES } from "./shiki.mjs";
|
|
10
10
|
const CopyIcon = /* @__PURE__ */ jsx(Copy, { size: 16 });
|
|
11
11
|
const CheckIcon = /* @__PURE__ */ jsx(Check, { size: 16 });
|
|
12
12
|
const ExpandIcon = /* @__PURE__ */ jsx(ChevronDown, { size: 14 });
|
|
@@ -118,7 +118,6 @@ const CodeBlockEditRenderer = ({
|
|
|
118
118
|
}) => {
|
|
119
119
|
const variant = useVariant();
|
|
120
120
|
const showLineNumbers = showLineNumbersProp ?? variant !== "comment";
|
|
121
|
-
const colorScheme = useColorScheme();
|
|
122
121
|
const normalizedLanguage = normalizeLanguage(language);
|
|
123
122
|
const [loaded, setLoaded] = useState(false);
|
|
124
123
|
const containerRef = useRef(null);
|
|
@@ -128,14 +127,12 @@ const CodeBlockEditRenderer = ({
|
|
|
128
127
|
const latestPropsRef = useRef({
|
|
129
128
|
code,
|
|
130
129
|
normalizedLanguage,
|
|
131
|
-
colorScheme,
|
|
132
130
|
showLineNumbers,
|
|
133
131
|
editable
|
|
134
132
|
});
|
|
135
133
|
latestPropsRef.current = {
|
|
136
134
|
code,
|
|
137
135
|
normalizedLanguage,
|
|
138
|
-
colorScheme,
|
|
139
136
|
showLineNumbers,
|
|
140
137
|
editable
|
|
141
138
|
};
|
|
@@ -151,7 +148,6 @@ const CodeBlockEditRenderer = ({
|
|
|
151
148
|
import("shikicode")
|
|
152
149
|
]);
|
|
153
150
|
if (disposed) return;
|
|
154
|
-
const theme = SHIKI_THEMES[props.colorScheme];
|
|
155
151
|
const loaded2 = highlighter.getLoadedLanguages();
|
|
156
152
|
const lang2 = loaded2.includes(props.normalizedLanguage) ? props.normalizedLanguage : "text";
|
|
157
153
|
const editor = shikiCode().withOptions({
|
|
@@ -160,7 +156,7 @@ const CodeBlockEditRenderer = ({
|
|
|
160
156
|
}).create(container, highlighter, {
|
|
161
157
|
value: props.code,
|
|
162
158
|
language: lang2,
|
|
163
|
-
|
|
159
|
+
themes: SHIKI_DUAL_THEMES
|
|
164
160
|
});
|
|
165
161
|
if (!props.editable) {
|
|
166
162
|
editor.input.tabIndex = -1;
|
|
@@ -201,7 +197,7 @@ const CodeBlockEditRenderer = ({
|
|
|
201
197
|
}
|
|
202
198
|
editor.updateOptions({
|
|
203
199
|
language: resolvedLang,
|
|
204
|
-
|
|
200
|
+
themes: SHIKI_DUAL_THEMES,
|
|
205
201
|
lineNumbers: showLineNumbers ? "on" : "off",
|
|
206
202
|
readOnly: !editable
|
|
207
203
|
});
|
|
@@ -209,7 +205,7 @@ const CodeBlockEditRenderer = ({
|
|
|
209
205
|
return () => {
|
|
210
206
|
cancelled = true;
|
|
211
207
|
};
|
|
212
|
-
}, [code, normalizedLanguage,
|
|
208
|
+
}, [code, normalizedLanguage, showLineNumbers, editable]);
|
|
213
209
|
const fallbackLines = useMemo(() => code.split("\n"), [code]);
|
|
214
210
|
const fallbackClassName = [
|
|
215
211
|
showLineNumbers && lined,
|
|
@@ -242,7 +238,6 @@ const CodeBlockRenderer = ({
|
|
|
242
238
|
}) => {
|
|
243
239
|
const variant = useVariant();
|
|
244
240
|
const showLineNumbers = showLineNumbersProp ?? variant !== "comment";
|
|
245
|
-
const colorScheme = useColorScheme();
|
|
246
241
|
const normalizedLanguage = normalizeLanguage(language);
|
|
247
242
|
const [html, setHtml] = useState(null);
|
|
248
243
|
useEffect(() => {
|
|
@@ -254,14 +249,14 @@ const CodeBlockRenderer = ({
|
|
|
254
249
|
const lang2 = loaded.includes(normalizedLanguage) ? normalizedLanguage : "text";
|
|
255
250
|
const result = highlighter.codeToHtml(code, {
|
|
256
251
|
lang: lang2,
|
|
257
|
-
|
|
252
|
+
themes: SHIKI_DUAL_THEMES
|
|
258
253
|
});
|
|
259
254
|
if (!cancelled) setHtml(result);
|
|
260
255
|
})();
|
|
261
256
|
return () => {
|
|
262
257
|
cancelled = true;
|
|
263
258
|
};
|
|
264
|
-
}, [code, normalizedLanguage
|
|
259
|
+
}, [code, normalizedLanguage]);
|
|
265
260
|
const fallbackLines = useMemo(() => code.split("\n"), [code]);
|
|
266
261
|
const linedClassName = [
|
|
267
262
|
showLineNumbers && lined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._1pn9r4q0{--rr-code-accent: #737373
|
|
1
|
+
._1pn9r4q0{--rr-code-accent: #737373;position:relative;margin:1.5rem 0;border-radius:.5rem;overflow:hidden;font-size:var(--rc-font-size-md);font-family:var(--rc-font-mono)}._1pn9r4q1{position:absolute;bottom:.75rem;right:.75rem;z-index:2;display:flex;align-items:center;gap:.375rem;font-size:var(--rc-font-size-md);opacity:.6;pointer-events:none}._1pn9r4q2{display:inline-flex;flex-shrink:0}._1pn9r4q2 svg{width:100%;height:100%}._1pn9r4q3{appearance:none;position:absolute;right:.5rem;top:.5rem;z-index:3;display:flex;align-items:center;justify-content:center;padding:.375rem;border-radius:.375rem;border:1px solid color-mix(in srgb,var(--rr-code-accent) 5%,transparent);background:color-mix(in srgb,var(--rr-code-accent) 80%,transparent);color:#fff;cursor:pointer;opacity:0;transition:opacity .2s ease;backdrop-filter:blur(8px)}._1pn9r4q0:hover ._1pn9r4q3{opacity:1}._1pn9r4q4{position:relative;background:color-mix(in srgb,var(--rr-code-accent) 5%,transparent);padding:1rem 0}._1pn9r4q5{position:relative;width:100%;overflow:auto}._1pn9r4q6{max-height:50vh;overflow:hidden}._1pn9r4q7{position:relative;overflow:auto;background-color:transparent!important}._1pn9r4q7>.shikicode.output{position:static!important;inset:auto!important}._1pn9r4q8>textarea.shikicode{display:none}._1pn9r4q9{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;padding:.5rem 0 .75rem;background:linear-gradient(to bottom,transparent 0%,var(--bg, var(--rc-bg-secondary)) 80%);pointer-events:none}._1pn9r4qa{appearance:none;border:none;background:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;font-size:var(--rc-font-size-xs);color:inherit;opacity:.7;pointer-events:auto}._1pn9r4qa:hover{opacity:1}._1pn9r4q0 .shikicode.input,._1pn9r4q0 .shikicode.output,._1pn9r4q0 .shikicode.output code,._1pn9r4q0 .shikicode.output .line,._1pn9r4q0 .shikicode.output .line span{font-variant-ligatures:none;font-kerning:none}._1pn9r4q7 pre,._1pn9r4q7 code,._1pn9r4q7 .line,._1pn9r4q7 .line span{font-family:inherit!important}._1pn9r4q0 pre{margin:0!important;padding:0!important;border-radius:0;font-size:1em}._1pn9r4q0 pre code{display:flex;flex-direction:column}._1pn9r4q0 .shiki,._1pn9r4q0 code,._1pn9r4q0 pre{background:transparent!important}[data-theme=dark] ._1pn9r4q0 .shiki,[data-theme=dark] ._1pn9r4q0 .shiki span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important;font-style:var(--shiki-dark-font-style)!important;font-weight:var(--shiki-dark-font-weight)!important;text-decoration:var(--shiki-dark-text-decoration)!important}._1pn9r4q7:has(.shikicode.input.line-numbers) .shikicode.output .line:before{background-color:transparent!important;color:color-mix(in srgb,var(--rc-text-secondary) 40%,transparent)!important;width:5em;padding-right:2em}._1pn9r4q7:not(:has(.shikicode.input.line-numbers)) .shikicode.output .line:before{display:none}._1pn9r4q0 .line{display:block;padding:0 1.25rem}._1pn9r4q0 .shikicode.input.line-numbers{padding-left:calc(5em + 1.25rem)}._1pn9r4q0 .shikicode.input:not(.line-numbers){padding-left:1.25rem}._1pn9r4q0 .line>span:last-child{margin-right:1.25rem}._1pn9r4q0 .line:after{content:" "}._1pn9r4q0 .highlighted,._1pn9r4q0 .diff{position:relative;overflow-wrap:break-word}._1pn9r4q0 .highlighted:before,._1pn9r4q0 .diff:before{content:"";position:absolute;left:0;top:0;height:100%;width:2px}._1pn9r4q0 .highlighted{background:color-mix(in srgb,var(--rr-code-accent) 20%,transparent)}._1pn9r4q0 .highlighted:before{background:var(--rr-code-accent)}._1pn9r4q0 .diff.add{background:#22c55e26}._1pn9r4q0 .diff.add:before{background:#22c55e}._1pn9r4q0 .diff.add:after{content:" +";position:absolute;left:0;color:#22c55e}._1pn9r4q0 .diff.remove{background:#ef444426}._1pn9r4q0 .diff.remove:before{background:#ef4444}._1pn9r4q0 .diff.remove:after{content:" -";position:absolute;left:0;color:#ef4444}._1pn9r4qb{counter-reset:shiki-line 0}._1pn9r4qb .line{counter-increment:shiki-line 1}._1pn9r4qb .line:before{content:counter(shiki-line);color:transparent;text-align:right;box-sizing:border-box;width:2em;display:inline-block;position:sticky;left:0}._1pn9r4qc .line:before{color:inherit;opacity:.4;width:5em;padding-right:2em}._1pn9r4q5 pre::-webkit-scrollbar-track{margin-left:1rem;margin-right:var(--sr-margin, 0)}._1pn9r4q5 pre::-webkit-scrollbar{background-color:transparent!important}._1pn9r4qd{font-family:var(--rc-font-mono);font-size:var(--rc-font-size-md);background-color:var(--rc-code-bg);border-radius:var(--rc-radius-md);overflow:hidden;margin:var(--rc-space-md) 0;border:1px solid var(--rc-border)}._1pn9r4qe{display:flex;align-items:center;justify-content:space-between;padding:var(--rc-space-sm) var(--rc-space-md);border-bottom:1px solid var(--rc-border);font-size:var(--rc-font-size-md);color:var(--rc-text-secondary);user-select:none}._1pn9r4qf{font-family:var(--rc-font-mono);font-size:.85em;text-transform:uppercase;letter-spacing:.05em}._1pn9r4qg{appearance:none;border:none;background:none;color:var(--rc-text-secondary);cursor:pointer;padding:var(--rc-space-xs) var(--rc-space-sm);border-radius:var(--rc-radius-sm);font-family:var(--rc-font-family);font-size:var(--rc-font-size-md);line-height:1;transition:color .15s ease,background-color .15s ease}.rich-code-block{font-family:var(--rc-font-mono);font-size:var(--rc-font-size-md);background-color:var(--rc-code-bg);border-radius:var(--rc-radius-md);overflow:hidden;margin:var(--rc-space-md) 0;border:1px solid var(--rc-border)}.rich-code-block pre{margin:0;padding:var(--rc-space-md);overflow-x:auto}.rich-code-block code{font-family:inherit;font-size:inherit;background:none;border:none;padding:0;color:inherit}.rich-code-block-header{display:flex;align-items:center;justify-content:space-between;padding:var(--rc-space-sm) var(--rc-space-md);border-bottom:1px solid var(--rc-border);font-size:var(--rc-font-size-md);color:var(--rc-text-secondary);user-select:none}.rich-code-block-lang{font-family:var(--rc-font-mono);font-size:.85em;text-transform:uppercase;letter-spacing:.05em}.rich-code-block-copy{appearance:none;border:none;background:none;color:var(--rc-text-secondary);cursor:pointer;padding:var(--rc-space-xs) var(--rc-space-sm);border-radius:var(--rc-radius-sm);font-family:var(--rc-font-family);font-size:var(--rc-font-size-md);line-height:1;transition:color .15s ease,background-color .15s ease}.rich-code-block-copy:hover{color:var(--rc-text);background-color:var(--rc-bg-secondary)}.rich-code-block-numbered pre{counter-reset:line}.rich-code-block-numbered .line{counter-increment:line}.rich-code-block-numbered .line:before{content:counter(line);display:inline-block;width:2.5em;margin-right:var(--rc-space-md);text-align:right;color:color-mix(in srgb,var(--rc-text-secondary) 40%,transparent)!important;opacity:.4;user-select:none;font-size:var(--rc-font-size-md)}
|
package/dist/shiki.d.ts
CHANGED
package/dist/shiki.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shiki.d.ts","sourceRoot":"","sources":["../src/shiki.ts"],"names":[],"mappings":"AAcA,wBAAsB,sBAAsB,CAAC,QAAQ,EAAE,MAAM,gBAe5D;AAED,eAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"shiki.d.ts","sourceRoot":"","sources":["../src/shiki.ts"],"names":[],"mappings":"AAcA,wBAAsB,sBAAsB,CAAC,QAAQ,EAAE,MAAM,gBAe5D;AAED,eAAO,MAAM,iBAAiB;;;CAGpB,CAAA"}
|
package/dist/shiki.mjs
CHANGED
|
@@ -23,11 +23,11 @@ async function getHighlighterWithLang(language) {
|
|
|
23
23
|
}
|
|
24
24
|
return highlighter;
|
|
25
25
|
}
|
|
26
|
-
const
|
|
26
|
+
const SHIKI_DUAL_THEMES = {
|
|
27
27
|
light: "github-light",
|
|
28
28
|
dark: "github-dark"
|
|
29
29
|
};
|
|
30
30
|
export {
|
|
31
|
-
|
|
31
|
+
SHIKI_DUAL_THEMES,
|
|
32
32
|
getHighlighterWithLang
|
|
33
33
|
};
|
package/dist/styles.css.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;CAcrB,CAAA;AAGV,eAAO,MAAM,IAAI,
|
|
1
|
+
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;CAcrB,CAAA;AAGV,eAAO,MAAM,IAAI,QAUf,CAAA;AAGF,eAAO,MAAM,IAAI,QAWf,CAAA;AAEF,eAAO,MAAM,QAAQ,QAGnB,CAAA;AAQF,eAAO,MAAM,UAAU,QAuBrB,CAAA;AAGF,eAAO,MAAM,cAAc,QAIzB,CAAA;AAGF,eAAO,MAAM,MAAM,QAIjB,CAAA;AAEF,eAAO,MAAM,eAAe,QAG1B,CAAA;AAGF,eAAO,MAAM,IAAI,QAIf,CAAA;AAEF,eAAO,MAAM,YAAY,QAAY,CAAA;AAYrC,eAAO,MAAM,UAAU,QAUrB,CAAA;AAEF,eAAO,MAAM,YAAY,QAiBvB,CAAA;AAoIF,eAAO,MAAM,KAAK,QAEhB,CAAA;AAiBF,eAAO,MAAM,gBAAgB,QAAY,CAAA;AAmBzC,eAAO,MAAM,yBAAyB;;;;;;CAM5B,CAAA;AAiFV,eAAO,MAAM,WAAW,QAA2B,CAAA;AACnD,eAAO,MAAM,aAAa,QAA6B,CAAA;AACvD,eAAO,MAAM,WAAW,QAA2B,CAAA;AACnD,eAAO,MAAM,iBAAiB,QAAiC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@haklex/rich-renderer-codeblock",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.27",
|
|
4
4
|
"description": "Code block renderer with Shiki syntax highlighting",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
"lucide-react": "^0.574.0",
|
|
34
34
|
"shiki": "^3.22.0",
|
|
35
35
|
"shikicode": "^0.0.0",
|
|
36
|
-
"@haklex/rich-editor": "0.0.
|
|
37
|
-
"@haklex/rich-style-token": "0.0.
|
|
36
|
+
"@haklex/rich-editor": "0.0.27",
|
|
37
|
+
"@haklex/rich-style-token": "0.0.27"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@types/react": "^19.2.14",
|