@ckeditor/ckeditor5-typing 42.0.2 → 43.0.0-alpha.1

package/dist/input.d.ts

@@ -14,6 +14,10 @@ import { Plugin } from '@ckeditor/ckeditor5-core';
  * Handles text input coming from the keyboard or other input methods.
  */
 export default class Input extends Plugin {
+    /**
+     * The queue of `insertText` command executions that are waiting for the DOM to get updated after beforeinput event.
+     */
+    private _compositionQueue;
     /**
      * @inheritDoc
      */
@@ -22,4 +26,8 @@ export default class Input extends Plugin {
      * @inheritDoc
      */
     init(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
 }

package/dist/inserttextobserver.d.ts

@@ -6,7 +6,7 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import { DomEventData, Observer, FocusObserver, type EditingView, type ViewDocumentSelection, type ViewRange, type ViewSelection } from '@ckeditor/ckeditor5-engine';
+import { DomEventData, Observer, FocusObserver, type EditingView, type ViewDocumentSelection, type ViewSelection } from '@ckeditor/ckeditor5-engine';
 /**
  * Text insertion observer introduces the {@link module:engine/view/document~Document#event:insertText} event.
  */
@@ -55,9 +55,5 @@ export interface InsertTextEventData extends DomEventData {
      * The selection into which the text should be inserted.
      * If not specified, the insertion should occur at the current view selection.
      */
-    selection: ViewSelection | ViewDocumentSelection;
-    /**
-     * The range that view selection should be set to after insertion.
-     */
-    resultRange?: ViewRange;
+    selection?: ViewSelection | ViewDocumentSelection;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-typing",
-  "version": "42.0.2",
+  "version": "43.0.0-alpha.1",
   "description": "Typing feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,9 +13,9 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "42.0.2",
-    "@ckeditor/ckeditor5-engine": "42.0.2",
-    "@ckeditor/ckeditor5-utils": "42.0.2",
+    "@ckeditor/ckeditor5-core": "43.0.0-alpha.1",
+    "@ckeditor/ckeditor5-engine": "43.0.0-alpha.1",
+    "@ckeditor/ckeditor5-utils": "43.0.0-alpha.1",
     "lodash-es": "4.17.21"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/input.d.ts

@@ -10,6 +10,10 @@ import { Plugin } from '@ckeditor/ckeditor5-core';
  * Handles text input coming from the keyboard or other input methods.
  */
 export default class Input extends Plugin {
+    /**
+     * The queue of `insertText` command executions that are waiting for the DOM to get updated after beforeinput event.
+     */
+    private _compositionQueue;
     /**
      * @inheritDoc
      */
@@ -18,4 +22,8 @@ export default class Input extends Plugin {
      * @inheritDoc
      */
     init(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
 }

package/src/input.js

@@ -9,6 +9,8 @@ import { Plugin } from '@ckeditor/ckeditor5-core';
 import { env } from '@ckeditor/ckeditor5-utils';
 import InsertTextCommand from './inserttextcommand.js';
 import InsertTextObserver from './inserttextobserver.js';
+import { LiveRange } from '@ckeditor/ckeditor5-engine';
+import { debounce } from 'lodash-es';
 /**
  * Handles text input coming from the keyboard or other input methods.
  */
@@ -26,7 +28,9 @@ export default class Input extends Plugin {
         const editor = this.editor;
         const model = editor.model;
         const view = editor.editing.view;
+        const mapper = editor.editing.mapper;
         const modelSelection = model.document.selection;
+        this._compositionQueue = new CompositionQueue(editor);
         view.addObserver(InsertTextObserver);
         // TODO The above default configuration value should be defined using editor.config.define() once it's fixed.
         const insertTextCommand = new InsertTextCommand(editor, editor.config.get('typing.undoStep') || 20);
@@ -39,11 +43,20 @@ export default class Input extends Plugin {
             if (!view.document.isComposing) {
                 data.preventDefault();
             }
-            const { text, selection: viewSelection, resultRange: viewResultRange } = data;
+            // Flush queue on the next beforeinput event because it could happen
+            // that the mutation observer does not notice the DOM change in time.
+            if (env.isAndroid && view.document.isComposing) {
+                this._compositionQueue.flush('next beforeinput');
+            }
+            const { text, selection: viewSelection } = data;
+            let modelRanges;
             // If view selection was specified, translate it to model selection.
-            const modelRanges = Array.from(viewSelection.getRanges()).map(viewRange => {
-                return editor.editing.mapper.toModelRange(viewRange);
-            });
+            if (viewSelection) {
+                modelRanges = Array.from(viewSelection.getRanges()).map(viewRange => mapper.toModelRange(viewRange));
+            }
+            else {
+                modelRanges = Array.from(modelSelection.getRanges());
+            }
             let insertText = text;
             // Typing in English on Android is firing composition events for the whole typed word.
             // We need to check the target range text to only apply the difference.
@@ -66,24 +79,47 @@ export default class Input extends Plugin {
                         }
                     }
                 }
+                if (insertText.length == 0 && modelRanges[0].isCollapsed) {
+                    // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+                    // @if CK_DEBUG_TYPING // 	console.log( '%c[Input]%c Ignore insertion of an empty data to the collapsed range.',
+                    // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green;', 'font-style: italic'
+                    // @if CK_DEBUG_TYPING // 	);
+                    // @if CK_DEBUG_TYPING // }
+                    return;
+                }
             }
-            const insertTextCommandData = {
+            const commandData = {
                 text: insertText,
                 selection: model.createSelection(modelRanges)
             };
-            // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
-            // @if CK_DEBUG_TYPING // 	console.log( '%c[Input]%c Execute insertText:',
-            // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green;', '',
-            // @if CK_DEBUG_TYPING // 		insertText,
-            // @if CK_DEBUG_TYPING // 		`[${ modelRanges[ 0 ].start.path }]-[${ modelRanges[ 0 ].end.path }]`
-            // @if CK_DEBUG_TYPING // 	);
-            // @if CK_DEBUG_TYPING // }
-            if (viewResultRange) {
-                insertTextCommandData.resultRange = editor.editing.mapper.toModelRange(viewResultRange);
+            // This is a composition event and those are not cancellable, so we need to wait until browser updates the DOM
+            // and we could apply changes to the model and verify if the DOM is valid.
+            // The browser applies changes to the DOM not immediately on beforeinput event.
+            // We just wait for mutation observer to notice changes or as a fallback a timeout.
+            if (env.isAndroid && view.document.isComposing) {
+                // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+                // @if CK_DEBUG_TYPING // 	console.log( `%c[Input]%c Queue insertText:%c "${ commandData.text }"%c ` +
+                // @if CK_DEBUG_TYPING // 		`[${ commandData.selection.getFirstPosition().path }]-` +
+                // @if CK_DEBUG_TYPING // 		`[${ commandData.selection.getLastPosition().path }]` +
+                // @if CK_DEBUG_TYPING // 		` queue size: ${ this._compositionQueue.length + 1 }`,
+                // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green;', 'font-weight: bold', 'color: blue', ''
+                // @if CK_DEBUG_TYPING // 	);
+                // @if CK_DEBUG_TYPING // }
+                this._compositionQueue.push(commandData);
+            }
+            else {
+                // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+                // @if CK_DEBUG_TYPING // 	console.log( `%c[Input]%c Execute insertText:%c "${ commandData.text }"%c ` +
+                // @if CK_DEBUG_TYPING // 		`[${ commandData.selection.getFirstPosition().path }]-` +
+                // @if CK_DEBUG_TYPING // 		`[${ commandData.selection.getLastPosition().path }]`,
+                // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green;', 'font-weight: bold', 'color: blue', ''
+                // @if CK_DEBUG_TYPING // 	);
+                // @if CK_DEBUG_TYPING // }
+                editor.execute('insertText', commandData);
+                view.scrollToTheSelection();
             }
-            editor.execute('insertText', insertTextCommandData);
-            view.scrollToTheSelection();
         });
+        // Delete selected content on composition start.
         if (env.isAndroid) {
             // On Android with English keyboard, the composition starts just by putting caret
             // at the word end or by selecting a table column. This is not a real composition started.
@@ -95,9 +131,9 @@ export default class Input extends Plugin {
                 // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
                 // @if CK_DEBUG_TYPING // 	const firstPositionPath = modelSelection.getFirstPosition()!.path;
                 // @if CK_DEBUG_TYPING // 	const lastPositionPath = modelSelection.getLastPosition()!.path;
-                // @if CK_DEBUG_TYPING // 	console.log( '%c[Input]%c KeyDown 229 -> model.deleteContent()',
-                // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green;', '',
-                // @if CK_DEBUG_TYPING // 		`[${ firstPositionPath }]-[${ lastPositionPath }]`
+                // @if CK_DEBUG_TYPING // 	console.log( '%c[Input]%c KeyDown 229%c -> model.deleteContent() ' +
+                // @if CK_DEBUG_TYPING // 		`[${ firstPositionPath }]-[${ lastPositionPath }]`,
+                // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green;', 'font-weight: bold', '',
                 // @if CK_DEBUG_TYPING // 	);
                 // @if CK_DEBUG_TYPING // }
                 deleteSelectionContent(model, insertTextCommand);
@@ -113,16 +149,234 @@ export default class Input extends Plugin {
                 // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
                 // @if CK_DEBUG_TYPING // 	const firstPositionPath = modelSelection.getFirstPosition()!.path;
                 // @if CK_DEBUG_TYPING // 	const lastPositionPath = modelSelection.getLastPosition()!.path;
-                // @if CK_DEBUG_TYPING // 	console.log( '%c[Input]%c Composition start -> model.deleteContent()',
-                // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green;', '',
-                // @if CK_DEBUG_TYPING // 		`[${ firstPositionPath }]-[${ lastPositionPath }]`
+                // @if CK_DEBUG_TYPING // 	console.log( '%c[Input]%c Composition start%c -> model.deleteContent() ' +
+                // @if CK_DEBUG_TYPING // 		`[${ firstPositionPath }]-[${ lastPositionPath }]`,
+                // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green;', 'font-weight: bold', '',
                 // @if CK_DEBUG_TYPING // 	);
                 // @if CK_DEBUG_TYPING // }
                 deleteSelectionContent(model, insertTextCommand);
             });
         }
+        // Apply composed changes to the model.
+        if (env.isAndroid) {
+            // Apply changes to the model as they are applied to the DOM by the browser.
+            // On beforeinput event, the DOM is not yet modified. We wait for detected mutations to apply model changes.
+            this.listenTo(view.document, 'mutations', (evt, { mutations }) => {
+                if (!view.document.isComposing) {
+                    return;
+                }
+                // Check if mutations are relevant for queued changes.
+                for (const { node } of mutations) {
+                    const viewElement = findMappedViewAncestor(node, mapper);
+                    const modelElement = mapper.toModelElement(viewElement);
+                    if (this._compositionQueue.isComposedElement(modelElement)) {
+                        this._compositionQueue.flush('mutations');
+                        return;
+                    }
+                }
+                // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+                // @if CK_DEBUG_TYPING // 	console.log( '%c[Input]%c Mutations not related to the composition.',
+                // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green;', 'font-style: italic'
+                // @if CK_DEBUG_TYPING // 	);
+                // @if CK_DEBUG_TYPING // }
+            });
+            // Make sure that all changes are applied to the model before the end of composition.
+            this.listenTo(view.document, 'compositionend', () => {
+                this._compositionQueue.flush('composition end');
+            });
+            // Trigger mutations check after the composition completes to fix all DOM changes that got ignored during composition.
+            // On Android the Renderer is not disabled while composing. While updating DOM nodes we ignore some changes
+            // that are not that important (like NBSP vs plain space character) and could break the composition flow.
+            // After composition is completed we trigger additional `mutations` event for elements affected by the composition
+            // so the Renderer can adjust the DOM to the expected structure without breaking the composition.
+            this.listenTo(view.document, 'compositionend', () => {
+                const mutations = [];
+                for (const element of this._compositionQueue.flushComposedElements()) {
+                    const viewElement = mapper.toViewElement(element);
+                    if (!viewElement) {
+                        continue;
+                    }
+                    mutations.push({ type: 'children', node: viewElement });
+                }
+                if (mutations.length) {
+                    // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+                    // @if CK_DEBUG_TYPING // 	console.group( '%c[Input]%c Fire post-composition mutation fixes.',
+                    // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green', 'font-weight: bold', ''
+                    // @if CK_DEBUG_TYPING // 	);
+                    // @if CK_DEBUG_TYPING // }
+                    view.document.fire('mutations', { mutations });
+                    // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+                    // @if CK_DEBUG_TYPING // 	console.groupEnd();
+                    // @if CK_DEBUG_TYPING // }
+                }
+            }, { priority: 'lowest' });
+        }
+        else {
+            // After composition end we need to verify if there are no left-overs.
+            // Listening at the lowest priority so after the `InsertTextObserver` added above (all composed text
+            // should already be applied to the model, view, and DOM).
+            // On non-Android the `Renderer` is blocked while user is composing but the `MutationObserver` still collects
+            // mutated nodes and fires `mutations` events.
+            // Those events are recorded by the `Renderer` but not applied to the DOM while composing.
+            // We need to trigger those checks (and fixes) once again but this time without specifying the exact mutations
+            // since they are already recorded by the `Renderer`.
+            // It in the most cases just clears the internal record of mutated text nodes
+            // since all changes should already be applied to the DOM.
+            // This is especially needed when user cancels composition, so we can clear nodes marked to sync.
+            this.listenTo(view.document, 'compositionend', () => {
+                // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+                // @if CK_DEBUG_TYPING // 	console.group( '%c[Input]%c Force render after composition end.',
+                // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green', 'font-weight: bold', ''
+                // @if CK_DEBUG_TYPING // 	);
+                // @if CK_DEBUG_TYPING // }
+                view.document.fire('mutations', { mutations: [] });
+                // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+                // @if CK_DEBUG_TYPING // 	console.groupEnd();
+                // @if CK_DEBUG_TYPING // }
+            }, { priority: 'lowest' });
+        }
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        this._compositionQueue.destroy();
+    }
+}
+/**
+ * The queue of `insertText` command executions that are waiting for the DOM to get updated after beforeinput event.
+ */
+class CompositionQueue {
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        /**
+         * Debounced queue flush as a safety mechanism for cases of mutation observer not triggering.
+         */
+        this.flushDebounced = debounce(() => this.flush('timeout'), 50);
+        /**
+         * The queue of `insertText` command executions that are waiting for the DOM to get updated after beforeinput event.
+         */
+        this._queue = [];
+        /**
+         * A set of model elements. The composition happened in those elements. It's used for mutations check.
+         */
+        this._compositionElements = new Set();
+        this.editor = editor;
+    }
+    /**
+     * Destroys the helper object.
+     */
+    destroy() {
+        this.flushDebounced.cancel();
+        this._compositionElements.clear();
+        while (this._queue.length) {
+            this.shift();
+        }
+    }
+    /**
+     * Returns the size of the queue.
+     */
+    get length() {
+        return this._queue.length;
+    }
+    /**
+     * Push next insertText command data to the queue.
+     */
+    push(commandData) {
+        const commandLiveData = {
+            text: commandData.text
+        };
+        if (commandData.selection) {
+            commandLiveData.selectionRanges = [];
+            for (const range of commandData.selection.getRanges()) {
+                commandLiveData.selectionRanges.push(LiveRange.fromRange(range));
+                // Keep reference to the model element for later mutation checks.
+                this._compositionElements.add(range.start.parent);
+            }
+        }
+        this._queue.push(commandLiveData);
+        this.flushDebounced();
+    }
+    /**
+     * Shift the first item from the insertText command data queue.
+     */
+    shift() {
+        const commandLiveData = this._queue.shift();
+        const commandData = {
+            text: commandLiveData.text
+        };
+        if (commandLiveData.selectionRanges) {
+            const ranges = commandLiveData.selectionRanges
+                .map(liveRange => detachLiveRange(liveRange))
+                .filter((range) => !!range);
+            if (ranges.length) {
+                commandData.selection = this.editor.model.createSelection(ranges);
+            }
+        }
+        return commandData;
+    }
+    /**
+     * Applies all queued insertText command executions.
+     *
+     * @param reason Used only for debugging.
+     */
+    flush(reason) {
+        const editor = this.editor;
+        const model = editor.model;
+        const view = editor.editing.view;
+        this.flushDebounced.cancel();
+        if (!this._queue.length) {
+            return;
+        }
+        // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	console.group( `%c[Input]%c Flush insertText queue on ${ reason }.`,
+        // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green;', 'font-weight: bold'
+        // @if CK_DEBUG_TYPING // 	);
+        // @if CK_DEBUG_TYPING // }
+        const insertTextCommand = editor.commands.get('insertText');
+        const buffer = insertTextCommand.buffer;
+        model.enqueueChange(buffer.batch, () => {
+            buffer.lock();
+            while (this._queue.length) {
+                const commandData = this.shift();
+                // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+                // @if CK_DEBUG_TYPING // 	console.log( '%c[Input]%c Execute queued insertText:%c ' +
+                // @if CK_DEBUG_TYPING // 		`"${ commandData.text }"%c ` +
+                // @if CK_DEBUG_TYPING // 		`[${ commandData.selection.getFirstPosition().path }]-` +
+                // @if CK_DEBUG_TYPING // 		`[${ commandData.selection.getLastPosition().path }]`,
+                // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green;', 'font-weight: bold', 'color: blue', ''
+                // @if CK_DEBUG_TYPING // 	);
+                // @if CK_DEBUG_TYPING // }
+                editor.execute('insertText', commandData);
+            }
+            buffer.unlock();
+        });
+        view.scrollToTheSelection();
+        // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	console.groupEnd();
+        // @if CK_DEBUG_TYPING // }
+    }
+    /**
+     * Returns `true` if the given model element is related to recent composition.
+     */
+    isComposedElement(element) {
+        return this._compositionElements.has(element);
+    }
+    /**
+     * Returns an array of composition-related elements and clears the internal list.
+     */
+    flushComposedElements() {
+        const result = Array.from(this._compositionElements);
+        this._compositionElements.clear();
+        return result;
     }
 }
+/**
+ * Deletes the content selected by the document selection at the start of composition.
+ */
 function deleteSelectionContent(model, insertTextCommand) {
     // By relying on the state of the input command we allow disabling the entire input easily
     // by just disabling the input command. We could’ve used here the delete command but that
@@ -139,3 +393,24 @@ function deleteSelectionContent(model, insertTextCommand) {
     });
     buffer.unlock();
 }
