富文本排版与布局

返回 🗂 富文本编辑专题 · 相关私有笔记

本分支聚焦「富文本编辑器里的排版问题」:编辑态换行、CJK / 多语言文本、代码块、inline atom、分页、虚拟化高度预测、DOM reflow 与旁路测量层。核心问题不是「TipTap 能不能排版」,而是要把 编辑模型、浏览器 CSS 排版、测量预测、只读渲染 分层处理。

进入条件与先修

这不是搭建第一个 TipTap / ProseMirror 编辑器的必经分支。只有产品明确遇到 CJK / 长词换行、代码块溢出、inline atom 行高、分页、长文档高度预测或只读预览测量时才进入;普通的工具栏、Node / Mark、保存和协同接入不需要先读它。

共同先修:先读 ProseMirror 入门与 View 与 NodeView,知道文档模型与浏览器 contentEditable DOM 各自负责什么。
页边界、评论锚点或临时视觉标记:再读 Plugin 与 Decoration,优先判断它是否应是 Decoration,而不是把布局状态写回文档。
输入延迟、强制回流或大量 NodeView:同步参照性能与可访问性;先测量,再决定是 CSS、测量层还是编辑器结构的问题。

边界:编辑态的真实排版仍由浏览器 CSS 与 DOM 决定;测量层只能预测、辅助分页或支持只读渲染,不能替代 selection、IME、copy / paste 和可访问性语义。

TipTap 排版问题调研:Pretext 与测量层 —— 从 TipTap / ProseMirror 的职责边界出发,分析 CJK 换行、代码块、mention/chip、分页、虚拟化与 @chenglou/pretext 的集成位置。

CJK 与国际化换行:CSS line-break / word-break / overflow-wrap / hyphens 与 Unicode UAX #14 的关系。
分页与类文档布局:为什么编辑态实时精确分页很难,以及 page overlay / decoration / export pass 的分层方案。
虚拟化高度预测:TipTap JSON → block metric cache → Pretext estimate → DOM reconciliation。
inline atom 排版:mention、chip、link preview、inline code span 在 selection / copy / IME 下的边界。
代码块排版:横向滚动、soft wrap、Shiki 高亮、超大代码块 DOM 成本。
性能诊断:forced synchronous layout、ResizeObserver、NodeView mount cost、Chrome Performance trace。