ximing
←返回所有系列
📖

《ProseMirror 源码分析》

逐模块拆解 ProseMirror：文档模型、Schema、Transaction、视图渲染与协作编辑的实现机制。

共60篇文章，按写作时间排序

  1. 1ProseMirror 源码分析开篇：富文本编辑器到底难在哪📅
  2. 2ProseMirror 仓库全景：22 个包怎么分工📅
  3. 3跑通一个最小 ProseMirror：先看文档长什么样📅
  4. 4ProseMirror model（上）：Node 与 Fragment，文档树的骨架📅
  5. 5ProseMirror model（中）：Mark，内联格式怎么挂在文本上📅
  6. 6ProseMirror model（下）：Schema 与 content expression，文档的类型系统📅
  7. 7ResolvedPos：一个数字位置怎么变成路径📅
  8. 8Slice 与 replace：切一块文档出来再塞回去📅
  9. 9DOMSerializer：文档怎么变成 DOM 和 HTML📅
  10. 10DOMParser：parseDOM 规则与 HTML 解析📅
  11. 11findDiffStart / findDiffEnd：定位两份文档的差异区间📅
  12. 12Node 辅助方法与位置约定📅
  13. 13ProseMirror transform（上）：Step 的接口与实现📅
  14. 14ProseMirror transform（下）：ReplaceStep 与 Fitter，最复杂的一步📅
  15. 15StepMap：一步修改怎么映射每个位置📅
  16. 16Mapping：多步映射的链式合并，rebase 的地基📅
  17. 17structure.ts：split/join/lift/wrap 的可达性判断📅
  18. 18Transform 类：构建修改的 API 层📅
  19. 19ProseMirror state（上）：EditorState，不可变编辑器状态📅
  20. 20Selection 体系：四种选区与选区书签📅
  21. 21Transaction：Transform 加上状态语义📅
  22. 22Plugin 系统（上）：StateField 与插件状态📅
  23. 23Plugin 系统（下）：props、appendTransaction 与 filterTransaction📅
  24. 24state 示例：三个插件的实现📅
  25. 25ProseMirror view（上）：EditorView，状态与 DOM 之间的桥📅
  26. 26ViewDesc（上）：文档到 DOM 的描述树📅
  27. 27ViewDesc（下）：增量更新怎么做到只改动的部分📅
  28. 28DOMObserver 与 readDOMChange：将 DOM 变化读回文档📅
  29. 29input.ts：从 keydown 到 dispatchTransaction 的输入管线📅
  30. 30选区同步：state 选区与 DOM 选区的双向对齐📅
  31. 31Composition 与 IME：中文输入法事件的处理📅
  32. 32NodeView 与 MarkView：自定义节点与标记渲染📅
  33. 33Decoration 体系：不修改文档的视觉标注📅
  34. 34clipboard：复制粘贴的序列化与解析📅
  35. 35domcoords：屏幕坐标与文档位置的双向换算📅
  36. 36browser.ts：浏览器差异补丁集📅
  37. 37view 收官：不用官方扩展，手写一个最小可用编辑器📅
  38. 38扩展（上）：keymap，最小的插件📅
  39. 39commands：命令的签名约定与组合器📅
  40. 40history：undo/redo 栈与 rebasing📅
  41. 41inputrules：「# 空格」变成标题是怎么实现的📅
  42. 42schema-basic：官方基础文档结构📅
  43. 43schema-list：列表节点与最复杂的一批命令📅
  44. 44gapcursor：光标落不进去的地方怎么办📅
  45. 45dropcursor：拖拽时的插入位置指示📅
  46. 46menu：菜单栏组件体系📅
  47. 47collab（上）：协作编辑的 rebase 原理📅
  48. 48collab（下）：receiveTransaction 与整个收发循环📅
  49. 49changeset：变更集的计算与展示📅
  50. 50markdown：文档与 Markdown 的双向转换📅
  51. 51search：查找替换插件📅
  52. 52表格专题（上）：表格 schema 与 TableMap📅
  53. 53表格专题（中）：CellSelection，矩形的选区📅
  54. 54表格专题（下）：addColumn/mergeCells 等编辑命令📅
  55. 55columnresizing：列宽拖拽的实现📅
  56. 56example-setup：官方起手式是怎么装配的📅
  57. 57test-builder：测试文档怎么写得像代码📅
  58. 58多包仓库的构建与发布工程📅
  59. 59ProseMirror vs Draft.js / Slate / Quill：文档模型与更新模型对比📅
  60. 60ProseMirror 系列收官：从这套代码里能拿走的设计📅