+/**
+ * Detaches a LiveRange and returns the static range from it.
+ */
+function detachLiveRange(liveRange) {
+    const range = liveRange.toRange();
+    liveRange.detach();
+    if (range.root.rootName == '$graveyard') {
+        return null;
+    }
+    return range;
+}
+/**
+ * For the given `viewNode`, finds and returns the closest ancestor of this node that has a mapping to the model.
+ */
+function findMappedViewAncestor(viewNode, mapper) {
+    let node = (viewNode.is('$text') ? viewNode.parent : viewNode);
+    while (!mapper.toModelElement(node)) {
+        node = node.parent;
+    }
+    return node;
+}

package/src/inserttextobserver.d.ts

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import { DomEventData, Observer, FocusObserver, type EditingView, type ViewDocumentSelection, type ViewRange, type ViewSelection } from '@ckeditor/ckeditor5-engine';
+import { DomEventData, Observer, FocusObserver, type EditingView, type ViewDocumentSelection, type ViewSelection } from '@ckeditor/ckeditor5-engine';
 /**
  * Text insertion observer introduces the {@link module:engine/view/document~Document#event:insertText} event.
  */
@@ -51,9 +51,5 @@ export interface InsertTextEventData extends DomEventData {
      * The selection into which the text should be inserted.
      * If not specified, the insertion should occur at the current view selection.
      */
-    selection: ViewSelection | ViewDocumentSelection;
-    /**
-     * The range that view selection should be set to after insertion.
-     */
-    resultRange?: ViewRange;
+    selection?: ViewSelection | ViewDocumentSelection;
 }

