From 9ca53d6b44cc3910e0661620027a6cf5e3aba735 Mon Sep 17 00:00:00 2001
From: YangFong <yangfong2022@gmail.com>
Date: Sun, 22 Dec 2024 14:15:28 +0800
Subject: [PATCH 1/3] feat: support html copy

close #488
---
 .../CodemirrorEditor/EditorHeader/index.vue   | 59 +++++++++++++++----
 src/components/ui/separator/Separator.vue     | 35 +++++++++++
 src/components/ui/separator/index.ts          |  1 +
 3 files changed, 83 insertions(+), 12 deletions(-)
 create mode 100644 src/components/ui/separator/Separator.vue
 create mode 100644 src/components/ui/separator/index.ts

diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue
index 4acd54d3c..5b546153e 100644
--- a/src/components/CodemirrorEditor/EditorHeader/index.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/index.vue
@@ -14,8 +14,8 @@ import {
   themeOptions,
 } from '@/config'
 import { useDisplayStore, useStore } from '@/stores'
-import { mergeCss, solveWeChatImage } from '@/utils'
-import { Moon, PanelLeftClose, PanelLeftOpen, Settings, Sun } from 'lucide-vue-next'
+import { addPrefix, mergeCss, solveWeChatImage } 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`])
@@ -60,6 +60,10 @@ const { isDark, isCiteStatus, output, primaryColor } = storeToRefs(store)
 
 const { toggleDark, editorRefresh, citeStatusChanged } = store
 
+const copyMode = useStorage(addPrefix(`copyMode`), `txt`)
+const source = ref(``)
+const { copy: copyContent } = useClipboard({ source })
+
 // 复制到微信公众号
 function copy() {
   emit(`startCopy`)
@@ -85,7 +89,7 @@ function copy() {
       toggleDark()
     }
 
-    nextTick(() => {
+    nextTick(async () => {
       solveWeChatImage()
 
       const clipboardDiv = document.getElementById(`output`)!
@@ -128,13 +132,19 @@ function copy() {
       })
 
       window.getSelection()!.removeAllRanges()
-      const range = document.createRange()
 
-      range.setStartBefore(clipboardDiv.firstChild!)
-      range.setEndAfter(clipboardDiv.lastChild!)
-      window.getSelection()!.addRange(range)
-      document.execCommand(`copy`)
-      window.getSelection()!.removeAllRanges()
+      if (copyMode.value === `html`) {
+        await copyContent(clipboardDiv.innerHTML)
+      }
+      else {
+        const range = document.createRange()
+        range.setStartBefore(clipboardDiv.firstChild!)
+        range.setEndAfter(clipboardDiv.lastChild!)
+        window.getSelection()!.addRange(range)
+        document.execCommand(`copy`)
+        window.getSelection()!.removeAllRanges()
+      }
+
       clipboardDiv.innerHTML = output.value
 
       if (isBeforeDark) {
@@ -424,9 +434,34 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
         </div>
       </PopoverContent>
     </Popover>
-    <Button variant="outline" class="mx-2" @click="copy">
-      复制
-    </Button>
+
+    <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>
+      <Separator orientation="vertical" class="h-5" />
+      <DropdownMenu v-model="copyMode">
+        <DropdownMenuTrigger as-child>
+          <Button variant="ghost" class="px-2 shadow-none">
+            <ChevronDownIcon class="text-secondary-foreground h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align="end"
+          :align-offset="-5"
+          class="w-[200px]"
+        >
+          <DropdownMenuRadioGroup v-model="copyMode">
+            <DropdownMenuRadioItem value="txt">
+              文本
+            </DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="html">
+              HTML 格式
+            </DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
 
     <PostInfo />
 
diff --git a/src/components/ui/separator/Separator.vue b/src/components/ui/separator/Separator.vue
new file mode 100644
index 000000000..814ca25ca
--- /dev/null
+++ b/src/components/ui/separator/Separator.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Separator, type SeparatorProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<
+  SeparatorProps & { class?: HTMLAttributes[`class`], label?: string }
+>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'shrink-0 bg-border relative',
+        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
+        props.class,
+      )
+    "
+  >
+    <span
+      v-if="props.label"
+      :class="cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',
+                 props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',
+      )"
+    >{{ props.label }}</span>
+  </Separator>
+</template>
diff --git a/src/components/ui/separator/index.ts b/src/components/ui/separator/index.ts
new file mode 100644
index 000000000..2287bcb94
--- /dev/null
+++ b/src/components/ui/separator/index.ts
@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue'

From 6178ab24330c2be1ff927410c27f158e7266c4e5 Mon Sep 17 00:00:00 2001
From: YangFong <yangfong2022@gmail.com>
Date: Sun, 22 Dec 2024 20:55:20 +0800
Subject: [PATCH 2/3] fix: questions of review

---
 src/components/CodemirrorEditor/EditorHeader/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue
index 5b546153e..c8de85f06 100644
--- a/src/components/CodemirrorEditor/EditorHeader/index.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/index.vue
@@ -152,7 +152,7 @@ function copy() {
       }
 
       // 输出提示
-      toast.success(`已复制渲染后的文章到剪贴板，可直接到公众号后台粘贴`)
+      toast.success(copyMode.value === `html` ? `已复制 HTML 源码，请进行下一步操作。` : `已复制渲染后的文章到剪贴板，可直接到公众号后台粘贴。`)
 
       editorRefresh()
       emit(`endCopy`)
@@ -453,7 +453,7 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
         >
           <DropdownMenuRadioGroup v-model="copyMode">
             <DropdownMenuRadioItem value="txt">
-              文本
+              公众号格式
             </DropdownMenuRadioItem>
             <DropdownMenuRadioItem value="html">
               HTML 格式

From 00615056762a1809b6fca5cb5b2070b25118f6a4 Mon Sep 17 00:00:00 2001
From: YangFong <yangfong2022@gmail.com>
Date: Sun, 22 Dec 2024 21:16:45 +0800
Subject: [PATCH 3/3] fix: copy triggers page status updates

---
 .../CodemirrorEditor/EditorHeader/index.vue           | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue
index c8de85f06..c64249df1 100644
--- a/src/components/CodemirrorEditor/EditorHeader/index.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/index.vue
@@ -133,10 +133,9 @@ function copy() {
 
       window.getSelection()!.removeAllRanges()
 
-      if (copyMode.value === `html`) {
-        await copyContent(clipboardDiv.innerHTML)
-      }
-      else {
+      const temp = clipboardDiv.innerHTML
+
+      if (copyMode.value === `txt`) {
         const range = document.createRange()
         range.setStartBefore(clipboardDiv.firstChild!)
         range.setEndAfter(clipboardDiv.lastChild!)
@@ -151,6 +150,10 @@ function copy() {
         nextTick(() => toggleDark())
       }
 
+      if (copyMode.value === `html`) {
+        await copyContent(temp)
+      }
+
       // 输出提示
       toast.success(copyMode.value === `html` ? `已复制 HTML 源码，请进行下一步操作。` : `已复制渲染后的文章到剪贴板，可直接到公众号后台粘贴。`)