解决 slate 编辑器在 safari 下的兼容问题及中文输入法光标问题

前言

用过 slate 编辑器的都知道它对于中文输入有以下兼容性问题：

• 在 chrome 浏览器下，输入中文是，编辑区的光标始终停在拼音的前面（不影响输入，但体验很糟）
• 在 safari 等支持 onbeforeinput 方法的浏览器下（HAS_INPUT_EVENTS_LEVEL_2）无法使用输入法输入中文

GitBook 使用的也是 slate 编辑器，但它对 slate 底层做了很多修改，解决了这些问题。在我对比 gitbook/slate 与 slate 时，没有找到解决方案。

后来，我在 slate 的 issue 里查找该问题，找到了一些不错的回答。

环境：slate 0.47.1 slate-react 0.22.1

光标停留在拼音前的问题

参考 pull request 。找到相关源代码，修改即可。

按照上述代码修改之后，发现光标问题解决了，且 safari 浏览器下也有了一些小变化：输入法能正常工作了，但是最后的输入内容不会输入到 浏览器内。

safari 输入问题

参考 issue 。最后面用户 hudk114 的评论里有提到，需要在 onCompositionEnd 时，根据是否需要插入数据（HAS_INPUT_EVENTS_LEVEL_2 为真时），调用 edit.insertText 插入数据。

这样写就行：

const isSynthetic = !!event.nativeEvent
if (isSynthetic && HAS_INPUT_EVENTS_LEVEL_2){
  editor.insertText(event.data);
}

修改了这两处之后，输入中文的问题即可解决。