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. 12model 收官：Node 上的辅助方法与位置约定总结
  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 系列收官：从这套代码里能拿走的设计