接上篇:
2. Slate协议层设计
协议层的整体架构设计如下图:
下面我们就以Slate为例,来看一看富文本编辑器的协议层设计,需要定义的核心概念和模块:
• 嵌套Model定义。
• 原子能力Operation设计。
• 秩序维护者Normalizing的设计。
1) 协议层设计——嵌套Model设计
Slate定义了三种类型的Node节点:
• Editor:包含整个文档内容的根节点。
• Element:在自定义域中拥有语义的容器节点。
• Text:包含文档文本的叶子节点。
a) Editor
Editor抽象接口定义如下:
b) Element
Element节点比较特殊,既是Ancentor节点,作为容器节点包含子节点;同时又是Descendant节点,可以作为其他容器节点的子节点存在。
• 块(Blocks):Element默认为Block类型的节点,也就是独立的一个段落;在Slate协议设计中,一个段落是不允许存在换行符的,当输入换行符的时候,就会生成一个新的Block类型的Element。
• 行内(Inlines):同时Element也可以是Inline类型的节点,作为另外一个Element的嵌套子节点存在,作为行内元素渲染在一行。
• 空元素(Void):Element也可以是Void类型,这里Void与HTML中Void的是同一个概念:如果某个Node为Void,则表示这个Node节点是不可编辑状态,光标无法定位到节点内部,会被整体输入和删除;比如:@某个人、主题、富文本中的图片或者视频等等。
c) Text
Text节点是树中的最低级叶子节点,描述了文本内容以及其他自定义的渲染元素;所有的自定义属性都包含在properties属性中:
我们以下面这这段富文本为例:
最终这样一段富文本对应的Mode定义如下:
可以看到,Model的树形结构还是比较简单的,所有的属性都存放在properties字段中,这也非常方便实现自定义扩展;Flutter渲染层根据Node节点的Type以及properties属性,将富文本内容渲染到屏幕上。
接下篇:https://developer.aliyun.com/article/1225977?groupCode=idlefish