slate 从入门到放弃的踩坑之路

[dounai1306]

star18k，但是pr和issue的回复让人无力吐槽。

1、输入内容重复渲染

在chrome73及以下版本中，0.58.4表现为中文重复渲染，0.57.1表现为英文重复渲染。产生这个问题的根本原因在于chrome73对某个时间不支持，在58.4版本时官方未能给出有效的解决方案，在当时的情况下升级chrome到最新版本，或者将slate包导入到项目中，作为项目源代码的一部分进行修改。

2、DOM point 导致的编辑器崩溃

Cannot resolve a Slate point from DOM point: [object HTMLLIElement],0
Cannot resolve a DOM point from Slate point: {"path":[0,1,0],"offset":106}

在回车、backspace或者点击slate空白处时，会触发该问题，页面如上的报错信息。官方网上也提出很多解决方式，也基本上算是一些hack。产生该问题可能是react-dom某个版本的bug，我本地react-dom是16.13.0，升级到16.13.1后问题解决。

3、组件图片上传 / 粘贴图片上传

官方提供了一个 slate-drop-or-paste-images 包支持图片上传，虽然历史久了点还是能用的，相对来说也比较容易上手。粘贴的时候官方是直接把base64的图片插入到编辑器中，可以将base64->blob再通过接口上传并返回图片的网络地址，然后插入到编辑器中。这里也有一个问题，就是不同浏览器对于剪贴板内容的获取。网络上的图片，或者截图的图片，浏览器是存在于剪贴板中，浏览器可以轻而易举的获取到。 如果图片的来源是word，Outlook等系统软件内的图片时，safari下依然可以政策获取到剪贴板中的图片信息，但是在chrome中就获取不到。

4、图片文件后无法进行下一行的输入

官方的demo中，把编辑器内容清空后，插入图片，使用键盘上下左右方向键箭头发现，无法选择位于图片后的位置，没有办法在图片后方插入文字。这是因为图片元素设置了contentEditable不可编辑的状态导致，之所以设置这个状态是为了避免第二个问题，大部分情况下contentEditable都可以解决编辑器崩溃的问题。解决办法就是在图片插入后，在图片后方追加一个段落标签即可。

5、backspace 清空编辑器后无法键入内容

查看了下官方最新的demo，这个问题依然没有解决，只能放弃slate