chore: upgrade codemirror to v6

apps/web/index.html

@@ -106,6 +106,7 @@
       id="MathJax-script"
       src="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/mathjax@3/es5/tex-svg.js"
     ></script>
+    <script src="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/mermaid@11/dist/mermaid.min.js"></script>
     <script type="module" src="/src/main.ts"></script>
     <script type="module" src="/src/sidepanel.ts"></script>
   </body>

apps/web/package.json

@@ -42,7 +42,7 @@
     "buffer-from": "^1.1.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "codemirror": "^5.65.19",
+    "codemirror": "^6.0.1",
     "core-js": "^3.45.1",
     "cos-js-sdk-v5": "^1.8.7",
     "crypto-js": "^4.2.0",
@@ -83,7 +83,6 @@
     "@tailwindcss/postcss": "^4.1.13",
     "@tailwindcss/vite": "^4.1.13",
     "@types/buffer-from": "^1.1.3",
-    "@types/codemirror": "^5.60.15",
     "@types/crypto-js": "^4.2.2",
     "@types/mdast": "^4.0.4",
     "@types/unist": "^3.0.3",

apps/web/src/assets/less/app.less

@@ -47,7 +47,6 @@ section {
   display: block;
   height: 100%;
   width: 100%;
-  padding: 10px;
   border: none;
 }
 

apps/web/src/assets/less/theme.less

@@ -8,6 +8,8 @@
 
 .dark {
   .container {
+    // CodeMirror v6 兼容
+    .cm-editor,
     .CodeMirror-wrap {
       background-color: @nightCodeMirrorColor;
     }
@@ -34,6 +36,7 @@
   }
 }
 
+// CodeMirror v5 兼容样式
 .CodeMirror {
   padding-bottom: 0;
   height: 100% !important;
@@ -51,12 +54,6 @@
   overflow-y: scroll !important;
 }
 
-.cssEditor-wrapper {
-  .CodeMirror-scroll {
-    margin-right: 0;
-  }
-}
-
 .CodeMirror-vscrollbar {
   width: 0px;
   height: 0px;
@@ -68,6 +65,42 @@
   box-sizing: border-box;
 }
 
+// CodeMirror v6 样式
+.cm-editor {
+  height: 100% !important;
+  font-size: 16px;
+  font-family: Consolas, 'Courier New', monospace !important;
+
+  .cm-scroller {
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
+  }
+
+  .cm-content {
+    padding-bottom: 20px;
+  }
+
+  &.cm-focused {
+    outline: none;
+  }
+}
+
+.codemirror-container {
+  height: 100%;
+  width: 100%;
+
+  .cm-scroller {
+    padding: 10px;
+  }
+}
+
+.cssEditor-wrapper {
+  .CodeMirror-scroll,
+  .cm-scroller {
+    margin-right: 0;
+  }
+}
+
 .cm-em {
   font-style: normal;
 }

apps/web/src/components/ai/SidebarAIToolbar.vue

