Slate文档编辑器-Decorator装饰器渲染调度

Slate文档编辑器装饰器渲染调度解析

原创

已于 2024-12-30 10:56:17 修改 · 1k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#编辑器 #富文本 #前端

于 2024-12-30 10:52:20 首次发布

Slate文档编辑器-Decorator装饰器渲染调度

在之前我们聊到了基于文档编辑器的数据结构设计，聊了聊基于slate实现的文档编辑器类型系统，那么当前我们来研究一下slate编辑器中的装饰器实现。装饰器在slate中是非常重要的实现，可以为我们方便地在编辑器渲染调度时处理range的渲染。

在线编辑: https://windrunnermax.github.io/DocEditor
开源地址: https://github.com/WindRunnerMax/DocEditor

关于slate文档编辑器项目的相关文章:

Decorate

在slate中decoration是比较有趣的功能，设想一个场景，当需要实现代码块的高亮时，我们可以有几种方案来实现: 第一种方案是我们可以通过直接将代码块的内容解析的方式，解析出的关键字类别直接写入数据结构中，这样就可以直接在渲染时将高亮信息渲染出来，缺点就是会增加数据结构存储数据的大小；那么第二种方式我们就可以只存储代码信息，当需要数据高亮时也就是前端渲染时我们再将其解析出Marks进行渲染，但是这样的话如果存在协同我们还需要为其标记为非协同操作以及无需服务端存储的纯客户端Op，会稍微增加一些复杂度；那么第三种方法就是使用decoration，实际上可以说这里只是slate帮我们把第二种方法的事情做好了，可以在不改变数据结构的情况下将额外的Marks内容渲染出来。

当然，我们使用装饰器的场景自然不只是代码块高亮，凡是涉及到不希望在数据结构中表达却要在渲染时表现的内容，都需要使用decoration来实现。还有比较明显的例子就是查找能力，如果在编辑器中实现查找功能，那么我们需要将查找到的内容标记出来，这个时候我们就可以使用decoration来实现，否则就需要绘制虚拟的图层来完成。而如果需要实现用户态的超链接解析功能，即直接贴入连接的时候，我们希望将其自动转为超链接的节点，也可以利用装饰器来实现。

在前段时间测试slate官网的search-highlighting example时，当我搜索adds时，搜索的效果很好，但是当我执行跨节点的搜索时，就不能非常有效地突出显示内容了，具体信息可以查看https://github.com/ianstormtaylor/slate/pull/5670。这也就是说当decoration执行跨节点处理的时候，是存在一些问题的。例如下面的例子，当我们搜索123或者12345时，我们能够正常将标记出的decoration渲染出来，然而当我们搜索123456时，此时我们构造的range会是path: [0], offset: [0-6]，此时我们跨越了[0]节点进行标记，就无法正常标记内容了。

[
    {
   
    text: "12345" },
    {
   
    text: "67890" }
]

通过调用查找相关代码，我们可以看到上级的decorate结果会被传递到后续的渲染中，那么在本级同样会调度传递的decorate函数来生成新的decorations，并且这里需要判断如果父级的decorations与当前节点的range存在交集的话，那么内容会被继续传递下去。那么重点就在这里了，试想一下我们的场景，依旧以上述的例子中的内容为例，如果我们此时想要获取123456的索引，那么在text: 12345这个节点中肯定是不够的，我们必须要在上层数组中将所有文本节点的内容拼接起来，然后再查找才可以找到准确的索引位置。

// https://github.com/ianstormtaylor/slate/blob/25be3b/packages/slate-react/src/hooks/use-children.tsx#L21
const useChildren = (props: {