feat: 替换 textarea 为 CodeMirror 6 编辑器

新增功能:
- CodeMirror 6 专业编辑器替代原生 textarea
- 语法高亮(Markdown 专用)
- 行号(内置,精确同步)
- 代码折叠(foldGutter)
- 括号匹配
- 多光标选区(rectangularSelection)
- 内置搜索高亮(highlightSelectionMatches)
- undo/redo 原生支持(history)
- Tab 缩进(indentWithTab)
- 暗色主题(oneDark)

新增文件:
- useCodeMirror.ts: CodeMirror 初始化 Hook
- EditorToolbar.tsx: 格式化工具栏(B/I/S/标题/列表/引用/代码/链接/图片)
- Editor.tsx: 重写为 CodeMirror 组件

格式化工具栏按钮:
- 粗体/斜体/删除线/行内代码
- H1/H2/H3 标题
- 无序列表/有序列表/引用/代码块
- 链接/图片

快捷键:
- Ctrl+B 粗体
- Ctrl+I 斜体
This commit is contained in:
thzxx
2026-05-27 23:04:05 +08:00
parent b3987e9abd
commit 1cc4206b32
6 changed files with 459 additions and 305 deletions
@@ -0,0 +1,107 @@
import React, { useCallback } from 'react'
import type { EditorView } from '@codemirror/view'
interface EditorToolbarProps {
viewRef: React.MutableRefObject<EditorView | null>
}
export function EditorToolbar({ viewRef }: EditorToolbarProps) {
const insertFormatting = useCallback((before: string, after: string, placeholder: string) => {
const view = viewRef.current
if (!view) return
const { from, to } = view.state.selection.main
const selected = view.state.sliceDoc(from, to)
const text = selected || placeholder
const insert = before + text + after
view.dispatch({
changes: { from, to, insert },
selection: { anchor: from + before.length, head: from + before.length + text.length }
})
view.focus()
}, [viewRef])
const insertLinePrefix = useCallback((prefix: string) => {
const view = viewRef.current
if (!view) return
const { from } = view.state.selection.main
const line = view.state.doc.lineAt(from)
const currentLine = view.state.sliceDoc(line.from, line.to)
// 如果已经有前缀,移除它
if (currentLine.startsWith(prefix)) {
view.dispatch({
changes: { from: line.from, to: line.from + prefix.length, insert: '' }
})
} else {
view.dispatch({
changes: { from: line.from, to: line.from, insert: prefix }
})
}
view.focus()
}, [viewRef])
const insertBlock = useCallback((text: string) => {
const view = viewRef.current
if (!view) return
const { from } = view.state.selection.main
const line = view.state.doc.lineAt(from)
const insertPos = line.to + 1
view.dispatch({
changes: { from: insertPos, to: insertPos, insert: '\n' + text + '\n' },
selection: { anchor: insertPos + 1, head: insertPos + 1 + text.length }
})
view.focus()
}, [viewRef])
return (
<div className="editor-toolbar">
<button className="toolbar-btn-sm" onClick={() => insertFormatting('**', '**', '粗体')} title="粗体 (Ctrl+B)">
<strong>B</strong>
</button>
<button className="toolbar-btn-sm" onClick={() => insertFormatting('*', '*', '斜体')} title="斜体 (Ctrl+I)">
<em>I</em>
</button>
<button className="toolbar-btn-sm" onClick={() => insertFormatting('~~', '~~', '删除线')} title="删除线">
<s>S</s>
</button>
<button className="toolbar-btn-sm" onClick={() => insertFormatting('`', '`', '代码')} title="行内代码">
{'</>'}
</button>
<div className="toolbar-divider-sm" />
<button className="toolbar-btn-sm" onClick={() => insertLinePrefix('# ')} title="标题">
H1
</button>
<button className="toolbar-btn-sm" onClick={() => insertLinePrefix('## ')} title="二级标题">
H2
</button>
<button className="toolbar-btn-sm" onClick={() => insertLinePrefix('### ')} title="三级标题">
H3
</button>
<div className="toolbar-divider-sm" />
<button className="toolbar-btn-sm" onClick={() => insertLinePrefix('- ')} title="无序列表">
</button>
<button className="toolbar-btn-sm" onClick={() => insertLinePrefix('1. ')} title="有序列表">
1.
</button>
<button className="toolbar-btn-sm" onClick={() => insertLinePrefix('> ')} title="引用">
</button>
<button className="toolbar-btn-sm" onClick={() => insertBlock('```\n代码\n```')} title="代码块">
{'{ }'}
</button>
<div className="toolbar-divider-sm" />
<button className="toolbar-btn-sm" onClick={() => insertFormatting('[', '](url)', '链接文本')} title="链接">
🔗
</button>
<button className="toolbar-btn-sm" onClick={() => insertFormatting('![', '](url)', '图片描述')} title="图片">
🖼
</button>
</div>
)
}