@ckeditor/ckeditor5-engine 35.2.0 → 35.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-engine",
-  "version": "35.2.0",
+  "version": "35.3.0",
   "description": "The editing engine of CKEditor 5 – the best browser-based rich text editor.",
   "keywords": [
     "wysiwyg",
@@ -23,31 +23,31 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-utils": "^35.2.0",
+    "@ckeditor/ckeditor5-utils": "^35.3.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^35.2.0",
-    "@ckeditor/ckeditor5-block-quote": "^35.2.0",
-    "@ckeditor/ckeditor5-clipboard": "^35.2.0",
-    "@ckeditor/ckeditor5-cloud-services": "^35.2.0",
-    "@ckeditor/ckeditor5-core": "^35.2.0",
-    "@ckeditor/ckeditor5-editor-classic": "^35.2.0",
-    "@ckeditor/ckeditor5-enter": "^35.2.0",
-    "@ckeditor/ckeditor5-essentials": "^35.2.0",
-    "@ckeditor/ckeditor5-heading": "^35.2.0",
-    "@ckeditor/ckeditor5-image": "^35.2.0",
-    "@ckeditor/ckeditor5-link": "^35.2.0",
-    "@ckeditor/ckeditor5-list": "^35.2.0",
-    "@ckeditor/ckeditor5-mention": "^35.2.0",
-    "@ckeditor/ckeditor5-paragraph": "^35.2.0",
-    "@ckeditor/ckeditor5-table": "^35.2.0",
-    "@ckeditor/ckeditor5-theme-lark": "^35.2.0",
-    "@ckeditor/ckeditor5-typing": "^35.2.0",
-    "@ckeditor/ckeditor5-ui": "^35.2.0",
-    "@ckeditor/ckeditor5-undo": "^35.2.0",
-    "@ckeditor/ckeditor5-widget": "^35.2.0",
-    "typescript": "^4.6.4",
+    "@ckeditor/ckeditor5-basic-styles": "^35.3.0",
+    "@ckeditor/ckeditor5-block-quote": "^35.3.0",
+    "@ckeditor/ckeditor5-clipboard": "^35.3.0",
+    "@ckeditor/ckeditor5-cloud-services": "^35.3.0",
+    "@ckeditor/ckeditor5-core": "^35.3.0",
+    "@ckeditor/ckeditor5-editor-classic": "^35.3.0",
+    "@ckeditor/ckeditor5-enter": "^35.3.0",
+    "@ckeditor/ckeditor5-essentials": "^35.3.0",
+    "@ckeditor/ckeditor5-heading": "^35.3.0",
+    "@ckeditor/ckeditor5-image": "^35.3.0",
+    "@ckeditor/ckeditor5-link": "^35.3.0",
+    "@ckeditor/ckeditor5-list": "^35.3.0",
+    "@ckeditor/ckeditor5-mention": "^35.3.0",
+    "@ckeditor/ckeditor5-paragraph": "^35.3.0",
+    "@ckeditor/ckeditor5-table": "^35.3.0",
+    "@ckeditor/ckeditor5-theme-lark": "^35.3.0",
+    "@ckeditor/ckeditor5-typing": "^35.3.0",
+    "@ckeditor/ckeditor5-ui": "^35.3.0",
+    "@ckeditor/ckeditor5-undo": "^35.3.0",
+    "@ckeditor/ckeditor5-widget": "^35.3.0",
+    "typescript": "^4.8.4",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"
   },

package/src/index.js

@@ -14,6 +14,7 @@ export { default as InsertOperation } from './model/operation/insertoperation';
 export { default as MarkerOperation } from './model/operation/markeroperation';
 export { default as OperationFactory } from './model/operation/operationfactory';
 export { transformSets } from './model/operation/transform';
+export { default as Selection } from './model/selection';
 export { default as DocumentSelection } from './model/documentselection';
 export { default as Range } from './model/range';
 export { default as LiveRange } from './model/liverange';
@@ -25,8 +26,10 @@ export { default as Position } from './model/position';
 export { default as DocumentFragment } from './model/documentfragment';
 export { default as History } from './model/history';
 export { default as Text } from './model/text';
+export { default as Schema } from './model/schema';
 export { default as DomConverter } from './view/domconverter';
 export { default as Renderer } from './view/renderer';
+export { default as View } from './view/view';
 export { default as ViewDocument } from './view/document';
 export { default as ViewText } from './view/text';
 export { default as ViewElement } from './view/element';

package/src/model/selection.js

@@ -729,7 +729,7 @@ function isUnvisitedBlock(element, visited) {
         return false;
     }
     visited.add(element);
