闲鱼技术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

 

 

相关文章
|
Linux UED C++
MarkEdit:相信做技术的同学都会喜欢这个编辑器的,MarkEdit编辑器,让Markdown编辑变得简单而强大,超赞~~~
嗨,大家好,我是小华同学。MarkEdit是一款跨平台的Markdown编辑器,支持Windows、macOS和Linux,提供实时预览、快捷键、自定义主题和插件系统等核心功能。它适用于日常笔记、技术文档、博客写作、学术论文和电子书制作等多种场景。
799 31
|
开发框架 Dart 前端开发
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。本文从 Flutter 简介、特点、开发环境搭建、应用架构、组件详解、路由管理、状态管理、与原生代码交互、性能优化、应用发布与部署及未来趋势等方面,全面解析 Flutter 技术,助你掌握这一前沿开发工具。
1213 8
|
SQL 分布式计算 大数据
Flutter技术实践问题之Flutter应用过程中的基础建设如何解决
Flutter技术实践问题之Flutter应用过程中的基础建设如何解决
137 10
|
Dart Android开发 开发者
Flutter跨平台开发实战:构建高性能移动应用
【10月更文挑战第25天】随着移动设备种类的增加,开发者面临跨平台应用开发的挑战。Flutter作为Google推出的开源UI工具包,凭借其强大的跨平台能力和高效的开发效率,成为解决这一问题的新方案。本文将介绍Flutter的核心优势、实战技巧及性能优化方法,通过一个简单的待办事项列表应用示例,帮助读者快速上手Flutter,构建高性能的移动应用。
339 0
|
新零售 前端开发 小程序
Flutter技术实践问题之基于Flutter的Canvas的应用优势如何解决
Flutter技术实践问题之基于Flutter的Canvas的应用优势如何解决
257 2
|
Web App开发 新零售 前端开发
Flutter技术实践问题之阿里集团内Flutter体系化建设如何解决
Flutter技术实践问题之阿里集团内Flutter体系化建设如何解决
238 1
|
Unix API 开发者
Flutter笔记:使用Flutter私有类涉及的授权协议问题
Flutter笔记:使用Flutter私有类涉及的授权协议问题
385 1
|
Kubernetes Cloud Native 搜索推荐
探索云原生技术:Kubernetes入门与实践打造个性化安卓应用:从零开始的Flutter之旅
【8月更文挑战第31天】云原生技术正改变着应用开发和部署的方式。本文将带你了解云原生的基石——Kubernetes,通过实际的代码示例,从安装到部署一个简单的应用,让你迅速掌握Kubernetes的核心概念和操作方法。无论你是初学者还是有一定经验的开发者,这篇文章都将成为你进入云原生世界的桥梁。
|
开发工具
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
|
开发工具
Vim 编辑器:高效文本编辑的瑞士军刀
**Vim 概览:** Vim 是一个功能丰富的文本编辑器,以其高度可定制性著称。文章介绍了 Vim 的高效使用技巧,包括快捷打开文件、命令行模式下的常用命令、查找与替换、删除和复制文本。还讨论了配置 `.vimrc` 文件以自定义设置,如改变 leader 键、设置缩进和高亮,并展示了安装插件如 vim-airline 和 vim-snazzy 的方法。通过这些技巧,用户能提升 Vim 使用效率。
331 5