Merge 67ef9dc21c into 23de6453a3

#497

src/utils/renderer.ts

@@ -174,6 +174,8 @@ export function initRenderer(opts: IOpts) {
       const langText = lang.split(` `)[0]
       const language = hljs.getLanguage(langText) ? langText : `plaintext`
       let highlighted = hljs.highlight(text, { language }).value
+      // tab to 4 spaces
+      highlighted = highlighted.replace(/\t/g, '    ')
       highlighted = highlighted
         .replace(/\r\n/g, `<br/>`)
         .replace(/\n/g, `<br/>`)

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,6 +419,7 @@ onMounted(() => {
             </ContextMenuContent>
           </ContextMenu>
         </div>
+        <div class="relative flex-1">
           <div
             id="preview"
             ref="preview"
@@ -432,6 +438,10 @@ onMounted(() => {
               </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>
     </main>