富文本编辑器

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

虚拟滚动是一种优化长列表性能的技术，其通过按需渲染列表项来提高浏览器运行效率。在实际调研的过程中，我发现几乎没有关于在线文档编辑的性能优化方案文章，那么对于我来说几乎就是从零开始调研整个方案。

在渲染列表时我们通常会一次性将所有列表项渲染到`DOM`中，在数据量大的时候这种操作会造成页面响应缓慢，因为浏览器需要处理大量的`DOM`元素，而此时我们通常就需要虚拟滚动来实现性能优化。

当我们实现在线文档平台时，划词评论的功能是非常必要的，特别是在重文档管理流程的在线文档产品中，文档反馈是非常重要的一环，这样可以帮助文档维护者提高文档质量，而即使是作为讨论区评论能力也有很重要的价值。

当我们实现在线文档的系统时，通常需要考虑到文档的导出能力，特别是对于私有化部署的复杂`ToB`产品来说，文档的私有化版本交付能力就显得非常重要。

当我们实现在线文档的系统时，通常需要考虑到文档的版本控制与审核能力、文档草稿与线上文档的差异、私有化版本等，这是这是整个文档管理流程中的重要环节，那么在这个环节中通常就需要文档的diff能力。