Merge 67ef9dc21c into 1ab6cbfeb2

close #490

src/components/CodemirrorEditor/EditorHeader/index.vue

@@ -64,6 +64,15 @@ const copyMode = useStorage(addPrefix(`copyMode`), `txt`)
 const source = ref(``)
 const { copy: copyContent } = useClipboard({ source })
 
+const 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`)
@@ -107,13 +116,11 @@ function copy() {
 
       clipboardDiv.focus()
 
-      // edge case: 由于 svg 无法复制， 在前面插入一个空节点
-      const p = document.createElement(`p`)
-      p.style.fontSize = `0` // 设置字体大小为 0
-      p.style.lineHeight = `0` // 行高也为 0
-      p.style.margin = `0` // 避免外边距干扰
-      p.innerHTML = ` `
-      clipboardDiv.insertBefore(p, clipboardDiv.firstChild)
+      // 由于 svg 无法复制， 在前后各插入一个空白节点
+      const beforeNode = creatEmptyNode()
+      const afterNode = creatEmptyNode()
+      clipboardDiv.insertBefore(beforeNode, clipboardDiv.firstChild)
+      clipboardDiv.appendChild(afterNode)
 
       // 兼容 Mermaid
       const nodes = clipboardDiv.querySelectorAll(`.nodeLabel`)

src/views/CodemirrorEditor.vue

@@ -170,12 +170,15 @@ watch(isDark, () => {
   toRaw(editor.value)?.setOption?.(`theme`, theme)
 })
 
+const charCount = ref(0)
+
 // 初始化编辑器
 function initEditor() {
   const editorDom = document.querySelector<HTMLTextAreaElement>(`#editor`)!
 
   if (!editorDom.value) {
     editorDom.value = store.posts[store.currentPostIndex].content
+    charCount.value = store.posts[store.currentPostIndex].content.replace(/\s/g, ``).length
   }
   editor.value = CodeMirror.fromTextArea(editorDom, {
     mode: `text/x-markdown`,
@@ -222,7 +225,9 @@ function initEditor() {
     clearTimeout(changeTimer.value)
     changeTimer.value = setTimeout(() => {
       onEditorRefresh()
-      store.posts[store.currentPostIndex].content = e.getValue()
+      const value = e.getValue()
+      store.posts[store.currentPostIndex].content = value
+      charCount.value = value.replace(/\s/g, ``).length
     }, 300)
   })
 
@@ -414,23 +419,28 @@ onMounted(() => {
             </ContextMenuContent>
           </ContextMenu>
         </div>
-        <div
-          id="preview"
-          ref="preview"
-          :span="isShowCssEditor ? 8 : 12"
-          class="preview-wrapper flex-1 p-5"
-        >
-          <div id="output-wrapper" :class="{ output_night: !backLight }">
-            <div class="preview border shadow-xl">
-              <section id="output" v-html="output" />
-              <div v-if="isCoping" class="loading-mask">
-                <div class="loading-mask-box">
-                  <div class="loading__img" />
-                  <span>正在生成</span>
+        <div class="relative flex-1">
+          <div
+            id="preview"
+            ref="preview"
+            :span="isShowCssEditor ? 8 : 12"
+            class="preview-wrapper flex-1 p-5"
+          >
+            <div id="output-wrapper" :class="{ output_night: !backLight }">
+              <div class="preview border shadow-xl">
+                <section id="output" v-html="output" />
+                <div v-if="isCoping" class="loading-mask">
+                  <div class="loading-mask-box">
+                    <div class="loading__img" />
+                    <span>正在生成</span>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
+          <div class="bg-muted absolute bottom-0 left-0 p-2 text-xs shadow">
+            {{ charCount }} 个字符
+          </div>
         </div>
         <CssEditor class="flex-1" />
       </div>