什么是用户交互层
在文档编辑器的架构上，直接和用户交互相关的逻辑模块，我们会称为用户交互层，一般涵盖
- 内容呈现
- 选区
- 光标
- 用户输入
- 悬浮操作菜单
- 等
竞品对比
效果对比
选中的效果，我个人认为排名为
- 金山文档
- 飞书
- notion / google docs
金山文档在呈现block块的概念最好
-
整体清晰的块结构
-
局部块效果：高亮块/有序无序列表
飞书在列表上，是没有选中前面的序号的，这个也是原生系统选区的一个问题
不过飞书也有跨区的实现，选区是自己绘制的，实现思路和金山文档的一致
方案对比
- notion/feishu是基于contenteditable实现的选区系统
- 金山文档是自己实现的选区/光标/输入
- google docs是基于canvas, 排版和选区都是自己实现的
浏览器差异
需要考虑pc/mobile/pad各种设备，不同浏览器/客户端/小程序等容器，同时兼顾选区效果/光标/操作交互一致性体验问题
- 选区高亮效果不统一
- 点击定位的准确性
- input输入（各种输入法的差异）
- 移动端水滴已经拖动选中效果
- 等
自实现选区系统
利用浏览器原生的选区/光标系统是足够用的，但是如果要一致性更好，就需要花多点精力去实现更复杂的选区系统了
那么如何去实现一套选区系统呢？
画一个大致的架构图，参考的是canvas自实现选区的做法，更多细节不方便透漏。如果有不对的地方，欢迎评论讨论
