@haklex/rich-renderer-codeblock 0.0.26 → 0.0.29
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,CAkLvE,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
|
@@ -6,7 +6,7 @@ import { normalizeLanguage, getLanguageDisplayName, languageToColorMap } from ".
|
|
|
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 });
|
|
@@ -117,8 +117,8 @@ const CodeBlockEditRenderer = ({
|
|
|
117
117
|
onCodeChange
|
|
118
118
|
}) => {
|
|
119
119
|
const variant = useVariant();
|
|
120
|
-
const showLineNumbers = showLineNumbersProp ?? variant !== "comment";
|
|
121
120
|
const colorScheme = useColorScheme();
|
|
121
|
+
const showLineNumbers = showLineNumbersProp ?? variant !== "comment";
|
|
122
122
|
const normalizedLanguage = normalizeLanguage(language);
|
|
123
123
|
const [loaded, setLoaded] = useState(false);
|
|
124
124
|
const containerRef = useRef(null);
|
|
@@ -128,14 +128,12 @@ const CodeBlockEditRenderer = ({
|
|
|
128
128
|
const latestPropsRef = useRef({
|
|
129
129
|
code,
|
|
130
130
|
normalizedLanguage,
|
|
131
|
-
colorScheme,
|
|
132
131
|
showLineNumbers,
|
|
133
132
|
editable
|
|
134
133
|
});
|
|
135
134
|
latestPropsRef.current = {
|
|
136
135
|
code,
|
|
137
136
|
normalizedLanguage,
|
|
138
|
-
colorScheme,
|
|
139
137
|
showLineNumbers,
|
|
140
138
|
editable
|
|
141
139
|
};
|
|
@@ -151,7 +149,6 @@ const CodeBlockEditRenderer = ({
|
|
|
151
149
|
import("shikicode")
|
|
152
150
|
]);
|
|
153
151
|
if (disposed) return;
|
|
154
|
-
const theme = SHIKI_THEMES[props.colorScheme];
|
|
155
152
|
const loaded2 = highlighter.getLoadedLanguages();
|
|
156
153
|
const lang2 = loaded2.includes(props.normalizedLanguage) ? props.normalizedLanguage : "text";
|
|
157
154
|
const editor = shikiCode().withOptions({
|
|
@@ -160,7 +157,7 @@ const CodeBlockEditRenderer = ({
|
|
|
160
157
|
}).create(container, highlighter, {
|
|
161
158
|
value: props.code,
|
|
162
159
|
language: lang2,
|
|
163
|
-
theme
|
|
160
|
+
theme: SHIKI_DUAL_THEMES[colorScheme]
|
|
164
161
|
});
|
|
165
162
|
if (!props.editable) {
|
|
166
163
|
editor.input.tabIndex = -1;
|
|
@@ -180,7 +177,7 @@ const CodeBlockEditRenderer = ({
|
|
|
180
177
|
editorRef.current = null;
|
|
181
178
|
setLoaded(false);
|
|
182
179
|
};
|
|
183
|
-
}, []);
|
|
180
|
+
}, [colorScheme]);
|
|
184
181
|
useEffect(() => {
|
|
185
182
|
const editor = editorRef.current;
|
|
186
183
|
if (!editor) return;
|
|
@@ -201,7 +198,6 @@ const CodeBlockEditRenderer = ({
|
|
|
201
198
|
}
|
|
202
199
|
editor.updateOptions({
|
|
203
200
|
language: resolvedLang,
|
|
204
|
-
theme: SHIKI_THEMES[colorScheme],
|
|
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-themes,[data-theme=dark] ._1pn9r4q0 .shiki-themes span{color:var(--shiki-dark)!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;AAsIF,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.29",
|
|
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.29",
|
|
37
|
+
"@haklex/rich-style-token": "0.0.29"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@types/react": "^19.2.14",
|