fix: copy of mermaid (#470)

Co-authored-by: Libin YANG <szuyanglb@outlook.com>

src/assets/example/markdown.md

@@ -131,6 +131,17 @@ $$
 
 Mermaid 是强大的可视化工具，可以在 Markdown 中创建流程图、时序图等。
 
+```mermaid
+graph LR
+  A[GraphCommand] --> B[update]
+  A --> C[goto]
+  A --> D[send]
+  
+  B --> B1[更新状态]
+  C --> C1[流程控制]
+  D --> D1[消息传递]
+```
+
 ```mermaid
 graph TD;
   A-->B;

src/components/CodemirrorEditor/EditorHeader/index.vue

@@ -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()
 
@@ -137,6 +138,22 @@ function copy() {
       p.innerHTML = `&nbsp;`
       clipboardDiv.insertBefore(p, clipboardDiv.firstChild)
 
+      // 兼容 Mermaid
+      const nodes = clipboardDiv.querySelectorAll(`.nodeLabel`)
+      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)
+      })
+
       window.getSelection()!.removeAllRanges()
       const range = document.createRange()
 
@@ -183,8 +200,7 @@ function customStyle() {
         <MenubarTrigger> 格式 </MenubarTrigger>
         <MenubarContent class="w-60" align="start">
           <MenubarItem
-            v-for="{ label, kbd, emitArgs } in formatItems"
+            v-for="{ label, kbd, emitArgs } in formatItems" :key="label"
-            :key="label"
             @click="emitArgs[0] === 'addFormat' ? $emit(emitArgs[0], emitArgs[1]) : $emit(emitArgs[0])"
           >
             <el-icon class="mr-2 h-4 w-4" />
@@ -221,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"
+                v-for="{ label, value } in themeOptions" :key="value" class="w-full" variant="outline" :class="{
-                :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>
@@ -238,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"
+                v-for="{ label, value } in fontFamilyOptions" :key="value" variant="outline" class="w-full"
-                :key="value"
-                variant="outline"
-                class="w-full"
                 :class="{ 'border-black dark:border-white': store.fontFamily === value }"
                 @click="store.fontChanged(value)"
               >
@@ -253,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"
+                v-for="{ value, desc } in fontSizeOptions" :key="value" variant="outline" class="w-full" :class="{
-                :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>
@@ -270,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"
+                v-for="{ label, value } in colorOptions" :key="value" class="w-full" variant="outline" :class="{
-                :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"
+                  class="mr-2 inline-block h-4 w-4 rounded-full" :style="{
-                  :style="{
                     background: value,
                   }"
                 />
@@ -292,30 +289,18 @@ function customStyle() {
           <div class="space-y-2">
             <h2>自定义主题色</h2>
             <div>
-              <el-color-picker
+              <el-color-picker v-model="primaryColor" :teleported="false" show-alpha @change="store.colorChanged" />
-                v-model="primaryColor"
-                :teleported="false"
-                show-alpha
-                @change="store.colorChanged"
-              />
             </div>
           </div>
           <div class="space-y-2">
             <h2>代码块主题</h2>
             <div>
-              <Select
+              <Select v-model="store.codeBlockTheme" @update:model-value="store.codeBlockThemeChanged">
-                v-model="store.codeBlockTheme"
-                @update:model-value="store.codeBlockThemeChanged"
-              >
                 <SelectTrigger>
                   <SelectValue placeholder="Select a fruit" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem
+                  <SelectItem v-for="{ label, value } in codeBlockThemeOptions" :key="label" :value="value">
-                    v-for="{ label, value } in codeBlockThemeOptions"
-                    :key="label"
-                    :value="value"
-                  >
                     {{ label }}
                   </SelectItem>
                 </SelectContent>
@@ -326,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"
+                v-for="{ label, value } in legendOptions" :key="value" class="w-full" variant="outline" :class="{
-                :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>
@@ -344,22 +324,16 @@ function customStyle() {
             <h2>Mac 代码块</h2>
             <div class="grid grid-cols-5 justify-items-center gap-2">
               <Button
-                class="w-full"
+                class="w-full" variant="outline" :class="{
-                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"
+                class="w-full" variant="outline" :class="{
-                variant="outline"
-                :class="{
                   'border-black dark:border-white': !store.isMacCodeBlock,
-                }"
+                }" @click="store.isMacCodeBlock && store.macCodeBlockChanged()"
-                @click="store.isMacCodeBlock && store.macCodeBlockChanged()"
               >
                 关闭
               </Button>
@@ -369,22 +343,16 @@ function customStyle() {
             <h2>微信外链转底部引用</h2>
             <div class="grid grid-cols-5 justify-items-center gap-2">
               <Button
-                class="w-full"
+                class="w-full" variant="outline" :class="{
-                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"
+                class="w-full" variant="outline" :class="{
-                variant="outline"
-                :class="{
                   'border-black dark:border-white': !store.isCiteStatus,
-                }"
+                }" @click="store.isCiteStatus && store.citeStatusChanged()"
-                @click="store.isCiteStatus && store.citeStatusChanged()"
               >
                 关闭
               </Button>
@@ -394,22 +362,16 @@ function customStyle() {
             <h2>段落首行缩进</h2>
             <div class="grid grid-cols-5 justify-items-center gap-2">
               <Button
-                class="w-full"
+                class="w-full" variant="outline" :class="{
-                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"
+                class="w-full" variant="outline" :class="{
-                variant="outline"
-                :class="{
                   'border-black dark:border-white': !store.isUseIndent,
-                }"
+                }" @click="store.isUseIndent && store.useIndentChanged()"
-                @click="store.isUseIndent && store.useIndentChanged()"
               >
                 关闭
               </Button>
@@ -419,22 +381,16 @@ function customStyle() {
             <h2>自定义 CSS 面板</h2>
             <div class="grid grid-cols-5 justify-items-center gap-2">
               <Button
-                class="w-full"
+                class="w-full" variant="outline" :class="{
-                variant="outline"
-                :class="{
                   'border-black dark:border-white': displayStore.isShowCssEditor,
-                }"
+                }" @click="!displayStore.isShowCssEditor && customStyle()"
-                @click="!displayStore.isShowCssEditor && customStyle()"
               >
                 开启
               </Button>
               <Button
-                class="w-full"
+                class="w-full" variant="outline" :class="{
-                variant="outline"
-                :class="{
                   'border-black dark:border-white': !displayStore.isShowCssEditor,
-                }"
+                }" @click="displayStore.isShowCssEditor && customStyle()"
-                @click="displayStore.isShowCssEditor && customStyle()"
               >
                 关闭
               </Button>
@@ -444,22 +400,16 @@ function customStyle() {
             <h2>编辑区位置</h2>
             <div class="grid grid-cols-5 justify-items-center gap-2">
               <Button
-                class="w-full"
+                class="w-full" variant="outline" :class="{
-                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"
+                class="w-full" variant="outline" :class="{
-                variant="outline"
-                :class="{
                   'border-black dark:border-white': !store.isEditOnLeft,
-                }"
+                }" @click="store.isEditOnLeft && store.toggleEditOnLeft()"
-                @click="store.isEditOnLeft && store.toggleEditOnLeft()"
               >
                 右侧
               </Button>
@@ -469,22 +419,16 @@ function customStyle() {
             <h2>模式</h2>
             <div class="grid grid-cols-5 justify-items-center gap-2">
               <Button
-                class="w-full"
+                class="w-full" variant="outline" :class="{
-                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"
+                class="w-full" variant="outline" :class="{
-                variant="outline"
-                :class="{
                   'border-black dark:border-white': isDark,
-                }"
+                }" @click="store.toggleDark(true)"
-                @click="store.toggleDark(true)"
               >
                 <Moon class="h-4 w-4" />
               </Button>
@@ -493,10 +437,7 @@ function customStyle() {
           <div class="space-y-2">
             <h2>样式配置</h2>
             <div>
-              <Button
+              <Button class="w-full" @click="store.resetStyleConfirm()">
-                class="w-full"
-                @click="store.resetStyleConfirm()"
-              >
                 重置
               </Button>
             </div>