Files
new-markdown/docs/06-stage2-report.md

4.7 KiB
Raw Permalink Blame History

阶段 2 · Markdown 编辑器核心报告(实测记录)

日期:2026-11-13 · 范围(需求 §23 阶段 2):即时渲染深化、标题/段落/格式/引用/列表/任务列表/代码块、撤销重做、源码模式、IME 兼容。

1. 本阶段实现内容

  • 语法标记显隐(src/editor/plugins.ts,自研 ProseMirror 插件):光标所在块显示 Markdown 标记、其余块只显排版结果——标题显示 # 前缀、引用段显示 > 、行内标记(**、*、`、~~、链接的 [ 与 ](href))在光标进入对应文本段时在段两端显形。纯 Decoration 实现:不进文档模型、不进撤销栈、序列化零影响(测试硬断言)。IME 组合期间冻结装饰重算,组合结束补算一次。
  • 任务列表可点击勾选(src/editor/nodeViews.ts):验证中发现 Kit 的 preset-gfm 只渲染 <li data-checked>、没有真实复选框(可点击勾选是 Crepe 组件层能力,选型时未覆盖到此细节)。已给 list_item 注册自有 NodeView:任务项渲染真实 checkbox,点击以一条事务切换 checked(可撤销),序列化自动回写 - [ ]/- [x];普通列表项外观不变;完成项文字变灰。
  • 代码块键盘行为:Tab 在代码块内插入两空格、Shift+Tab 反缩进(吞掉无缩进时的 Tab 防焦点跳走);其余位置 Tab 不变。Enter 换行、粘贴代码走既有 Milkdown 行为。
  • 列表/结构命令回归:段落转无序列表、列表项升降级等命令与阶段 1 菜单共用同一命令层,本阶段补齐自动化断言。
  • 源码模式升级(src/components/SourceEditor.tsx):textarea 换 CodeMirror 6——行号、Markdown 语法高亮(含代码块内嵌语言)、独立历史栈、括号匹配、Tab 缩进;深色跟随应用主题(oneDark)。组件懒加载,不进首屏主包。
  • 双向光标锚点同步(src/editor/cursorSync.ts):以「当前文本块纯文本 + 块内偏移」为锚,渲染→源码按行匹配定位、源码→渲染按文本块定位;重复文本取首个匹配,找不到回落开头,不丢内容。纯函数单测覆盖标题/任务/引用标记的剥离与往返一致性。
  • IME 守卫:全局快捷键入口统一 isImeComposing 判定(isComposing 或 keyCode 229 直接放行);标记插件组合期冻结(见上)。真实输入法手感仍在 Windows 人工清单内(与阶段 0/1 清单合并)。
  • 菜单粘贴修复:改走 Clipboard API 读纯文本后以事务插入选区,失败才退回 execCommand;源码模式聚焦 CodeMirror 走原生粘贴。

2. 构建与测试结果(实跑)

项 结果
类型检查 tsc -b ✅ 0 错误
自动化测试 vitest run ✅ 31/31(8 文件;本阶段新增 13:stage2 8 + cursorSync 4 + SourceEditor 冒烟 1)
生产构建 ✅ 主包 646KB / gzip 202KB(SourceEditor 懒加载分包 539KB,语言高亮小块按需)
阶段 0/1 套件 ✅ 全部继续绿(往返稳定、撤销、tabs、text 等 18 项)

新增用例要点:标记显隐三态(标题显形 → 粗体显形且标题标记消失 → 移开全隐)+ 序列化与原文逐字一致;引用 > 显形;代码块 Tab 进/退;任务 checkbox 渲染 2 个且第二项 checked、点击第一项后序列化变 - [x];段落转列表命令;纯文本插入;IME 判定;锚点往返;CodeMirror 挂载与锚点/跳行 API。

3. 已知问题与边界

  1. 标记显隐覆盖范围:当前覆盖标题、引用、五种行内标记。列表标记(-/1.)由浏览器列表样式天然呈现,不做显隐;链接显形为 [文案](href) 近似形态。嵌套格式(如粗体内斜体)按段逐标记显形,顺序为 schema 顺序,真机观感待验。
  2. 锚点同步是近似定位:锚点文本在全文重复出现时取第一个匹配,可能定位到同文段落而非原段落(内容零丢失)。精确版需给块级节点加稳定 id,排阶段 6 体验优化评估。
  3. SourceEditor 在 jsdom 仅冒烟(挂载/API),真实滚动、中文输入与高亮观感随 Windows 清单验。
  4. 阶段 0/1 的 Windows 清单仍未销账(含 IME 真机四项)——本阶段没有新增必须真机的前置,但建议合并一次验完再进阶段 3。

4. 下一阶段(阶段 3)预告

复杂内容编辑:表格(浮动工具栏、增删行列、Tab 跳格/末格加行)、图片(插入/粘贴落盘/浮动操作条)、超链接编辑、数学公式(KaTeX 节点)、Mermaid(渲染节点 + 源码编辑)、脚注转正、HTML 块编辑、附件链接。验收口径不变:先给往返套件加用例再实现。