公式编辑器总结
type
status
date
slug
summary
tags
category
icon
password
Blocking
Blocked by
top
URL
Sub-item
Parent item
背景
在表格中的单元格编辑中新增算量公式，用于进行户型图数据的计算。算量公式是其中最核心的功能，它通过公式来对户型图进行各种精准算量。为了提高公式输入体验，就需要实现一个公式编辑器。而且还需要封装为组件，供其他产品线使用。
任务
实现一个支持高亮、联想、函数提示、括号颜色匹配、单元格引用标记和错误提示功能的公式编辑器。
难点
需要使用富文本，并对公式进行词法解析，语法解析，再把解析结果转换为富文本支持的数据结构来实现功能。
过程
实现思路总结
- 输入公式字符串。
- 对字符串进行词法解析，转换为token词法单元组成的AST抽象语法树。
- 对抽象语法树进行操作，实现功能需求（括号高亮、联想、彩虹括号、单元格引用标识、错误提示）
- 将AST转成slate的数据结构，进行显示。
富文本技术选型
- monaco：vscode使用的富文本框架，包大，功能多很多功能用不到，联想的样式很难定制，只支持纯文本，不支持多层dom嵌套，
- wangeditor，包大，渲染层是vue，是基于slate二次封装，很多功能用不到。
- draft，不可变数据结构，不支持多层dom嵌套的节点。
- slate，是一个富文本框架，只提供最基础的富文本内核，包括数据结构，选区，基础操作，undo、redo，用ts写的，缺点就是需要进行大量的二次开发。
slate提供了富文本编辑器的核心能力，提供 React 渲染层，支持多层dom嵌套结构，包体积小，用ts写的。
但存在的问题是它不是一个开箱即用的框架，例如常用的字体编辑加粗、斜体、下划线、删除线、文字颜色、背景色都需要自己重新开发。
基于slate提供的中间件能力，在上层实现各种复杂的富文本编辑器。
词法解析器技术选型
- acorn ：babel使用的词法解析器，但只是针对js解析的，不支持自定义规则解析
- antlr：一种专门用于做词法解析的工具，但需要学习他专门的语法，学习成本很高，想在项目中使用也很麻烦，每次修改还需要通过命令行把代码转成JS代码。
- highlight.js：不支持导出 AST，而且其词法解析能力相对 prism.js 较弱，在多个类型规则同时匹配时，后面的规则会覆盖前面的。
- prism.js：支持导出AST，而且多个类型规则同时匹配，不会被覆盖，会将类型转换为数组，把匹配的类型都放在数组里。
Slate的一些坑
- 中文输入，用输入法会把拼音和汉字一起输入，需要通过composition事件来处理。
- value不能是空数组中必须有一个空的node，否则会报错。
- value是默认值，不能外部修改，需要通过插件来暴露一个set方法来修改，set时还要注意重置光标位置，如果光标位置不存在，会直接报错。
性能优化
- 提前获取联想内容
- 联想功能进行防抖
- 限制长度
单元测试
随着后期对不同类型的语法支持的增加，如函数、公式、构件、构件属性、构件属性值、单元格、行、列等，正则表达式的数量也增多，达到了20多个。经常会遇到词法解析错误或冲突的情况。为了解决这个问题，引入了 jest 单元测试框架，并编写了许多测试用例以确保词法解析和功能的正确性。
难点
- 词法解析需要编写复杂的正则表达式，并保证准确性。
- 模块化封装，因为还要给其他业务线提供富文本编辑器、公式编辑器，要进行不同程度的程度封装。
成果
工具封装
- slate插件：输入长度限制插件（限制输入长度，需要在所有输入、复制的原子操作中增加一层判断），功能拓展插件（封装一些操作功能，例如光标到最后，重新设置内容（因为slate本身是一个非受控组件），替换文本功能），受控模式插件（提供 setData 方法，通过 diff 实现受控模式），公式插件，选择器插件。
- 词法解析规则（正则表达式）：行、列、单元格规则，构件、构件属性、构件属性值规则，函数规则，操作符规则。
- 公式编辑器：支持只读模式，受控模式，支持传入自定义语法解析和联想功能。具备很好的扩展性，满足了产品对算量公式的需求，并具备很好的扩展性，例如括号颜色匹配和错误提示等功能的实现。后期还是还实现了引用单元格高亮等功能。
文档输出
- 富文本编辑框架选型
- 语法解析框架选型
- 词法解析api文档
- 富文本编辑器api文档
- slate 富文本 API 的使用和注意事项，
- 整个公式编辑器的设计文档。