-    return element.root.document.model.schema.isBlock(element) && element.parent;
+    return element.root.document.model.schema.isBlock(element) && !!element.parent;
 }
 // Checks if the given element is a $block was not previously visited and is a top block in a range.
 function isUnvisitedTopBlock(element, visited, range) {
@@ -743,7 +743,7 @@ function getParentBlock(position, visited) {
     const schema = element.root.document.model.schema;
     const ancestors = position.parent.getAncestors({ parentFirst: true, includeSelf: true });
     let hasParentLimit = false;
-    const block = ancestors.find(element => {
+    const block = ancestors.find((element) => {
         // Stop searching after first parent node that is limit element.
         if (hasParentLimit) {
             return false;

package/src/model/utils/modifyselection.js

@@ -144,26 +144,24 @@ function getCorrectPosition(walker, unit, treatEmojiAsSingleUnit) {
 // @param {Boolean} isForward Is the direction in which the selection should be modified is forward.
 function getCorrectWordBreakPosition(walker, isForward) {
     let textNode = walker.position.textNode;
-    if (textNode) {
-        let offset = walker.position.offset - textNode.startOffset;
-        while (!isAtWordBoundary(textNode.data, offset, isForward) && !isAtNodeBoundary(textNode, offset, isForward)) {
+    if (!textNode) {
+        textNode = isForward ? walker.position.nodeAfter : walker.position.nodeBefore;
+    }
+    while (textNode && textNode.is('$text')) {
+        const offset = walker.position.offset - textNode.startOffset;
+        // Check of adjacent text nodes with different attributes (like BOLD).
+        // Example          : 'foofoo []bar<$text bold="true">bar</$text> bazbaz'
+        // should expand to : 'foofoo [bar<$text bold="true">bar</$text>] bazbaz'.
+        if (isAtNodeBoundary(textNode, offset, isForward)) {
+            textNode = isForward ? walker.position.nodeAfter : walker.position.nodeBefore;
+        }
+        // Check if this is a word boundary.
+        else if (isAtWordBoundary(textNode.data, offset, isForward)) {
+            break;
+        }
+        // Maybe one more character.
+        else {
             walker.next();
-            // Check of adjacent text nodes with different attributes (like BOLD).
-            // Example          : 'foofoo []bar<$text bold="true">bar</$text> bazbaz'
-            // should expand to : 'foofoo [bar<$text bold="true">bar</$text>] bazbaz'.
-            const nextNode = isForward ? walker.position.nodeAfter : walker.position.nodeBefore;
-            // Scan only text nodes. Ignore inline elements (like `<softBreak>`).
-            if (nextNode && nextNode.is('$text')) {
-                // Check boundary char of an adjacent text node.
-                const boundaryChar = nextNode.data.charAt(isForward ? 0 : nextNode.data.length - 1);
-                // Go to the next node if the character at the boundary of that node belongs to the same word.
-                if (!wordBoundaryCharacters.includes(boundaryChar)) {
-                    // If adjacent text node belongs to the same word go to it & reset values.
-                    walker.next();
-                    textNode = walker.position.textNode;
-                }
-            }
-            offset = walker.position.offset - textNode.startOffset;
         }
     }
     return walker.position;
@@ -194,5 +192,5 @@ function isAtWordBoundary(data, offset, isForward) {
 // @param {Number} offset Position offset.
 // @param {Boolean} isForward Is the direction in which the selection should be modified is forward.
 function isAtNodeBoundary(textNode, offset, isForward) {
-    return offset === (isForward ? textNode.endOffset : 0);
+    return offset === (isForward ? textNode.offsetSize : 0);
 }

package/src/model/utils/selection-post-fixer.js

@@ -121,7 +121,7 @@ function tryFixingCollapsedRange(range, schema) {
     // In the first case, there is no need to fix the selection range.
     // In the second, let's go up to the outer selectable element
     if (!nearestSelectionRange) {
-        const ancestorObject = originalPosition.getAncestors().reverse().find(item => schema.isObject(item));
+        const ancestorObject = originalPosition.getAncestors().reverse().find((item) => schema.isObject(item));
         if (ancestorObject) {
             return Range._createOn(ancestorObject);
         }

package/src/view/datatransfer.js

@@ -0,0 +1,95 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * A facade over the native [`DataTransfer`](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer) object.
+ */
+export default class DataTransfer {
+    constructor(nativeDataTransfer) {
+        /**
+         * The array of files created from the native `DataTransfer#files` or `DataTransfer#items`.
+         *
+         * @readonly
+         * @member {Array.<File>} #files
+         */
+        this.files = getFiles(nativeDataTransfer);
+        /**
+         * The native DataTransfer object.
+         *
+         * @private
+         * @member {DataTransfer} #_native
+         */
+        this._native = nativeDataTransfer;
+    }
+    /**
+     * Returns an array of available native content types.
+     *
+     * @returns {Array.<String>}
+     */
+    get types() {
+        return this._native.types;
+    }
+    /**
+     * Gets the data from the data transfer by its MIME type.
+     *
+     *		dataTransfer.getData( 'text/plain' );
+     *
+     * @param {String} type The MIME type. E.g. `text/html` or `text/plain`.
+     * @returns {String}
+     */
+    getData(type) {
+        return this._native.getData(type);
+    }
+    /**
+     * Sets the data in the data transfer.
+     *
+     * @param {String} type The MIME type. E.g. `text/html` or `text/plain`.
+     * @param {String} data
+     */
+    setData(type, data) {
+        this._native.setData(type, data);
+    }
+    /**
+     * The effect that is allowed for a drag operation.
+     *
+     * @param {String} value
+     */
+    set effectAllowed(value) {
+        this._native.effectAllowed = value;
+    }
+    get effectAllowed() {
+        return this._native.effectAllowed;
+    }
+    /**
+     * The actual drop effect.
+     *
+     * @param {String} value
+     */
+    set dropEffect(value) {
+        this._native.dropEffect = value;
+    }
+    get dropEffect() {
+        return this._native.dropEffect;
+    }
+    /**
+     * Whether the dragging operation was canceled.
+     *
+     * @returns {Boolean}
+     */
+    get isCanceled() {
+        return this._native.dropEffect == 'none' || !!this._native.mozUserCancelled;
+    }
+}
+function getFiles(nativeDataTransfer) {
+    // DataTransfer.files and items are array-like and might not have an iterable interface.
+    const files = Array.from(nativeDataTransfer.files || []);
+    const items = Array.from(nativeDataTransfer.items || []);
+    if (files.length) {
+        return files;
+    }
+    // Chrome has empty DataTransfer.files, but allows getting files through the items interface.
+    return items
+        .filter(item => item.kind === 'file')
+        .map(item => item.getAsFile());
+}

package/src/view/domconverter.js

@@ -726,6 +726,9 @@ export default class DomConverter {
             }
             else {
                 const domBefore = domParent.childNodes[domOffset - 1];
+                if (isText(domBefore) && isInlineFiller(domBefore)) {
+                    return this.domPositionToView(domBefore.parentNode, indexOf(domBefore));
+                }
                 const viewBefore = isText(domBefore) ?
                     this.findCorrespondingViewText(domBefore) :
                     this.mapDomToView(domBefore);
@@ -950,8 +953,15 @@ export default class DomConverter {
         // Since it takes multiple lines of code to check whether a "DOM Position" is before/after another "DOM Position",
         // we will use the fact that range will collapse if it's end is before it's start.
         const range = this._domDocument.createRange();
-        range.setStart(selection.anchorNode, selection.anchorOffset);
-        range.setEnd(selection.focusNode, selection.focusOffset);
+        try {
+            range.setStart(selection.anchorNode, selection.anchorOffset);
+            range.setEnd(selection.focusNode, selection.focusOffset);
+        }
+        catch (e) {
+            // Safari sometimes gives us a selection that makes Range.set{Start,End} throw.
+            // See https://github.com/ckeditor/ckeditor5/issues/12375.
+            return false;
+        }
         const backward = range.collapsed;
         range.detach();
         return backward;

package/src/view/editableelement.js

@@ -7,7 +7,7 @@
  * @module engine/view/editableelement
  */
 import ContainerElement from './containerelement';
-import { default as ObservableMixin } from '@ckeditor/ckeditor5-utils/src/observablemixin';
+import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
 /**
  * Editable element which can be a {@link module:engine/view/rooteditableelement~RootEditableElement root}
  * or nested editable area in the editor.

package/src/view/observer/compositionobserver.js

@@ -21,14 +21,34 @@ export default class CompositionObserver extends DomEventObserver {
         this.domEventType = ['compositionstart', 'compositionupdate', 'compositionend'];
         const document = this.document;
         document.on('compositionstart', () => {
+            // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.log( '%c[CompositionObserver] ' +
+            // @if CK_DEBUG_TYPING // 		'┌───────────────────────────── isComposing = true ─────────────────────────────┐',
+            // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green'
+            // @if CK_DEBUG_TYPING // 	);
+            // @if CK_DEBUG_TYPING // }
             document.isComposing = true;
-        });
+        }, { priority: 'low' });
         document.on('compositionend', () => {
+            // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.log( '%c[CompositionObserver] ' +
+            // @if CK_DEBUG_TYPING // 		'└───────────────────────────── isComposing = false ─────────────────────────────┘',
+            // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green'
+            // @if CK_DEBUG_TYPING // 	);
+            // @if CK_DEBUG_TYPING // }
             document.isComposing = false;
-        });
+        }, { priority: 'low' });
     }
     onDomEvent(domEvent) {
-        this.fire(domEvent.type, domEvent);
+        // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	console.group( `%c[CompositionObserver]%c ${ domEvent.type }`, 'color: green', '' );
+        // @if CK_DEBUG_TYPING // }
+        this.fire(domEvent.type, domEvent, {
+            data: domEvent.data
+        });
+        // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	console.groupEnd();
+        // @if CK_DEBUG_TYPING // }
     }
 }
 /**

package/src/view/observer/inputobserver.js

@@ -6,10 +6,13 @@
  * @module engine/view/observer/inputobserver
  */
 import DomEventObserver from './domeventobserver';
+import DataTransfer from '../datatransfer';
+import env from '@ckeditor/ckeditor5-utils/src/env';
 /**
  * Observer for events connected with data input.
  *
- * Note that this observer is attached by the {@link module:engine/view/view~View} and is available by default.
+ * **Note**: This observer is attached by {@link module:engine/view/view~View} and available by default in all
+ * editor instances.
  *
  * @extends module:engine/view/observer/domeventobserver~DomEventObserver
  */
@@ -19,20 +22,144 @@ export default class InputObserver extends DomEventObserver {
         this.domEventType = ['beforeinput'];
     }
     onDomEvent(domEvent) {
-        this.fire(domEvent.type, domEvent);
+        // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	console.group( `%c[InputObserver]%c ${ domEvent.type }: ${ domEvent.inputType }`,
+        // @if CK_DEBUG_TYPING // 		'color: green', 'color: default'
+        // @if CK_DEBUG_TYPING // 	);
+        // @if CK_DEBUG_TYPING // }
+        const domTargetRanges = domEvent.getTargetRanges();
+        const view = this.view;
+        const viewDocument = view.document;
+        let dataTransfer = null;
+        let data = null;
+        let targetRanges = [];
+        if (domEvent.dataTransfer) {
+            dataTransfer = new DataTransfer(domEvent.dataTransfer);
+        }
+        if (domEvent.data !== null) {
+            data = domEvent.data;
+            // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.info( `%c[InputObserver]%c event data: %c${ JSON.stringify( data ) }`,
+            // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', 'font-weight:bold', 'color: blue;'
+            // @if CK_DEBUG_TYPING // 	);
+            // @if CK_DEBUG_TYPING // }
+        }
+        else if (dataTransfer) {
+            data = dataTransfer.getData('text/plain');
+            // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.info( `%c[InputObserver]%c event data transfer: %c${ JSON.stringify( data ) }`,
+            // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', 'font-weight:bold', 'color: blue;'
+            // @if CK_DEBUG_TYPING // 	);
+            // @if CK_DEBUG_TYPING // }
+        }
+        // If the editor selection is fake (an object is selected), the DOM range does not make sense because it is anchored
+        // in the fake selection container.
+        if (viewDocument.selection.isFake) {
+            // Future-proof: in case of multi-range fake selections being possible.
+            targetRanges = Array.from(viewDocument.selection.getRanges());
+            // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.info( '%c[InputObserver]%c using fake selection:',
+            // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', 'font-weight:bold', targetRanges,
+            // @if CK_DEBUG_TYPING // 		viewDocument.selection.isFake ? 'fake view selection' : 'fake DOM parent'
+            // @if CK_DEBUG_TYPING // 	);
+            // @if CK_DEBUG_TYPING // }
+        }
+        else if (domTargetRanges.length) {
+            targetRanges = domTargetRanges.map(domRange => {
+                return view.domConverter.domRangeToView(domRange);
+            });
+            // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.info( '%c[InputObserver]%c using target ranges:',
+            // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', 'font-weight:bold', targetRanges
+            // @if CK_DEBUG_TYPING // 	);
+            // @if CK_DEBUG_TYPING // }
+        }
+        // For Android devices we use a fallback to the current DOM selection, Android modifies it according
+        // to the expected target ranges of input event.
+        else if (env.isAndroid) {
+            const domSelection = domEvent.target.ownerDocument.defaultView.getSelection();
+            targetRanges = Array.from(view.domConverter.domSelectionToView(domSelection).getRanges());
+            // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.info( '%c[InputObserver]%c using selection ranges:',
+            // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', 'font-weight:bold', targetRanges
+            // @if CK_DEBUG_TYPING // 	);
+            // @if CK_DEBUG_TYPING // }
+        }
+        // Android sometimes fires insertCompositionText with a new-line character at the end of the data
+        // instead of firing insertParagraph beforeInput event.
+        // Fire the correct type of beforeInput event and ignore the replaced fragment of text because
+        // it wants to replace "test" with "test\n".
+        // https://github.com/ckeditor/ckeditor5/issues/12368.
+        if (env.isAndroid && domEvent.inputType == 'insertCompositionText' && data && data.endsWith('\n')) {
+            this.fire(domEvent.type, domEvent, {
+                inputType: 'insertParagraph',
+                targetRanges: [view.createRange(targetRanges[0].end)]
+            });
+            // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.groupEnd();
+            // @if CK_DEBUG_TYPING // }
+            return;
+        }
+        // Fire the normalized beforeInput event.
+        this.fire(domEvent.type, domEvent, {
+            data,
+            dataTransfer,
+            targetRanges,
+            inputType: domEvent.inputType,
+            isComposing: domEvent.isComposing
+        });
+        // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	console.groupEnd();
+        // @if CK_DEBUG_TYPING // }
     }
 }
 /**
- * Fired before browser inputs (or deletes) some data.
+ * The data transfer instance of the input event. Corresponds to native `InputEvent#dataTransfer`.
  *
- * This event is available only on browsers which support DOM `beforeinput` event.
+ * The value is `null` when no `dataTransfer` was passed along with the input event.
  *
- * Introduced by {@link module:engine/view/observer/inputobserver~InputObserver}.
+ * @readonly
+ * @member {module:engine/view/datatransfer~DataTransfer|null} module:engine/view/observer/inputobserver~InputEventData#dataTransfer
+ */
+/**
+ * A flag indicating that the `beforeinput` event was fired during composition.
+ *
+ * Corresponds to the
+ * {@link module:engine/view/document~Document#event:compositionstart},
+ * {@link module:engine/view/document~Document#event:compositionupdate},
+ * and {@link module:engine/view/document~Document#event:compositionend } trio.
+ *
+ * @readonly
+ * @member {Boolean} module:engine/view/observer/inputobserver~InputEventData#isComposing
+ */
+/**
+ * The type of the input event (e.g. "insertText" or "deleteWordBackward"). Corresponds to native `InputEvent#inputType`.
+ *
+ * @readonly
+ * @member {String} module:engine/view/observer/inputobserver~InputEventData#inputType
+ */
+/**
+ * Editing {@link module:engine/view/range~Range view ranges} corresponding to DOM ranges provided by the web browser
+ * (as returned by `InputEvent#getTargetRanges()`).
+ *
+ * @readonly
+ * @member {Array.<module:engine/view/range~Range>} module:engine/view/observer/inputobserver~InputEventData#targetRanges
+ */
+/**
+ * A unified text data passed along with the input event. Depending on:
+ *
+ * * the web browser and input events implementation (for instance [Level 1](https://www.w3.org/TR/input-events-1/) or
+ * [Level 2](https://www.w3.org/TR/input-events-2/)),
+ * * {@link module:engine/view/observer/inputobserver~InputEventData#inputType input type}
+ *
+ * text data is sometimes passed in the `data` and sometimes in the `dataTransfer` property.
  *
- * Note that because {@link module:engine/view/observer/inputobserver~InputObserver} is attached by the
- * {@link module:engine/view/view~View} this event is available by default.
+ * * If `InputEvent#data` was set, this property reflects its value.
+ * * If `InputEvent#data` is unavailable, this property contains the `'text/plain'` data from
+ * {@link module:engine/view/observer/inputobserver~InputEventData#dataTransfer}.
+ * * If the event ({@link module:engine/view/observer/inputobserver~InputEventData#inputType input type})
+ * provides no data whatsoever, this property is `null`.
  *
- * @see module:engine/view/observer/inputobserver~InputObserver
- * @event module:engine/view/document~Document#event:beforeinput
- * @param {module:engine/view/observer/domeventdata~DomEventData} data Event data.
+ * @readonly
+ * @member {String|null} module:engine/view/observer/inputobserver~InputEventData#data
  */

package/src/view/observer/mutationobserver.js

@@ -7,20 +7,16 @@
  */
 /* globals window */
 import Observer from './observer';
-import ViewSelection from '../selection';
-import { startsWithFiller, getDataWithoutFiller } from '../filler';
+import { startsWithFiller } from '../filler';
 import { isEqualWith } from 'lodash-es';
 /**
- * Mutation observer class observes changes in the DOM, fires {@link module:engine/view/document~Document#event:mutations} event, mark view
- * elements as changed and call {@link module:engine/view/renderer~Renderer#render}.
- * Because all mutated nodes are marked as "to be rendered" and the
- * {@link module:engine/view/renderer~Renderer#render} is called, all changes will be reverted, unless the mutation will be handled by the
- * {@link module:engine/view/document~Document#event:mutations} event listener. It means user will see only handled changes, and the editor
- * will block all changes which are not handled.
+ * Mutation observer's role is to watch for any DOM changes inside the editor that weren't
+ * done by the editor's {@link module:engine/view/renderer~Renderer} itself and reverting these changes.
  *
- * Mutation Observer also take care of reducing number of mutations which are fired. It removes duplicates and
- * mutations on elements which do not have corresponding view elements. Also
- * {@link module:engine/view/observer/mutationobserver~MutatedText text mutation} is fired only if parent element do not change child list.
+ * It does this by observing all mutations in the DOM, marking related view elements as changed and calling
+ * {@link module:engine/view/renderer~Renderer#render}. Because all mutated nodes are marked as
+ * "to be rendered" and the {@link module:engine/view/renderer~Renderer#render `render()`} method is called,
+ * all changes are reverted in the DOM (the DOM is synced with the editor's view structure).
  *
  * Note that this observer is attached by the {@link module:engine/view/view~View} and is available by default.
  *
@@ -38,7 +34,6 @@ export default class MutationObserver extends Observer {
         this._config = {
             childList: true,
             characterData: true,
-            characterDataOldValue: true,
             subtree: true
         };
         /**
@@ -69,8 +64,7 @@ export default class MutationObserver extends Observer {
         this._mutationObserver = new window.MutationObserver(this._onMutations.bind(this));
     }
     /**
-     * Synchronously fires {@link module:engine/view/document~Document#event:mutations} event with all mutations in record queue.
-     * At the same time empties the queue so mutations will not be fired twice.
+     * Synchronously handles mutations and empties the queue.
      */
     flush() {
         this._onMutations(this._mutationObserver.takeRecords());
@@ -108,7 +102,7 @@ export default class MutationObserver extends Observer {
         this._mutationObserver.disconnect();
     }
     /**
-     * Handles mutations. Deduplicates, mark view elements to sync, fire event and call render.
+     * Handles mutations. Mark view elements to sync and call render.
      *
      * @private
      * @param {Array.<Object>} domMutations Array of native mutations.
@@ -120,20 +114,21 @@ export default class MutationObserver extends Observer {
         }
         const domConverter = this.domConverter;
         // Use map and set for deduplication.
-        const mutatedTexts = new Map();
-        const mutatedElements = new Set();
+        const mutatedTextNodes = new Set();
+        const elementsWithMutatedChildren = new Set();
         // Handle `childList` mutations first, so we will be able to check if the `characterData` mutation is in the
         // element with changed structure anyway.
         for (const mutation of domMutations) {
-            if (mutation.type === 'childList') {
-                const element = domConverter.mapDomToView(mutation.target);
-                // Do not collect mutations from UIElements and RawElements.
-                if (element && (element.is('uiElement') || element.is('rawElement'))) {
-                    continue;
-                }
-                if (element && !this._isBogusBrMutation(mutation)) {
-                    mutatedElements.add(element);
-                }
+            const element = domConverter.mapDomToView(mutation.target);
+            if (!element) {
+                continue;
+            }
+            // Do not collect mutations from UIElements and RawElements.
+            if (element.is('uiElement') || element.is('rawElement')) {
+                continue;
+            }
+            if (mutation.type === 'childList' && !this._isBogusBrMutation(mutation)) {
+                elementsWithMutatedChildren.add(element);
             }
         }
         // Handle `characterData` mutations later, when we have the full list of nodes which changed structure.
@@ -145,87 +140,48 @@ export default class MutationObserver extends Observer {
             }
             if (mutation.type === 'characterData') {
                 const text = domConverter.findCorrespondingViewText(mutation.target);
-                if (text && !mutatedElements.has(text.parent)) {
-                    // Use text as a key, for deduplication. If there will be another mutation on the same text element
-                    // we will have only one in the map.
-                    mutatedTexts.set(text, {
-                        type: 'text',
-                        oldText: text.data,
-                        newText: getDataWithoutFiller(mutation.target),
-                        node: text
-                    });
+                if (text && !elementsWithMutatedChildren.has(text.parent)) {
+                    mutatedTextNodes.add(text);
                 }
                 // When we added first letter to the text node which had only inline filler, for the DOM it is mutation
-                // on text, but for the view, where filler text node did not existed, new text node was created, so we
-                // need to fire 'children' mutation instead of 'text'.
+                // on text, but for the view, where filler text node did not exist, new text node was created, so we
+                // need to handle it as a 'children' mutation instead of 'text'.
                 else if (!text && startsWithFiller(mutation.target)) {
-                    mutatedElements.add(domConverter.mapDomToView(mutation.target.parentNode));
+                    elementsWithMutatedChildren.add(domConverter.mapDomToView(mutation.target.parentNode));
                 }
             }
         }
-        // Now we build the list of mutations to fire and mark elements. We did not do it earlier to avoid marking the
+        // Now we build the list of mutations to mark elements. We did not do it earlier to avoid marking the
         // same node multiple times in case of duplication.
-        // List of mutations we will fire.
-        const viewMutations = [];
-        for (const mutatedText of mutatedTexts.values()) {
-            this.renderer.markToSync('text', mutatedText.node);
-            viewMutations.push(mutatedText);
+        let hasMutations = false;
+        for (const textNode of mutatedTextNodes) {
+            hasMutations = true;
+            this.renderer.markToSync('text', textNode);
         }
-        for (const viewElement of mutatedElements) {
+        for (const viewElement of elementsWithMutatedChildren) {
             const domElement = domConverter.mapViewToDom(viewElement);
             const viewChildren = Array.from(viewElement.getChildren());
             const newViewChildren = Array.from(domConverter.domChildrenToView(domElement, { withChildren: false }));
             // It may happen that as a result of many changes (sth was inserted and then removed),
             // both elements haven't really changed. #1031
             if (!isEqualWith(viewChildren, newViewChildren, sameNodes)) {
+                hasMutations = true;
                 this.renderer.markToSync('children', viewElement);
-                viewMutations.push({
-                    type: 'children',
-                    oldChildren: viewChildren,
-                    newChildren: newViewChildren,
-                    node: viewElement
-                });
-            }
-        }
-        // Retrieve `domSelection` using `ownerDocument` of one of mutated nodes.
-        // There should not be simultaneous mutation in multiple documents, so it's fine.
-        const domSelection = domMutations[0].target.ownerDocument.getSelection();
-        let viewSelection = null;
-        if (domSelection && domSelection.anchorNode) {
-            // If `domSelection` is inside a dom node that is already bound to a view node from view tree, get
-            // corresponding selection in the view and pass it together with `viewMutations`. The `viewSelection` may
-            // be used by features handling mutations.
-            // Only one range is supported.
-            const viewSelectionAnchor = domConverter.domPositionToView(domSelection.anchorNode, domSelection.anchorOffset);
-            const viewSelectionFocus = domConverter.domPositionToView(domSelection.focusNode, domSelection.focusOffset);
-            // Anchor and focus has to be properly mapped to view.
-            if (viewSelectionAnchor && viewSelectionFocus) {
-                viewSelection = new ViewSelection(viewSelectionAnchor);
-                viewSelection.setFocus(viewSelectionFocus);
             }
         }
         // In case only non-relevant mutations were recorded it skips the event and force render (#5600).
-        if (viewMutations.length) {
-            this.document.fire('mutations', viewMutations, viewSelection);
-            // If nothing changes on `mutations` event, at this point we have "dirty DOM" (changed) and de-synched
-            // view (which has not been changed). In order to "reset DOM" we render the view again.
+        if (hasMutations) {
+            // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.group( '%c[MutationObserver]%c Mutations detected',
+            // @if CK_DEBUG_TYPING // 		'font-weight:bold;color:green', ''
+            // @if CK_DEBUG_TYPING // 	);
+            // @if CK_DEBUG_TYPING // }
+            // At this point we have "dirty DOM" (changed) and de-synched view (which has not been changed).
+            // In order to "reset DOM" we render the view again.
             this.view.forceRender();
-        }
-        function sameNodes(child1, child2) {
-            // First level of comparison (array of children vs array of children) – use the Lodash's default behavior.
-            if (Array.isArray(child1)) {
-                return;
-            }
-            // Elements.
-            if (child1 === child2) {
-                return true;
-            }
-            // Texts.
-            else if (child1.is('$text') && child2.is('$text')) {
-                return child1.data === child2.data;
-            }
-            // Not matching types.
-            return false;
+            // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.groupEnd();
+            // @if CK_DEBUG_TYPING // }
         }
     }
     /**
@@ -248,3 +204,19 @@ export default class MutationObserver extends Observer {
         return addedNode && addedNode.is('element', 'br');
     }
 }
+function sameNodes(child1, child2) {
+    // First level of comparison (array of children vs array of children) – use the Lodash's default behavior.
+    if (Array.isArray(child1)) {
+        return;
+    }
+    // Elements.
+    if (child1 === child2) {
+        return true;
+    }
+    // Texts.
+    else if (child1.is('$text') && child2.is('$text')) {
+        return child1.data === child2.data;
+    }
+    // Not matching types.
+    return false;
+}

package/src/view/observer/selectionobserver.js

@@ -8,19 +8,18 @@
 /* global setInterval, clearInterval */
 import Observer from './observer';
 import MutationObserver from './mutationobserver';
+import env from '@ckeditor/ckeditor5-utils/src/env';
 import { debounce } from 'lodash-es';
 /**
  * Selection observer class observes selection changes in the document. If a selection changes on the document this
- * observer checks if there are any mutations and if the DOM selection is different from the
- * {@link module:engine/view/document~Document#selection view selection}. The selection observer fires
- * {@link module:engine/view/document~Document#event:selectionChange} event only if a selection change was the only change in the document
- * and the DOM selection is different then the view selection.
+ * observer checks if the DOM selection is different from the {@link module:engine/view/document~Document#selection view selection}.
+ * The selection observer fires {@link module:engine/view/document~Document#event:selectionChange} event only if
+ * a selection change was the only change in the document and the DOM selection is different from the view selection.
  *
  * This observer also manages the {@link module:engine/view/document~Document#isSelecting} property of the view document.
  *
  * Note that this observer is attached by the {@link module:engine/view/view~View} and is available by default.
  *
- * @see module:engine/view/observer/mutationobserver~MutationObserver
  * @extends module:engine/view/observer/observer~Observer
  */
 export default class SelectionObserver extends Observer {
@@ -133,7 +132,30 @@ export default class SelectionObserver extends Observer {
         // handler would like to check it and update (for example table multi cell selection).
         this.listenTo(domDocument, 'mouseup', endDocumentIsSelecting, { priority: 'highest', useCapture: true });
         this.listenTo(domDocument, 'selectionchange', (evt, domEvent) => {
+            // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	const domSelection = domDocument.defaultView.getSelection();
+            // @if CK_DEBUG_TYPING // 	console.group( '%c[SelectionObserver]%c selectionchange', 'color:green', ''
+            // @if CK_DEBUG_TYPING // 	);
+            // @if CK_DEBUG_TYPING // 	console.info( '%c[SelectionObserver]%c DOM Selection:', 'font-weight:bold;color:green', '',
+            // @if CK_DEBUG_TYPING // 		{ node: domSelection.anchorNode, offset: domSelection.anchorOffset },
+            // @if CK_DEBUG_TYPING // 		{ node: domSelection.focusNode, offset: domSelection.focusOffset }
+            // @if CK_DEBUG_TYPING // 	);
+            // @if CK_DEBUG_TYPING // }
+            // The Renderer is disabled while composing on non-android browsers, so we can't update the view selection
+            // because the DOM and view tree drifted apart. Position mapping could fail because of it.
+            if (this.document.isComposing && !env.isAndroid) {
+                // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+                // @if CK_DEBUG_TYPING // 	console.info( '%c[SelectionObserver]%c Selection change ignored (isComposing)',
+                // @if CK_DEBUG_TYPING // 		'font-weight:bold;color:green', ''
+                // @if CK_DEBUG_TYPING // 	);
+                // @if CK_DEBUG_TYPING // 	console.groupEnd();
+                // @if CK_DEBUG_TYPING // }
+                return;
+            }
             this._handleSelectionChange(domEvent, domDocument);
+            // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.groupEnd();
+            // @if CK_DEBUG_TYPING // }
             // Defer the safety timeout when the selection changes (e.g. the user keeps extending the selection
             // using their mouse).
             this._documentIsSelectingInactivityTimeoutDebounced();
@@ -168,8 +190,6 @@ export default class SelectionObserver extends Observer {
         }
         // Ensure the mutation event will be before selection event on all browsers.
         this.mutationObserver.flush();
-        // If there were mutations then the view will be re-rendered by the mutation observer and the selection
-        // will be updated, so the selections will equal and the event will not be fired, as expected.
         const newViewSelection = this.domConverter.domSelectionToView(domSelection);
         // Do not convert selection change if the new view selection has no ranges in it.
         //
@@ -204,8 +224,14 @@ export default class SelectionObserver extends Observer {
             const data = {
                 oldSelection: this.selection,
                 newSelection: newViewSelection,
-                domSelection: domSelection
+                domSelection
             };
+            // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.info( '%c[SelectionObserver]%c Fire selection change:',
+            // @if CK_DEBUG_TYPING // 		'font-weight:bold;color:green', '',
+            // @if CK_DEBUG_TYPING // 		newViewSelection.getFirstRange()
+            // @if CK_DEBUG_TYPING // 	);
+            // @if CK_DEBUG_TYPING // }
             // Prepare data for new selection and fire appropriate events.
             this.document.fire('selectionChange', data);
             // Call `#_fireSelectionChangeDoneDebounced` every time when `selectionChange` event is fired.

package/src/view/observer/tabobserver.js

@@ -2,9 +2,6 @@
  * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-/**
- * @module engine/view/observer/tabobserver
- */
 import Observer from './observer';
 import BubblingEventInfo from './bubblingeventinfo';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';

package/src/view/placeholder.js

@@ -36,6 +36,10 @@ export function enablePlaceholder(options) {
         // If a post-fixer callback makes a change, it should return `true` so other post–fixers
         // can re–evaluate the document again.
         doc.registerPostFixer(writer => updateDocumentPlaceholders(doc, writer));
+        // Update placeholders on isComposing state change since rendering is disabled while in composition mode.
+        doc.on('change:isComposing', () => {
+            view.change(writer => updateDocumentPlaceholders(doc, writer));
+        }, { priority: 'high' });
     }
     // Store information about the element placeholder under its document.
     documentPlaceholders.get(doc).set(element, {
@@ -137,17 +141,20 @@ export function needsPlaceholder(element, keepOnFocus) {
     if (hasContent) {
         return false;
     }
+    const doc = element.document;
+    const viewSelection = doc.selection;
+    const selectionAnchor = viewSelection.anchor;
+    if (doc.isComposing && selectionAnchor && selectionAnchor.parent === element) {
+        return false;
+    }
     // Skip the focus check and make the placeholder visible already regardless of document focus state.
     if (keepOnFocus) {
         return true;
     }
-    const doc = element.document;
     // If the document is blurred.
     if (!doc.isFocused) {
         return true;
     }
-    const viewSelection = doc.selection;
-    const selectionAnchor = viewSelection.anchor;
     // If document is focused and the element is empty but the selection is not anchored inside it.
     return !!selectionAnchor && selectionAnchor.parent !== element;
 }

package/src/view/renderer.js

@@ -114,6 +114,20 @@ export default class Renderer extends Observable {
                 }
             });
         }
+        /**
+         * True if composition is in progress inside the document.
+         *
+         * This property is bound to the {@link module:engine/view/document~Document#isComposing `Document#isComposing`} property.
+         *
+         * @member {Boolean}
+         * @observable
+         */
+        this.set('isComposing', false);
+        this.on('change:isComposing', () => {
+            if (!this.isComposing) {
+                this.render();
+            }
+        });
         /**
          * The text node in which the inline filler was rendered.
          *
@@ -181,6 +195,23 @@ export default class Renderer extends Observable {
      * removed as long as the selection is in the text node which needed it at first.
      */
     render() {
+        // Ignore rendering while in the composition mode. Composition events are not cancellable and browser will modify the DOM tree.
+        // All marked elements, attributes, etc. will wait until next render after the composition ends.
+        // On Android composition events are immediately applied to the model, so we don't need to skip rendering,
+        // and we should not do it because the difference between view and DOM could lead to position mapping problems.
+        if (this.isComposing && !env.isAndroid) {
+            // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.info( '%c[Renderer]%c Rendering aborted while isComposing',
+            // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', ''
+            // @if CK_DEBUG_TYPING // 	);
+            // @if CK_DEBUG_TYPING // }
+            return;
+        }
+        // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	console.group( '%c[Renderer]%c Rendering',
+        // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', ''
+        // @if CK_DEBUG_TYPING // 	);
+        // @if CK_DEBUG_TYPING // }
         let inlineFillerPosition = null;
         const isInlineFillerRenderingPossible = env.isBlink && !env.isAndroid ? !this.isSelecting : true;
         // Refresh mappings.
@@ -265,6 +296,9 @@ export default class Renderer extends Observable {
         this.markedTexts.clear();
         this.markedAttributes.clear();
         this.markedChildren.clear();
+        // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	console.groupEnd();
+        // @if CK_DEBUG_TYPING // }
     }
     /**
      * Updates mappings of view element's children.
@@ -446,6 +480,11 @@ export default class Renderer extends Observable {
         if (nodeBefore instanceof ViewText || nodeAfter instanceof ViewText) {
             return false;
         }
+        // Do not use inline filler while typing outside inline elements on Android.
+        // The deleteContentBackward would remove part of the inline filler instead of removing last letter in a link.
+        if (env.isAndroid && (nodeBefore || nodeAfter)) {
+            return false;
+        }
         return true;
     }
     /**
@@ -460,23 +499,20 @@ export default class Renderer extends Observable {
     _updateText(viewText, options) {
         const domText = this.domConverter.findCorrespondingDomText(viewText);
         const newDomText = this.domConverter.viewToDom(viewText);
-        const actualText = domText.data;
         let expectedText = newDomText.data;
         const filler = options.inlineFillerPosition;
         if (filler && filler.parent == viewText.parent && filler.offset == viewText.index) {
             expectedText = INLINE_FILLER + expectedText;
         }
-        if (actualText != expectedText) {
-            const actions = fastDiff(actualText, expectedText);
-            for (const action of actions) {
-                if (action.type === 'insert') {
-                    domText.insertData(action.index, action.values.join(''));
-                }
-                else { // 'delete'
-                    domText.deleteData(action.index, action.howMany);
-                }
-            }
-        }
+        // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	console.group( '%c[Renderer]%c Update text',
+        // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', ''
+        // @if CK_DEBUG_TYPING // 	);
+        // @if CK_DEBUG_TYPING // }
+        updateTextNode(domText, expectedText);
+        // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	console.groupEnd();
+        // @if CK_DEBUG_TYPING // }
     }
     /**
      * Checks if attribute list needs to be updated and possibly updates it.
@@ -510,6 +546,9 @@ export default class Renderer extends Observable {
     /**
      * Checks if elements child list needs to be updated and possibly updates it.
      *
+     * Note that on Android, to reduce the risk of composition breaks, it tries to update data of an existing
+     * child text nodes instead of replacing them completely.
+     *
      * @private
      * @param {module:engine/view/element~Element} viewElement View element to update.
      * @param {Object} options
@@ -523,8 +562,27 @@ export default class Renderer extends Observable {
             // There is no need to process it. It will be processed when re-inserted.
             return;
         }
+        // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	console.group( '%c[Renderer]%c Update children',
+        // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', ''
+        // @if CK_DEBUG_TYPING // 	);
+        // @if CK_DEBUG_TYPING // }
+        // IME on Android inserts a new text node while typing after a link
+        // instead of updating an existing text node that follows the link.
+        // We must normalize those text nodes so the diff won't get confused.
+        // https://github.com/ckeditor/ckeditor5/issues/12574.
+        if (env.isAndroid) {
+            let previousDomNode = null;
+            for (const domNode of Array.from(domElement.childNodes)) {
+                if (previousDomNode && isText(previousDomNode) && isText(domNode)) {
+                    domElement.normalize();
+                    break;
+                }
+                previousDomNode = domNode;
+            }
+        }
         const inlineFillerPosition = options.inlineFillerPosition;
-        const actualDomChildren = this.domConverter.mapViewToDom(viewElement).childNodes;
+        const actualDomChildren = domElement.childNodes;
         const expectedDomChildren = Array.from(this.domConverter.viewChildrenToDom(viewElement, { bind: true }));
         // Inline filler element has to be created as it is present in the DOM, but not in the view. It is required
         // during diffing so text nodes could be compared correctly and also during rendering to maintain
@@ -533,6 +591,17 @@ export default class Renderer extends Observable {
             addInlineFiller(domElement.ownerDocument, expectedDomChildren, inlineFillerPosition.offset);
         }
         const diff = this._diffNodeLists(actualDomChildren, expectedDomChildren);
+        // The rendering is not disabled on Android in the composition mode.
+        // Composition events are not cancellable and browser will modify the DOM tree.
+        // On Android composition events are immediately applied to the model, so we don't need to skip rendering,
+        // and we should not do it because the difference between view and DOM could lead to position mapping problems.
+        // Since the composition is fragile and often breaks if the composed text node is replaced while composing
+        // we need to make sure that we update the existing text node and not replace it with another one.
+        // We don't want to change the behavior on other browsers for safety, but maybe one day cause it seems to make sense.
+        // https://github.com/ckeditor/ckeditor5/issues/12455.
+        const actions = env.isAndroid ?
+            this._findReplaceActions(diff, actualDomChildren, expectedDomChildren, { replaceText: true }) :
+            diff;
         let i = 0;
         const nodesToUnbind = new Set();
         // Handle deletions first.
@@ -541,21 +610,44 @@ export default class Renderer extends Observable {
         // and it disrupts the whole algorithm. See https://github.com/ckeditor/ckeditor5/issues/6367.
         //
         // It doesn't matter in what order we remove or add nodes, as long as we remove and add correct nodes at correct indexes.
-        for (const action of diff) {
+        for (const action of actions) {
             if (action === 'delete') {
+                // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+                // @if CK_DEBUG_TYPING // 	console.info( '%c[Renderer]%c Remove node',
+                // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', '', actualDomChildren[ i ]
+                // @if CK_DEBUG_TYPING // 	);
+                // @if CK_DEBUG_TYPING // }
                 nodesToUnbind.add(actualDomChildren[i]);
                 remove(actualDomChildren[i]);
             }
-            else if (action === 'equal') {
+            else if (action === 'equal' || action === 'replace') {
                 i++;
             }
         }
         i = 0;
-        for (const action of diff) {
+        for (const action of actions) {
             if (action === 'insert') {
+                // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+                // @if CK_DEBUG_TYPING // 	console.info( '%c[Renderer]%c Insert node',
+                // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', '', expectedDomChildren[ i ]
+                // @if CK_DEBUG_TYPING // 	);
+                // @if CK_DEBUG_TYPING // }
                 insertAt(domElement, i, expectedDomChildren[i]);
                 i++;
             }
+            // 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.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], expectedDomChildren[i].data);
+                i++;
+                // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+                // @if CK_DEBUG_TYPING // 	console.groupEnd();
+                // @if CK_DEBUG_TYPING // }
+            }
             else if (action === 'equal') {
                 // Force updating text nodes inside elements which did not change and do not need to be re-rendered (#1125).
                 // Do it here (not in the loop above) because only after insertions the `i` index is correct.
@@ -571,6 +663,9 @@ export default class Renderer extends Observable {
                 this.domConverter.unbindDomElement(node);
             }
         }
+        // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	console.groupEnd();
+        // @if CK_DEBUG_TYPING // }
     }
     /**
      * Shorthand for diffing two arrays or node lists of DOM nodes.
@@ -597,9 +692,11 @@ export default class Renderer extends Observable {
      * @param {Array.<String>} actions Actions array which is a result of the {@link module:utils/diff~diff} function.
      * @param {Array.<ViewNode>|NodeList} actualDom Actual DOM children
      * @param {Array.<ViewNode>} expectedDom Expected DOM children.
+     * @param {Object} [options] Options
+     * @param {Boolean} [options.replaceText] Mark text nodes replacement.
      * @returns {Array.<String>} Actions array modified with the `replace` actions.
      */
-    _findReplaceActions(actions, actualDom, expectedDom) {
+    _findReplaceActions(actions, actualDom, expectedDom, options = {}) {
         // If there is no both 'insert' and 'delete' actions, no need to check for replaced elements.
         if (actions.indexOf('insert') === -1 || actions.indexOf('delete') === -1) {
             return actions;
@@ -616,7 +713,8 @@ export default class Renderer extends Observable {
                 actualSlice.push(actualDom[counter.equal + counter.delete]);
             }
             else { // equal
-                newActions = newActions.concat(diff(actualSlice, expectedSlice, areSimilar).map(x => x === 'equal' ? 'replace' : x));
+                newActions = newActions.concat(diff(actualSlice, expectedSlice, options.replaceText ? areTextNodes : areSimilar)
+                    .map(x => x === 'equal' ? 'replace' : x));
                 newActions.push('equal');
                 // Reset stored elements on 'equal'.
                 actualSlice = [];
@@ -624,7 +722,8 @@ export default class Renderer extends Observable {
             }
             counter[action]++;
         }
-        return newActions.concat(diff(actualSlice, expectedSlice, areSimilar).map(x => x === 'equal' ? 'replace' : x));
+        return newActions.concat(diff(actualSlice, expectedSlice, options.replaceText ? areTextNodes : areSimilar)
+            .map(x => x === 'equal' ? 'replace' : x));
     }
     /**
      * Marks text nodes to be synchronized.
@@ -671,14 +770,23 @@ export default class Renderer extends Observable {
         if (!this.isFocused || !domRoot) {
             return;
         }
-        // Render selection.
+        // Render fake selection - create the fake selection container (if needed) and move DOM selection to it.
         if (this.selection.isFake) {
             this._updateFakeSelection(domRoot);
         }
-        else {
+        // There was a fake selection so remove it and update the DOM selection.
+        // This is especially important on Android because otherwise IME will try to compose over the fake selection container.
+        else if (this._fakeSelectionContainer && this._fakeSelectionContainer.isConnected) {
             this._removeFakeSelection();
             this._updateDomSelection(domRoot);
         }
+        // Update the DOM selection in case of a plain selection change (no fake selection is involved).
+        // On non-Android the whole rendering is disabled in composition mode (including DOM selection update),
+        // but updating DOM selection should be also disabled on Android if in the middle of the composition
+        // (to not interrupt it).
+        else if (!(this.isComposing && env.isAndroid)) {
+            this._updateDomSelection(domRoot);
+        }
     }
     /**
      * Updates the fake selection.
@@ -726,6 +834,11 @@ export default class Renderer extends Observable {
         // selected. If there is any editable selected, it is okay (editable is taken from selection anchor).
         const anchor = this.domConverter.viewPositionToDom(this.selection.anchor);
         const focus = this.domConverter.viewPositionToDom(this.selection.focus);
+        // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	console.info( '%c[Renderer]%c Update DOM selection:',
+        // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', '', anchor, focus
+        // @if CK_DEBUG_TYPING // 	);
+        // @if CK_DEBUG_TYPING // }
         domSelection.collapse(anchor.parent, anchor.offset);
         domSelection.extend(focus.parent, focus.offset);
         // Firefox–specific hack (https://github.com/ckeditor/ckeditor5-engine/issues/1439).
@@ -873,6 +986,11 @@ function areSimilar(node1, node2) {
         !isComment(node1) && !isComment(node2) &&
         node1.tagName.toLowerCase() === node2.tagName.toLowerCase();
 }
+// Whether two DOM nodes are text nodes.
+function areTextNodes(node1, node2) {
+    return isNode(node1) && isNode(node2) &&
+        isText(node1) && isText(node2);
+}
 // Whether two dom nodes should be considered as the same.
 // Two nodes which are considered the same are:
 //
@@ -953,3 +1071,35 @@ function createFakeSelectionContainer(domDocument) {
     container.textContent = '\u00A0';
     return container;
 }
+// Checks if text needs to be updated and possibly updates it by removing and inserting only parts
+// of the data from the existing text node to reduce impact on the IME composition.
+//
+// @param {Text} domText DOM text node to update.
+// @param {String} expectedText The expected data of a text node.
+function updateTextNode(domText, expectedText) {
+    const actualText = domText.data;
+    if (actualText == expectedText) {
+        // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	console.info( '%c[Renderer]%c Text node does not need update:',
+        // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', '',
+        // @if CK_DEBUG_TYPING // 		`"${ domText.data }" (${ domText.data.length })`
+        // @if CK_DEBUG_TYPING // 	);
+        // @if CK_DEBUG_TYPING // }
+        return;
+    }
+    // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+    // @if CK_DEBUG_TYPING // 	console.info( '%c[Renderer]%c Update text node:',
+    // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', '',
+    // @if CK_DEBUG_TYPING // 		`"${ domText.data }" (${ domText.data.length }) -> "${ expectedText }" (${ expectedText.length })`
+    // @if CK_DEBUG_TYPING // 	);
+    // @if CK_DEBUG_TYPING // }
+    const actions = fastDiff(actualText, expectedText);
+    for (const action of actions) {
+        if (action.type === 'insert') {
+            domText.insertData(action.index, action.values.join(''));
+        }
+        else { // 'delete'
+            domText.deleteData(action.index, action.howMany);
+        }
+    }
+}

package/src/view/view.js

@@ -12,9 +12,9 @@ import DomConverter from './domconverter';
 import Position from './position';
 import Range from './range';
 import Selection from './selection';
-import MutationObserver from './observer/mutationobserver';
 import KeyObserver from './observer/keyobserver';
 import FakeSelectionObserver from './observer/fakeselectionobserver';
+import MutationObserver from './observer/mutationobserver';
 import SelectionObserver from './observer/selectionobserver';
 import FocusObserver from './observer/focusobserver';
 import CompositionObserver from './observer/compositionobserver';
@@ -26,7 +26,6 @@ import { scrollViewportToShowTarget } from '@ckeditor/ckeditor5-utils/src/dom/sc
 import { injectUiElementHandling } from './uielement';
 import { injectQuirksHandling } from './filler';
 import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
-import env from '@ckeditor/ckeditor5-utils/src/env';
 /**
  * Editor's view controller class. Its main responsibility is DOM - View management for editing purposes, to provide
  * abstraction over the DOM structure and events and hide all browsers quirks.
@@ -43,12 +42,12 @@ import env from '@ckeditor/ckeditor5-utils/src/env';
  * on DOM and fire events on the {@link module:engine/view/document~Document Document}.
  * Note that the following observers are added by the class constructor and are always available:
  *
- * * {@link module:engine/view/observer/mutationobserver~MutationObserver},
  * * {@link module:engine/view/observer/selectionobserver~SelectionObserver},
  * * {@link module:engine/view/observer/focusobserver~FocusObserver},
  * * {@link module:engine/view/observer/keyobserver~KeyObserver},
  * * {@link module:engine/view/observer/fakeselectionobserver~FakeSelectionObserver}.
  * * {@link module:engine/view/observer/compositionobserver~CompositionObserver}.
+ * * {@link module:engine/view/observer/inputobserver~InputObserver}.
  * * {@link module:engine/view/observer/arrowkeysobserver~ArrowKeysObserver}.
  * * {@link module:engine/view/observer/tabobserver~TabObserver}.
  *
@@ -109,7 +108,7 @@ export default class View extends Observable {
          * @type {module:engine/view/renderer~Renderer}
          */
         this._renderer = new Renderer(this.domConverter, this.document.selection);
-        this._renderer.bind('isFocused', 'isSelecting').to(this.document, 'isFocused', 'isSelecting');
+        this._renderer.bind('isFocused', 'isSelecting', 'isComposing').to(this.document, 'isFocused', 'isSelecting', 'isComposing');
         /**
          * A DOM root attributes cache. It saves the initial values of DOM root attributes before the DOM element
          * is {@link module:engine/view/view~View#attachDomRoot attached} to the view so later on, when
@@ -171,10 +170,8 @@ export default class View extends Observable {
         this.addObserver(FakeSelectionObserver);
         this.addObserver(CompositionObserver);
         this.addObserver(ArrowKeysObserver);
+        this.addObserver(InputObserver);
         this.addObserver(TabObserver);
-        if (env.isAndroid) {
-            this.addObserver(InputObserver);
-        }
         // Inject quirks handlers.
         injectQuirksHandling(this);
         injectUiElementHandling(this);
@@ -615,7 +612,7 @@ export default class View extends Observable {
         }
     }
     /**
-     * Renders all changes. In order to avoid triggering the observers (e.g. mutations) all observers are disabled
+     * Renders all changes. In order to avoid triggering the observers (e.g. selection) all observers are disabled
      * before rendering and re-enabled after that.
      *
      * @private