@haklex/rich-renderer-codeblock 0.0.27 → 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.
|
@@ -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"}
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useVariant } from "@haklex/rich-editor";
|
|
2
|
+
import { useVariant, useColorScheme } 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";
|
|
@@ -117,6 +117,7 @@ const CodeBlockEditRenderer = ({
|
|
|
117
117
|
onCodeChange
|
|
118
118
|
}) => {
|
|
119
119
|
const variant = useVariant();
|
|
120
|
+
const colorScheme = useColorScheme();
|
|
120
121
|
const showLineNumbers = showLineNumbersProp ?? variant !== "comment";
|
|
121
122
|
const normalizedLanguage = normalizeLanguage(language);
|
|
122
123
|
const [loaded, setLoaded] = useState(false);
|
|
@@ -156,7 +157,7 @@ const CodeBlockEditRenderer = ({
|
|
|
156
157
|
}).create(container, highlighter, {
|
|
157
158
|
value: props.code,
|
|
158
159
|
language: lang2,
|
|
159
|
-
|
|
160
|
+
theme: SHIKI_DUAL_THEMES[colorScheme]
|
|
160
161
|
});
|
|
161
162
|
if (!props.editable) {
|
|
162
163
|
editor.input.tabIndex = -1;
|
|
@@ -176,7 +177,7 @@ const CodeBlockEditRenderer = ({
|
|
|
176
177
|
editorRef.current = null;
|
|
177
178
|
setLoaded(false);
|
|
178
179
|
};
|
|
179
|
-
}, []);
|
|
180
|
+
}, [colorScheme]);
|
|
180
181
|
useEffect(() => {
|
|
181
182
|
const editor = editorRef.current;
|
|
182
183
|
if (!editor) return;
|
|
@@ -197,7 +198,6 @@ const CodeBlockEditRenderer = ({
|
|
|
197
198
|
}
|
|
198
199
|
editor.updateOptions({
|
|
199
200
|
language: resolvedLang,
|
|
200
|
-
themes: SHIKI_DUAL_THEMES,
|
|
201
201
|
lineNumbers: showLineNumbers ? "on" : "off",
|
|
202
202
|
readOnly: !editable
|
|
203
203
|
});
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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/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,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;
|
|
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",
|