@blocklet/editor 2.4.86 → 2.4.88
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,11 +1,25 @@
|
|
|
1
1
|
import { type EditorThemeClasses } from 'lexical';
|
|
2
|
+
export declare const LANGUAGE_ALIAS: Record<string, string>;
|
|
3
|
+
export declare const LANGUAGE_ICON: Record<string, string | {
|
|
4
|
+
light: string;
|
|
5
|
+
dark: string;
|
|
6
|
+
}>;
|
|
7
|
+
export declare const XCODE_TRANSLATIONS: {
|
|
8
|
+
en: {
|
|
9
|
+
seeAllLines: string;
|
|
10
|
+
collapseCode: string;
|
|
11
|
+
};
|
|
12
|
+
zh: {
|
|
13
|
+
seeAllLines: string;
|
|
14
|
+
collapseCode: string;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
2
17
|
export interface CodeProps {
|
|
3
18
|
editorTheme: EditorThemeClasses;
|
|
4
19
|
language: string;
|
|
5
20
|
title: string;
|
|
6
21
|
body?: string;
|
|
7
|
-
icon?: string;
|
|
8
22
|
foldable?: string;
|
|
9
23
|
foldthreshold?: string;
|
|
10
24
|
}
|
|
11
|
-
export default function Code({ editorTheme, language, title, body,
|
|
25
|
+
export default function Code({ editorTheme, language, title, body, foldable: _foldable, foldthreshold: _foldThreshold, }: CodeProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -6,7 +6,338 @@ import { Icon } from '@iconify/react';
|
|
|
6
6
|
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
|
|
7
7
|
import { translate } from '@arcblock/ux/lib/Locale/util';
|
|
8
8
|
import { useMemoizedFn } from 'ahooks';
|
|
9
|
-
|
|
9
|
+
// 语言别名映射
|
|
10
|
+
export const LANGUAGE_ALIAS = {
|
|
11
|
+
adoc: 'asciidoc',
|
|
12
|
+
be: 'berry',
|
|
13
|
+
cdc: 'cadence',
|
|
14
|
+
clj: 'clojure',
|
|
15
|
+
coffee: 'coffeescript',
|
|
16
|
+
ql: 'codeql',
|
|
17
|
+
lisp: 'common-lisp',
|
|
18
|
+
cql: 'cypher',
|
|
19
|
+
erl: 'erlang',
|
|
20
|
+
f: 'fortran-fixed-form',
|
|
21
|
+
for: 'fortran-fixed-form',
|
|
22
|
+
f77: 'fortran-fixed-form',
|
|
23
|
+
fortran: 'fortran-fixed-form',
|
|
24
|
+
f90: 'fortran-free-form',
|
|
25
|
+
f95: 'fortran-free-form',
|
|
26
|
+
f03: 'fortran-free-form',
|
|
27
|
+
f08: 'fortran-free-form',
|
|
28
|
+
f18: 'fortran-free-form',
|
|
29
|
+
ftl: 'fluent',
|
|
30
|
+
fs: 'fsharp',
|
|
31
|
+
fsl: 'jssm',
|
|
32
|
+
'f#': 'fsharp',
|
|
33
|
+
golang: 'go',
|
|
34
|
+
gis: 'glimmer-js',
|
|
35
|
+
gts: 'glimmer-ts',
|
|
36
|
+
js: 'javascript',
|
|
37
|
+
jl: 'julia',
|
|
38
|
+
kt: 'kotlin',
|
|
39
|
+
kts: 'kotlin',
|
|
40
|
+
kql: 'kusto',
|
|
41
|
+
hbs: 'handlebars',
|
|
42
|
+
hs: 'haskell',
|
|
43
|
+
make: 'makefile',
|
|
44
|
+
md: 'markdown',
|
|
45
|
+
mdc: 'markdown',
|
|
46
|
+
mediawiki: 'wikitext',
|
|
47
|
+
nf: 'nextflow',
|
|
48
|
+
nu: 'nushell',
|
|
49
|
+
objectivec: 'objective-c',
|
|
50
|
+
objc: 'objective-c',
|
|
51
|
+
proto: 'protobuf',
|
|
52
|
+
perl6: 'perl',
|
|
53
|
+
ps: 'powershell',
|
|
54
|
+
ps1: 'powershell',
|
|
55
|
+
rb: 'ruby',
|
|
56
|
+
rs: 'rust',
|
|
57
|
+
shader: 'shaderlab',
|
|
58
|
+
styl: 'stylus',
|
|
59
|
+
vbnet: 'vb',
|
|
60
|
+
vy: 'vyper',
|
|
61
|
+
wiki: 'wikitext',
|
|
62
|
+
wl: 'wolfram',
|
|
63
|
+
yml: 'yaml',
|
|
64
|
+
};
|
|
65
|
+
// 语言 icon 映射 - 优先使用 logos 集合，其次使用其他集合
|
|
66
|
+
export const LANGUAGE_ICON = {
|
|
67
|
+
abap: 'logos:sap',
|
|
68
|
+
'actionscript-3': 'material-icon-theme:actionscript',
|
|
69
|
+
ada: '',
|
|
70
|
+
asciidoc: 'vscode-icons:file-type-asciidoc',
|
|
71
|
+
'angular-html': 'logos:angular-icon',
|
|
72
|
+
'angular-ts': 'logos:angular-icon',
|
|
73
|
+
apache: 'logos:apache',
|
|
74
|
+
apex: 'logos:salesforce',
|
|
75
|
+
apl: 'vscode-icons:file-type-apl',
|
|
76
|
+
applescript: 'logos:apple',
|
|
77
|
+
ara: '',
|
|
78
|
+
asm: '',
|
|
79
|
+
astro: {
|
|
80
|
+
light: 'vscode-icons:file-type-light-astro',
|
|
81
|
+
dark: 'vscode-icons:file-type-astro',
|
|
82
|
+
},
|
|
83
|
+
awk: 'vscode-icons:file-type-awk',
|
|
84
|
+
ballerina: 'material-icon-theme:ballerina',
|
|
85
|
+
bash: 'material-icon-theme:console',
|
|
86
|
+
bat: 'catppuccin:batch',
|
|
87
|
+
batch: 'catppuccin:batch',
|
|
88
|
+
beancount: '',
|
|
89
|
+
berry: '',
|
|
90
|
+
bibtex: '',
|
|
91
|
+
bicep: 'logos:microsoft',
|
|
92
|
+
blade: 'logos:laravel',
|
|
93
|
+
c: 'logos:c',
|
|
94
|
+
'c#': 'logos:c-sharp',
|
|
95
|
+
'c++': 'logos:c-plusplus',
|
|
96
|
+
cadence: '',
|
|
97
|
+
clarity: '',
|
|
98
|
+
clojure: 'vscode-icons:file-type-clojurescript',
|
|
99
|
+
'closure-templates': '',
|
|
100
|
+
cmake: 'vscode-icons:file-type-cmake',
|
|
101
|
+
cmd: 'catppuccin:batch',
|
|
102
|
+
cobol: 'vscode-icons:file-type-cobol',
|
|
103
|
+
codeowners: 'vscode-icons:file-type-codeowners',
|
|
104
|
+
codeql: 'vscode-icons:file-type-codeql',
|
|
105
|
+
coffeescript: 'catppuccin:coffeescript',
|
|
106
|
+
'common-lisp': 'vscode-icons:file-type-lisp',
|
|
107
|
+
console: '',
|
|
108
|
+
coq: 'file-icons:coq',
|
|
109
|
+
cpp: 'logos:c-plusplus',
|
|
110
|
+
crystal: {
|
|
111
|
+
light: 'vscode-icons:file-type-light-crystal',
|
|
112
|
+
dark: 'vscode-icons:file-type-crystal',
|
|
113
|
+
},
|
|
114
|
+
cs: 'logos:c-sharp',
|
|
115
|
+
csharp: 'logos:c-sharp',
|
|
116
|
+
css: 'logos:css-3',
|
|
117
|
+
csv: 'material-symbols:csv',
|
|
118
|
+
cue: 'catppuccin:cue',
|
|
119
|
+
cypher: '',
|
|
120
|
+
d: '',
|
|
121
|
+
dart: 'logos:dart',
|
|
122
|
+
dax: 'logos:microsoft-power-bi',
|
|
123
|
+
desktop: '',
|
|
124
|
+
diff: 'vscode-icons:file-type-diff',
|
|
125
|
+
docker: 'logos:docker-icon',
|
|
126
|
+
dockerfile: 'logos:docker-icon',
|
|
127
|
+
dotenv: 'vscode-icons:file-type-dotenv',
|
|
128
|
+
'dream-maker': '',
|
|
129
|
+
edge: 'vscode-icons:file-type-edge',
|
|
130
|
+
elisp: 'logos:emacs',
|
|
131
|
+
elixir: 'vscode-icons:file-type-elixir',
|
|
132
|
+
elm: 'vscode-icons:file-type-elm',
|
|
133
|
+
'emacs-lisp': 'logos:emacs',
|
|
134
|
+
erb: 'logos:ruby',
|
|
135
|
+
erlang: {
|
|
136
|
+
dark: 'vscode-icons:file-type-erlang2',
|
|
137
|
+
light: 'vscode-icons:file-type-erlang',
|
|
138
|
+
},
|
|
139
|
+
'fortran-fixed-form': 'vscode-icons:file-type-fortran',
|
|
140
|
+
'fortran-free-form': 'vscode-icons:file-type-fortran',
|
|
141
|
+
fennel: '',
|
|
142
|
+
fish: '',
|
|
143
|
+
fluent: '',
|
|
144
|
+
fsharp: 'vscode-icons:file-type-fsharp2',
|
|
145
|
+
gdresource: '',
|
|
146
|
+
gdscript: 'vscode-icons:file-type-gdscript',
|
|
147
|
+
gdshader: '',
|
|
148
|
+
genie: '',
|
|
149
|
+
gherkin: 'logos:cucumber',
|
|
150
|
+
'git-commit': 'logos:git-icon',
|
|
151
|
+
'git-rebase': 'logos:git-icon',
|
|
152
|
+
gjs: 'logos:gnome',
|
|
153
|
+
gleam: 'logos:gleam',
|
|
154
|
+
'glimmer-js': 'vscode-icons:file-type-glimmer',
|
|
155
|
+
'glimmer-ts': 'vscode-icons:file-type-glimmer',
|
|
156
|
+
glsl: 'logos:opengl',
|
|
157
|
+
gnuplot: 'vscode-icons:file-type-gnuplot',
|
|
158
|
+
go: 'vscode-icons:file-type-go',
|
|
159
|
+
gql: 'logos:graphql',
|
|
160
|
+
graphql: 'logos:graphql',
|
|
161
|
+
groovy: 'material-icon-theme:groovy',
|
|
162
|
+
hack: 'logos:hack',
|
|
163
|
+
haml: 'catppuccin:haml',
|
|
164
|
+
handlebars: 'vscode-icons:file-type-handlebars',
|
|
165
|
+
haskell: 'vscode-icons:file-type-haskell',
|
|
166
|
+
haxe: 'logos:haxe',
|
|
167
|
+
hcl: '',
|
|
168
|
+
hjson: 'vscode-icons:file-type-hjson',
|
|
169
|
+
hlsl: 'vscode-icons:file-type-hlsl',
|
|
170
|
+
html: 'logos:html-5',
|
|
171
|
+
'html-derivative': 'logos:html-5',
|
|
172
|
+
http: 'vscode-icons:file-type-http',
|
|
173
|
+
hxml: '',
|
|
174
|
+
hy: 'file-icons:hy',
|
|
175
|
+
imba: 'vscode-icons:file-type-imba',
|
|
176
|
+
ini: 'vscode-icons:file-type-ini',
|
|
177
|
+
jade: 'logos:pug',
|
|
178
|
+
java: 'logos:java',
|
|
179
|
+
javascript: 'devicon:javascript',
|
|
180
|
+
jinja: 'vscode-icons:file-type-jinja',
|
|
181
|
+
jison: '',
|
|
182
|
+
json: 'vscode-icons:file-type-json',
|
|
183
|
+
json5: {
|
|
184
|
+
light: 'vscode-icons:file-type-light-json5',
|
|
185
|
+
dark: 'vscode-icons:file-type-json5',
|
|
186
|
+
},
|
|
187
|
+
jsonc: 'vscode-icons:file-type-json',
|
|
188
|
+
jsonl: 'vscode-icons:file-type-json',
|
|
189
|
+
jsonnet: 'vscode-icons:file-type-jsonnet',
|
|
190
|
+
jssm: '',
|
|
191
|
+
jsx: 'logos:react',
|
|
192
|
+
julia: 'vscode-icons:file-type-julia',
|
|
193
|
+
kotlin: 'vscode-icons:file-type-kotlin',
|
|
194
|
+
kusto: 'vscode-icons:file-type-kusto',
|
|
195
|
+
latex: '',
|
|
196
|
+
lean: 'vscode-icons:file-type-lean',
|
|
197
|
+
lean4: 'vscode-icons:file-type-lean',
|
|
198
|
+
less: 'catppuccin:less',
|
|
199
|
+
liquid: 'logos:shopify',
|
|
200
|
+
lit: 'logos:lit',
|
|
201
|
+
log: 'material-icon-theme:console',
|
|
202
|
+
logo: '',
|
|
203
|
+
lua: 'logos:lua',
|
|
204
|
+
luau: 'vscode-icons:file-type-luau',
|
|
205
|
+
makefile: 'vscode-icons:file-type-makefile',
|
|
206
|
+
markdown: {
|
|
207
|
+
light: 'catppuccin:markdown-mdx',
|
|
208
|
+
dark: 'catppuccin:markdown',
|
|
209
|
+
},
|
|
210
|
+
marko: 'logos:marko',
|
|
211
|
+
matlab: 'vscode-icons:file-type-matlab',
|
|
212
|
+
mdx: 'logos:mdx',
|
|
213
|
+
mermaid: '',
|
|
214
|
+
mojo: 'vscode-icons:file-type-mojo',
|
|
215
|
+
move: '',
|
|
216
|
+
nar: '',
|
|
217
|
+
narrat: '',
|
|
218
|
+
nextflow: 'vscode-icons:file-type-nextflow',
|
|
219
|
+
nginx: 'logos:nginx',
|
|
220
|
+
nim: 'catppuccin:nim',
|
|
221
|
+
nix: 'vscode-icons:file-type-nix',
|
|
222
|
+
nushell: '',
|
|
223
|
+
'objective-c': 'material-icon-theme:objective-c',
|
|
224
|
+
'objective-cpp': 'material-icon-theme:objective-cpp',
|
|
225
|
+
ocaml: 'vscode-icons:file-type-ocaml',
|
|
226
|
+
pascal: '',
|
|
227
|
+
perl: 'catppuccin:perl',
|
|
228
|
+
perl6: '',
|
|
229
|
+
php: 'catppuccin:php',
|
|
230
|
+
plsql: 'vscode-icons:file-type-plsql',
|
|
231
|
+
po: '',
|
|
232
|
+
postcss: 'logos:postcss',
|
|
233
|
+
pot: '',
|
|
234
|
+
potx: '',
|
|
235
|
+
powerquery: '',
|
|
236
|
+
powershell: 'vscode-icons:file-type-powershell',
|
|
237
|
+
prisma: 'material-icon-theme:prisma',
|
|
238
|
+
prolog: 'vscode-icons:file-type-prolog',
|
|
239
|
+
properties: '',
|
|
240
|
+
protobuf: 'vscode-icons:file-type-protobuf',
|
|
241
|
+
pug: 'logos:pug',
|
|
242
|
+
puppet: 'logos:puppet',
|
|
243
|
+
purescript: 'material-icon-theme:purescript',
|
|
244
|
+
py: 'logos:python',
|
|
245
|
+
python: 'logos:python',
|
|
246
|
+
qml: 'logos:qt',
|
|
247
|
+
qmldir: 'logos:qt',
|
|
248
|
+
qss: 'logos:qt',
|
|
249
|
+
r: 'vscode-icons:file-type-r',
|
|
250
|
+
racket: 'vscode-icons:file-type-racket',
|
|
251
|
+
raku: 'vscode-icons:file-type-raku',
|
|
252
|
+
razor: 'vscode-icons:file-type-razor',
|
|
253
|
+
reg: 'vscode-icons:file-type-registry',
|
|
254
|
+
regex: '',
|
|
255
|
+
regexp: '',
|
|
256
|
+
rel: '',
|
|
257
|
+
riscv: '',
|
|
258
|
+
rst: '',
|
|
259
|
+
ruby: 'logos:ruby',
|
|
260
|
+
rust: 'catppuccin:rust-alt',
|
|
261
|
+
sas: 'vscode-icons:file-type-sas',
|
|
262
|
+
sass: 'logos:sass',
|
|
263
|
+
scala: 'logos:scala',
|
|
264
|
+
scheme: '',
|
|
265
|
+
scss: 'logos:sass',
|
|
266
|
+
sh: 'material-icon-theme:console',
|
|
267
|
+
shaderlab: 'catppuccin:shader',
|
|
268
|
+
shell: 'material-icon-theme:console',
|
|
269
|
+
shellscript: 'material-icon-theme:console',
|
|
270
|
+
shellsession: 'material-icon-theme:console',
|
|
271
|
+
smalltalk: '',
|
|
272
|
+
solidity: {
|
|
273
|
+
light: 'vscode-icons:file-type-light-solidity',
|
|
274
|
+
dark: 'vscode-icons:file-type-solidity',
|
|
275
|
+
},
|
|
276
|
+
soy: '',
|
|
277
|
+
sparql: 'vscode-icons:file-type-sparql',
|
|
278
|
+
spl: '',
|
|
279
|
+
splunk: '',
|
|
280
|
+
sql: 'vscode-icons:file-type-sql',
|
|
281
|
+
'ssh-config': '',
|
|
282
|
+
stata: 'vscode-icons:file-type-stata',
|
|
283
|
+
stylus: 'file-icons:stylus-s',
|
|
284
|
+
svelte: 'logos:svelte-icon',
|
|
285
|
+
swift: 'logos:swift',
|
|
286
|
+
'system-verilog': 'vscode-icons:file-type-systemverilog',
|
|
287
|
+
systemd: {
|
|
288
|
+
light: 'material-icon-theme:systemd-light',
|
|
289
|
+
dark: 'material-icon-theme:systemd',
|
|
290
|
+
},
|
|
291
|
+
tasl: '',
|
|
292
|
+
tcl: 'vscode-icons:file-type-tcl',
|
|
293
|
+
templ: '',
|
|
294
|
+
terraform: 'logos:terraform',
|
|
295
|
+
tex: 'material-icon-theme:tex',
|
|
296
|
+
tf: 'logos:terraform',
|
|
297
|
+
tfvars: 'logos:terraform',
|
|
298
|
+
toml: 'logos:toml',
|
|
299
|
+
ts: 'vscode-icons:file-type-typescript-official',
|
|
300
|
+
'ts-tags': 'vscode-icons:file-type-typescript-official',
|
|
301
|
+
tsp: 'vscode-icons:file-type-typescript-official',
|
|
302
|
+
tsv: '',
|
|
303
|
+
tsx: 'logos:react',
|
|
304
|
+
turtle: '',
|
|
305
|
+
twig: 'vscode-icons:file-type-twig',
|
|
306
|
+
typ: '',
|
|
307
|
+
typescript: 'vscode-icons:file-type-typescript-official',
|
|
308
|
+
typespec: 'vscode-icons:file-type-typescript-official',
|
|
309
|
+
typst: '',
|
|
310
|
+
v: '',
|
|
311
|
+
vala: 'catppuccin:vala',
|
|
312
|
+
vb: 'vscode-icons:file-type-vb',
|
|
313
|
+
verilog: 'vscode-icons:file-type-systemverilog',
|
|
314
|
+
vhdl: 'vscode-icons:file-type-vhdl',
|
|
315
|
+
vim: 'logos:vim',
|
|
316
|
+
viml: 'logos:vim',
|
|
317
|
+
vimscript: 'logos:vim',
|
|
318
|
+
vue: 'logos:vue',
|
|
319
|
+
'vue-html': 'logos:vue',
|
|
320
|
+
vyper: 'vscode-icons:file-type-vyper',
|
|
321
|
+
wasm: 'logos:webassembly',
|
|
322
|
+
wenyan: '',
|
|
323
|
+
wgsl: 'vscode-icons:file-type-wgsl',
|
|
324
|
+
wikitext: 'vscode-icons:file-type-wikitext',
|
|
325
|
+
wolfram: 'vscode-icons:file-type-wolfram',
|
|
326
|
+
xml: 'vscode-icons:file-type-xml',
|
|
327
|
+
xsl: 'vscode-icons:file-type-xsl',
|
|
328
|
+
yaml: {
|
|
329
|
+
light: 'vscode-icons:file-type-light-yaml-official',
|
|
330
|
+
dark: 'vscode-icons:file-type-yaml-official',
|
|
331
|
+
},
|
|
332
|
+
zenscript: '',
|
|
333
|
+
zig: 'vscode-icons:file-type-zig',
|
|
334
|
+
zsh: {
|
|
335
|
+
light: 'devicon:zsh',
|
|
336
|
+
dark: 'devicon-plain:zsh',
|
|
337
|
+
},
|
|
338
|
+
};
|
|
339
|
+
// 多语言翻译
|
|
340
|
+
export const XCODE_TRANSLATIONS = {
|
|
10
341
|
en: {
|
|
11
342
|
seeAllLines: 'See all {lines} lines',
|
|
12
343
|
collapseCode: 'Collapse code',
|
|
@@ -16,25 +347,6 @@ const translations = {
|
|
|
16
347
|
collapseCode: '折叠代码',
|
|
17
348
|
},
|
|
18
349
|
};
|
|
19
|
-
const XCode = styled('div')(({ theme }) => ({
|
|
20
|
-
position: 'relative',
|
|
21
|
-
borderRadius: theme.shape.borderRadius,
|
|
22
|
-
border: '1px solid',
|
|
23
|
-
borderColor: theme.palette.divider,
|
|
24
|
-
overflow: 'hidden',
|
|
25
|
-
pre: {
|
|
26
|
-
margin: 0,
|
|
27
|
-
borderRadius: 0,
|
|
28
|
-
code: {
|
|
29
|
-
margin: 0,
|
|
30
|
-
border: 0,
|
|
31
|
-
borderRadius: 0,
|
|
32
|
-
background: 'transparent',
|
|
33
|
-
color: 'inherit',
|
|
34
|
-
overflow: 'hidden',
|
|
35
|
-
},
|
|
36
|
-
},
|
|
37
|
-
}));
|
|
38
350
|
/** Header 组件 */
|
|
39
351
|
function CodeHeader({ title, icon, actions }) {
|
|
40
352
|
if (!title && !icon)
|
|
@@ -48,7 +360,13 @@ function CodeHeader({ title, icon, actions }) {
|
|
|
48
360
|
borderColor: 'divider',
|
|
49
361
|
bgcolor: 'background.paper',
|
|
50
362
|
borderRadius: '8px 8px 0 0',
|
|
51
|
-
}, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flex: 1 }, children: [icon && _jsx(Box, { component: Icon, icon: icon, sx: {
|
|
363
|
+
}, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flex: 1 }, children: [icon && (_jsx(Box, { component: Icon, icon: icon, sx: {
|
|
364
|
+
fontSize: '24px',
|
|
365
|
+
height: '24px',
|
|
366
|
+
lineHeight: '24px',
|
|
367
|
+
color: 'text.secondary',
|
|
368
|
+
fill: ({ palette }) => palette.text.secondary,
|
|
369
|
+
} })), title && (_jsx(Typography, { variant: "body2", sx: { color: 'text.secondary', fontWeight: 500 }, children: title }))] }), actions && _jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: actions })] }));
|
|
52
370
|
}
|
|
53
371
|
/** 通用操作按钮 */
|
|
54
372
|
function ActionButton({ className, icon, onClick, sx = {}, }) {
|
|
@@ -89,7 +407,7 @@ function FoldButton({ isCollapsed, onToggle, sx = {} }) {
|
|
|
89
407
|
/** 折叠 Footer */
|
|
90
408
|
function FoldFooter({ remainingLines, isCollapsed, onToggle, }) {
|
|
91
409
|
const { locale = 'en' } = useLocaleContext();
|
|
92
|
-
const t = useMemoizedFn((key, data = {}) => translate(
|
|
410
|
+
const t = useMemoizedFn((key, data = {}) => translate(XCODE_TRANSLATIONS, key, locale, 'en', data));
|
|
93
411
|
return (_jsx(Box, { sx: {
|
|
94
412
|
display: 'flex',
|
|
95
413
|
alignItems: 'center',
|
|
@@ -105,7 +423,26 @@ function FoldFooter({ remainingLines, isCollapsed, onToggle, }) {
|
|
|
105
423
|
},
|
|
106
424
|
}, onClick: onToggle, children: _jsxs(Typography, { variant: "body2", sx: { color: 'text.secondary', fontWeight: 500, display: 'flex', alignItems: 'center' }, children: [_jsx(Box, { component: Icon, icon: "tabler:dots", sx: { fontSize: '1em', mr: 1 } }), isCollapsed ? t('seeAllLines', { lines: remainingLines }) : t('collapseCode', { lines: remainingLines })] }) }));
|
|
107
425
|
}
|
|
108
|
-
|
|
426
|
+
const XCode = styled('div')(({ theme }) => ({
|
|
427
|
+
position: 'relative',
|
|
428
|
+
borderRadius: theme.shape.borderRadius,
|
|
429
|
+
border: '1px solid',
|
|
430
|
+
borderColor: theme.palette.divider,
|
|
431
|
+
overflow: 'hidden',
|
|
432
|
+
pre: {
|
|
433
|
+
margin: 0,
|
|
434
|
+
borderRadius: 0,
|
|
435
|
+
code: {
|
|
436
|
+
margin: 0,
|
|
437
|
+
border: 0,
|
|
438
|
+
borderRadius: 0,
|
|
439
|
+
background: 'transparent',
|
|
440
|
+
color: 'inherit',
|
|
441
|
+
overflow: 'hidden',
|
|
442
|
+
},
|
|
443
|
+
},
|
|
444
|
+
}));
|
|
445
|
+
export default function Code({ editorTheme, language, title, body = '', foldable: _foldable = 'true', foldthreshold: _foldThreshold = '25', // ps: dataset 会强制将 key 小写
|
|
109
446
|
}) {
|
|
110
447
|
const [highlightedCode, setHighlightedCode] = useState('');
|
|
111
448
|
const [isLoading, setIsLoading] = useState(false);
|
|
@@ -116,6 +453,13 @@ export default function Code({ editorTheme, language, title, body = '', icon = '
|
|
|
116
453
|
if (Number.isNaN(foldThreshold)) {
|
|
117
454
|
foldThreshold = 25;
|
|
118
455
|
}
|
|
456
|
+
const { mode } = muiTheme.palette;
|
|
457
|
+
const _lang = LANGUAGE_ALIAS[language] || language;
|
|
458
|
+
// support for light/dark icon
|
|
459
|
+
const languageIcon =
|
|
460
|
+
// @ts-ignore
|
|
461
|
+
(typeof LANGUAGE_ICON[_lang] === 'object' ? LANGUAGE_ICON[_lang][mode] : LANGUAGE_ICON[_lang]) ||
|
|
462
|
+
'heroicons:code-bracket-solid';
|
|
119
463
|
const lineCount = body ? body.split('\n').length : 0;
|
|
120
464
|
const showFoldButton = foldable && lineCount > foldThreshold;
|
|
121
465
|
// 初始折叠状态：启用折叠且超过阈值就折叠
|
|
@@ -143,26 +487,39 @@ export default function Code({ editorTheme, language, title, body = '', icon = '
|
|
|
143
487
|
return;
|
|
144
488
|
}
|
|
145
489
|
setIsLoading(true);
|
|
146
|
-
|
|
490
|
+
const processCodeHtml = async (lang) => {
|
|
147
491
|
const html = await codeToHtml(contentToHighlight, {
|
|
148
|
-
lang
|
|
492
|
+
lang,
|
|
149
493
|
theme: shikiTheme,
|
|
150
494
|
});
|
|
151
|
-
|
|
495
|
+
return html.replace(/<code([^>]*)>/g, `<code$1 class="${editorTheme.code}" data-gutter="${gutter}" data-language="${lang}">`);
|
|
496
|
+
};
|
|
497
|
+
try {
|
|
498
|
+
let processedHtml = '';
|
|
499
|
+
// 受支持的语言
|
|
500
|
+
if (Object.prototype.hasOwnProperty.call(LANGUAGE_ICON, _lang)) {
|
|
501
|
+
processedHtml = await processCodeHtml(_lang);
|
|
502
|
+
}
|
|
503
|
+
else {
|
|
504
|
+
processedHtml = await processCodeHtml('plain');
|
|
505
|
+
}
|
|
506
|
+
setHighlightedCode(processedHtml);
|
|
152
507
|
}
|
|
153
508
|
catch (error) {
|
|
154
|
-
console.
|
|
155
|
-
|
|
509
|
+
console.warn('Code highlighting failed:', error);
|
|
510
|
+
// fallback to plain text
|
|
511
|
+
const processedPlainText = await processCodeHtml('plain');
|
|
512
|
+
setHighlightedCode(processedPlainText);
|
|
156
513
|
}
|
|
157
514
|
finally {
|
|
158
515
|
setIsLoading(false);
|
|
159
516
|
}
|
|
160
517
|
};
|
|
161
518
|
highlightCode();
|
|
162
|
-
}, [body,
|
|
163
|
-
const shouldShowHeader = title ||
|
|
519
|
+
}, [body, _lang, shikiTheme, isCollapsed, foldThreshold, gutter]);
|
|
520
|
+
const shouldShowHeader = title || languageIcon;
|
|
164
521
|
const actions = (_jsxs(_Fragment, { children: [showFoldButton && _jsx(FoldButton, { isCollapsed: isCollapsed, onToggle: () => setIsCollapsed(!isCollapsed) }), _jsx(CopyButton, { content: body })] }));
|
|
165
|
-
return (_jsxs(XCode, { className: "x-code", children: [shouldShowHeader && (_jsx(CodeHeader, { title: title, icon:
|
|
522
|
+
return (_jsxs(XCode, { className: "x-code", children: [shouldShowHeader && (_jsx(CodeHeader, { title: title, icon: languageIcon, actions: _jsx(Stack, { alignItems: "center", direction: "row", spacing: 0.5, children: actions }) })), !isLoading && highlightedCode ? (_jsxs(_Fragment, { children: [_jsx("div", { dangerouslySetInnerHTML: { __html: highlightedCode } }), !shouldShowHeader && (_jsx(Stack, { alignItems: "center", direction: "row", spacing: 0.5, sx: { position: 'absolute', right: '12px', top: '12px' }, children: actions }))] })) : (_jsx("pre", { children: _jsx("code", { className: editorTheme.code, "data-gutter": gutter, "data-language": language, style: {
|
|
166
523
|
opacity: 0.15,
|
|
167
524
|
filter: 'blur(0.5px)',
|
|
168
525
|
pointerEvents: 'none',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/editor",
|
|
3
|
-
"version": "2.4.
|
|
3
|
+
"version": "2.4.88",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
"ufo": "^1.5.4",
|
|
72
72
|
"url-join": "^4.0.1",
|
|
73
73
|
"zustand": "^4.5.5",
|
|
74
|
-
"@blocklet/pdf": "2.4.
|
|
74
|
+
"@blocklet/pdf": "2.4.88"
|
|
75
75
|
},
|
|
76
76
|
"devDependencies": {
|
|
77
77
|
"@babel/core": "^7.25.2",
|