Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can not input chinese in safari #2457

Closed
boyrest opened this issue Nov 27, 2018 · 9 comments

Comments

Projects
None yet
10 participants
@boyrest
Copy link

commented Nov 27, 2018

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

issue1

@miterfrants

This comment has been minimized.

Copy link

commented Nov 29, 2018

OMG! I got same problem.

@zjfjiayou

This comment has been minimized.

Copy link

commented Dec 4, 2018

me too! Ios has the same problem #2468

@hangzz

This comment has been minimized.

Copy link

commented Dec 13, 2018

image

@zjfjiayou

@Yixian15

This comment has been minimized.

Copy link

commented Dec 17, 2018

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

This comment has been minimized.

Copy link

commented Dec 19, 2018

Same problem.
MacOS 10.14.1
Safari 12.0.1

Already insert the code

case "insertFromComposition ":

but still got the problem

@sunshinelee

This comment has been minimized.

Copy link

commented Dec 21, 2018

Insert the code

case "insertFromComposition ":

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

@hudk114

This comment has been minimized.

Copy link

commented May 8, 2019

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

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

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

@ianstormtaylor

This comment has been minimized.

Copy link
Owner

commented May 9, 2019

Hey, thanks for reporting this. I think this is actually a duplicate of #2457, so I'm going to close this in favor of that one. Feel free to comment over there with any other info!

@lazybios

This comment has been minimized.

Copy link

commented May 10, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.