block-style 的编辑器在一些地方的编辑体验可能会有一些不尽人意（跨 block 选择），但是能够在一些场景下显著减少代码的复杂度（比如类型交互、复制粘贴），对个人开发者来说，或许会更适合一些。
结合 markdown 和富文本编辑器各自的优点。
markdown 的优点主要在于边界清晰，所见即所得。而富文本编辑器的优点则是灵活。
能不能既边界清晰，又灵活呢？
我这个里面，markdown 元素是边界符，不是字符
对着边界符删除是会直接删除效果
第一个要解决的问题主要就是，当前光标位置的相邻（上一个/下一个）光标位置是什么
原浏览器的行为是，只看文本移动光标
<p>text<i>text|</i>|</p>
这两个竖杠，在浏览器上是一个位置。 而我想实现一个格式边界分明的编辑器，就需要让光标在这两个竖杠上是两个位置，按右箭头，左边的可以跳到右边。
这个改动，一个是视觉上怎么展示，主要是加 markdown-style 的额外文本。
另一个是算法上怎么实现，这就需要重写浏览器的键盘事件
从容易理解的角度，就是需要把<i> ，</i> 也各自当成一个字符。
另外还要考虑到公式这种，没法编辑的存在。也就是公式不管多长，统一算一个字符
第二个要解决的问题，是跨 block 间光标的移动
原浏览器的行为，其实也是跟着文本走
<p>te<i>te|xt</i></p>
<p>text|</p>
这两个竖杠是上下一致的
我要实现考虑标识符占位的情况下，光标上下移动应该在哪里
这块相对简单一些，主要要考虑的是两种光标位置的表示
浏览器只支持 container, offset 的形式
也就是相对位置
<p>text<i>te|xt</i></p> 竖杠所处的位置是 <i>, 2
但是为了block 间上下移动，所以你要算这个光标在 block 中整体所处的 offset
这个的主要难点在于上方的 block 切到下方的 block
因为 tm 的要考虑换行
而且还要考虑 soft-wrap 这种软换行
js 没有原生支持的 api
最后就是 hack 的用 css 之类的计算出来的，还发了条 Stack Overflow（
暂时差不多是这样
再就是各种边界条件。