前言
根据第7周修改的文本实现思路，获取到文本的HTML在前端进行，因此需要一个文本编辑器组件完成以下功能。
- 编辑富文本，并获取到其HTML
- 解析Markdown语法并转化为对应富文本样式
- 解析LaTeX语法并转化为HTML
实现过程
富文本编辑
首先考虑如何实现富文本，第一步当然是查询资料，如何从零实现一个富文本编辑器。
在浏览器中，实现富文本编辑的原理大致可分为下面这三种：
- 在 <textarea> 上定位各种样式。这是 Facebook 早期评论系统所使用的。
- 实现自己的布局引擎，连闪烁的光标都是通过<div> 控制的。这是 Google Docs 所使用的。
- 使用浏览器原生的 <ContentEditable> 编辑模式。这是绝大多数现有富文本编辑器所使用的。
由于第一种方法的功能过于有限、第二种方法的工作量极其庞大，想要实现属于自己的富文本编辑器只能从那个第三种方法入手。然而在进一步的查阅资料中我找到了一篇文章：Why ContentEditable is Terrible 。
这篇文章表述了ContentEditable方法的缺陷，其归根结底在于HTML本身标签的自由性，或者说是弱一致性：对于同一个样式，可能有许多种标签的插入的实现方法。
这种可能存在的冗余的标签可能会导致破坏数据结构的恶性bug。而我所需要的使用场景，需要文本HTML在SVG的<foreignObject>标签与编辑器中互相转化，这种可能的bug可能导致显示问题，为了防止潜在的bug，我决定寻找更优解。
富文本编辑框架
通过查阅资料和比较，我选择使用Slate.js框架。和contentEditable方法相比，这个框架将编辑内容作为数据节点，通过更改其状态来修改其样式；同时能够以组件的形式来实现样式，有着良好的拓展性和较低的门槛。
首先简要介绍其原理：通过用户输入事件生成State–可以理解为插入文字或修改样式等操作，然后根据新的State渲染到编辑器，从而更新编辑器内的节点，显示结果。由于实际的HTML内容是根据抽象数据结构渲染得到了，因此可以避免上述的情况，保证一致性。
但是他也存在一定的缺陷，当将HTML内容转化到slate元素时，必须满足特定的规则才能转化到对应的元素。考虑到目标场景虽然数据流发送频繁，但是只需要在编辑器中进行编辑，因此可以忽略这个缺点。
integratedEditor 集成编辑器设计
包含编辑器及其工具栏。
- 用于作为侧边栏显示。
接口
setContent
传入HTML字符串，设置编辑器的内容
- 编辑器内渲染HTML后显示
getContent
获取到标题编辑器的HTML字符串
- 当编辑器文本包含
${}$形式的字符串时，会根据latex语法将其解析为MathML字符串并替换
editorChange事件
当编辑器修改时，释放editorChange事件
获取到文本内容
当选中组件时，获取到其内部文本的HTML，调用setContent方法传入；同时监听编辑器的editorChange事件，每次事件发生时，调用getContent接口获取到新的HTML并设置到组件。
latex
- 从编辑器内获取到的公式对应的MathML格式如下
<math data-value='{latex公式}'>
...
</math>- 能够正常在编辑器中回显的公式对应的HTML格式同理。
使用方法
富文本
参考工具栏
LaTeX公式
- 使用工具栏插入公式。
即时渲染；inline。 - 在行首输入
$及空格。
非即时渲染；block。 - 在行内使用
${}$包裹
非即时渲染；inline。
markdown
- 标题
行首
#，分为五级
- 列表
-+*
- 引用
>
- 分割线
---
- 代码块
```
- 公式
$
逻辑
- 创建过程
当创建一个新的文本框时，调用核心接口，新建一个TextBox对象，并传入文本框原点坐标坐标 - 获取到特定文本框
当选中画布中文本矢量图时，唤醒Text Editor组件，从而对文本进行修改；修改完成后，根据DOM对象获取到其对应的TextBox对象 - 渲染
当修改某个文本框内容或样式时，即时更新其HTML，从而实现即时渲染
- 对于LaTeX公式，在修改完成后进行渲染
- 更新
当修改文本框内容或样式完成后，调用核心TextBox对象接口，传入新的HTML