@@ -26,7 +26,10 @@ const toolBoxVisible = ref(false)
 // 检查选中文本的函数
 function getSelectedText() {
   try {
-    return editor.value?.getSelection()?.trim() || ``
+    if (!editor.value)
+      return ``
+    const selection = editor.value.state.selection.main
+    return editor.value.state.doc.sliceString(selection.from, selection.to).trim()
   }
   catch {
     return ``

apps/web/src/components/ai/chat-box/AIAssistantPanel.vue

@@ -284,7 +284,7 @@ async function sendMessage() {
     ? [{
         role: `system`,
         content:
-          `下面是一篇 Markdown 文章全文，请严格以此为主完成后续指令：\n\n${editor.value!.getValue()}`,
+          `下面是一篇 Markdown 文章全文，请严格以此为主完成后续指令：\n\n${editor.value?.state.doc.toString()}`,
       }]
     : []
 

apps/web/src/components/ai/image-generator/AIImageGeneratorPanel.vue

@@ -504,12 +504,11 @@ function insertImageToCursor(imageUrl: string) {
     const markdownImage = `![${altText}](${imageUrl})`
 
     // 获取当前光标位置并插入
-    const cursor = editor.value.getCursor()
-    editor.value.replaceRange(markdownImage, cursor)
-
-    // 将光标移动到插入内容后面
-    const newCursor = { line: cursor.line, ch: cursor.ch + markdownImage.length }
-    editor.value.setCursor(newCursor)
+    const pos = editor.value.state.selection.main.head
+    editor.value.dispatch({
+      changes: { from: pos, insert: markdownImage },
+      selection: { anchor: pos + markdownImage.length },
+    })
 
     // 聚焦编辑器
     editor.value.focus()

apps/web/src/components/ai/tool-box/ToolBoxPopover.vue

@@ -251,12 +251,16 @@ function stopAI() {
 
 /* -------------------- actions -------------------- */
 function replaceText() {
-  const cm = toRaw(store.editor!)!
-  const start = cm.getCursor(`start`)
-  cm.replaceSelection(message.value)
-  const end = cm.getCursor(`end`)
-  cm.setSelection(start, end)
-  cm.focus()
+  const editorView = toRaw(store.editor!)!
+  const selection = editorView.state.selection.main
+  editorView.dispatch(editorView.state.replaceSelection(message.value))
+
+  // 选中替换后的文本
+  const newSelection = editorView.state.selection.main
+  editorView.dispatch({
+    selection: { anchor: selection.from, head: newSelection.head },
+  })
+  editorView.focus()
 
   currentText.value = message.value
   resetState()

apps/web/src/components/ai/tool-box/index.ts

@@ -1,4 +1,4 @@
-import type { Editor } from 'codemirror'
+import type { EditorView } from '@codemirror/view'
 import AIPolishButton from './ToolBoxButton.vue'
 import AIPolishPopover from './ToolBoxPopover.vue'
 
@@ -10,9 +10,12 @@ function useAIPolish() {
   const selectedText = ref(``)
 
   // 获取当前编辑器选中文本的简单函数
-  function getCurrentSelection(editor: Editor | null): string {
+  function getCurrentSelection(editor: EditorView | null): string {
     try {
-      return editor?.getSelection()?.trim() || ``
+      if (!editor)
+        return ``
+      const selection = editor.state.selection.main
+      return editor.state.doc.sliceString(selection.from, selection.to).trim()
     }
     catch {
       return ``

apps/web/src/components/editor/CssEditor.vue

@@ -129,7 +129,7 @@ function tabChanged(tabName: string | number) {
   <transition enter-active-class="bounceInRight">
     <div
       v-show="displayStore.isShowCssEditor"
-      class="cssEditor-wrapper h-full flex flex-col mobile-css-editor"
+      class="cssEditor-wrapper h-full flex flex-col mobile-css-editor overflow-y-auto"
       :class="{
         // 移动端样式
         'fixed top-0 right-0 w-full h-full z-100 bg-background border-l shadow-lg': store.isMobile,

apps/web/src/components/editor/CustomUploadForm.vue

@@ -1,12 +1,11 @@
 <script setup lang='ts'>
-import CodeMirror from 'codemirror'
-import { useStore } from '@/stores'
+import { Compartment } from '@codemirror/state'
+import { EditorView } from '@codemirror/view'
+import { javascriptSetup, theme } from '@md/shared'
 import { removeLeft } from '@/utils'
 
-const store = useStore()
-
 const code = useLocalStorage(`formCustomConfig`, removeLeft(`
-  const {file, util, okCb, errCb} = CUSTOM_ARG
+  const { file, util, okCb, errCb } = CUSTOM_ARG
   const param = new FormData()
   param.append('file', file)
   util.axios.post('${window.location.origin}/upload', param, {
@@ -18,38 +17,51 @@ const code = useLocalStorage(`formCustomConfig`, removeLeft(`
   })
 `).trim())
 
-const formCustomTextarea = useTemplateRef<HTMLTextAreaElement>(`formCustomTextarea`)
+const formCustomTextarea = useTemplateRef<HTMLDivElement>(`formCustomTextarea`)
+
+const store = useStore()
+const { isDark } = storeToRefs(store)
+
+const editor = ref<EditorView | null>(null)
 
-const editor = ref<CodeMirror.EditorFromTextArea | null>(null)
+const themeCompartment = new Compartment()
 
 onMounted(() => {
-  editor.value = markRaw(CodeMirror.fromTextArea(formCustomTextarea.value!, {
-    mode: `javascript`,
-    theme: store.isDark ? `darcula` : `xq-light`,
-    lineNumbers: true,
-  }))
+  const editorView = new EditorView({
+    parent: formCustomTextarea.value!,
+    extensions: [javascriptSetup(), themeCompartment.of(theme(isDark.value))],
+    doc: code.value,
+  })
 
-  // 嵌套使用 nextTick 才能确保生效，具体原因未知
-  nextTick(() => {
-    nextTick(() => {
-      editor.value?.setValue(code.value)
-    })
+  editor.value = editorView
+})
+
+watch(isDark, (dark) => {
+  editor.value?.dispatch({
+    effects: themeCompartment.reconfigure(theme(dark)),
   })
 })
 
+onUnmounted(() => {
+  if (editor.value) {
+    editor.value.destroy()
+  }
+})
+
 function formCustomSave() {
-  const str = editor.value!.getValue()
+  const str = editor.value!.state.doc.toString()
   localStorage.setItem(`formCustomConfig`, str)
+  code.value = str
   toast.success(`保存成功`)
 }
 </script>
 
 <template>
   <div class="space-y-4 min-w-0">
-    <div class="h-60 border flex flex-col">
-      <textarea
+    <div class="h-60 border border-gray-200 dark:border-gray-700 rounded-lg flex flex-col overflow-y-auto">
+      <div
         ref="formCustomTextarea"
-        placeholder="Your custom code here."
+        class="flex-1 custom-codemirror"
       />
     </div>
     <Button

apps/web/src/components/editor/EditorContextMenu.vue

@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { altSign, ctrlSign, shiftSign } from '@/configs/shortcut-key'
+import { altSign, ctrlSign, shiftSign } from '@md/shared/configs'
 import { useDisplayStore, useStore } from '@/stores'
 
 const {

apps/web/src/components/editor/InsertFormDialog.vue

@@ -24,7 +24,11 @@ function insertTable() {
     cols: colNum.value,
     data: tableData.value,
   })
-  toRaw(store.editor!).replaceSelection(`\n${table}\n`, `end`)
+  const editor = toRaw(store.editor!)
+  const selection = editor.state.selection.main
+  editor.dispatch({
+    changes: { from: selection.from, to: selection.to, insert: `\n${table}\n` },
+  })
   resetVal()
   toggleShowInsertFormDialog()
 }

apps/web/src/components/editor/InsertMpCardDialog.vue

@@ -68,7 +68,11 @@ function buildMpHtml(config: Config) {
 function submit(formValues: any) {
   config.value = formValues as Config
   const html = buildMpHtml(formValues as Config)
-  toRaw(store.editor!).replaceSelection(`\n${html}\n`, `end`)
+  const editor = toRaw(store.editor!)
+  const selection = editor.state.selection.main
+  editor.dispatch({
+    changes: { from: selection.from, to: selection.to, insert: `\n${html}\n` },
+  })
   toast.success(`公众号名片插入成功`)
   toggleShowInsertMpCardDialog(false)
 }

apps/web/src/components/editor/RightSlider.vue

@@ -36,9 +36,6 @@ const { isDark, primaryColor } = storeToRefs(store)
 
 function customStyle() {
   displayStore.toggleShowCssEditor()
-  setTimeout(() => {
-    store.cssEditor!.refresh()
-  }, 50)
 }
 
 const isOpen = ref(false)