package/src/inserttextobserver.js

@@ -19,6 +19,10 @@ const TYPING_INPUT_TYPES = [
     // This one is used by Safari when accepting spell check suggestions from the autocorrection pop-up (Mac).
     'insertReplacementText'
 ];
+const TYPING_INPUT_TYPES_ANDROID = [
+    ...TYPING_INPUT_TYPES,
+    'insertCompositionText'
+];
 /**
  * Text insertion observer introduces the {@link module:engine/view/document~Document#event:insertText} event.
  */
@@ -32,16 +36,14 @@ export default class InsertTextObserver extends Observer {
         // On Android composition events should immediately be applied to the model. Rendering is not disabled.
         // On non-Android the model is updated only on composition end.
         // On Android we can't rely on composition start/end to update model.
-        if (env.isAndroid) {
-            TYPING_INPUT_TYPES.push('insertCompositionText');
-        }
+        const typingInputTypes = env.isAndroid ? TYPING_INPUT_TYPES_ANDROID : TYPING_INPUT_TYPES;
         const viewDocument = view.document;
         viewDocument.on('beforeinput', (evt, data) => {
             if (!this.isEnabled) {
                 return;
             }
             const { data: text, targetRanges, inputType, domEvent } = data;
-            if (!TYPING_INPUT_TYPES.includes(inputType)) {
+            if (!typingInputTypes.includes(inputType)) {
                 return;
             }
             // Mark the latest focus change as complete (we are typing in editable after the focus
@@ -58,44 +60,36 @@ export default class InsertTextObserver extends Observer {
                 evt.stop();
             }
         });
-        // Note: The priority must be lower than the CompositionObserver handler to call it after the renderer is unblocked.
-        viewDocument.on('compositionend', (evt, { data, domEvent }) => {
-            // On Android composition events are immediately applied to the model.
-            // On non-Android the model is updated only on composition end.
-            // On Android we can't rely on composition start/end to update model.
-            if (!this.isEnabled || env.isAndroid) {
-                return;
-            }
-            // In case of aborted composition.
-            if (!data) {
-                return;
-            }
-            // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
-            // @if CK_DEBUG_TYPING // 	console.log( `%c[InsertTextObserver]%c Fire insertText event, text: ${ JSON.stringify( data ) }`,
-            // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green;', ''
-            // @if CK_DEBUG_TYPING // 	);
-            // @if CK_DEBUG_TYPING // }
-            // How do we know where to insert the composed text?
-            // The selection observer is blocked and the view is not updated with the composition changes.
-            // There were three options:
-            //   - Store the selection on `compositionstart` and use it now. This wouldn't work in RTC
-            //     where the view would change and the stored selection might get incorrect.
-            //     We'd need to fallback to the current view selection anyway.
-            //   - Use the current view selection. This is a bit weird and non-intuitive because
-            //     this isn't necessarily the selection on which the user started composing.
-            //     We cannot even know whether it's still collapsed (there might be some weird
-            //     editor feature that changed it in unpredictable ways for us). But it's by far
-            //     the simplest solution and should be stable (the selection is definitely correct)
-            //     and probably mostly predictable (features usually don't modify the selection
-            //     unless called explicitly by the user).
-            //   - Try to follow it from the `beforeinput` events. This would be really complex as each
-            //     `beforeinput` would come with just the range it's changing and we'd need to calculate that.
-            // We decided to go with the 2nd option for its simplicity and stability.
-            viewDocument.fire('insertText', new DomEventData(view, domEvent, {
-                text: data,
-                selection: viewDocument.selection
-            }));
-        }, { priority: 'lowest' });
+        // On Android composition events are immediately applied to the model.
+        // On non-Android the model is updated only on composition end.
+        // On Android we can't rely on composition start/end to update model.
+        if (!env.isAndroid) {
+            // Note: The priority must be lower than the CompositionObserver handler to call it after the renderer is unblocked.
+            // This is important for view to DOM position mapping.
+            // This causes the effect of first remove composed DOM and then reapply it after model modification.
+            viewDocument.on('compositionend', (evt, { data, domEvent }) => {
+                if (!this.isEnabled) {
+                    return;
+                }
+                // In case of aborted composition.
+                if (!data) {
+                    return;
+                }
+                // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+                // @if CK_DEBUG_TYPING // 	console.log( `%c[InsertTextObserver]%c Fire insertText event, %c${ JSON.stringify( data ) }`,
+                // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green;', 'font-weight: bold', 'color: blue'
+                // @if CK_DEBUG_TYPING // 	);
+                // @if CK_DEBUG_TYPING // }
+                // How do we know where to insert the composed text?
+                // 1. The SelectionObserver is blocked and the view is not updated with the composition changes.
+                // 2. The last moment before it's locked is the `compositionstart` event.
+                // 3. The `SelectionObserver` is listening for `compositionstart` event and immediately converts
+                //    the selection. Handles this at the lowest priority so after the rendering is blocked.
+                viewDocument.fire('insertText', new DomEventData(view, domEvent, {
+                    text: data
+                }));
+            }, { priority: 'lowest' });
+        }
     }
     /**
      * @inheritDoc