Slate: Can not input chinese in safari

[boyrest]

The issue is caused in Safari.
When I choose Chinese, I can't enter.
For example, I enter "好的(haode)"


[miterfrants]

OMG! I got same problem.

[zjfjiayou]

me too! Ios has the same problem #2468

[hangzz]

@zjfjiayou

[Yixian15]

I've been working on these Chinese input issues for a few days. There're actually two issues when it comes to typing Chinese in safari browser (Mac OS 10.12.6, Safari 10.1.2).

The first issue: editor doesn't insert Chinese character after word selection, i.e. it doesn't insert anything when composition is over. For browsers like Chrome without support for input events level 2, editor would simply call insertText() in onBeforeInput function as an after plugin. But for safari browser, editor decides what to do next depending on event.inputType, it seems the case 'insertFromComposition' is missed at this place. Therefore @hangzz 's solution would do the trick, which makes editor insert composition result.

The second issue: one key stroke inserts two characters when composing Chinese at end of block, which is the issue mentioned above. Seems it has something to do with onSelect after plugin, commenting out the second last line in that function

editor.select(selection) // slate-react/src/plugins/after, onSelect function

makes word composing work, but it invalidates select action of course. I'm stuck at this place to make both select and word composition work. If anyone has any idea to fix this issue, it would be greatly appreciated.

Chinese translation:

Safari 浏览器输入中文两个问题：

• 选词之后无法插入文字，解决办法，在 onBeforeInput after plugin 里面补充 insertFromComposition 的 case，就是楼上 @hangzz 的方法。
• 在段落最后一次按键输入两个字母，after plugin onSelect 去掉最后的 editor.select(selection) 之后可以正常输入，但是那样会丢失选择的位置，还在研究解决方案。

[ChalkleyZhou]

Same problem.
MacOS 10.14.1
Safari 12.0.1

Already insert the code

case "insertFromComposition ":

but still got the problem

[sunshinelee]

Insert the code

case "insertFromComposition ":

but the problem cann't be solved completely while some Chinese shows and others don't

[hudk114]

事实上这是两个问题。两者的原因都是safari和chrome上触发事件的时机不一致。简单来说，chrome里beforeinput和onselect事件都只会在compositionend之后触发，而safari上，每次keyup都会触发这两个事件。

1. 中文不能输入的问题
   beforeinput在safari里因为是一个非native事件，所以不会触发insertText方法，可以采用上文说的添加insertFromComposition方法，但是个人觉得这种输入事件在compositionend里添加更为合适；
   

1. 段尾无法输入问题
   在safari中，每次输入都会触发onselect事件，而onselect中有这么一段代码
   
   其中，findRange方法是根据dom的selection找到slate数据结构里对应的selection范围。不幸的是，在中文输入时，slate结构里的数据并没有更新，因此返回的selection一定是错误的（有兴趣的可以看下findRange方法里的findPoint方法）。这个bug在非段尾输入时不会造成影响，但是在段尾时一定会进入底下的if逻辑，其中的updateSelection方法会触发compositionend，从而造成输入失效。
   从事件上，可以看到触发里 onselect -> compositionend -> onselect，其中第二次select会走到after里的select处理
   从根本上，这个bug的解决方法是compositionStart的时候不进行updateselection操作，但是单纯的从这段代码来看，感觉这里进行一次额外的updateSelection操作的意义，因此直接去掉也可以
   

[ianstormtaylor]

Hey, thanks for reporting this. I think this is actually a duplicate of https://github.com/ianstormtaylor/slate/issues/2457, so I'm going to close this in favor of that one. Feel free to comment over there with any other info!

[lazybios]

@hudk114 也遇到了同样的问题，能不能提供一下完整的gist代码，你那个judgeNeedInsertText方法判断依据是啥？