@haklex/rich-renderer-codeblock 0.0.3 → 0.0.4
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/constants.mjs +76 -0
- package/dist/index.mjs +2 -99
- package/dist/shiki.mjs +33 -0
- package/package.json +3 -3
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
const languageToIconMap = {
|
|
2
|
+
javascript: "JS",
|
|
3
|
+
js: "JS",
|
|
4
|
+
typescript: "TS",
|
|
5
|
+
ts: "TS",
|
|
6
|
+
jsx: "JSX",
|
|
7
|
+
tsx: "TSX",
|
|
8
|
+
html: "HTML",
|
|
9
|
+
css: "CSS",
|
|
10
|
+
scss: "SCSS",
|
|
11
|
+
json: "JSON",
|
|
12
|
+
markdown: "MD",
|
|
13
|
+
md: "MD",
|
|
14
|
+
bash: "SH",
|
|
15
|
+
sh: "SH",
|
|
16
|
+
shell: "SH",
|
|
17
|
+
zsh: "SH",
|
|
18
|
+
python: "PY",
|
|
19
|
+
py: "PY",
|
|
20
|
+
rust: "RS",
|
|
21
|
+
go: "GO",
|
|
22
|
+
java: "JAVA",
|
|
23
|
+
c: "C",
|
|
24
|
+
cpp: "C++",
|
|
25
|
+
"c++": "C++",
|
|
26
|
+
swift: "SW",
|
|
27
|
+
kotlin: "KT",
|
|
28
|
+
yaml: "YAML",
|
|
29
|
+
yml: "YAML",
|
|
30
|
+
sql: "SQL"
|
|
31
|
+
};
|
|
32
|
+
const languageToColorMap = {
|
|
33
|
+
javascript: "#f7df1e",
|
|
34
|
+
js: "#f7df1e",
|
|
35
|
+
typescript: "#3178c6",
|
|
36
|
+
ts: "#3178c6",
|
|
37
|
+
jsx: "#61dafb",
|
|
38
|
+
tsx: "#61dafb",
|
|
39
|
+
html: "#e34f26",
|
|
40
|
+
css: "#1572b6",
|
|
41
|
+
scss: "#cc6699",
|
|
42
|
+
json: "#f59e0b",
|
|
43
|
+
markdown: "#737373",
|
|
44
|
+
md: "#737373",
|
|
45
|
+
bash: "#4eaa25",
|
|
46
|
+
sh: "#4eaa25",
|
|
47
|
+
shell: "#4eaa25",
|
|
48
|
+
zsh: "#4eaa25",
|
|
49
|
+
python: "#3776ab",
|
|
50
|
+
py: "#3776ab",
|
|
51
|
+
rust: "#dea584",
|
|
52
|
+
go: "#00add8",
|
|
53
|
+
java: "#b07219",
|
|
54
|
+
c: "#a8b9cc",
|
|
55
|
+
cpp: "#00599c",
|
|
56
|
+
"c++": "#00599c",
|
|
57
|
+
swift: "#fa7343",
|
|
58
|
+
kotlin: "#7f52ff",
|
|
59
|
+
yaml: "#cb171e",
|
|
60
|
+
yml: "#cb171e",
|
|
61
|
+
sql: "#e38c00"
|
|
62
|
+
};
|
|
63
|
+
function normalizeLanguage(lang) {
|
|
64
|
+
if (!lang) return "text";
|
|
65
|
+
return lang.trim().toLowerCase() || "text";
|
|
66
|
+
}
|
|
67
|
+
function getLanguageDisplayName(lang) {
|
|
68
|
+
if (lang === "text") return "TEXT";
|
|
69
|
+
return lang.toUpperCase();
|
|
70
|
+
}
|
|
71
|
+
export {
|
|
72
|
+
getLanguageDisplayName,
|
|
73
|
+
languageToColorMap,
|
|
74
|
+
languageToIconMap,
|
|
75
|
+
normalizeLanguage
|
|
76
|
+
};
|
package/dist/index.mjs
CHANGED
|
@@ -2,76 +2,8 @@ import { jsxs, jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { 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
|
-
|
|
6
|
-
|
|
7
|
-
js: "JS",
|
|
8
|
-
typescript: "TS",
|
|
9
|
-
ts: "TS",
|
|
10
|
-
jsx: "JSX",
|
|
11
|
-
tsx: "TSX",
|
|
12
|
-
html: "HTML",
|
|
13
|
-
css: "CSS",
|
|
14
|
-
scss: "SCSS",
|
|
15
|
-
json: "JSON",
|
|
16
|
-
markdown: "MD",
|
|
17
|
-
md: "MD",
|
|
18
|
-
bash: "SH",
|
|
19
|
-
sh: "SH",
|
|
20
|
-
shell: "SH",
|
|
21
|
-
zsh: "SH",
|
|
22
|
-
python: "PY",
|
|
23
|
-
py: "PY",
|
|
24
|
-
rust: "RS",
|
|
25
|
-
go: "GO",
|
|
26
|
-
java: "JAVA",
|
|
27
|
-
c: "C",
|
|
28
|
-
cpp: "C++",
|
|
29
|
-
"c++": "C++",
|
|
30
|
-
swift: "SW",
|
|
31
|
-
kotlin: "KT",
|
|
32
|
-
yaml: "YAML",
|
|
33
|
-
yml: "YAML",
|
|
34
|
-
sql: "SQL"
|
|
35
|
-
};
|
|
36
|
-
const languageToColorMap = {
|
|
37
|
-
javascript: "#f7df1e",
|
|
38
|
-
js: "#f7df1e",
|
|
39
|
-
typescript: "#3178c6",
|
|
40
|
-
ts: "#3178c6",
|
|
41
|
-
jsx: "#61dafb",
|
|
42
|
-
tsx: "#61dafb",
|
|
43
|
-
html: "#e34f26",
|
|
44
|
-
css: "#1572b6",
|
|
45
|
-
scss: "#cc6699",
|
|
46
|
-
json: "#f59e0b",
|
|
47
|
-
markdown: "#737373",
|
|
48
|
-
md: "#737373",
|
|
49
|
-
bash: "#4eaa25",
|
|
50
|
-
sh: "#4eaa25",
|
|
51
|
-
shell: "#4eaa25",
|
|
52
|
-
zsh: "#4eaa25",
|
|
53
|
-
python: "#3776ab",
|
|
54
|
-
py: "#3776ab",
|
|
55
|
-
rust: "#dea584",
|
|
56
|
-
go: "#00add8",
|
|
57
|
-
java: "#b07219",
|
|
58
|
-
c: "#a8b9cc",
|
|
59
|
-
cpp: "#00599c",
|
|
60
|
-
"c++": "#00599c",
|
|
61
|
-
swift: "#fa7343",
|
|
62
|
-
kotlin: "#7f52ff",
|
|
63
|
-
yaml: "#cb171e",
|
|
64
|
-
yml: "#cb171e",
|
|
65
|
-
sql: "#e38c00"
|
|
66
|
-
};
|
|
67
|
-
function normalizeLanguage(lang) {
|
|
68
|
-
if (!lang) return "text";
|
|
69
|
-
return lang.trim().toLowerCase() || "text";
|
|
70
|
-
}
|
|
71
|
-
function getLanguageDisplayName(lang) {
|
|
72
|
-
if (lang === "text") return "TEXT";
|
|
73
|
-
return lang.toUpperCase();
|
|
74
|
-
}
|
|
5
|
+
import { normalizeLanguage, languageToIconMap, getLanguageDisplayName, languageToColorMap } from "./constants.mjs";
|
|
6
|
+
import { getHighlighterWithLang, SHIKI_THEMES } from "./shiki.mjs";
|
|
75
7
|
const CopyIcon = /* @__PURE__ */ jsx(Copy, { size: 16 });
|
|
76
8
|
const CheckIcon = /* @__PURE__ */ jsx(Check, { size: 16 });
|
|
77
9
|
const ExpandIcon = /* @__PURE__ */ jsx(ChevronDown, { size: 14 });
|
|
@@ -147,35 +79,6 @@ function CodeBlockCard({
|
|
|
147
79
|
] })
|
|
148
80
|
] });
|
|
149
81
|
}
|
|
150
|
-
let highlighterPromise = null;
|
|
151
|
-
function getHighlighter() {
|
|
152
|
-
if (!highlighterPromise) {
|
|
153
|
-
highlighterPromise = import("shiki/bundle/web").then(
|
|
154
|
-
(mod) => mod.createHighlighter({
|
|
155
|
-
langs: [],
|
|
156
|
-
themes: ["github-light", "github-dark"]
|
|
157
|
-
})
|
|
158
|
-
);
|
|
159
|
-
}
|
|
160
|
-
return highlighterPromise;
|
|
161
|
-
}
|
|
162
|
-
async function getHighlighterWithLang(language) {
|
|
163
|
-
const highlighter = await getHighlighter();
|
|
164
|
-
if (language && language !== "text" && language !== "plaintext") {
|
|
165
|
-
const loaded = highlighter.getLoadedLanguages();
|
|
166
|
-
if (!loaded.includes(language)) {
|
|
167
|
-
try {
|
|
168
|
-
await highlighter.loadLanguage(language);
|
|
169
|
-
} catch {
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
return highlighter;
|
|
174
|
-
}
|
|
175
|
-
const SHIKI_THEMES = {
|
|
176
|
-
light: "github-light",
|
|
177
|
-
dark: "github-dark"
|
|
178
|
-
};
|
|
179
82
|
const CodeBlockEditRenderer = ({
|
|
180
83
|
code,
|
|
181
84
|
language,
|
package/dist/shiki.mjs
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
let highlighterPromise = null;
|
|
2
|
+
function getHighlighter() {
|
|
3
|
+
if (!highlighterPromise) {
|
|
4
|
+
highlighterPromise = import("shiki/bundle/web").then(
|
|
5
|
+
(mod) => mod.createHighlighter({
|
|
6
|
+
langs: [],
|
|
7
|
+
themes: ["github-light", "github-dark"]
|
|
8
|
+
})
|
|
9
|
+
);
|
|
10
|
+
}
|
|
11
|
+
return highlighterPromise;
|
|
12
|
+
}
|
|
13
|
+
async function getHighlighterWithLang(language) {
|
|
14
|
+
const highlighter = await getHighlighter();
|
|
15
|
+
if (language && language !== "text" && language !== "plaintext") {
|
|
16
|
+
const loaded = highlighter.getLoadedLanguages();
|
|
17
|
+
if (!loaded.includes(language)) {
|
|
18
|
+
try {
|
|
19
|
+
await highlighter.loadLanguage(language);
|
|
20
|
+
} catch {
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
return highlighter;
|
|
25
|
+
}
|
|
26
|
+
const SHIKI_THEMES = {
|
|
27
|
+
light: "github-light",
|
|
28
|
+
dark: "github-dark"
|
|
29
|
+
};
|
|
30
|
+
export {
|
|
31
|
+
SHIKI_THEMES,
|
|
32
|
+
getHighlighterWithLang
|
|
33
|
+
};
|
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.4",
|
|
4
4
|
"description": "Code block renderer with Shiki syntax highlighting",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
"lucide-react": "^0.574.0",
|
|
28
28
|
"shiki": "^3.21.0",
|
|
29
29
|
"shikicode": "*",
|
|
30
|
-
"@haklex/rich-
|
|
31
|
-
"@haklex/rich-
|
|
30
|
+
"@haklex/rich-editor": "0.0.4",
|
|
31
|
+
"@haklex/rich-style-token": "0.0.4"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"@types/react": "^19.0.0",
|