feat: 升级 CodeMirror 编辑器并新增 Markdown 工具栏

This commit is contained in:
SkyJourney
2026-07-30 12:39:35 +08:00
parent f7d4efeafc
commit 7831bc23f0
11 changed files with 1603 additions and 35 deletions
+22 -7
View File
@@ -1,6 +1,7 @@
# v0.6.0 DOCX 导出与 Markdown 工具栏设计
状态:阶段 13 已完成,DOCX 架构、Pandoc 分发及共享协议已经冻结。
状态:阶段 14 已完成,DOCX 共享协议和 Markdown 编辑器基础能力已经
落地。
## 1. 版本目标
@@ -211,8 +212,8 @@ Desktop 只提供平台运行时、传输与保存能力。
左侧编辑器采用:
- `@uiw/react-codemirror`
- `@codemirror/lang-markdown`
- `@uiw/react-codemirror` `4.25.11`
- `@codemirror/lang-markdown` `6.5.1`
- CodeMirror 6 的状态、选区、事务、历史和快捷键扩展。
不引入带独立 Markdown 预览的完整编辑器,避免复制现有安全渲染和统一
@@ -245,6 +246,11 @@ interface MarkdownEditorCommand {
- 根据编辑器或平台状态禁用;
- 注册快捷键。
当前实现在 `apps/web/src/markdown-editor-commands.ts` 维护项目自有命令
注册表和纯文本变换函数,`MarkdownEditor.tsx` 只负责 CodeMirror 适配,
`MarkdownToolbar.tsx` 只负责 React 工具栏呈现。后续 Front Matter 或
ECharts 工具可以增加命令与面板入口,不需要修改编辑器内核。
### 5.3 v0.6.0 基础命令
- 撤销、重做;
@@ -253,12 +259,16 @@ interface MarkdownEditorCommand {
- 行内代码、代码块;
- 引用;
- 有序列表、无序列表和任务列表;
- 链接、图片
- 表格;
- 通过尺寸网格快速插入 `110` 列、`210` 行的表格
- 分隔线。
Front Matter 表单工具和 ECharts YAML 工具不在 `v0.6.0` 实现,但必须
能够在后续版本中以命令和面板扩展接入,不再次更换编辑器。
链接、图片、Front Matter 表单工具和 ECharts YAML 工具不在 `v0.6.0`
实现,但必须能够在后续版本中以命令和面板扩展接入,不再次更换编辑器。
选中多行后执行有序列表、无序列表或任务列表,应在一次事务中为每个非空
行生成对应 Markdown 标记。有序列表按非空行连续编号。表格尺寸中的行数
包含表头,不包含 Markdown 分隔语法行;例如 `3 × 4` 生成 3 列、1 行
表头和 3 行内容。
### 5.4 兼容性要求
@@ -278,6 +288,11 @@ Front Matter 表单工具和 ECharts YAML 工具不在 `v0.6.0` 实现,但必
外部文件加载不得污染用户的撤销历史;工具栏的一次操作应形成一次清晰
的撤销步骤。
当前通过独立的文档版本标识重建 CodeMirror 状态:用户键入和工具栏操作
保留在当前撤销历史中;新建、打开、重载、教程及主题示例切换会开始新的
历史。编辑器适配层同时暴露真实滚动容器和聚焦能力,继续复用原有预览
滚动同步与折叠逻辑。
## 6. API、安全与运行约束
### 6.1 API 与 IPC