[WIP] Migrate to before̬̜input͎

[oleq]

Suggested merge commit message (convention)

WIP

See #11438.

[dufipl]

@oleq, shift + enter doesn't work correctly on Safari. It behaves just like pressed only enter. On Firefox and Chrome, it works fine. It is a regression, on master it behaves correctly.

[Mgsy]

I love that finally CMD + backspace works :tada:. However, I've found one issue related to this feature.

Firefox

1. Put the caret at the end of a single-line paragraph.
2. Press CMD + backspace.
3. Repeat step 2.

The editor crashes.

Uncaught TypeError: selection.getFirstRange() is null
    execute deletecommand.js:121
    _runPendingChanges model.js:848
    enqueueChange model.js:253
    execute deletecommand.js:77
    decorate observablemixin.js:258
    fire emittermixin.js:199
    methodName observablemixin.js:262
    execute commandcollection.js:69
    execute editor.js:295
    init delete.js:72
    fire emittermixin.js:199
    fireListenerFor bubblingemittermixin.js:162
    fire bubblingemittermixin.js:92
    DeleteObserver deleteobserver.js:182
    fire emittermixin.js:199
    fireListenerFor bubblingemittermixin.js:162
    fire bubblingemittermixin.js:92
    fire domeventobserver.js:96
    onDomEvent inputobserver.js:58
    observe domeventobserver.js:79
    fire emittermixin.js:199
    domListener emittermixin.js:293
    attach emittermixin.js:219
    _addEventListener emittermixin.js:264
    addEventListener emittermixin.js:701
    listenTo emittermixin.js:117
    listenTo emittermixin.js:68
    listenTo emittermixin.js:65
    observe domeventobserver.js:77
    observe domeventobserver.js:76
    attachDomRoot view.js:287
    init classiceditorui.js:104
    create classiceditor.js:205

Works fine in Chrome/Safari.

[dufipl]

I've found an issue with Safari on iPad and it is a regression: On iPad there are undo/redo buttons at the keyboard: On master they are not working when e.g. new line is added, but they are working when text is added. On ck/epic/11438-migrate-to-beforeinput those buttons are not working anymore, even when text is being written.

[FilipTokarski]

Android Gboard

1. Place caret at the end of a heading
2. Type

Uncaught CKEditorError: model-nodelist-offset-out-of-bounds {"offset":19,"nodeList":[{"data":"Lists in the table"}]}
Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-model-nodelist-offset-out-of-bounds
    at NodeList.offsetToIndex (nodelist.js:161:1)
    at Element.offsetToIndex (element.js:186:1)
    at getTextNodeAtPosition (position.js:1100:1)
    at Position.get textNode [as textNode] (position.js:218:1)
    at validateTextNodePosition (document.js:482:1)
    at Document._validateSelectionRange (document.js:391:1)
    at LiveSelection.<anonymous> (documentselection.js:666:1)
    at LiveSelection.fire (emittermixin.js:199:1)
    at LiveSelection._setRanges (selection.js:471:1)
    at LiveSelection.setTo (selection.js:370:1)

https://user-images.githubusercontent.com/34380544/159022138-c3a4c7fc-c98f-4fb6-8836-5fce43260212.mp4

[FilipTokarski]

Android Swift keyboard

1. Select whole world
2. Change it to the one suggested by keyboard spellchecker

Alternatively you can just add a word suggested by autocompletion.

Uncaught CKEditorError: insert-operation-position-invalid
Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-insert-operation-position-invalid
    at InsertOperation._validate (insertoperation.js:117:1)
    at Model.on.priority (model.js:91:1)
    at Model.fire (emittermixin.js:199:1)
    at Model.<computed> [as applyOperation] (observablemixin.js:262:1)
    at Writer.insert (writer.js:219:1)
    at Insertion._insertPartialFragment (insertcontent.js:373:1)
    at Insertion.handleNodes (insertcontent.js:226:1)
    at insertcontent.js:76:1
    at Model.change (model.js:187:1)
    at insertContent (insertcontent.js:51:1)

Uncaught CKEditorError: model-nodelist-offset-out-of-bounds {"offset":11,"nodeList":[{"data":"Hello "}]}
Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-model-nodelist-offset-out-of-bounds
    at NodeList.offsetToIndex (nodelist.js:161:1)
    at Element.offsetToIndex (element.js:186:1)
    at getTextNodeAtPosition (position.js:1100:1)
    at Position.get textNode [as textNode] (position.js:218:1)
    at validateTextNodePosition (document.js:482:1)
    at Document._validateSelectionRange (document.js:391:1)
    at LiveSelection.<anonymous> (documentselection.js:666:1)
    at LiveSelection.fire (emittermixin.js:199:1)
    at LiveSelection._setRanges (selection.js:471:1)
    at LiveSelection.setTo (selection.js:370:1)

https://user-images.githubusercontent.com/34380544/159026666-4b7a9257-489d-48f6-bc01-57296b23fa14.mp4

[FilipTokarski]

Android GBoard

1. Type something in empty paragraph
2. Press enter at the end of paragraph and type something again

Empty paragraphs are created below, but selection is still in the same place. On master it's even more weird - you need to press enter twice to create a new paragraph, but then typing works fine.

https://user-images.githubusercontent.com/34380544/159028352-ddf2b68a-5b75-4359-9476-fddc1e39e2c0.mp4

[FilipTokarski]

CHROME

Steps

1. Select table cells that contain image (or other widget).
2. Press backspace or delete.

Expected

All content from selected cells gets deleted:

https://user-images.githubusercontent.com/34380544/159230988-90e0af7b-5272-4271-b485-9b9bb50ea15f.mp4

Actual

Nothing happens:

https://user-images.githubusercontent.com/34380544/159231010-42e7fd86-432d-4af3-81a7-d8ca14f03d9b.mp4

Cannot reproduce on master. Deleting only text works fine.

[dufipl]

The above ⬆️ issue reproduces also on Safari (on Firefox it works as expected). Also, copy, cutting and paste don't work in this case. Additionally, if empty or filled with text column is on the right of the column with widgets and it is also selected, deleting works correctly:

[Reinmar]

FYI: the latest work is in branch ck/11438-beforeinput-ime-research-vol1.1.

Shouldn't this PR be closed?

[niegowski]

Shouldn't this PR be closed?

No. This is a feature branch and those IME research branches are based on this feature branch.

[niegowski]

MINOR BREAKING CHANGE: The input command is now deprecated, you should use insertText command instead.

To give some more background. This PR is changing the input flow, so the editor is now using the beforeInput events instead of DOM mutation-based input. The previous command (input) is still available as an alias and the same options should be accepted by both commands.