Skip to content

Commit

Permalink
fix: remove label p in label span
Browse files Browse the repository at this point in the history
  • Loading branch information
@yanglbme
yanglbme committed Dec 13, 2024
1 parent d29bc6a commit 063c533
Showing 1 changed file with 45 additions and 119 deletions.
164 changes: 45 additions & 119 deletions src/components/CodemirrorEditor/EditorHeader/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ function copy() {
.replaceAll(`var(--blockquote-background)`, `#f7f7f7`)
.replaceAll(`var(--md-primary-color)`, primaryColor.value)
.replaceAll(/--md-primary-color:.+?;/g, ``)
.replace(/<span class="nodeLabel"([^>]*)><p[^>]*>(.*?)<\/p><\/span>/g, `<span class="nodeLabel"$1>$2</span>`)
clipboardDiv.focus()
Expand All @@ -139,18 +140,19 @@ function copy() {
// 兼容 Mermaid
const nodes = clipboardDiv.querySelectorAll(`.nodeLabel`)
for (const node of nodes) {
nodes.forEach((node) => {
const parent = node.parentElement!
const xmlns = parent.getAttribute(`xmlns`)!
const style = parent.getAttribute(`style`)!
const section = document.createElement(`section`)
section.setAttribute(`xmlns`, xmlns)
section.setAttribute(`style`, style)
section.innerHTML = parent.innerHTML
const grand = parent.parentElement!
grand.innerHTML = ``
grand.appendChild(section)
}
grand.innerHTML = `` // 清空父元素的内容
grand.appendChild(section) // 将新的 section 添加到父元素
})
window.getSelection()!.removeAllRanges()
const range = document.createRange()
Expand Down Expand Up @@ -198,8 +200,7 @@ function customStyle() {
<MenubarTrigger> 格式 </MenubarTrigger>
<MenubarContent class="w-60" align="start">
<MenubarItem
v-for="{ label, kbd, emitArgs } in formatItems"
:key="label"
v-for="{ label, kbd, emitArgs } in formatItems" :key="label"
@click="emitArgs[0] === 'addFormat' ? $emit(emitArgs[0], emitArgs[1]) : $emit(emitArgs[0])"
>
<el-icon class="mr-2 h-4 w-4" />
Expand Down Expand Up @@ -236,14 +237,9 @@ function customStyle() {
<h2>主题</h2>
<div class="grid grid-cols-3 justify-items-center gap-2">
<Button
v-for="{ label, value } in themeOptions"
:key="value"
class="w-full"
variant="outline"
:class="{
v-for="{ label, value } in themeOptions" :key="value" class="w-full" variant="outline" :class="{
'border-black dark:border-white': store.theme === value,
}"
@click="store.themeChanged(value)"
}" @click="store.themeChanged(value)"
>
{{ label }}
</Button>
Expand All @@ -253,10 +249,7 @@ function customStyle() {
<h2>字体</h2>
<div class="grid grid-cols-3 justify-items-center gap-2">
<Button
v-for="{ label, value } in fontFamilyOptions"
:key="value"
variant="outline"
class="w-full"
v-for="{ label, value } in fontFamilyOptions" :key="value" variant="outline" class="w-full"
:class="{ 'border-black dark:border-white': store.fontFamily === value }"
@click="store.fontChanged(value)"
>
Expand All @@ -268,14 +261,9 @@ function customStyle() {
<h2>字号</h2>
<div class="grid grid-cols-5 justify-items-center gap-2">
<Button
v-for="{ value, desc } in fontSizeOptions"
:key="value"
variant="outline"
class="w-full"
:class="{
v-for="{ value, desc } in fontSizeOptions" :key="value" variant="outline" class="w-full" :class="{
'border-black dark:border-white': store.fontSize === value,
}"
@click="store.sizeChanged(value)"
}" @click="store.sizeChanged(value)"
>
{{ desc }}
</Button>
Expand All @@ -285,18 +273,12 @@ function customStyle() {
<h2>主题色</h2>
<div class="grid grid-cols-3 justify-items-center gap-2">
<Button
v-for="{ label, value } in colorOptions"
:key="value"
class="w-full"
variant="outline"
:class="{
v-for="{ label, value } in colorOptions" :key="value" class="w-full" variant="outline" :class="{
'border-black dark:border-white': store.primaryColor === value,
}"
@click="store.colorChanged(value)"
}" @click="store.colorChanged(value)"
>
<span
class="mr-2 inline-block h-4 w-4 rounded-full"
:style="{
class="mr-2 inline-block h-4 w-4 rounded-full" :style="{
background: value,
}"
/>
Expand All @@ -307,30 +289,18 @@ function customStyle() {
<div class="space-y-2">
<h2>自定义主题色</h2>
<div>
<el-color-picker
v-model="primaryColor"
:teleported="false"
show-alpha
@change="store.colorChanged"
/>
<el-color-picker v-model="primaryColor" :teleported="false" show-alpha @change="store.colorChanged" />
</div>
</div>
<div class="space-y-2">
<h2>代码块主题</h2>
<div>
<Select
v-model="store.codeBlockTheme"
@update:model-value="store.codeBlockThemeChanged"
>
<Select v-model="store.codeBlockTheme" @update:model-value="store.codeBlockThemeChanged">
<SelectTrigger>
<SelectValue placeholder="Select a fruit" />
</SelectTrigger>
<SelectContent>
<SelectItem
v-for="{ label, value } in codeBlockThemeOptions"
:key="label"
:value="value"
>
<SelectItem v-for="{ label, value } in codeBlockThemeOptions" :key="label" :value="value">
{{ label }}
</SelectItem>
</SelectContent>
Expand All @@ -341,14 +311,9 @@ function customStyle() {
<h2>图注格式</h2>
<div class="grid grid-cols-3 justify-items-center gap-2">
<Button
v-for="{ label, value } in legendOptions"
:key="value"
class="w-full"
variant="outline"
:class="{
v-for="{ label, value } in legendOptions" :key="value" class="w-full" variant="outline" :class="{
'border-black dark:border-white': store.legend === value,
}"
@click="store.legendChanged(value)"
}" @click="store.legendChanged(value)"
>
{{ label }}
</Button>
Expand All @@ -359,22 +324,16 @@ function customStyle() {
<h2>Mac 代码块</h2>
<div class="grid grid-cols-5 justify-items-center gap-2">
<Button
class="w-full"
variant="outline"
:class="{
class="w-full" variant="outline" :class="{
'border-black dark:border-white': store.isMacCodeBlock,
}"
@click="!store.isMacCodeBlock && store.macCodeBlockChanged()"
}" @click="!store.isMacCodeBlock && store.macCodeBlockChanged()"
>
开启
</Button>
<Button
class="w-full"
variant="outline"
:class="{
class="w-full" variant="outline" :class="{
'border-black dark:border-white': !store.isMacCodeBlock,
}"
@click="store.isMacCodeBlock && store.macCodeBlockChanged()"
}" @click="store.isMacCodeBlock && store.macCodeBlockChanged()"
>
关闭
</Button>
Expand All @@ -384,22 +343,16 @@ function customStyle() {
<h2>微信外链转底部引用</h2>
<div class="grid grid-cols-5 justify-items-center gap-2">
<Button
class="w-full"
variant="outline"
:class="{
class="w-full" variant="outline" :class="{
'border-black dark:border-white': store.isCiteStatus,
}"
@click="!store.isCiteStatus && store.citeStatusChanged()"
}" @click="!store.isCiteStatus && store.citeStatusChanged()"
>
开启
</Button>
<Button
class="w-full"
variant="outline"
:class="{
class="w-full" variant="outline" :class="{
'border-black dark:border-white': !store.isCiteStatus,
}"
@click="store.isCiteStatus && store.citeStatusChanged()"
}" @click="store.isCiteStatus && store.citeStatusChanged()"
>
关闭
</Button>
Expand All @@ -409,22 +362,16 @@ function customStyle() {
<h2>段落首行缩进</h2>
<div class="grid grid-cols-5 justify-items-center gap-2">
<Button
class="w-full"
variant="outline"
:class="{
class="w-full" variant="outline" :class="{
'border-black dark:border-white': store.isUseIndent,
}"
@click="!store.isUseIndent && store.useIndentChanged()"
}" @click="!store.isUseIndent && store.useIndentChanged()"
>
开启
</Button>
<Button
class="w-full"
variant="outline"
:class="{
class="w-full" variant="outline" :class="{
'border-black dark:border-white': !store.isUseIndent,
}"
@click="store.isUseIndent && store.useIndentChanged()"
}" @click="store.isUseIndent && store.useIndentChanged()"
>
关闭
</Button>
Expand All @@ -434,22 +381,16 @@ function customStyle() {
<h2>自定义 CSS 面板</h2>
<div class="grid grid-cols-5 justify-items-center gap-2">
<Button
class="w-full"
variant="outline"
:class="{
class="w-full" variant="outline" :class="{
'border-black dark:border-white': displayStore.isShowCssEditor,
}"
@click="!displayStore.isShowCssEditor && customStyle()"
}" @click="!displayStore.isShowCssEditor && customStyle()"
>
开启
</Button>
<Button
class="w-full"
variant="outline"
:class="{
class="w-full" variant="outline" :class="{
'border-black dark:border-white': !displayStore.isShowCssEditor,
}"
@click="displayStore.isShowCssEditor && customStyle()"
}" @click="displayStore.isShowCssEditor && customStyle()"
>
关闭
</Button>
Expand All @@ -459,22 +400,16 @@ function customStyle() {
<h2>编辑区位置</h2>
<div class="grid grid-cols-5 justify-items-center gap-2">
<Button
class="w-full"
variant="outline"
:class="{
class="w-full" variant="outline" :class="{
'border-black dark:border-white': store.isEditOnLeft,
}"
@click="!store.isEditOnLeft && store.toggleEditOnLeft()"
}" @click="!store.isEditOnLeft && store.toggleEditOnLeft()"
>
左侧
</Button>
<Button
class="w-full"
variant="outline"
:class="{
class="w-full" variant="outline" :class="{
'border-black dark:border-white': !store.isEditOnLeft,
}"
@click="store.isEditOnLeft && store.toggleEditOnLeft()"
}" @click="store.isEditOnLeft && store.toggleEditOnLeft()"
>
右侧
</Button>
Expand All @@ -484,22 +419,16 @@ function customStyle() {
<h2>模式</h2>
<div class="grid grid-cols-5 justify-items-center gap-2">
<Button
class="w-full"
variant="outline"
:class="{
class="w-full" variant="outline" :class="{
'border-black dark:border-white': !isDark,
}"
@click="store.toggleDark(false)"
}" @click="store.toggleDark(false)"
>
<Sun class="h-4 w-4" />
</Button>
<Button
class="w-full"
variant="outline"
:class="{
class="w-full" variant="outline" :class="{
'border-black dark:border-white': isDark,
}"
@click="store.toggleDark(true)"
}" @click="store.toggleDark(true)"
>
<Moon class="h-4 w-4" />
</Button>
Expand All @@ -508,10 +437,7 @@ function customStyle() {
<div class="space-y-2">
<h2>样式配置</h2>
<div>
<Button
class="w-full"
@click="store.resetStyleConfirm()"
>
<Button class="w-full" @click="store.resetStyleConfirm()">
重置
</Button>
</div>
Expand Down

0 comments on commit 063c533

Please sign in to comment.