富文本编辑器

在这里我们需要讨论的是编辑节点的组件预设，例如零宽字符、`Embed`节点、`Void`节点等，为编辑器的插件扩展提供预设默认行为的组件。

在先前我们讨论了全量的视图初始化渲染，包括生命周期同步、状态管理、渲染模式、DOM映射状态等。在这里我们需要处理变更的增量更新，这属于性能方面的考量，需要考虑如何实现状态不可变以及增量渲染。

在先前我们讨论的主要是模型层以及核心层的设计，即数据模型以及编辑器的核心交互逻辑，在这里我们以React为例，讨论如何将编辑器的视图层与核心层交互搭建起来。

先前我们主要处理了浏览器复杂DOM结构的默认行为，以及兼容IME输入法的各种输入场景。在这里关注于处理文本结构性变更行为的处理，主要是针对行级别的操作、文本拖拽操作等，分别处于文本结构结构以及变更。

先前我们在选区模块的基础上，通过浏览器的组合事件来实现半受控的输入模式，这是状态同步的重要实现之一。在这里我们要关注于处理浏览器复杂DOM结构默认行为，以及兼容IME输入法处理的各种问题。

先前在使用豆包的Web版时，发现在“帮我写作”模块中用以输入Prompt的模板输入框非常实用，既可以保留模板输入的优势，来调优指定的写作方向，又能够不失灵活地自由编辑。

在先前我们我们实现了SSE流式输出的实现，以及基于向量检索的RAG服务。这里我们再来聊一下在SSE流式输出的基础上，将Markdown解析和富文本编辑器的渲染结合，建设文档领域的部分AI Infra。

在先前我们实现了编辑器选区和模型选区的双向同步，来实现受控的选区操作，这是编辑器中非常重要的基础能力。接下来我们需要在编辑器选区模块的基础上，通过浏览器的组合事件来实现半受控的输入模式。

在先前我们基于编辑器数据模型设计了RawRange和Range对象两种选区模型。在这里我们需要将浏览器选区与编辑器选区关联起来，以此实现受控的DOM选区同步策略。

先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。

先前我们提到了，数据模型的设计是编辑器的基础模块，其直接影响了选区模块的表示。选区模块的设计同样是编辑器的基础部分，编辑器应用变更时操作范围的表达，就需要基于选区模型来实现。

在富文本编辑器中，序列化与反序列化是非常重要的环节，其涉及到了编辑器的内容复制、粘贴、导入导出等模块。当用户在编辑器中进行复制操作时，富文本内容会被转换为标准的HTML格式，并存储在剪贴板中。

数据模型的设计是编辑器的核心基础，其直接影响了选区模型、DOM模型、状态管理等模块的设计。我们从零实现的富文本编辑器就需要从数据模型的设计开始，之后就可以逐步实现其他模块。

从零实现MVC架构的编辑器，将应用程序分为控制器、模型、视图三个核心组件，通过控制器执行命令时会修改当前的数据模型，进而表现到视图的渲染上。

我也算是比较关注于各类富文本编辑器的实现，包括在各个站点上的编辑器实现文章我也会看。但是我发现这其中极少有讲富文本编辑器的底层设计，因此我想着从零实现富文本编辑器，并且积累相关经验。

在之前我们聊到了slate中的Decorator装饰器实现，这在实现搜索替换、代码高亮的实现，那么在这里我们重点聊一聊如何确定渲染出的节点处于文档数据定义中的位置。

在之前我们聊到了基于文档编辑器的数据结构设计，聊了聊基于slate实现的文档编辑器类型系统，那么当前我们来研究一下slate编辑器中的装饰器实现。

在我们的在线文档系统中，除了基础的富文本编辑能力外，搜索替换的算法同样也是重要的功能实现。纯文本搜索替换算法相对来说是比较容易实现的，而在富文本的场景中，存在图文混排、嵌入元素，则需要适配方案。

在之前我们基于`slate`实现的文档编辑器探讨了`WrapNode`数据结构与操作变换，那么接下来我们更专注于文档编辑器的数据结构设计，聊聊基于`slate`实现的文档编辑器类型系统。

在之前我们聊到了一些关于slate富文本引擎的基本概念，并且对基于slate实现文档编辑器的一些插件化能力设计、类型拓展、具体方案等作了探讨，那么接下来我们更专注于文档编辑器的细节。