闲鱼技术2022年度白皮书-Flutter主题-打造Flutter高性能富文本编辑器——协议篇(下)

简介: 闲鱼技术2022年度白皮书-Flutter主题-打造Flutter高性能富文本编辑器——协议篇

接上篇:


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的处理过程:

image.png


对选中文本加粗这样一个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规则:

 

image.png


每一次Commond之后,Editor都会调用normalizeNode方法,在Normalizing的过程中,发现存在协议结构错误,需要进行错误修复

 

Normalizing的另一个强大之处在于,我们可以通过自定义Normalizing,添加自定义的校验规则,实现自定义的需求;在后面的业务扩展章节会,我们会具体讲解如何通过自定义Normalizing快速实现一个自定义主题的能力

 

 

 

三、 总结

 

目前Mural已经在闲鱼商品发布、商品详情、消息等场景落地,支持了自定义表情、主题等业务能力,用户体验方面也有了非常大的提升。

 

本次主要介绍了富文本编辑器Mural整体的架构设计以及协议层的设计;后续我们会系列文章的方式介绍Mural在渲染层的设计、自定义扩展设计,以及交互体验、性能方面的优化实践,敬请期待!

 

参考链接

[1] Slate:https://github.com/ianstormtaylor/slate

 

 

相关文章
|
21天前
|
SQL 分布式计算 大数据
Flutter技术实践问题之Flutter应用过程中的基础建设如何解决
Flutter技术实践问题之Flutter应用过程中的基础建设如何解决
22 10
|
21天前
|
新零售 前端开发 小程序
Flutter技术实践问题之基于Flutter的Canvas的应用优势如何解决
Flutter技术实践问题之基于Flutter的Canvas的应用优势如何解决
20 2
|
12天前
|
Kubernetes Cloud Native 搜索推荐
探索云原生技术:Kubernetes入门与实践打造个性化安卓应用:从零开始的Flutter之旅
【8月更文挑战第31天】云原生技术正改变着应用开发和部署的方式。本文将带你了解云原生的基石——Kubernetes,通过实际的代码示例,从安装到部署一个简单的应用,让你迅速掌握Kubernetes的核心概念和操作方法。无论你是初学者还是有一定经验的开发者,这篇文章都将成为你进入云原生世界的桥梁。
|
Dart JavaScript Shell
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(8)
本书将详细讲解闲鱼Flutter&FaaS云端一体化架构,以及闲鱼基于Flutter的架构演进与创新,学习一套全面的Flutter架构应用方案。本书介绍闲鱼技术团队利用Flutter技术改造和上线复杂业务的混合工程改造实践,抽取Flutter依赖到远程的实现细节,以及使用Plugin桥接获取设备信息、使用基础网络库等混合开发实践指南。这些实践遍布闲鱼各大业务线和应用场景,为读者使用Flutter打造自己的研发体系探索一条实践之路。除了介绍闲鱼Flutter应用框架Fish Redux、开发利器AspectD、FlutterBoost等一众开源工具与开发实践指南,你还将在......
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(8)
|
Dart JavaScript API
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(10)
本书将详细讲解闲鱼Flutter&FaaS云端一体化架构,以及闲鱼基于Flutter的架构演进与创新,学习一套全面的Flutter架构应用方案。本书介绍闲鱼技术团队利用Flutter技术改造和上线复杂业务的混合工程改造实践,抽取Flutter依赖到远程的实现细节,以及使用Plugin桥接获取设备信息、使用基础网络库等混合开发实践指南。这些实践遍布闲鱼各大业务线和应用场景,为读者使用Flutter打造自己的研发体系探索一条实践之路。除了介绍闲鱼Flutter应用框架Fish Redux、开发利器AspectD、FlutterBoost等一众开源工具与开发实践指南,你还将在......
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(10)
|
缓存 Dart JavaScript
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(9)
本书将详细讲解闲鱼Flutter&FaaS云端一体化架构,以及闲鱼基于Flutter的架构演进与创新,学习一套全面的Flutter架构应用方案。本书介绍闲鱼技术团队利用Flutter技术改造和上线复杂业务的混合工程改造实践,抽取Flutter依赖到远程的实现细节,以及使用Plugin桥接获取设备信息、使用基础网络库等混合开发实践指南。这些实践遍布闲鱼各大业务线和应用场景,为读者使用Flutter打造自己的研发体系探索一条实践之路。除了介绍闲鱼Flutter应用框架Fish Redux、开发利器AspectD、FlutterBoost等一众开源工具与开发实践指南,你还将在......
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(9)
|
JavaScript 持续交付 开发工具
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(7)
本书将详细讲解闲鱼Flutter&FaaS云端一体化架构,以及闲鱼基于Flutter的架构演进与创新,学习一套全面的Flutter架构应用方案。本书介绍闲鱼技术团队利用Flutter技术改造和上线复杂业务的混合工程改造实践,抽取Flutter依赖到远程的实现细节,以及使用Plugin桥接获取设备信息、使用基础网络库等混合开发实践指南。这些实践遍布闲鱼各大业务线和应用场景,为读者使用Flutter打造自己的研发体系探索一条实践之路。除了介绍闲鱼Flutter应用框架Fish Redux、开发利器AspectD、FlutterBoost等一众开源工具与开发实践指南,你还将在......
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(7)
|
Dart JavaScript Java
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(6)
本书将详细讲解闲鱼Flutter&FaaS云端一体化架构,以及闲鱼基于Flutter的架构演进与创新,学习一套全面的Flutter架构应用方案。本书介绍闲鱼技术团队利用Flutter技术改造和上线复杂业务的混合工程改造实践,抽取Flutter依赖到远程的实现细节,以及使用Plugin桥接获取设备信息、使用基础网络库等混合开发实践指南。这些实践遍布闲鱼各大业务线和应用场景,为读者使用Flutter打造自己的研发体系探索一条实践之路。除了介绍闲鱼Flutter应用框架Fish Redux、开发利器AspectD、FlutterBoost等一众开源工具与开发实践指南,你还将在......
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(6)
|
Dart JavaScript 开发工具
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(5)
本书将详细讲解闲鱼Flutter&FaaS云端一体化架构,以及闲鱼基于Flutter的架构演进与创新,学习一套全面的Flutter架构应用方案。本书介绍闲鱼技术团队利用Flutter技术改造和上线复杂业务的混合工程改造实践,抽取Flutter依赖到远程的实现细节,以及使用Plugin桥接获取设备信息、使用基础网络库等混合开发实践指南。这些实践遍布闲鱼各大业务线和应用场景,为读者使用Flutter打造自己的研发体系探索一条实践之路。除了介绍闲鱼Flutter应用框架Fish Redux、开发利器AspectD、FlutterBoost等一众开源工具与开发实践指南,你还将在......
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(5)
|
Dart JavaScript Android开发
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(4)
本书将详细讲解闲鱼Flutter&FaaS云端一体化架构,以及闲鱼基于Flutter的架构演进与创新,学习一套全面的Flutter架构应用方案。本书介绍闲鱼技术团队利用Flutter技术改造和上线复杂业务的混合工程改造实践,抽取Flutter依赖到远程的实现细节,以及使用Plugin桥接获取设备信息、使用基础网络库等混合开发实践指南。这些实践遍布闲鱼各大业务线和应用场景,为读者使用Flutter打造自己的研发体系探索一条实践之路。除了介绍闲鱼Flutter应用框架Fish Redux、开发利器AspectD、FlutterBoost等一众开源工具与开发实践指南,你还将在......
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(4)