Composition breaks when typing a Korean phonetic radical after typing space key on Android Chrome

[byeokim]

📝 Provide detailed reproduction steps (if any)

1. Launch any CKEditor, e.g. this demo, on Android Chrome
2. Put caret at the start of any empty line
3. Use GBoard keyboard
4. Add keyboard language: select Korean then 2-Bulsik
5. Change keyboard language to Korean
6. Type ㄱ
7. Type ㅏ
8. Type space
9. Type ㄱ
10. Type ㅏ

screenrecording.webm

✔️ Expected result

가 가

❌ Actual result

가 ㄱㅏ

❓ Possible solution

Not updating Text node when composing, i.e. after compositionstart event and before compositionend event, by adding the following code into renderer.ts:

ckeditor5/packages/ckeditor5-engine/src/view/renderer.ts

Lines 714 to 728 in 1bbb4df

	// Update the existing text node data. Note that replace action is generated only for Android for now.
	else if ( action === 'replace' ) {
	// @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
	// @if CK_DEBUG_TYPING // console.group( '%c[Renderer]%c Update text node',
	// @if CK_DEBUG_TYPING // 'color: green;font-weight: bold', ''
	// @if CK_DEBUG_TYPING // );
	// @if CK_DEBUG_TYPING // }
	updateTextNode( actualDomChildren[ i ] as DomText, ( expectedDomChildren[ i ] as DomText ).data );
	i++;
	// @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
	// @if CK_DEBUG_TYPING // console.groupEnd();
	// @if CK_DEBUG_TYPING // }
	} else if ( action === 'equal' ) {

else if ( action === 'replace' ) {
+ if (!this.isComposing) {
    updateTextNode( actualDomChildren[ i ] as DomText, ( expectedDomChildren[ i ] as DomText ).data );
+ }
  i++;

On Android Chrome, when a character is typed and the typing triggers a compositionstart event, IME seems to put the character into the Text node sometime after compositionupdate event. Meanwhile CKEditor also effectively puts the character into the node by invoking updateTextNode. So there would be two same characters. MutationObserver detects the DOM mutation and invokes another updateTextNode. Because of that invocation one of the two characters is removed. This can be confirmed by uncommenting CK_DEBUG_TYPING console.logs. I suspect that which character is removed affects whether the current composition should break, i.e. IME seems to be keeping track of which character instance is involved in the current composition.

The suggested solution will prevent the character duplication. IME will put the character while CKEditor won't. Thus there would be no removal of the duplicated character. Neither be composition-breaking.

📃 Other details

• Browser: Chrome 91.0
• OS: Android 12
• First affected CKEditor version: 36.0.1
• Installed CKEditor plugins: Essentials, Paragraph

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[tkmin]

bug: typing Korean on Safari at v34 was resolved in v35,
but the Android bug described above was not occured when the version was 34.

[Almyk]

CKEditor version 35.4.0 is also affected by this bug.

[bungabear]

Your solution seems works well at 36.0.1

[tiger-noncelab]

👍🙏

[tkmin]

@noncelab-tiger
@bungabear

could you please tell me which method is used to build the editor?
I used the online builder and the renderer.ts file cannot be found in my project.

Thanks in advanced! 🙇‍♂️

[bungabear]

@noncelab-tiger @bungabear

could you please tell me which method is used to build the editor? I used the online builder and the renderer.ts file cannot be found in my project.

Thanks in advanced! 🙇‍♂️

You should edit node_modules/@ckeditor/ckeditor5-engine/src/view/renderer.js file.

[tiger-noncelab]

I used the online builder. I modified the code in the path below. The code is minified so it may be hard to find.
In my case, it looked like this.

node_modules/ckeditor5-custom-build/build/ckeditor.js

if (t === "insert") {
    bc(n, c, r[c]);
    c++
} else if (t === "replace") {
    Uf(o[c], r[c].data); // this code
    c++
} else if (t === "equal") {
    this._markDescendantTextToSync(this.domConverter.domToView(r[c]));
    c++
}

[dancinlife]

Very helpful!

[justplayboard]

I used the online builder. I modified the code in the path below. The code is minified so it may be hard to find. In my case, it looked like this.

node_modules/ckeditor5-custom-build/build/ckeditor.js

if (t === "insert") {
    bc(n, c, r[c]);
    c++
} else if (t === "replace") {
    Uf(o[c], r[c].data); // this code
    c++
} else if (t === "equal") {
    this._markDescendantTextToSync(this.domConverter.domToView(r[c]));
    c++
}

If the following error occurs, correct it as follows:

Uncaught Error: Failed to execute 'setStart' on 'Range': The offset 2 is larger than the node's length (1).
    at Dm.viewRangeToDom (ckeditor.js:13564:1)
    at wb.scrollToTheSelection (ckeditor.js:15308:1)
    at e.<anonymous> (ckeditor.js:32234:1)
    at e.fire (ckeditor.js:3605:1)
    at Af (ckeditor.js:11685:1)
    at xf.fire (ckeditor.js:11638:1)
    at e.<anonymous> (ckeditor.js:32156:1)
    at e.fire (ckeditor.js:3605:1)
    at Af (ckeditor.js:11685:1)
    at xf.fire (ckeditor.js:11638:1)

solution:

node_modules/ckeditor5-custom-build/build/ckeditor.js

    if (n === o) {
        yield this._getBlockFiller()
    }
}
viewRangeToDom(t) {
    const e = this.viewPositionToDom(t.start);
    const n = this.viewPositionToDom(t.end);
    const o = this._domDocument.createRange();
	if(e.offset > 0 || n.offset > 0){    // new code line
		o.setStart(e.parent, e.offset - 1);    // new code line
		o.setEnd(n.parent, n.offset - 1);    // new code line
	} else {    // new code line
		o.setStart(e.parent, e.offset);
		o.setEnd(n.parent, n.offset);
	}    // new code line
        return o
}
viewPositionToDom(t) {
    const e = t.parent;
    if (e.is("$text")) {
        const n = this.findCorrespondingDomText(e);

[niegowski]

The work for this issue and others related is completed in the #16289, and we finalized the round of internal (successful) tests. I encourage everyone to test the PR if you have a chance. It should be merged in the following days, and will be a part of the next release.