接上篇:
2) 协议层设计——原子能力Operation
接下来需要富文本Commond协议的设计,用户的每一次的文字输入、删除、文字加粗、换行等操作都是一次Command指令;Slate抽象定义了九个最基本的Operations,协议层所有的Commond指令,最终在协议层,都会转换成一个或者多个operation操作:
• insert_node:插入Node节点
• insert_text:插入文本
• merge_node:合并相同属性的Node节点
• move_node:移动Node
• remove_node:删除Node
• remove_text:删除文本
• set_node:设置Node属性
• set_selection:设置Selection
• split_node:拆分Node
下面我们通过对选中文本加粗操作为例,来了解Slate协议层Commond的处理过程:
对选中文本加粗这样一个Commond,协议层会将这个Commond拆解成三个Opeartion:
• split_node:将一个Text Node拆分成三个Text Node。
• set_selection:更新光标选择区域Selection。
• set_node:设置需要加粗Text Node节点properties的加粗属性。
当一个Commond被协议层拆分成一个或者多个Opeartion执行之后,会执行一个非常重要的操作——Normalizing。
3) 秩序维护者——Normalizing
每一次Command操作,绝大部分情况会对Model进行相应修改;我们需要一个秩序维护者——Normalizing,时刻保证对协议Model修改过之后,保持数据结构的正确性。
Slate定义了几个基本的内置Normalizing规则:
每一次Commond之后,Editor都会调用normalizeNode方法,在Normalizing的过程中,发现存在协议结构错误,需要进行错误修复。
Normalizing的另一个强大之处在于,我们可以通过自定义Normalizing,添加自定义的校验规则,实现自定义的需求;在后面的业务扩展章节会,我们会具体讲解如何通过自定义Normalizing快速实现一个自定义主题的能力。
三、 总结
目前Mural已经在闲鱼商品发布、商品详情、消息等场景落地,支持了自定义表情、主题等业务能力,用户体验方面也有了非常大的提升。
本次主要介绍了富文本编辑器Mural整体的架构设计以及协议层的设计;后续我们会系列文章的方式介绍Mural在渲染层的设计、自定义扩展设计,以及交互体验、性能方面的优化实践,敬请期待!
参考链接:
[1] Slate:https://github.com/ianstormtaylor/slate