chore: update copy func (#496)

src/components/CodemirrorEditor/EditorHeader/index.vue

@@ -14,11 +14,26 @@ import {
   themeOptions,
 } from '@/config'
 import { useDisplayStore, useStore } from '@/stores'
-import { addPrefix, mergeCss, solveWeChatImage } from '@/utils'
-import { ChevronDownIcon, Moon, PanelLeftClose, PanelLeftOpen, Settings, Sun } from 'lucide-vue-next'
+import {
+  addPrefix,
+  processClipboardContent,
+} from '@/utils'
+import {
+  ChevronDownIcon,
+  Moon,
+  PanelLeftClose,
+  PanelLeftOpen,
+  Settings,
+  Sun,
+} from 'lucide-vue-next'
 import PickColors from 'vue-pick-colors'
 
-const emit = defineEmits([`addFormat`, `formatContent`, `startCopy`, `endCopy`])
+const emit = defineEmits([
+  `addFormat`,
+  `formatContent`,
+  `startCopy`,
+  `endCopy`,
+])
 
 const formatItems = [
   {
@@ -64,34 +79,10 @@ const copyMode = useStorage(addPrefix(`copyMode`), `txt`)
 const source = ref(``)
 const { copy: copyContent } = useClipboard({ source })
 
-function creatEmptyNode() {
-  const node = document.createElement(`p`)
-  node.style.fontSize = `0`
-  node.style.lineHeight = `0`
-  node.style.margin = `0`
-  node.innerHTML = ` `
-  return node
-}
-
 // 复制到微信公众号
 function copy() {
   emit(`startCopy`)
   setTimeout(() => {
-    function modifyHtmlStructure(htmlString: string) {
-      // 创建一个 div 元素来暂存原始 HTML 字符串
-      const tempDiv = document.createElement(`div`)
-      tempDiv.innerHTML = htmlString
-
-      const originalItems = tempDiv.querySelectorAll(`li > ul, li > ol`)
-
-      originalItems.forEach((originalItem) => {
-        originalItem.parentElement!.insertAdjacentElement(`afterend`, originalItem)
-      })
-
-      // 返回修改后的 HTML 字符串
-      return tempDiv.innerHTML
-    }
-
     // 如果是深色模式，复制之前需要先切换到白天模式
     const isBeforeDark = isDark.value
     if (isBeforeDark) {
@@ -99,49 +90,11 @@ function copy() {
     }
 
     nextTick(async () => {
-      solveWeChatImage()
-
+      processClipboardContent(primaryColor.value)
       const clipboardDiv = document.getElementById(`output`)!
-      clipboardDiv.innerHTML = mergeCss(clipboardDiv.innerHTML)
-      clipboardDiv.innerHTML = modifyHtmlStructure(clipboardDiv.innerHTML)
-      clipboardDiv.innerHTML = clipboardDiv.innerHTML
-        // 公众号不支持 position， 转换为等价的 translateY
-        .replace(/top:(.*?)em/g, `transform: translateY($1em)`)
-        // 适配主题中的颜色变量
-        .replace(/hsl\(var\(--foreground\)\)/g, `#3f3f3f`)
-        .replace(/var\(--blockquote-background\)/g, `#f7f7f7`)
-        .replace(/var\(--md-primary-color\)/g, primaryColor.value)
-        .replace(/--md-primary-color:.+?;/g, ``)
-        .replace(/<span class="nodeLabel"([^>]*)><p[^>]*>(.*?)<\/p><\/span>/g, `<span class="nodeLabel"$1>$2</span>`)
-
       clipboardDiv.focus()
-
-      // 由于 svg 无法复制， 在前后各插入一个空白节点
-      const beforeNode = creatEmptyNode()
-      const afterNode = creatEmptyNode()
-      clipboardDiv.insertBefore(beforeNode, clipboardDiv.firstChild)
-      clipboardDiv.appendChild(afterNode)
-
-      // 兼容 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 temp = clipboardDiv.innerHTML
-
       if (copyMode.value === `txt`) {
         const range = document.createRange()
         range.setStartBefore(clipboardDiv.firstChild!)
@@ -150,19 +103,20 @@ function copy() {
         document.execCommand(`copy`)
         window.getSelection()!.removeAllRanges()
       }
-
       clipboardDiv.innerHTML = output.value
-
       if (isBeforeDark) {
         nextTick(() => toggleDark())
       }
-
       if (copyMode.value === `html`) {
         await copyContent(temp)
       }
 
       // 输出提示
-      toast.success(copyMode.value === `html` ? `已复制 HTML 源码，请进行下一步操作。` : `已复制渲染后的文章到剪贴板，可直接到公众号后台粘贴。`)
+      toast.success(
+        copyMode.value === `html`
+          ? `已复制 HTML 源码，请进行下一步操作。`
+          : `已复制渲染后的文章到剪贴板，可直接到公众号后台粘贴。`,
+      )
 
       editorRefresh()
       emit(`endCopy`)
@@ -177,7 +131,9 @@ function customStyle() {
   }, 50)
 }
 
-const pickColorsContainer = useTemplateRef<HTMLElement | undefined>(`pickColorsContainer`)
+const pickColorsContainer = useTemplateRef<HTMLElement | undefined>(
+  `pickColorsContainer`,
+)
 const format = ref<Format>(`rgb`)
 const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
 </script>
@@ -191,18 +147,30 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
         <MenubarTrigger> 格式 </MenubarTrigger>
         <MenubarContent class="w-60" align="start">
           <MenubarCheckboxItem
-            v-for="{ label, kbd, emitArgs } in formatItems" :key="label"
-            @click="emitArgs[0] === 'addFormat' ? $emit(emitArgs[0], emitArgs[1]) : $emit(emitArgs[0])"
+            v-for="{ label, kbd, emitArgs } in formatItems"
+            :key="label"
+            @click="
+              emitArgs[0] === 'addFormat'
+                ? $emit(emitArgs[0], emitArgs[1])
+                : $emit(emitArgs[0])
+            "
           >
             {{ label }}
             <MenubarShortcut>
-              <kbd v-for="item in kbd" :key="item" class="mx-1 bg-gray-2 dark:bg-stone-9">
+              <kbd
+                v-for="item in kbd"
+                :key="item"
+                class="mx-1 bg-gray-2 dark:bg-stone-9"
+              >
                 {{ item }}
               </kbd>
             </MenubarShortcut>
           </MenubarCheckboxItem>
           <MenubarSeparator />
-          <MenubarCheckboxItem :checked="isCiteStatus" @click="citeStatusChanged()">
+          <MenubarCheckboxItem
+            :checked="isCiteStatus"
+            @click="citeStatusChanged()"
+          >
             微信外链转底部引用
           </MenubarCheckboxItem>
         </MenubarContent>
@@ -212,10 +180,20 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
       <HelpDropdown />
     </Menubar>
 
-    <Button v-if="!store.isOpenPostSlider" variant="outline" class="mr-2" @click="store.isOpenPostSlider = true">
+    <Button
+      v-if="!store.isOpenPostSlider"
+      variant="outline"
+      class="mr-2"
+      @click="store.isOpenPostSlider = true"
+    >
       <PanelLeftOpen class="size-4" />
     </Button>
-    <Button v-else variant="outline" class="mr-2" @click="store.isOpenPostSlider = false">
+    <Button
+      v-else
+      variant="outline"
+      class="mr-2"
+      @click="store.isOpenPostSlider = false"
+    >
       <PanelLeftClose class="size-4" />
     </Button>
     <Popover>
@@ -230,9 +208,14 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <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>
@@ -242,8 +225,13 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <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"
-                :class="{ 'border-black dark:border-white': store.fontFamily === value }"
+                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)"
               >
                 {{ label }}
@@ -254,9 +242,14 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <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>
@@ -266,12 +259,19 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <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="{
-                  'border-black dark:border-white': store.primaryColor === value,
-                }" @click="store.colorChanged(value)"
+                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)"
               >
                 <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,
                   }"
                 />
@@ -285,7 +285,8 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
               <PickColors
                 v-if="pickColorsContainer"
                 v-model:value="primaryColor"
-                show-alpha :format="format"
+                show-alpha
+                :format="format"
                 :format-options="formatOptions"
                 :theme="store.isDark ? 'dark' : 'light'"
                 :popup-container="pickColorsContainer"
@@ -296,12 +297,19 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
           <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>
@@ -312,9 +320,14 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <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>
@@ -325,16 +338,22 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <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>
@@ -344,16 +363,22 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <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>
@@ -363,16 +388,22 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <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>
@@ -382,16 +413,23 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <h2>自定义 CSS 面板</h2>
             <div class="grid grid-cols-5 justify-items-center gap-2">
               <Button
-                class="w-full" variant="outline" :class="{
-                  'border-black dark:border-white': displayStore.isShowCssEditor,
-                }" @click="!displayStore.isShowCssEditor && customStyle()"
+                class="w-full"
+                variant="outline"
+                :class="{
+                  'border-black dark:border-white':
+                    displayStore.isShowCssEditor,
+                }"
+                @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>
@@ -401,16 +439,22 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <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>
@@ -420,16 +464,22 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <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>
@@ -445,7 +495,9 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
       </PopoverContent>
     </Popover>
 
-    <div class="space-x-1 bg-background text-background-foreground mx-2 flex items-center border rounded-md">
+    <div
+      class="space-x-1 bg-background text-background-foreground mx-2 flex items-center border rounded-md"
+    >
       <Button variant="ghost" class="shadow-none" @click="copy">
         复制
       </Button>
@@ -456,11 +508,7 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <ChevronDownIcon class="text-secondary-foreground h-4 w-4" />
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent
-          align="end"
-          :align-offset="-5"
-          class="w-[200px]"
-        >
+        <DropdownMenuContent align="end" :align-offset="-5" class="w-[200px]">
           <DropdownMenuRadioGroup v-model="copyMode">
             <DropdownMenuRadioItem value="txt">
               公众号格式

src/utils/index.ts

@@ -340,20 +340,86 @@ export function removeLeft(str: string) {
 export function solveWeChatImage() {
   const clipboardDiv = document.getElementById(`output`)!
   const images = clipboardDiv.getElementsByTagName(`img`)
-  for (let i = 0; i < images.length; i++) {
-    const image = images[i]
+
+  Array.from(images).forEach((image) => {
     const width = image.getAttribute(`width`)!
     const height = image.getAttribute(`height`)!
     image.removeAttribute(`width`)
     image.removeAttribute(`height`)
     image.style.width = width
     image.style.height = height
-  }
+  })
 }
 
-export function mergeCss(html: string) {
+export function mergeCss(html: string): string {
   return juice(html, {
     inlinePseudoElements: true,
     preserveImportant: true,
   })
 }
+
+export function createEmptyNode(): HTMLElement {
+  const node = document.createElement(`p`)
+  node.style.fontSize = `0`
+  node.style.lineHeight = `0`
+  node.style.margin = `0`
+  node.innerHTML = `&nbsp;`
+  return node
+}
+
+export function modifyHtmlStructure(htmlString: string): string {
+  const tempDiv = document.createElement(`div`)
+  tempDiv.innerHTML = htmlString
+
+  // 移动 `li > ul` 和 `li > ol` 到 `li` 后面
+  tempDiv.querySelectorAll(`li > ul, li > ol`).forEach((originalItem) => {
+    originalItem.parentElement!.insertAdjacentElement(`afterend`, originalItem)
+  })
+
+  return tempDiv.innerHTML
+}
+
+export function processClipboardContent(primaryColor: string) {
+  const clipboardDiv = document.getElementById(`output`)!
+
+  // 先合并 CSS 和修改 HTML 结构
+  clipboardDiv.innerHTML = modifyHtmlStructure(mergeCss(clipboardDiv.innerHTML))
+
+  // 处理样式和颜色变量
+  clipboardDiv.innerHTML = clipboardDiv.innerHTML
+    .replace(/top:(.*?)em/g, `transform: translateY($1em)`)
+    .replace(/hsl\(var\(--foreground\)\)/g, `#3f3f3f`)
+    .replace(/var\(--blockquote-background\)/g, `#f7f7f7`)
+    .replace(/var\(--md-primary-color\)/g, primaryColor)
+    .replace(/--md-primary-color:.+?;/g, ``)
+    .replace(
+      /<span class="nodeLabel"([^>]*)><p[^>]*>(.*?)<\/p><\/span>/g,
+      `<span class="nodeLabel"$1>$2</span>`,
+    )
+
+  // 处理图片大小
+  solveWeChatImage()
+
+  // 添加空白节点用于兼容 SVG 复制
+  const beforeNode = createEmptyNode()
+  const afterNode = createEmptyNode()
+  clipboardDiv.insertBefore(beforeNode, clipboardDiv.firstChild)
+  clipboardDiv.appendChild(afterNode)
+
+  // 兼容 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)
+  })
+}