Trix: (Mobile Support)Trix editor does not support Chinese input keyboard on iOS

[cndaniel]

Steps to Reproduce

1. please enable Chinese simplified Pinyin keyboard in iOS system preference
2. Open trix-editor.org in Safari
3. Clear all placeholder text in editor first. Use Chinese simplified Pinyin keyboard to type. Like 'nihao'(then click the first two characters on the selection line on the keyboard above) will normally turning the latin pinyin into two Chinese characters(你好） meaning Hello. Now, Trix is recording only pinyin after selection, the system keyboard is supposed to return the encoded Chinese characters, which the trix seems to escape them and force them to clear. The cursor will then jump to the front waiting for new input. Therefore, unless a user put a space in the beginning, trix will never record Chinese Character by using Chinese simplified Pinyin input method.

Details

• Trix version: trip-editor.org
• Browser name and version: Safari 10
• Operating system: iOS 10

screenshot

First I test the Chinese Pinyin input on Safari address text-area. (No cursor clearing and wiping)
then I test in trix editor, I can't write a complete sentence. Each time I tried to write down some characters, trix will force the cursor to the front.

[cqpx]

Also confirmed on macOS Safari 10.1.1 for both Chinese and Japanese input methods.
After bisected the commits, I found that this issue started from 0.9.2.
0.9.0 don't have this issue but it has a different one.

[javan]

Thanks @cqpx. Does it only occur when the editor is empty?

[cqpx]

Sort of, please see my screenshot.

When I clear the text area with Delete key, it will leave a strange vertical line at the beginning of the text area.

When I start typing from the strange vertical line with either empty or filled editor,

1. It will move cursor back to the beginning when I pressed Enter to confirm my selection (it should stay at the end so that I can continue typing)
2. When I continue typing after the above step, the first character was swallowed and cursor moved to the beginning again

[biallo]

@javan

The problem should be here https://github.com/basecamp/trix/blob/f677a9429bb8838afb74783ae80019ec8b9608a3/src/trix/models/location_mapper.coffee#L113

When enter Chinese (Japanese should be the same), the walker.currentNode is not complete in Safari(I have test on OSX, iOS should be the same).

I'm trying to find a solution, but the progress is slow, so I write down the problem and hope to get some ideas or help.

Here is the log I collected:

In Chrome
_// Step 1: Type 'a'_

node <div>​…​</div>​
trix.js:10055 nodeIsBlockStartComment(node) false

trix.js:10054 node <!--block-->
trix.js:10055 nodeIsBlockStartComment(node) true

trix.js:10054 node "a&nbsp;"
trix.js:10055 nodeIsBlockStartComment(node) false

trix.js:10054 node <div>​…​</div>​
trix.js:10055 nodeIsBlockStartComment(node) false

trix.js:10054 node <!--block-->
trix.js:10055 nodeIsBlockStartComment(node) true

trix.js:10054 node "a&nbsp;"
trix.js:10055 nodeIsBlockStartComment(node) false

_// Step 2: Type space, get a '啊'_

trix.js:10054 node <div>​…​</div>​
trix.js:10055 nodeIsBlockStartComment(node) false

trix.js:10054 node <!--block-->
trix.js:10055 nodeIsBlockStartComment(node) true

trix.js:10054 node "啊&nbsp;"
trix.js:10055 nodeIsBlockStartComment(node) false

trix.js:10054 node <div>​…​</div>​
trix.js:10055 nodeIsBlockStartComment(node) false

trix.js:10054 node <!--block-->
trix.js:10055 nodeIsBlockStartComment(node) true

trix.js:10054 node "啊&nbsp;"
trix.js:10055 nodeIsBlockStartComment(node) false

In Safari
_// Step 1: Type 'a'_

node <div>​…​</div>​
trix.js:10055 nodeIsBlockStartComment(node) false

trix.js:10054 node <!--block-->
trix.js:10055 nodeIsBlockStartComment(node) true

trix.js:10054 node "a&nbsp;"
trix.js:10055 nodeIsBlockStartComment(node) false

trix.js:10054 node <div>​…​</div>​
trix.js:10055 nodeIsBlockStartComment(node) false

trix.js:10054 node <!--block-->
trix.js:10055 nodeIsBlockStartComment(node) true

trix.js:10054 node "a&nbsp;"
trix.js:10055 nodeIsBlockStartComment(node) false

_// Step 2: Type space, get a '啊'
// The <! - block -> was lost_

trix.js:10054 node <div>​…​</div>​
trix.js:10055 nodeIsBlockStartComment(node) false

trix.js:10054 node "啊&nbsp;"
trix.js:10055 nodeIsBlockStartComment(node) false

trix.js:10054 node <div>​…​</div>​
trix.js:10055 nodeIsBlockStartComment(node) false

trix.js:10054 node "啊&nbsp;"
trix.js:10055 nodeIsBlockStartComment(node) false

[biallo]

By the way, I found another problem that might be related to this.

When you enter a lot of Chinese, the editor may lose focus when you execute undo.
If you continue to enter text at this time, they do not appear in the editor. But when you click the input area to get focus again, after you press any key, the content you just entered will appear in the editor as a lot of letters.

This problem occurs in both Safari and Chrome.

[stale[bot]]

This issue has been automatically marked as stale after 90 days of inactivity. It will be closed if no further activity occurs.