所见即所得模式加入划词评论

[88250]

需求

0. 开启评论模式： options.comment.enable
1. 选中某一段文字后，上方显示评论按钮，可以选中某段文字进行评论，允许对同一段文字重复或者交叉选择。对应接口 options.comment.add: (id: string, text: string) => void
2. 1. 评论以小卡片的形式展示在编辑器右侧。对应接口 options.comment.add: (id: string, text: string) => void
   2. 评论之后文字添加下划线样式。无对应接口，会自动添加
   3. 当鼠标滑动到评论卡片上时，左侧编辑器中选中的内容需要加 background 底色高亮显示。对应接口 vditor.hlCommentIds(ids: string[]) 和 vditor.unHlCommentIds(ids: string[])
3. 评论可以进行回复、删除、编辑和点赞操作。对应接口需自主研发，涉及的删除接口为 vditor.removeCommentIds(removeIds: string[]) => void
4. 评论样式参考如下，打码处显示为人名和头像。对应界面需自主研发
   图1 评论界面参考：
   图2 评论完成后界面参考：
   图3 评论回复界面参考：
5. 评论的文字如果删除了，需要将对应的评论也删除或隐藏。对应接口 options.comment.remove: (ids: string[]) => void
6. 用户初次打开页面时，渲染文章当前页面的评论。对应接口 vditor.getCommentIds() => string[]

实现

1. 划词后生成 <span class="vditor-comment" data-cmtids="20201110111203-yt2ywdm">foo</span> 包裹

2. 重复/交叉划词时对已有元素进行拆分：
   重复：<span class="vditor-comment" data-cmtids="20201110111203-yt2ywdm 20201110114407-nw2kukz">fo</span><span class="vditor-comment" data-cmtids="20201110114407-nw2kukz">o</span>，开头的 fo 被重复划词
   交叉：<span class="vditor-comment" data-cmtids="20201110111203-yt2ywdm">f</span><span class="vditor-comment" data-cmtids="20201110111203-yt2ywdm 20201110114407-nw2kukz">o</span><span class="vditor-comment" data-cmtids="20201110114407-nw2kukz">o</span>，中间的 o 被交叉划词

   重复是交叉的一种特殊情况，只需处理好交叉即可。

3. Lute 渲染行级 HTML 元素时如果遇到 <span class="vditor-comment" data-cmtids=" 则以原始文本渲染输出