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:
@@ -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('', '图片描述')} title="图片">
|
||||
🖼
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user