@@ -126,6 +126,7 @@ function copy() {
126
126
.replaceAll (` var(--blockquote-background) ` , ` #f7f7f7 ` )
127
127
.replaceAll (` var(--md-primary-color) ` , primaryColor .value )
128
128
.replaceAll (/ --md-primary-color:. +? ;/ g , ` ` )
129
+ .replace (/ <span class="nodeLabel"([^ >] * )><p[^ >] * >(. *? )<\/ p><\/ span>/ g , ` <span class="nodeLabel"$1>$2</span> ` )
129
130
130
131
clipboardDiv .focus ()
131
132
@@ -139,18 +140,19 @@ function copy() {
139
140
140
141
// 兼容 Mermaid
141
142
const nodes = clipboardDiv .querySelectorAll (` .nodeLabel ` )
142
- for ( const node of nodes ) {
143
+ nodes . forEach (( node ) => {
143
144
const parent = node .parentElement !
144
145
const xmlns = parent .getAttribute (` xmlns ` )!
145
146
const style = parent .getAttribute (` style ` )!
146
147
const section = document .createElement (` section ` )
147
148
section .setAttribute (` xmlns ` , xmlns )
148
149
section .setAttribute (` style ` , style )
149
150
section .innerHTML = parent .innerHTML
151
+
150
152
const grand = parent .parentElement !
151
- grand .innerHTML = ` `
152
- grand .appendChild (section )
153
- }
153
+ grand .innerHTML = ` ` // 清空父元素的内容
154
+ grand .appendChild (section ) // 将新的 section 添加到父元素
155
+ })
154
156
155
157
window .getSelection ()! .removeAllRanges ()
156
158
const range = document .createRange ()
@@ -198,8 +200,7 @@ function customStyle() {
198
200
<MenubarTrigger > 格式 </MenubarTrigger >
199
201
<MenubarContent class =" w-60" align =" start" >
200
202
<MenubarItem
201
- v-for =" { label, kbd, emitArgs } in formatItems"
202
- :key =" label"
203
+ v-for =" { label, kbd, emitArgs } in formatItems" :key =" label"
203
204
@click =" emitArgs[0] === 'addFormat' ? $emit(emitArgs[0], emitArgs[1]) : $emit(emitArgs[0])"
204
205
>
205
206
<el-icon class =" mr-2 h-4 w-4" />
@@ -236,14 +237,9 @@ function customStyle() {
236
237
<h2 >主题</h2 >
237
238
<div class =" grid grid-cols-3 justify-items-center gap-2" >
238
239
<Button
239
- v-for =" { label, value } in themeOptions"
240
- :key =" value"
241
- class =" w-full"
242
- variant =" outline"
243
- :class =" {
240
+ v-for =" { label, value } in themeOptions" :key =" value" class =" w-full" variant =" outline" :class =" {
244
241
'border-black dark:border-white': store.theme === value,
245
- }"
246
- @click =" store.themeChanged(value)"
242
+ }" @click =" store.themeChanged(value)"
247
243
>
248
244
{{ label }}
249
245
</Button >
@@ -253,10 +249,7 @@ function customStyle() {
253
249
<h2 >字体</h2 >
254
250
<div class =" grid grid-cols-3 justify-items-center gap-2" >
255
251
<Button
256
- v-for =" { label, value } in fontFamilyOptions"
257
- :key =" value"
258
- variant =" outline"
259
- class =" w-full"
252
+ v-for =" { label, value } in fontFamilyOptions" :key =" value" variant =" outline" class =" w-full"
260
253
:class =" { 'border-black dark:border-white': store.fontFamily === value }"
261
254
@click =" store.fontChanged(value)"
262
255
>
@@ -268,14 +261,9 @@ function customStyle() {
268
261
<h2 >字号</h2 >
269
262
<div class =" grid grid-cols-5 justify-items-center gap-2" >
270
263
<Button
271
- v-for =" { value, desc } in fontSizeOptions"
272
- :key =" value"
273
- variant =" outline"
274
- class =" w-full"
275
- :class =" {
264
+ v-for =" { value, desc } in fontSizeOptions" :key =" value" variant =" outline" class =" w-full" :class =" {
276
265
'border-black dark:border-white': store.fontSize === value,
277
- }"
278
- @click =" store.sizeChanged(value)"
266
+ }" @click =" store.sizeChanged(value)"
279
267
>
280
268
{{ desc }}
281
269
</Button >
@@ -285,18 +273,12 @@ function customStyle() {
285
273
<h2 >主题色</h2 >
286
274
<div class =" grid grid-cols-3 justify-items-center gap-2" >
287
275
<Button
288
- v-for =" { label, value } in colorOptions"
289
- :key =" value"
290
- class =" w-full"
291
- variant =" outline"
292
- :class =" {
276
+ v-for =" { label, value } in colorOptions" :key =" value" class =" w-full" variant =" outline" :class =" {
293
277
'border-black dark:border-white': store.primaryColor === value,
294
- }"
295
- @click =" store.colorChanged(value)"
278
+ }" @click =" store.colorChanged(value)"
296
279
>
297
280
<span
298
- class =" mr-2 inline-block h-4 w-4 rounded-full"
299
- :style =" {
281
+ class =" mr-2 inline-block h-4 w-4 rounded-full" :style =" {
300
282
background: value,
301
283
}"
302
284
/>
@@ -307,30 +289,18 @@ function customStyle() {
307
289
<div class =" space-y-2" >
308
290
<h2 >自定义主题色</h2 >
309
291
<div >
310
- <el-color-picker
311
- v-model =" primaryColor"
312
- :teleported =" false"
313
- show-alpha
314
- @change =" store.colorChanged"
315
- />
292
+ <el-color-picker v-model =" primaryColor" :teleported =" false" show-alpha @change =" store.colorChanged" />
316
293
</div >
317
294
</div >
318
295
<div class =" space-y-2" >
319
296
<h2 >代码块主题</h2 >
320
297
<div >
321
- <Select
322
- v-model =" store.codeBlockTheme"
323
- @update:model-value =" store.codeBlockThemeChanged"
324
- >
298
+ <Select v-model =" store.codeBlockTheme" @update:model-value =" store.codeBlockThemeChanged" >
325
299
<SelectTrigger >
326
300
<SelectValue placeholder =" Select a fruit" />
327
301
</SelectTrigger >
328
302
<SelectContent >
329
- <SelectItem
330
- v-for =" { label, value } in codeBlockThemeOptions"
331
- :key =" label"
332
- :value =" value"
333
- >
303
+ <SelectItem v-for =" { label, value } in codeBlockThemeOptions" :key =" label" :value =" value" >
334
304
{{ label }}
335
305
</SelectItem >
336
306
</SelectContent >
@@ -341,14 +311,9 @@ function customStyle() {
341
311
<h2 >图注格式</h2 >
342
312
<div class =" grid grid-cols-3 justify-items-center gap-2" >
343
313
<Button
344
- v-for =" { label, value } in legendOptions"
345
- :key =" value"
346
- class =" w-full"
347
- variant =" outline"
348
- :class =" {
314
+ v-for =" { label, value } in legendOptions" :key =" value" class =" w-full" variant =" outline" :class =" {
349
315
'border-black dark:border-white': store.legend === value,
350
- }"
351
- @click =" store.legendChanged(value)"
316
+ }" @click =" store.legendChanged(value)"
352
317
>
353
318
{{ label }}
354
319
</Button >
@@ -359,22 +324,16 @@ function customStyle() {
359
324
<h2 >Mac 代码块</h2 >
360
325
<div class =" grid grid-cols-5 justify-items-center gap-2" >
361
326
<Button
362
- class =" w-full"
363
- variant =" outline"
364
- :class =" {
327
+ class =" w-full" variant =" outline" :class =" {
365
328
'border-black dark:border-white': store.isMacCodeBlock,
366
- }"
367
- @click =" !store.isMacCodeBlock && store.macCodeBlockChanged()"
329
+ }" @click =" !store.isMacCodeBlock && store.macCodeBlockChanged()"
368
330
>
369
331
开启
370
332
</Button >
371
333
<Button
372
- class =" w-full"
373
- variant =" outline"
374
- :class =" {
334
+ class =" w-full" variant =" outline" :class =" {
375
335
'border-black dark:border-white': !store.isMacCodeBlock,
376
- }"
377
- @click =" store.isMacCodeBlock && store.macCodeBlockChanged()"
336
+ }" @click =" store.isMacCodeBlock && store.macCodeBlockChanged()"
378
337
>
379
338
关闭
380
339
</Button >
@@ -384,22 +343,16 @@ function customStyle() {
384
343
<h2 >微信外链转底部引用</h2 >
385
344
<div class =" grid grid-cols-5 justify-items-center gap-2" >
386
345
<Button
387
- class =" w-full"
388
- variant =" outline"
389
- :class =" {
346
+ class =" w-full" variant =" outline" :class =" {
390
347
'border-black dark:border-white': store.isCiteStatus,
391
- }"
392
- @click =" !store.isCiteStatus && store.citeStatusChanged()"
348
+ }" @click =" !store.isCiteStatus && store.citeStatusChanged()"
393
349
>
394
350
开启
395
351
</Button >
396
352
<Button
397
- class =" w-full"
398
- variant =" outline"
399
- :class =" {
353
+ class =" w-full" variant =" outline" :class =" {
400
354
'border-black dark:border-white': !store.isCiteStatus,
401
- }"
402
- @click =" store.isCiteStatus && store.citeStatusChanged()"
355
+ }" @click =" store.isCiteStatus && store.citeStatusChanged()"
403
356
>
404
357
关闭
405
358
</Button >
@@ -409,22 +362,16 @@ function customStyle() {
409
362
<h2 >段落首行缩进</h2 >
410
363
<div class =" grid grid-cols-5 justify-items-center gap-2" >
411
364
<Button
412
- class =" w-full"
413
- variant =" outline"
414
- :class =" {
365
+ class =" w-full" variant =" outline" :class =" {
415
366
'border-black dark:border-white': store.isUseIndent,
416
- }"
417
- @click =" !store.isUseIndent && store.useIndentChanged()"
367
+ }" @click =" !store.isUseIndent && store.useIndentChanged()"
418
368
>
419
369
开启
420
370
</Button >
421
371
<Button
422
- class =" w-full"
423
- variant =" outline"
424
- :class =" {
372
+ class =" w-full" variant =" outline" :class =" {
425
373
'border-black dark:border-white': !store.isUseIndent,
426
- }"
427
- @click =" store.isUseIndent && store.useIndentChanged()"
374
+ }" @click =" store.isUseIndent && store.useIndentChanged()"
428
375
>
429
376
关闭
430
377
</Button >
@@ -434,22 +381,16 @@ function customStyle() {
434
381
<h2 >自定义 CSS 面板</h2 >
435
382
<div class =" grid grid-cols-5 justify-items-center gap-2" >
436
383
<Button
437
- class =" w-full"
438
- variant =" outline"
439
- :class =" {
384
+ class =" w-full" variant =" outline" :class =" {
440
385
'border-black dark:border-white': displayStore.isShowCssEditor,
441
- }"
442
- @click =" !displayStore.isShowCssEditor && customStyle()"
386
+ }" @click =" !displayStore.isShowCssEditor && customStyle()"
443
387
>
444
388
开启
445
389
</Button >
446
390
<Button
447
- class =" w-full"
448
- variant =" outline"
449
- :class =" {
391
+ class =" w-full" variant =" outline" :class =" {
450
392
'border-black dark:border-white': !displayStore.isShowCssEditor,
451
- }"
452
- @click =" displayStore.isShowCssEditor && customStyle()"
393
+ }" @click =" displayStore.isShowCssEditor && customStyle()"
453
394
>
454
395
关闭
455
396
</Button >
@@ -459,22 +400,16 @@ function customStyle() {
459
400
<h2 >编辑区位置</h2 >
460
401
<div class =" grid grid-cols-5 justify-items-center gap-2" >
461
402
<Button
462
- class =" w-full"
463
- variant =" outline"
464
- :class =" {
403
+ class =" w-full" variant =" outline" :class =" {
465
404
'border-black dark:border-white': store.isEditOnLeft,
466
- }"
467
- @click =" !store.isEditOnLeft && store.toggleEditOnLeft()"
405
+ }" @click =" !store.isEditOnLeft && store.toggleEditOnLeft()"
468
406
>
469
407
左侧
470
408
</Button >
471
409
<Button
472
- class =" w-full"
473
- variant =" outline"
474
- :class =" {
410
+ class =" w-full" variant =" outline" :class =" {
475
411
'border-black dark:border-white': !store.isEditOnLeft,
476
- }"
477
- @click =" store.isEditOnLeft && store.toggleEditOnLeft()"
412
+ }" @click =" store.isEditOnLeft && store.toggleEditOnLeft()"
478
413
>
479
414
右侧
480
415
</Button >
@@ -484,22 +419,16 @@ function customStyle() {
484
419
<h2 >模式</h2 >
485
420
<div class =" grid grid-cols-5 justify-items-center gap-2" >
486
421
<Button
487
- class =" w-full"
488
- variant =" outline"
489
- :class =" {
422
+ class =" w-full" variant =" outline" :class =" {
490
423
'border-black dark:border-white': !isDark,
491
- }"
492
- @click =" store.toggleDark(false)"
424
+ }" @click =" store.toggleDark(false)"
493
425
>
494
426
<Sun class =" h-4 w-4" />
495
427
</Button >
496
428
<Button
497
- class =" w-full"
498
- variant =" outline"
499
- :class =" {
429
+ class =" w-full" variant =" outline" :class =" {
500
430
'border-black dark:border-white': isDark,
501
- }"
502
- @click =" store.toggleDark(true)"
431
+ }" @click =" store.toggleDark(true)"
503
432
>
504
433
<Moon class =" h-4 w-4" />
505
434
</Button >
@@ -508,10 +437,7 @@ function customStyle() {
508
437
<div class =" space-y-2" >
509
438
<h2 >样式配置</h2 >
510
439
<div >
511
- <Button
512
- class =" w-full"
513
- @click =" store.resetStyleConfirm()"
514
- >
440
+ <Button class =" w-full" @click =" store.resetStyleConfirm()" >
515
441
重置
516
442
</Button >
517
443
</div >
0 commit comments