解決 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);
}

修改了這兩處以後，輸入中文的問題便可解決。