@haklex/rich-renderer-codeblock 0.1.1 → 0.2.0
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 +67 -70
- package/dist/icons-CfRiv2YR.js +231 -0
- package/dist/icons.mjs +2 -91
- package/dist/index.mjs +321 -355
- package/dist/rich-renderer-codeblock.css +2 -1
- package/dist/shiki.mjs +19 -28
- package/dist/static.mjs +9 -17
- package/package.json +16 -16
- package/dist/language-kyYjCKCv.js +0 -156
package/dist/constants.mjs
CHANGED
|
@@ -1,76 +1,73 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
1
|
+
//#region src/constants.ts
|
|
2
|
+
var languageToIconMap = {
|
|
3
|
+
javascript: "JS",
|
|
4
|
+
js: "JS",
|
|
5
|
+
typescript: "TS",
|
|
6
|
+
ts: "TS",
|
|
7
|
+
jsx: "JSX",
|
|
8
|
+
tsx: "TSX",
|
|
9
|
+
html: "HTML",
|
|
10
|
+
css: "CSS",
|
|
11
|
+
scss: "SCSS",
|
|
12
|
+
json: "JSON",
|
|
13
|
+
markdown: "MD",
|
|
14
|
+
md: "MD",
|
|
15
|
+
bash: "SH",
|
|
16
|
+
sh: "SH",
|
|
17
|
+
shell: "SH",
|
|
18
|
+
zsh: "SH",
|
|
19
|
+
python: "PY",
|
|
20
|
+
py: "PY",
|
|
21
|
+
rust: "RS",
|
|
22
|
+
go: "GO",
|
|
23
|
+
java: "JAVA",
|
|
24
|
+
c: "C",
|
|
25
|
+
cpp: "C++",
|
|
26
|
+
"c++": "C++",
|
|
27
|
+
swift: "SW",
|
|
28
|
+
kotlin: "KT",
|
|
29
|
+
yaml: "YAML",
|
|
30
|
+
yml: "YAML",
|
|
31
|
+
sql: "SQL"
|
|
31
32
|
};
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
33
|
+
var languageToColorMap = {
|
|
34
|
+
javascript: "#f7df1e",
|
|
35
|
+
js: "#f7df1e",
|
|
36
|
+
typescript: "#3178c6",
|
|
37
|
+
ts: "#3178c6",
|
|
38
|
+
jsx: "#61dafb",
|
|
39
|
+
tsx: "#61dafb",
|
|
40
|
+
html: "#e34f26",
|
|
41
|
+
css: "#1572b6",
|
|
42
|
+
scss: "#cc6699",
|
|
43
|
+
json: "#f59e0b",
|
|
44
|
+
markdown: "#737373",
|
|
45
|
+
md: "#737373",
|
|
46
|
+
bash: "#4eaa25",
|
|
47
|
+
sh: "#4eaa25",
|
|
48
|
+
shell: "#4eaa25",
|
|
49
|
+
zsh: "#4eaa25",
|
|
50
|
+
python: "#3776ab",
|
|
51
|
+
py: "#3776ab",
|
|
52
|
+
rust: "#dea584",
|
|
53
|
+
go: "#00add8",
|
|
54
|
+
java: "#b07219",
|
|
55
|
+
c: "#a8b9cc",
|
|
56
|
+
cpp: "#00599c",
|
|
57
|
+
"c++": "#00599c",
|
|
58
|
+
swift: "#fa7343",
|
|
59
|
+
kotlin: "#7f52ff",
|
|
60
|
+
yaml: "#cb171e",
|
|
61
|
+
yml: "#cb171e",
|
|
62
|
+
sql: "#e38c00"
|
|
62
63
|
};
|
|
63
64
|
function normalizeLanguage(lang) {
|
|
64
|
-
|
|
65
|
-
|
|
65
|
+
if (!lang) return "text";
|
|
66
|
+
return lang.trim().toLowerCase() || "text";
|
|
66
67
|
}
|
|
67
68
|
function getLanguageDisplayName(lang) {
|
|
68
|
-
|
|
69
|
-
|
|
69
|
+
if (lang === "text") return "TEXT";
|
|
70
|
+
return lang.toUpperCase();
|
|
70
71
|
}
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
languageToColorMap,
|
|
74
|
-
languageToIconMap,
|
|
75
|
-
normalizeLanguage
|
|
76
|
-
};
|
|
72
|
+
//#endregion
|
|
73
|
+
export { getLanguageDisplayName, languageToColorMap, languageToIconMap, normalizeLanguage };
|
|
@@ -0,0 +1,231 @@
|
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
import { getIconData, iconToHTML, iconToSVG } from "@iconify/utils";
|
|
3
|
+
import { icons } from "@iconify-json/material-icon-theme";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
//#region src/icons/material-icon.ts
|
|
6
|
+
/** Get SVG markup for a material-icon-theme icon by name. Returns null if not found. */
|
|
7
|
+
function getMaterialIconSvg(iconName) {
|
|
8
|
+
const data = getIconData(icons, iconName);
|
|
9
|
+
if (!data) return null;
|
|
10
|
+
const svg = iconToSVG(data);
|
|
11
|
+
return iconToHTML(svg.body, svg.attributes);
|
|
12
|
+
}
|
|
13
|
+
//#endregion
|
|
14
|
+
//#region src/icons/file.tsx
|
|
15
|
+
/** Maps file extension to material-icon-theme icon name. */
|
|
16
|
+
var EXT_TO_ICON = {
|
|
17
|
+
ts: "typescript",
|
|
18
|
+
tsx: "react-ts",
|
|
19
|
+
mts: "typescript",
|
|
20
|
+
cts: "typescript",
|
|
21
|
+
js: "javascript",
|
|
22
|
+
jsx: "react",
|
|
23
|
+
mjs: "javascript",
|
|
24
|
+
cjs: "javascript",
|
|
25
|
+
py: "python",
|
|
26
|
+
rs: "rust",
|
|
27
|
+
go: "go",
|
|
28
|
+
java: "java",
|
|
29
|
+
html: "html",
|
|
30
|
+
htm: "html",
|
|
31
|
+
css: "css",
|
|
32
|
+
scss: "sass",
|
|
33
|
+
sass: "sass",
|
|
34
|
+
less: "sass",
|
|
35
|
+
json: "json",
|
|
36
|
+
jsonc: "json",
|
|
37
|
+
json5: "json",
|
|
38
|
+
md: "markdown",
|
|
39
|
+
mdx: "markdown",
|
|
40
|
+
sh: "console",
|
|
41
|
+
bash: "console",
|
|
42
|
+
zsh: "console",
|
|
43
|
+
yml: "yaml",
|
|
44
|
+
yaml: "yaml",
|
|
45
|
+
sql: "database",
|
|
46
|
+
c: "c",
|
|
47
|
+
h: "c",
|
|
48
|
+
cpp: "cpp",
|
|
49
|
+
cc: "cpp",
|
|
50
|
+
cxx: "cpp",
|
|
51
|
+
hpp: "cpp",
|
|
52
|
+
swift: "swift",
|
|
53
|
+
kt: "kotlin",
|
|
54
|
+
kts: "kotlin",
|
|
55
|
+
rb: "ruby",
|
|
56
|
+
php: "php",
|
|
57
|
+
vue: "vue",
|
|
58
|
+
svelte: "svelte",
|
|
59
|
+
toml: "toml",
|
|
60
|
+
xml: "xml",
|
|
61
|
+
graphql: "graphql",
|
|
62
|
+
gql: "graphql",
|
|
63
|
+
dockerfile: "docker",
|
|
64
|
+
lua: "lua",
|
|
65
|
+
zig: "zig"
|
|
66
|
+
};
|
|
67
|
+
function getFileIconSvg(filename) {
|
|
68
|
+
return getMaterialIconSvg(EXT_TO_ICON[filename.split(".").pop()?.toLowerCase() ?? ""] ?? "file");
|
|
69
|
+
}
|
|
70
|
+
var FileIcon = ({ filename, size = 16, className, fallback = "F" }) => {
|
|
71
|
+
const html = useMemo(() => getFileIconSvg(filename), [filename]);
|
|
72
|
+
const wrapperStyle = {
|
|
73
|
+
width: size,
|
|
74
|
+
height: size,
|
|
75
|
+
display: "inline-flex",
|
|
76
|
+
alignItems: "center",
|
|
77
|
+
justifyContent: "center",
|
|
78
|
+
opacity: html ? 1 : .5,
|
|
79
|
+
fontSize: size * .6
|
|
80
|
+
};
|
|
81
|
+
if (!html) return /* @__PURE__ */ jsx("span", {
|
|
82
|
+
className,
|
|
83
|
+
style: wrapperStyle,
|
|
84
|
+
children: fallback
|
|
85
|
+
});
|
|
86
|
+
return /* @__PURE__ */ jsx("span", {
|
|
87
|
+
className,
|
|
88
|
+
dangerouslySetInnerHTML: { __html: html },
|
|
89
|
+
style: {
|
|
90
|
+
width: size,
|
|
91
|
+
height: size
|
|
92
|
+
}
|
|
93
|
+
});
|
|
94
|
+
};
|
|
95
|
+
//#endregion
|
|
96
|
+
//#region src/styles.css.ts
|
|
97
|
+
var semanticClassNames = {
|
|
98
|
+
card: "rr-code-card",
|
|
99
|
+
lang: "rr-code-lang",
|
|
100
|
+
langIcon: "rr-code-lang-icon",
|
|
101
|
+
copyButton: "rr-code-copy",
|
|
102
|
+
bodyBackground: "rr-code-bg",
|
|
103
|
+
scroll: "rr-code-scroll",
|
|
104
|
+
scrollCollapsed: "rr-code-scroll-collapsed",
|
|
105
|
+
body: "rr-code-body",
|
|
106
|
+
bodyReadonly: "rr-code-readonly",
|
|
107
|
+
expandWrap: "rr-code-expand-wrap",
|
|
108
|
+
expandButton: "rr-code-expand",
|
|
109
|
+
lined: "rr-code-lined",
|
|
110
|
+
linedWithNumbers: "rr-code-lined-ln"
|
|
111
|
+
};
|
|
112
|
+
var card = "_1pn9r4q0";
|
|
113
|
+
var langInput = "_1pn9r4q1";
|
|
114
|
+
var lang = "_1pn9r4q2";
|
|
115
|
+
var langIcon = "_1pn9r4q3";
|
|
116
|
+
var copyButton = "_1pn9r4q4";
|
|
117
|
+
var bodyBackground = "_1pn9r4q5";
|
|
118
|
+
var bodyBackgroundStatic = "_1pn9r4q6 _1pn9r4q5";
|
|
119
|
+
var scroll = "_1pn9r4q7";
|
|
120
|
+
var scrollCollapsed = "_1pn9r4q8";
|
|
121
|
+
var body = "_1pn9r4q9";
|
|
122
|
+
var bodyReadonly = "_1pn9r4qa";
|
|
123
|
+
var expandWrap = "_1pn9r4qb";
|
|
124
|
+
var expandButton = "_1pn9r4qc";
|
|
125
|
+
var lined = "_1pn9r4qd";
|
|
126
|
+
var linedWithNumbers = "_1pn9r4qe";
|
|
127
|
+
//#endregion
|
|
128
|
+
//#region src/icons/language.tsx
|
|
129
|
+
/** Maps normalized language to material-icon-theme icon name. */
|
|
130
|
+
var LANG_TO_ICON = {
|
|
131
|
+
"javascript": "javascript",
|
|
132
|
+
"js": "javascript",
|
|
133
|
+
"typescript": "typescript",
|
|
134
|
+
"ts": "typescript",
|
|
135
|
+
"angular-ts": "angular",
|
|
136
|
+
"angular-html": "angular",
|
|
137
|
+
"jsx": "react",
|
|
138
|
+
"tsx": "react",
|
|
139
|
+
"html": "html",
|
|
140
|
+
"html-derivative": "html",
|
|
141
|
+
"css": "css",
|
|
142
|
+
"scss": "sass",
|
|
143
|
+
"sass": "sass",
|
|
144
|
+
"less": "sass",
|
|
145
|
+
"postcss": "postcss",
|
|
146
|
+
"stylus": "stylus",
|
|
147
|
+
"json": "json",
|
|
148
|
+
"json5": "json",
|
|
149
|
+
"jsonc": "json",
|
|
150
|
+
"jsonl": "json",
|
|
151
|
+
"markdown": "markdown",
|
|
152
|
+
"md": "markdown",
|
|
153
|
+
"mdx": "markdown",
|
|
154
|
+
"mdc": "markdown",
|
|
155
|
+
"bash": "console",
|
|
156
|
+
"sh": "console",
|
|
157
|
+
"shell": "console",
|
|
158
|
+
"shellscript": "console",
|
|
159
|
+
"zsh": "console",
|
|
160
|
+
"python": "python",
|
|
161
|
+
"py": "python",
|
|
162
|
+
"rust": "rust",
|
|
163
|
+
"go": "go",
|
|
164
|
+
"java": "java",
|
|
165
|
+
"c": "c",
|
|
166
|
+
"cpp": "cpp",
|
|
167
|
+
"c++": "cpp",
|
|
168
|
+
"swift": "swift",
|
|
169
|
+
"kotlin": "kotlin",
|
|
170
|
+
"kt": "kotlin",
|
|
171
|
+
"yaml": "yaml",
|
|
172
|
+
"yml": "yaml",
|
|
173
|
+
"sql": "database",
|
|
174
|
+
"xml": "xml",
|
|
175
|
+
"vue": "vue",
|
|
176
|
+
"vue-html": "vue",
|
|
177
|
+
"vue-vine": "vue",
|
|
178
|
+
"svelte": "svelte",
|
|
179
|
+
"astro": "astro",
|
|
180
|
+
"php": "php",
|
|
181
|
+
"rb": "ruby",
|
|
182
|
+
"r": "r",
|
|
183
|
+
"julia": "julia",
|
|
184
|
+
"lua": "lua",
|
|
185
|
+
"zig": "zig",
|
|
186
|
+
"toml": "toml",
|
|
187
|
+
"graphql": "graphql",
|
|
188
|
+
"gql": "graphql",
|
|
189
|
+
"dockerfile": "docker",
|
|
190
|
+
"coffee": "coffee",
|
|
191
|
+
"pug": "pug",
|
|
192
|
+
"haml": "haml",
|
|
193
|
+
"handlebars": "handlebars",
|
|
194
|
+
"marko": "markojs",
|
|
195
|
+
"imba": "imba",
|
|
196
|
+
"hurl": "hurl",
|
|
197
|
+
"http": "http"
|
|
198
|
+
};
|
|
199
|
+
function getLanguageIconSvg(lang) {
|
|
200
|
+
return getMaterialIconSvg(LANG_TO_ICON[lang] ?? "code");
|
|
201
|
+
}
|
|
202
|
+
/** Returns whether a Material icon is available for the given language. */
|
|
203
|
+
function hasLanguageIcon(lang) {
|
|
204
|
+
return getLanguageIconSvg(lang) !== null;
|
|
205
|
+
}
|
|
206
|
+
var LanguageIcon = ({ language, size = 14, className = `${langIcon} ${semanticClassNames.langIcon}` }) => {
|
|
207
|
+
const html = useMemo(() => getLanguageIconSvg(language), [language]);
|
|
208
|
+
if (!html) return /* @__PURE__ */ jsx("span", {
|
|
209
|
+
className,
|
|
210
|
+
style: {
|
|
211
|
+
width: size,
|
|
212
|
+
height: size,
|
|
213
|
+
display: "inline-flex",
|
|
214
|
+
alignItems: "center",
|
|
215
|
+
justifyContent: "center",
|
|
216
|
+
opacity: .6,
|
|
217
|
+
fontSize: size * .6
|
|
218
|
+
},
|
|
219
|
+
children: "•"
|
|
220
|
+
});
|
|
221
|
+
return /* @__PURE__ */ jsx("span", {
|
|
222
|
+
className,
|
|
223
|
+
dangerouslySetInnerHTML: { __html: html },
|
|
224
|
+
style: {
|
|
225
|
+
width: size,
|
|
226
|
+
height: size
|
|
227
|
+
}
|
|
228
|
+
});
|
|
229
|
+
};
|
|
230
|
+
//#endregion
|
|
231
|
+
export { scrollCollapsed as _, bodyBackground as a, getMaterialIconSvg as b, card as c, expandWrap as d, lang as f, scroll as g, linedWithNumbers as h, body as i, copyButton as l, lined as m, LanguageIcon as n, bodyBackgroundStatic as o, langInput as p, hasLanguageIcon as r, bodyReadonly as s, LANG_TO_ICON as t, expandButton as u, semanticClassNames as v, FileIcon as y };
|
package/dist/icons.mjs
CHANGED
|
@@ -1,91 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
import { p as getMaterialIconSvg } from "./language-kyYjCKCv.js";
|
|
4
|
-
import { q, L, h } from "./language-kyYjCKCv.js";
|
|
5
|
-
const EXT_TO_ICON = {
|
|
6
|
-
ts: "typescript",
|
|
7
|
-
tsx: "react-ts",
|
|
8
|
-
// TSX → React icon (same as JSX)
|
|
9
|
-
mts: "typescript",
|
|
10
|
-
cts: "typescript",
|
|
11
|
-
js: "javascript",
|
|
12
|
-
jsx: "react",
|
|
13
|
-
mjs: "javascript",
|
|
14
|
-
cjs: "javascript",
|
|
15
|
-
py: "python",
|
|
16
|
-
rs: "rust",
|
|
17
|
-
go: "go",
|
|
18
|
-
java: "java",
|
|
19
|
-
html: "html",
|
|
20
|
-
htm: "html",
|
|
21
|
-
css: "css",
|
|
22
|
-
scss: "sass",
|
|
23
|
-
sass: "sass",
|
|
24
|
-
less: "sass",
|
|
25
|
-
json: "json",
|
|
26
|
-
jsonc: "json",
|
|
27
|
-
json5: "json",
|
|
28
|
-
md: "markdown",
|
|
29
|
-
mdx: "markdown",
|
|
30
|
-
sh: "console",
|
|
31
|
-
bash: "console",
|
|
32
|
-
zsh: "console",
|
|
33
|
-
yml: "yaml",
|
|
34
|
-
yaml: "yaml",
|
|
35
|
-
sql: "database",
|
|
36
|
-
c: "c",
|
|
37
|
-
h: "c",
|
|
38
|
-
cpp: "cpp",
|
|
39
|
-
cc: "cpp",
|
|
40
|
-
cxx: "cpp",
|
|
41
|
-
hpp: "cpp",
|
|
42
|
-
swift: "swift",
|
|
43
|
-
kt: "kotlin",
|
|
44
|
-
kts: "kotlin",
|
|
45
|
-
rb: "ruby",
|
|
46
|
-
php: "php",
|
|
47
|
-
vue: "vue",
|
|
48
|
-
svelte: "svelte",
|
|
49
|
-
toml: "toml",
|
|
50
|
-
xml: "xml",
|
|
51
|
-
graphql: "graphql",
|
|
52
|
-
gql: "graphql",
|
|
53
|
-
dockerfile: "docker",
|
|
54
|
-
lua: "lua",
|
|
55
|
-
zig: "zig"
|
|
56
|
-
};
|
|
57
|
-
function getFileIconSvg(filename) {
|
|
58
|
-
const ext = filename.split(".").pop()?.toLowerCase() ?? "";
|
|
59
|
-
const iconName = EXT_TO_ICON[ext] ?? "file";
|
|
60
|
-
return getMaterialIconSvg(iconName);
|
|
61
|
-
}
|
|
62
|
-
const FileIcon = ({ filename, size = 16, className, fallback = "F" }) => {
|
|
63
|
-
const html = useMemo(() => getFileIconSvg(filename), [filename]);
|
|
64
|
-
const wrapperStyle = {
|
|
65
|
-
width: size,
|
|
66
|
-
height: size,
|
|
67
|
-
display: "inline-flex",
|
|
68
|
-
alignItems: "center",
|
|
69
|
-
justifyContent: "center",
|
|
70
|
-
opacity: html ? 1 : 0.5,
|
|
71
|
-
fontSize: size * 0.6
|
|
72
|
-
};
|
|
73
|
-
if (!html) {
|
|
74
|
-
return /* @__PURE__ */ jsx("span", { className, style: wrapperStyle, children: fallback });
|
|
75
|
-
}
|
|
76
|
-
return /* @__PURE__ */ jsx(
|
|
77
|
-
"span",
|
|
78
|
-
{
|
|
79
|
-
className,
|
|
80
|
-
dangerouslySetInnerHTML: { __html: html },
|
|
81
|
-
style: { width: size, height: size }
|
|
82
|
-
}
|
|
83
|
-
);
|
|
84
|
-
};
|
|
85
|
-
export {
|
|
86
|
-
FileIcon,
|
|
87
|
-
q as LANG_TO_ICON,
|
|
88
|
-
L as LanguageIcon,
|
|
89
|
-
getMaterialIconSvg,
|
|
90
|
-
h as hasLanguageIcon
|
|
91
|
-
};
|
|
1
|
+
import { b as getMaterialIconSvg, n as LanguageIcon, r as hasLanguageIcon, t as LANG_TO_ICON, y as FileIcon } from "./icons-CfRiv2YR.js";
|
|
2
|
+
export { FileIcon, LANG_TO_ICON, LanguageIcon, getMaterialIconSvg, hasLanguageIcon };
|