feat: 重写滚动同步为 VS Code 方案(data-line + 二分查找)

核心变更:
- 新增 rehypeSourceLine 插件:利用 unified AST position 信息,
  给渲染后的块级元素注入 data-line 属性,标记源文件行号
- 重写 scrollSync.ts:用二分查找替代正则匹配 identifyBlockStarts,
  精确映射行号→预览 DOM 位置,线性插值填充行间偏移
- useCodeMirror.ts:onScroll 从 ratio 改为行号派发,
  使用 CodeMirror 的 lineBlockAtHeight 精确计算当前行
- Preview.tsx:双向同步(编辑器→预览 + 预览→编辑器)
- Editor.tsx:监听 preview-scroll 事件实现反向同步

原理:与 VS Code Markdown 预览滚动同步方案一致
- 渲染时:AST position → data-line 属性
- 滚动时:二分查找 [data-line] 元素 → 线性插值滚动位置
This commit is contained in:
thzxx
2026-05-28 11:09:58 +08:00
parent 70566efc4a
commit ddbe814238
7 changed files with 258 additions and 114 deletions
+1
View File
@@ -32,6 +32,7 @@
"remark-parse": "^11.0.0",
"remark-rehype": "^11.1.2",
"unified": "^11.0.5",
"unist-util-visit": "^5.1.0",
"zustand": "^5.0.6"
},
"devDependencies": {