Yuexun's Blog
·
How the Notion Editor is Implemented?
💡
原文英文，约800词，阅读约需3分钟。
📝
内容提要
Notion编辑器采用块状架构，每个文本块都是独立的contenteditable div，支持基本的文本编辑和格式化。布局使用Flexbox，操作通过事务处理，支持撤销和重做。跨块选择和粘贴功能存在局限，单行粘贴会丢失格式。整体设计优雅，但执行上仍有改进空间。
🎯
关键要点
- Notion编辑器采用块状架构，每个文本块都是独立的contenteditable div。
- 布局使用CSS Flexbox，支持基本的文本编辑和格式化。
- 每次编辑都会创建一个事务，操作会修改块数据。
- 文本格式化以结构化数据存储，而非HTML。
- 跨块选择和粘贴功能存在局限，单行粘贴会丢失格式。
- 撤销和重做功能使用一个包含反向操作的栈。
- 整体设计优雅，但在执行上仍有改进空间。
❓
延伸问答
Notion编辑器的块状架构是如何实现的？
Notion编辑器采用块状架构，每个文本块都是独立的contenteditable div，支持基本的文本编辑和格式化。
Notion编辑器如何处理撤销和重做功能？
Notion使用一个包含反向操作的栈来实现撤销和重做功能，每个事务都包含反向操作。
Notion编辑器的文本格式化是如何存储的？
文本格式化以结构化数据存储，而非HTML，这样可以避免使用document.execCommand。
Notion编辑器在跨块选择和粘贴方面存在哪些局限？
跨块选择和粘贴功能存在局限，单行粘贴会丢失格式，而多行粘贴则会解析HTML。
Notion编辑器的布局是如何设计的？
Notion的布局使用CSS Flexbox，支持基本的块排列，但复杂布局实现有限。
Notion编辑器在处理长文本块时有什么性能问题？
长文本块的编辑会导致性能下降，因为每次编辑都会创建一个事务，更新整个块的值。
➡️
