feat: preserve selection including formatting after markdown toggle (#774)

close #773

Author: yanglbme

src/components/ai/AIAssistantPanel.vue

@@ -562,7 +562,7 @@ async function sendMessage() {
       <!-- ============ 输入框 ============ -->
       <div v-if="!configVisible" class="relative mt-2">
         <div
-          class="bg-background item-start border-border flex flex-col items-baseline gap-2 border rounded-xl px-3 py-2 pr-12 shadow-inner"
+          class="item-start bg-background border-border flex flex-col items-baseline gap-2 border rounded-xl px-3 py-2 pr-12 shadow-inner"
         >
           <Textarea
             v-model="input"

src/utils/editor.ts

@@ -0,0 +1,56 @@
+import type CodeMirror from 'codemirror'
+
+interface ToggleFormatOptions {
+  prefix: string
+  suffix: string
+  check?: (selected: string) => boolean
+  afterInsertCursorOffset?: number
+}
+
+export function toggleFormat(
+  editor: CodeMirror.Editor,
+  {
+    prefix,
+    suffix,
+    check,
+    afterInsertCursorOffset = 0,
+  }: ToggleFormatOptions,
+): void {
+  const selected = editor.getSelection()
+  const from = editor.getCursor(`from`)
+  const to = editor.getCursor(`to`)
+  const isFormatted = check?.(selected) ?? false
+
+  let newText: string
+  let newFrom = { ...from }
+  let newTo = { ...to }
+
+  if (isFormatted) {
+    // Remove formatting (e.g. **abc** -> abc)
+    newText = selected.slice(prefix.length, selected.length - suffix.length)
+    editor.replaceSelection(newText)
+
+    // Adjust selection to original
+    newTo.ch = newFrom.ch + newText.length
+    editor.setSelection(newFrom, newTo)
+  }
+  else {
+    // Apply formatting
+    newText = `${prefix}${selected}${suffix}`
+    editor.replaceSelection(newText)
+
+    // Select the whole formatted string (**abc**)
+    newFrom = { ...from }
+    newTo = {
+      line: to.line,
+      ch: to.ch + prefix.length + suffix.length,
+    }
+    editor.setSelection(newFrom, newTo)
+
+    // Optional cursor shift (e.g. for `]()` links)
+    if (afterInsertCursorOffset !== 0) {
+      const { line, ch } = editor.getCursor()
+      editor.setCursor({ line, ch: ch + afterInsertCursorOffset })
+    }
+  }
+}

src/views/CodemirrorEditor.vue

@@ -8,6 +8,7 @@ import {
   formatDoc,
   toBase64,
 } from '@/utils'
+import { toggleFormat } from '@/utils/editor'
 import fileApi from '@/utils/file'
 import CodeMirror from 'codemirror'
 import { Eye, List, Pen } from 'lucide-vue-next'
@@ -215,52 +216,78 @@ function initEditor() {
       autoCloseBrackets: true,
       extraKeys: {
         [`${shiftKey}-${altKey}-F`]: function autoFormat(editor) {
-          formatDoc(editor.getValue()).then((doc) => {
+          const value = editor.getValue()
+          formatDoc(value).then((doc: string) => {
             editor.setValue(doc)
           })
         },
+
         [`${ctrlKey}-B`]: function bold(editor) {
-          const selected = editor.getSelection()
-          editor.replaceSelection(`**${selected}**`)
+          toggleFormat(editor, {
+            prefix: `**`,
+            suffix: `**`,
+            check: s => s.startsWith(`**`) && s.endsWith(`**`),
+          })
         },
+
         [`${ctrlKey}-I`]: function italic(editor) {
-          const selected = editor.getSelection()
-          editor.replaceSelection(`*${selected}*`)
+          toggleFormat(editor, {
+            prefix: `*`,
+            suffix: `*`,
+            check: s => s.startsWith(`*`) && s.endsWith(`*`),
+          })
         },
+
         [`${ctrlKey}-D`]: function del(editor) {
-          const selected = editor.getSelection()
-          editor.replaceSelection(`~~${selected}~~`)
+          toggleFormat(editor, {
+            prefix: `~~`,
+            suffix: `~~`,
+            check: s => s.startsWith(`~~`) && s.endsWith(`~~`),
+          })
         },
+
         [`${ctrlKey}-K`]: function link(editor) {
-          const selected = editor.getSelection()
-          editor.replaceSelection(`[${selected}]()`)
-          // now will slightly move the cursor to the left to fill in the link
-          const { line, ch } = editor.getCursor()
-          editor.setCursor({ line, ch: ch - 1 })
+          toggleFormat(editor, {
+            prefix: `[`,
+            suffix: `]()`,
+            check: s => s.startsWith(`[`) && s.endsWith(`]()`),
+            afterInsertCursorOffset: -1,
+          })
         },
+
         [`${ctrlKey}-E`]: function code(editor) {
-          const selected = editor.getSelection()
-          editor.replaceSelection(`\`${selected}\``)
+          toggleFormat(editor, {
+            prefix: `\``,
+            suffix: `\``,
+            check: s => s.startsWith(`\``) && s.endsWith(`\``),
+          })
         },
+
+        // 标题：单行逻辑，手动处理
         [`${ctrlKey}-H`]: function heading(editor) {
           const selected = editor.getSelection()
-          editor.replaceSelection(`# ${selected}`)
+          const replaced = selected.startsWith(`# `) ? selected.slice(2) : `# ${selected}`
+          editor.replaceSelection(replaced)
         },
+
         [`${ctrlKey}-U`]: function unorderedList(editor) {
           const selected = editor.getSelection()
-          const lines = selected.split(`\n`).map(line => `- ${line}`)
-          editor.replaceSelection(lines.join(`\n`))
+          const lines = selected.split(`\n`)
+          const isList = lines.every(line => line.trim().startsWith(`- `))
+          const updated = isList
+            ? lines.map(line => line.replace(/^- +/, ``)).join(`\n`)
+            : lines.map(line => `- ${line}`).join(`\n`)
+          editor.replaceSelection(updated)
         },
 
         [`${ctrlKey}-O`]: function orderedList(editor) {
           const selected = editor.getSelection()
-          const lines = selected.split(`\n`).map((line, i) => `${i + 1}. ${line}`)
-          editor.replaceSelection(lines.join(`\n`))
-        },
-        // 预备弃用
-        [`${ctrlKey}-L`]: function code(editor) {
-          const selected = editor.getSelection()
-          editor.replaceSelection(`\`${selected}\``)
+          const lines = selected.split(`\n`)
+          const isList = lines.every(line => /^\d+\.\s/.test(line.trim()))
+          const updated = isList
+            ? lines.map(line => line.replace(/^\d+\.\s+/, ``)).join(`\n`)
+            : lines.map((line, i) => `${i + 1}. ${line}`).join(`\n`)
+          editor.replaceSelection(updated)
         },
       },
     })