打造Flutter高性能富文本编辑器——协议篇

闲鱼作为一个二手闲置交易平台，卖家发布商品产出优质的供给尤为重要；商品发布器希望拥有富文本编辑能力，让用户简单便捷的方式产出更加优质的内容；Flutter本身没有富文本编辑器的能力的，只有最基础的文本编辑器TextField；对于更加复杂的场景，比如支持自定义表情、主题、有序段落等能力，目前flutter组件是无法满足我们的业务诉求，另外在交互体验上与Native仍然存在一定的差距；为了解决业务中面临的以上问题，我们决定设计并实现一个Flutter场景下高性能、可扩展的富文本编辑器。

富文本编辑器整体架构设计

首先我们来看一看整体的架构设计分层：

自下而上主要分四层：

1. 1. 协议层：主要负责Model的定义、Selection描述、Commond事件逻辑处理，以及协议Normalizing校验；

2. 2. 能力扩展层：能力扩展层提供丰富的plugin能力，既有内置的plugin，如：纯文本转换，undo/redo等能力，同时也非常方便的支持业务层自定义的扩展，例如支持站外H5页面展示的model to HTML的序列化plugin；

3. 3. 渲染层：渲染层主要实现将富文本Model转换成Flutter Widget渲染，以及光标、选区、ToolBar等计算和渲染，以及用户手势交互事件等；

4. 4. 业务扩展层：在Mural的设计之初，可扩展就是设计过程中非常重要的一部分，我们为业务方提供了非常灵活、功能强大的扩展能力，通过自定义Node、Plugin、Normalizing，实现如自定义表情、主题、段落、语法高亮等能力；

协议层设计

富文本编辑器对大家来说并不陌生，发展至今，已经涌现出非常多有优秀的开源富文本编辑器；当我们想要做Flutter富文本协议的时候，第一个想法就是先了解优秀的开源富文本编辑器方案，避免闭门造车；

目前比较优秀的开源富文本编辑器，如CKEditor、Quill、Prosemirror、Draft、Slate等等；在了解和对比过后，我们决定使用Slate作为我们的富文本编辑器的协议；