Skip to content

Commit 063c533

Browse files
committed
fix: remove label p in label span
1 parent d29bc6a commit 063c533

File tree

1 file changed

+45
-119
lines changed
  • src/components/CodemirrorEditor/EditorHeader

1 file changed

+45
-119
lines changed

src/components/CodemirrorEditor/EditorHeader/index.vue

Lines changed: 45 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ function copy() {
126126
.replaceAll(`var(--blockquote-background)`, `#f7f7f7`)
127127
.replaceAll(`var(--md-primary-color)`, primaryColor.value)
128128
.replaceAll(/--md-primary-color:.+?;/g, ``)
129+
.replace(/<span class="nodeLabel"([^>]*)><p[^>]*>(.*?)<\/p><\/span>/g, `<span class="nodeLabel"$1>$2</span>`)
129130
130131
clipboardDiv.focus()
131132
@@ -139,18 +140,19 @@ function copy() {
139140
140141
// 兼容 Mermaid
141142
const nodes = clipboardDiv.querySelectorAll(`.nodeLabel`)
142-
for (const node of nodes) {
143+
nodes.forEach((node) => {
143144
const parent = node.parentElement!
144145
const xmlns = parent.getAttribute(`xmlns`)!
145146
const style = parent.getAttribute(`style`)!
146147
const section = document.createElement(`section`)
147148
section.setAttribute(`xmlns`, xmlns)
148149
section.setAttribute(`style`, style)
149150
section.innerHTML = parent.innerHTML
151+
150152
const grand = parent.parentElement!
151-
grand.innerHTML = ``
152-
grand.appendChild(section)
153-
}
153+
grand.innerHTML = `` // 清空父元素的内容
154+
grand.appendChild(section) // 将新的 section 添加到父元素
155+
})
154156
155157
window.getSelection()!.removeAllRanges()
156158
const range = document.createRange()
@@ -198,8 +200,7 @@ function customStyle() {
198200
<MenubarTrigger> 格式 </MenubarTrigger>
199201
<MenubarContent class="w-60" align="start">
200202
<MenubarItem
201-
v-for="{ label, kbd, emitArgs } in formatItems"
202-
:key="label"
203+
v-for="{ label, kbd, emitArgs } in formatItems" :key="label"
203204
@click="emitArgs[0] === 'addFormat' ? $emit(emitArgs[0], emitArgs[1]) : $emit(emitArgs[0])"
204205
>
205206
<el-icon class="mr-2 h-4 w-4" />
@@ -236,14 +237,9 @@ function customStyle() {
236237
<h2>主题</h2>
237238
<div class="grid grid-cols-3 justify-items-center gap-2">
238239
<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="{
244241
'border-black dark:border-white': store.theme === value,
245-
}"
246-
@click="store.themeChanged(value)"
242+
}" @click="store.themeChanged(value)"
247243
>
248244
{{ label }}
249245
</Button>
@@ -253,10 +249,7 @@ function customStyle() {
253249
<h2>字体</h2>
254250
<div class="grid grid-cols-3 justify-items-center gap-2">
255251
<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"
260253
:class="{ 'border-black dark:border-white': store.fontFamily === value }"
261254
@click="store.fontChanged(value)"
262255
>
@@ -268,14 +261,9 @@ function customStyle() {
268261
<h2>字号</h2>
269262
<div class="grid grid-cols-5 justify-items-center gap-2">
270263
<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="{
276265
'border-black dark:border-white': store.fontSize === value,
277-
}"
278-
@click="store.sizeChanged(value)"
266+
}" @click="store.sizeChanged(value)"
279267
>
280268
{{ desc }}
281269
</Button>
@@ -285,18 +273,12 @@ function customStyle() {
285273
<h2>主题色</h2>
286274
<div class="grid grid-cols-3 justify-items-center gap-2">
287275
<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="{
293277
'border-black dark:border-white': store.primaryColor === value,
294-
}"
295-
@click="store.colorChanged(value)"
278+
}" @click="store.colorChanged(value)"
296279
>
297280
<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="{
300282
background: value,
301283
}"
302284
/>
@@ -307,30 +289,18 @@ function customStyle() {
307289
<div class="space-y-2">
308290
<h2>自定义主题色</h2>
309291
<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" />
316293
</div>
317294
</div>
318295
<div class="space-y-2">
319296
<h2>代码块主题</h2>
320297
<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">
325299
<SelectTrigger>
326300
<SelectValue placeholder="Select a fruit" />
327301
</SelectTrigger>
328302
<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">
334304
{{ label }}
335305
</SelectItem>
336306
</SelectContent>
@@ -341,14 +311,9 @@ function customStyle() {
341311
<h2>图注格式</h2>
342312
<div class="grid grid-cols-3 justify-items-center gap-2">
343313
<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="{
349315
'border-black dark:border-white': store.legend === value,
350-
}"
351-
@click="store.legendChanged(value)"
316+
}" @click="store.legendChanged(value)"
352317
>
353318
{{ label }}
354319
</Button>
@@ -359,22 +324,16 @@ function customStyle() {
359324
<h2>Mac 代码块</h2>
360325
<div class="grid grid-cols-5 justify-items-center gap-2">
361326
<Button
362-
class="w-full"
363-
variant="outline"
364-
:class="{
327+
class="w-full" variant="outline" :class="{
365328
'border-black dark:border-white': store.isMacCodeBlock,
366-
}"
367-
@click="!store.isMacCodeBlock && store.macCodeBlockChanged()"
329+
}" @click="!store.isMacCodeBlock && store.macCodeBlockChanged()"
368330
>
369331
开启
370332
</Button>
371333
<Button
372-
class="w-full"
373-
variant="outline"
374-
:class="{
334+
class="w-full" variant="outline" :class="{
375335
'border-black dark:border-white': !store.isMacCodeBlock,
376-
}"
377-
@click="store.isMacCodeBlock && store.macCodeBlockChanged()"
336+
}" @click="store.isMacCodeBlock && store.macCodeBlockChanged()"
378337
>
379338
关闭
380339
</Button>
@@ -384,22 +343,16 @@ function customStyle() {
384343
<h2>微信外链转底部引用</h2>
385344
<div class="grid grid-cols-5 justify-items-center gap-2">
386345
<Button
387-
class="w-full"
388-
variant="outline"
389-
:class="{
346+
class="w-full" variant="outline" :class="{
390347
'border-black dark:border-white': store.isCiteStatus,
391-
}"
392-
@click="!store.isCiteStatus && store.citeStatusChanged()"
348+
}" @click="!store.isCiteStatus && store.citeStatusChanged()"
393349
>
394350
开启
395351
</Button>
396352
<Button
397-
class="w-full"
398-
variant="outline"
399-
:class="{
353+
class="w-full" variant="outline" :class="{
400354
'border-black dark:border-white': !store.isCiteStatus,
401-
}"
402-
@click="store.isCiteStatus && store.citeStatusChanged()"
355+
}" @click="store.isCiteStatus && store.citeStatusChanged()"
403356
>
404357
关闭
405358
</Button>
@@ -409,22 +362,16 @@ function customStyle() {
409362
<h2>段落首行缩进</h2>
410363
<div class="grid grid-cols-5 justify-items-center gap-2">
411364
<Button
412-
class="w-full"
413-
variant="outline"
414-
:class="{
365+
class="w-full" variant="outline" :class="{
415366
'border-black dark:border-white': store.isUseIndent,
416-
}"
417-
@click="!store.isUseIndent && store.useIndentChanged()"
367+
}" @click="!store.isUseIndent && store.useIndentChanged()"
418368
>
419369
开启
420370
</Button>
421371
<Button
422-
class="w-full"
423-
variant="outline"
424-
:class="{
372+
class="w-full" variant="outline" :class="{
425373
'border-black dark:border-white': !store.isUseIndent,
426-
}"
427-
@click="store.isUseIndent && store.useIndentChanged()"
374+
}" @click="store.isUseIndent && store.useIndentChanged()"
428375
>
429376
关闭
430377
</Button>
@@ -434,22 +381,16 @@ function customStyle() {
434381
<h2>自定义 CSS 面板</h2>
435382
<div class="grid grid-cols-5 justify-items-center gap-2">
436383
<Button
437-
class="w-full"
438-
variant="outline"
439-
:class="{
384+
class="w-full" variant="outline" :class="{
440385
'border-black dark:border-white': displayStore.isShowCssEditor,
441-
}"
442-
@click="!displayStore.isShowCssEditor && customStyle()"
386+
}" @click="!displayStore.isShowCssEditor && customStyle()"
443387
>
444388
开启
445389
</Button>
446390
<Button
447-
class="w-full"
448-
variant="outline"
449-
:class="{
391+
class="w-full" variant="outline" :class="{
450392
'border-black dark:border-white': !displayStore.isShowCssEditor,
451-
}"
452-
@click="displayStore.isShowCssEditor && customStyle()"
393+
}" @click="displayStore.isShowCssEditor && customStyle()"
453394
>
454395
关闭
455396
</Button>
@@ -459,22 +400,16 @@ function customStyle() {
459400
<h2>编辑区位置</h2>
460401
<div class="grid grid-cols-5 justify-items-center gap-2">
461402
<Button
462-
class="w-full"
463-
variant="outline"
464-
:class="{
403+
class="w-full" variant="outline" :class="{
465404
'border-black dark:border-white': store.isEditOnLeft,
466-
}"
467-
@click="!store.isEditOnLeft && store.toggleEditOnLeft()"
405+
}" @click="!store.isEditOnLeft && store.toggleEditOnLeft()"
468406
>
469407
左侧
470408
</Button>
471409
<Button
472-
class="w-full"
473-
variant="outline"
474-
:class="{
410+
class="w-full" variant="outline" :class="{
475411
'border-black dark:border-white': !store.isEditOnLeft,
476-
}"
477-
@click="store.isEditOnLeft && store.toggleEditOnLeft()"
412+
}" @click="store.isEditOnLeft && store.toggleEditOnLeft()"
478413
>
479414
右侧
480415
</Button>
@@ -484,22 +419,16 @@ function customStyle() {
484419
<h2>模式</h2>
485420
<div class="grid grid-cols-5 justify-items-center gap-2">
486421
<Button
487-
class="w-full"
488-
variant="outline"
489-
:class="{
422+
class="w-full" variant="outline" :class="{
490423
'border-black dark:border-white': !isDark,
491-
}"
492-
@click="store.toggleDark(false)"
424+
}" @click="store.toggleDark(false)"
493425
>
494426
<Sun class="h-4 w-4" />
495427
</Button>
496428
<Button
497-
class="w-full"
498-
variant="outline"
499-
:class="{
429+
class="w-full" variant="outline" :class="{
500430
'border-black dark:border-white': isDark,
501-
}"
502-
@click="store.toggleDark(true)"
431+
}" @click="store.toggleDark(true)"
503432
>
504433
<Moon class="h-4 w-4" />
505434
</Button>
@@ -508,10 +437,7 @@ function customStyle() {
508437
<div class="space-y-2">
509438
<h2>样式配置</h2>
510439
<div>
511-
<Button
512-
class="w-full"
513-
@click="store.resetStyleConfirm()"
514-
>
440+
<Button class="w-full" @click="store.resetStyleConfirm()">
515441
重置
516442
</Button>
517443
</div>

0 commit comments

Comments
 (0)