Handle composition

[Reinmar]

Main requirement here is to not touch the DOM and selection while user is composing a text. The only re-rendering can take place when composition finishes. That's what should satisfy the simple cases.

In more complex one we may need to handle situations similar to autocorrection and spellchecking (see ckeditor/ckeditor5-typing#3).

Requires: https://github.com/ckeditor/ckeditor5-engine/issues/460.

[pjasiun]

Note that render was design the way it should not break the composition. It means the view.render should be called every time model changes, but it should do nothing in case of composition.

[Reinmar]

I wouldn't risk rendering during composition. It's simply too dangerous.

[Reinmar]

May be helpful: https://gist.github.com/darobin/0204811507bb043670b68cf7b1b10614

[Reinmar]

I can see now that composition is totally broken. It worked before, so either it's been broken in v0.2.0 or something has changed in Chrome.

[Reinmar]

Yep, something got much worse in v0.2.0. You can compare it with https://ckeditor5.github.io/releases/v0.1.0/.

[f1ames]

Using the suggested code I rechecked composition events flow for:

1. Mac accent composition (after pressing some letter like a for a little longer a panel is displayed with letter modifications).
   Key sequence a (longer press) + right arrow + right arrow + right arrow + enter.
2. Spanish accent composition ' + a (Spanish keyboard).
   Key sequence ' + a.
3. Japanese composition (Hiragana).
   Key sequence a + a + down arrow + down arrow + down arrow + enter + enter.

Each list contains events in order of execution, each event info includes:
Event name : Event keyCode : Event key

Chrome

1.

keydown : 65 : a
keydown : 65 : a
keydown : 65 : a
keydown : 65 : a
keydown : 65 : a
keydown : 229 : ArrowRight
compositionstart : a : undefined
compositionupdate : ą : undefined
keydown : 229 : ArrowRight
compositionupdate : à : undefined
keydown : 229 : ArrowRight
compositionupdate : á : undefined
keydown : 229 : Enter
compositionupdate : á : undefined
compositionend : á : undefined

2.

keydown : 229 : Dead
compositionstart : undefined : undefined
compositionupdate : ´ : undefined
keydown : 229 : á
compositionupdate : á : undefined
compositionend : á : undefined

keydown : 229 : a
compositionstart : undefined : undefined
compositionupdate : あ : undefined
keydown : 229 : a
compositionupdate : 嗚呼 : undefined
keydown : 229 : ArrowDown
keydown : 229 : ArrowDown
compositionupdate : ああ : undefined
keydown : 229 : ArrowDown
compositionupdate : 臆 : undefined
keydown : 229 : Enter
keydown : 229 : Enter
compositionupdate : 臆 : undefined
compositionend : 臆 : undefined

Safari

1.

keydown : 65 : undefined
keydown : 229 : undefined
keydown : 229 : undefined
keydown : 229 : undefined
compositionstart : a : undefined
compositionupdate : ą : undefined
keydown : 229 : undefined
compositionupdate : à : undefined
keydown : 229 : undefined
compositionupdate : á : undefined
keydown : 229 : undefined
compositionend : á : undefined
keydown : 229 : undefined

2.

compositionstart : 0 : undefined
compositionupdate : ´ : undefined
keydown : 229 : undefined
compositionend : á : undefined
keydown : 229 : undefined

3.

compositionstart : 0 : undefined
compositionupdate : あ : undefined
compositionupdate : あ : undefined
keydown : 229 : undefined
compositionupdate : 嗚呼 : undefined
keydown : 229 : undefined
compositionupdate : 嗚呼 : undefined
compositionupdate : 嗚呼 : undefined
compositionupdate : 嗚呼 : undefined
compositionupdate : 嗚呼 : undefined
keydown : 229 : undefined
compositionupdate : ああ : undefined
compositionupdate : ああ : undefined
keydown : 229 : undefined
compositionupdate : 臆 : undefined
compositionupdate : 臆 : undefined
keydown : 229 : undefined
keydown : 229 : undefined
compositionend : 臆 : undefined
keydown : 229 : undefined

Firefox

1.

keydown : 65 : a
keydown : 65 : a
keydown : 65 : a
keydown : 65 : a
keydown : 65 : a
keydown : 39 : ArrowRight
compositionstart : a : undefined
compositionupdate : ą : undefined
compositionupdate : à : undefined
compositionupdate : á : undefined
compositionend : á : undefined

2.

keydown : 0 : Dead
compositionstart : undefined : undefined
compositionupdate : ´ : undefined
compositionupdate : á : undefined
compositionend : á : undefined

3.

keydown : 65 : a
compositionstart : undefined : undefined
compositionupdate : あ : undefined
compositionupdate : 臆 : undefined
compositionupdate : ああ : undefined
compositionupdate : 嗚呼 : undefined
compositionend : 嗚呼 : undefined

Edge

1. -

2. Accented letter is inserted after pressing a, on ' nothing happens (no visual feedback).

keydown : 222 : Unidentified
keydown : 65 : a

3. The key sequence consist of 3 a in this case (after two there is no dialog to change letters).

keydown : 229 : Unidentified
compositionstart : undefined : undefined
compositionupdate : あ : undefined
keydown : 229 : Unidentified
compositionupdate : ああ : undefined
keydown : 229 : Unidentified
keydown : 40 : Down
keydown : 229 : Unidentified
compositionupdate : あああ : undefined
keydown : 229 : Unidentified
compositionupdate : ああああ : undefined
keydown : 229 : Unidentified
compositionupdate : ああああああ : undefined
keydown : 229 : Unidentified
compositionend : ああああああ : undefined

---

Base on the above, it seems that compositionstart and compositionend are pretty reliable when it comes to determining when composition start and ends (well, it seems obvious, but sometimes some behaviors are quite unexpected in some browsers).
Only Edge does not use composition for Spanish accents. I am not yet sure if it will have any negative effect on typing.
Also Mac accent composition fires few keydown events before starting composition, however nothing is inserted (only one letter) so it should not cause any issue in typing.

[Reinmar]

Only Edge does not use composition for Spanish accents. I am not yet sure if it will have any negative effect on typing.

It should be fine as long as we don't re-render the DOM after the accent character is typed. If the renderer works correctly the DOM should not be changed so we should be fine.

Also Mac accent composition fires few keydown events before starting composition, however nothing is inserted (only one letter) so it should not cause any issue in typing.

Fortunately, we don't depend on the keydown for this, so it should not cause issues either.

[f1ames]

One thing to notice is that, when using MacOS accent balloon and selecting the accent using number keys (instead of mouse or arrow keys navigation) the composition events are not fired.

Instead only key events are fired:

keydown : 65 : a
keydown : 65 : a
keydown : 54 : 6

This is not a problem as proper mutations are fired after accent is inserted.

[f1ames]

Created a PR in engine ckeditor/ckeditor5-engine#861 which blocks rendering during composition.

There is one change required in typing package. During the Hiragana (and probably others too) composition the whole composing text (or its part in some specific cases) is selected, so while pressing enter to confirm selected text in IME dialog the keydown "hack" is fired and removes compostion from the model/view.
The keydown handler also needs to be blocked during composition.

[Reinmar]

Another case here: #748.

[Reinmar]

Resolved once we migrated to beforeInput.