@ckeditor/ckeditor5-engine 44.3.0 → 45.0.0-alpha.0

package/src/view/observer/selectionobserver.js

@@ -10,7 +10,7 @@ import Observer from './observer.js';
 import MutationObserver from './mutationobserver.js';
 import FocusObserver from './focusobserver.js';
 import { env } from '@ckeditor/ckeditor5-utils';
-import { debounce } from 'lodash-es';
+import { debounce } from 'es-toolkit/compat';
 /**
  * Selection observer class observes selection changes in the document. If a selection changes on the document this
  * observer checks if the DOM selection is different from the {@link module:engine/view/document~Document#selection view selection}.
@@ -22,19 +22,81 @@ import { debounce } from 'lodash-es';
  * Note that this observer is attached by the {@link module:engine/view/view~View} and is available by default.
  */
 export default class SelectionObserver extends Observer {
+    /**
+     * Instance of the mutation observer. Selection observer calls
+     * {@link module:engine/view/observer/mutationobserver~MutationObserver#flush} to ensure that the mutations will be handled
+     * before the {@link module:engine/view/document~Document#event:selectionChange} event is fired.
+     */
+    mutationObserver;
+    /**
+     * Instance of the focus observer. Focus observer calls
+     * {@link module:engine/view/observer/focusobserver~FocusObserver#flush} to mark the latest focus change as complete.
+     */
+    focusObserver;
+    /**
+     * Reference to the view {@link module:engine/view/documentselection~DocumentSelection} object used to compare
+     * new selection with it.
+     */
+    selection;
+    /**
+     * Reference to the {@link module:engine/view/view~View#domConverter}.
+     */
+    domConverter;
+    /**
+     * A set of documents which have added `selectionchange` listener to avoid adding a listener twice to the same
+     * document.
+     */
+    _documents = new WeakSet();
+    /**
+     * Fires debounced event `selectionChangeDone`. It uses `es-toolkit#debounce` method to delay function call.
+     */
+    _fireSelectionChangeDoneDebounced;
+    /**
+     * When called, starts clearing the {@link #_loopbackCounter} counter in time intervals. When the number of selection
+     * changes exceeds a certain limit within the interval of time, the observer will not fire `selectionChange` but warn about
+     * possible infinite selection loop.
+     */
+    _clearInfiniteLoopInterval;
+    /**
+     * Unlocks the `isSelecting` state of the view document in case the selection observer did not record this fact
+     * correctly (for whatever reason). It is a safeguard (paranoid check), that returns document to the normal state
+     * after a certain period of time (debounced, postponed by each selectionchange event).
+     */
+    _documentIsSelectingInactivityTimeoutDebounced;
+    /**
+     * Private property to check if the code does not enter infinite loop.
+     */
+    _loopbackCounter = 0;
+    /**
+     * A set of DOM documents that have a pending selection change.
+     * Pending selection change is recorded while selection change event is detected on non focused editable.
+     */
+    _pendingSelectionChange = new Set();
     constructor(view) {
         super(view);
         this.mutationObserver = view.getObserver(MutationObserver);
         this.focusObserver = view.getObserver(FocusObserver);
         this.selection = this.document.selection;
         this.domConverter = view.domConverter;
-        this._documents = new WeakSet();
         this._fireSelectionChangeDoneDebounced = debounce(data => {
             this.document.fire('selectionChangeDone', data);
         }, 200);
         this._clearInfiniteLoopInterval = setInterval(() => this._clearInfiniteLoop(), 1000);
         this._documentIsSelectingInactivityTimeoutDebounced = debounce(() => (this.document.isSelecting = false), 5000);
-        this._loopbackCounter = 0;
+        this.view.document.on('change:isFocused', (evt, name, isFocused) => {
+            if (isFocused && this._pendingSelectionChange.size) {
+                // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+                // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'SelectionObserver',
+                // @if CK_DEBUG_TYPING // 		'Flush pending selection change'
+                // @if CK_DEBUG_TYPING // 	) );
+                // @if CK_DEBUG_TYPING // }
+                // Iterate over a copy of set because it is modified in selection change handler.
+                for (const domDocument of Array.from(this._pendingSelectionChange)) {
+                    this._handleSelectionChange(domDocument);
+                }
+                this._pendingSelectionChange.clear();
+            }
+        });
     }
     /**
      * @inheritDoc
@@ -74,20 +136,22 @@ export default class SelectionObserver extends Observer {
             // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
             // @if CK_DEBUG_TYPING // 	_debouncedLine();
             // @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 // 	console.group( ..._buildLogMessage( this, 'SelectionObserver',
+            // @if CK_DEBUG_TYPING // 		'selectionchange'
+            // @if CK_DEBUG_TYPING // 	) );
+            // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'SelectionObserver',
+            // @if CK_DEBUG_TYPING // 		'DOM Selection:',
             // @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 // 	) );
             // @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 as any ).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.info( ..._buildLogMessage( this, 'SelectionObserver',
+                // @if CK_DEBUG_TYPING //		'Selection change ignored (isComposing)'
+                // @if CK_DEBUG_TYPING //	) );
                 // @if CK_DEBUG_TYPING // 	console.groupEnd();
                 // @if CK_DEBUG_TYPING // }
                 return;
@@ -106,12 +170,14 @@ export default class SelectionObserver extends Observer {
         this.listenTo(this.view.document, 'compositionstart', () => {
             // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
             // @if CK_DEBUG_TYPING // 	const domSelection = domDocument.defaultView!.getSelection();
-            // @if CK_DEBUG_TYPING // 	console.group( '%c[SelectionObserver]%c update selection on compositionstart', '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 // 	console.group( ..._buildLogMessage( this, 'SelectionObserver',
+            // @if CK_DEBUG_TYPING // 		'update selection on compositionstart'
+            // @if CK_DEBUG_TYPING // 	) );
+            // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'SelectionObserver',
+            // @if CK_DEBUG_TYPING // 		'DOM Selection:',
             // @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 // 	) );
             // @if CK_DEBUG_TYPING // }
             this._handleSelectionChange(domDocument);
             // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
@@ -171,6 +237,17 @@ export default class SelectionObserver extends Observer {
         this.view.hasDomSelection = true;
         // Mark the latest focus change as complete (we got new selection after the focus so the selection is in the focused element).
         this.focusObserver.flush();
+        // Ignore selection change as the editable is not focused.
+        if (!this.view.document.isFocused) {
+            // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'SelectionObserver',
+            // @if CK_DEBUG_TYPING // 		'Ignore selection change while editable is not focused'
+            // @if CK_DEBUG_TYPING // 	) );
+            // @if CK_DEBUG_TYPING // }
+            this._pendingSelectionChange.add(domDocument);
+            return;
+        }
+        this._pendingSelectionChange.delete(domDocument);
         if (this.selection.isEqual(newViewSelection) && this.domConverter.isDomSelectionCorrect(domSelection)) {
             return;
         }
@@ -197,10 +274,10 @@ export default class SelectionObserver extends Observer {
                 domSelection
             };
             // @if CK_DEBUG_TYPING // if ( ( window as any ).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 // 	console.info( ..._buildLogMessage( this, 'SelectionObserver',
+            // @if CK_DEBUG_TYPING // 		'Fire selection change:',
             // @if CK_DEBUG_TYPING // 		newViewSelection.getFirstRange()
-            // @if CK_DEBUG_TYPING // 	);
+            // @if CK_DEBUG_TYPING // 	) );
             // @if CK_DEBUG_TYPING // }
             // Prepare data for new selection and fire appropriate events.
             this.document.fire('selectionChange', data);

package/src/view/observer/touchobserver.js

@@ -13,13 +13,10 @@ import DomEventObserver from './domeventobserver.js';
  * {@link module:engine/view/view~View} by {@link module:engine/view/view~View#addObserver} method.
  */
 export default class TouchObserver extends DomEventObserver {
-    constructor() {
-        super(...arguments);
-        /**
-         * @inheritDoc
-         */
-        this.domEventType = ['touchstart', 'touchend', 'touchmove'];
-    }
+    /**
+     * @inheritDoc
+     */
+    domEventType = ['touchstart', 'touchend', 'touchmove'];
     /**
      * @inheritDoc
      */

package/src/view/position.js

@@ -19,6 +19,14 @@ import { default as TreeWalker } from './treewalker.js';
  * * {@link module:engine/view/upcastwriter~UpcastWriter}
  */
 export default class Position extends TypeCheckable {
+    /**
+     * Position parent.
+     */
+    parent;
+    /**
+     * Position offset.
+     */
+    offset;
     /**
      * Creates a position.
      *

package/src/view/range.js

@@ -18,6 +18,14 @@ import { default as TreeWalker } from './treewalker.js';
  * * {@link module:engine/view/upcastwriter~UpcastWriter}
  */
 export default class Range extends TypeCheckable {
+    /**
+     * Start position.
+     */
+    start;
+    /**
+     * End position.
+     */
+    end;
     /**
      * Creates a range spanning from `start` position to `end` position.
      *

package/src/view/renderer.js

@@ -9,6 +9,7 @@ import ViewText from './text.js';
 import ViewPosition from './position.js';
 import { INLINE_FILLER, INLINE_FILLER_LENGTH, startsWithFiller, isInlineFiller } from './filler.js';
 import { CKEditorError, ObservableMixin, diff, env, fastDiff, insertAt, isComment, isNode, isText, remove, indexOf } from '@ckeditor/ckeditor5-utils';
+// @if CK_DEBUG_TYPING // const { _buildLogMessage } = require( '../dev-utils/utils.js' );
 import '../../theme/renderer.css';
 /**
  * Renderer is responsible for updating the DOM structure and the DOM selection based on
@@ -24,6 +25,38 @@ import '../../theme/renderer.css';
  * to and from the DOM.
  */
 export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
+    /**
+     * Set of DOM Documents instances.
+     */
+    domDocuments = new Set();
+    /**
+     * Converter instance.
+     */
+    domConverter;
+    /**
+     * Set of nodes which attributes changed and may need to be rendered.
+     */
+    markedAttributes = new Set();
+    /**
+     * Set of elements which child lists changed and may need to be rendered.
+     */
+    markedChildren = new Set();
+    /**
+     * Set of text nodes which text data changed and may need to be rendered.
+     */
+    markedTexts = new Set();
+    /**
+     * View selection. Renderer updates DOM selection based on the view selection.
+     */
+    selection;
+    /**
+     * The text node in which the inline filler was rendered.
+     */
+    _inlineFiller = null;
+    /**
+     * DOM element containing fake selection.
+     */
+    _fakeSelectionContainer = null;
     /**
      * Creates a renderer instance.
      *
@@ -32,30 +65,6 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
      */
     constructor(domConverter, selection) {
         super();
-        /**
-         * Set of DOM Documents instances.
-         */
-        this.domDocuments = new Set();
-        /**
-         * Set of nodes which attributes changed and may need to be rendered.
-         */
-        this.markedAttributes = new Set();
-        /**
-         * Set of elements which child lists changed and may need to be rendered.
-         */
-        this.markedChildren = new Set();
-        /**
-         * Set of text nodes which text data changed and may need to be rendered.
-         */
-        this.markedTexts = new Set();
-        /**
-         * The text node in which the inline filler was rendered.
-         */
-        this._inlineFiller = null;
-        /**
-         * DOM element containing fake selection.
-         */
-        this._fakeSelectionContainer = null;
         this.domConverter = domConverter;
         this.selection = selection;
         this.set('isFocused', false);
@@ -133,16 +142,18 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
         // 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 as any ).logCKETyping ) {
-            // @if CK_DEBUG_TYPING // 	console.info( '%c[Renderer]%c Rendering aborted while isComposing.',
-            // @if CK_DEBUG_TYPING // 		'color: green; font-weight: bold', 'font-style: italic'
-            // @if CK_DEBUG_TYPING // 	);
+            // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'Renderer',
+            // @if CK_DEBUG_TYPING // 		'%cRendering aborted while isComposing.',
+            // @if CK_DEBUG_TYPING // 		'font-style: italic'
+            // @if CK_DEBUG_TYPING // 	) );
             // @if CK_DEBUG_TYPING // }
             return;
         }
         // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
-        // @if CK_DEBUG_TYPING // 	console.group( '%c[Renderer]%c Rendering',
-        // @if CK_DEBUG_TYPING // 		'color: green; font-weight: bold', 'font-weight: bold'
-        // @if CK_DEBUG_TYPING // 	);
+        // @if CK_DEBUG_TYPING // 	console.group( ..._buildLogMessage( this, 'Renderer',
+        // @if CK_DEBUG_TYPING // 		'%cRendering',
+        // @if CK_DEBUG_TYPING // 		'font-weight: bold'
+        // @if CK_DEBUG_TYPING // 	) );
         // @if CK_DEBUG_TYPING // }
         let inlineFillerPosition = null;
         const isInlineFillerRenderingPossible = env.isBlink && !env.isAndroid ? !this.isSelecting : true;
@@ -426,9 +437,10 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
             expectedText = INLINE_FILLER + expectedText;
         }
         // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
-        // @if CK_DEBUG_TYPING // 	console.group( '%c[Renderer]%c Update text',
-        // @if CK_DEBUG_TYPING // 		'color: green; font-weight: bold', 'font-weight: normal'
-        // @if CK_DEBUG_TYPING // 	);
+        // @if CK_DEBUG_TYPING // 	console.group( ..._buildLogMessage( this, 'Renderer',
+        // @if CK_DEBUG_TYPING // 		'%cUpdate text',
+        // @if CK_DEBUG_TYPING // 		'font-weight: normal'
+        // @if CK_DEBUG_TYPING // 	) );
         // @if CK_DEBUG_TYPING // }
         this._updateTextNode(domText, expectedText);
         // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
@@ -485,9 +497,10 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
             return;
         }
         // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
-        // @if CK_DEBUG_TYPING // 	console.group( '%c[Renderer]%c Update children',
-        // @if CK_DEBUG_TYPING // 		'color: green; font-weight: bold', 'font-weight: normal'
-        // @if CK_DEBUG_TYPING // 	);
+        // @if CK_DEBUG_TYPING // 	console.group( ..._buildLogMessage( this, 'Renderer',
+        // @if CK_DEBUG_TYPING // 		'%cUpdate children',
+        // @if CK_DEBUG_TYPING // 		'font-weight: normal'
+        // @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.
@@ -517,9 +530,10 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
         // The composition and different "language" browser extensions are fragile to text node being completely replaced.
         const actions = this._findUpdateActions(diff, actualDomChildren, expectedDomChildren, areTextNodes);
         // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping && actions.every( a => a == 'equal' ) ) {
-        // @if CK_DEBUG_TYPING // 	console.info( '%c[Renderer]%c Nothing to update.',
-        // @if CK_DEBUG_TYPING // 		'color: green; font-weight: bold', 'font-style: italic'
-        // @if CK_DEBUG_TYPING // 	);
+        // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'Renderer',
+        // @if CK_DEBUG_TYPING // 		'%cNothing to update.',
+        // @if CK_DEBUG_TYPING // 		'font-style: italic'
+        // @if CK_DEBUG_TYPING // 	) );
         // @if CK_DEBUG_TYPING // }
         let i = 0;
         const nodesToUnbind = new Set();
@@ -534,19 +548,20 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
                 // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
                 // @if CK_DEBUG_TYPING //	const node = actualDomChildren[ i ];
                 // @if CK_DEBUG_TYPING // 	if ( isText( node ) ) {
-                // @if CK_DEBUG_TYPING // 		console.info( '%c[Renderer]%c Remove text node' +
+                // @if CK_DEBUG_TYPING // 		console.info( ..._buildLogMessage( this, 'Renderer',
+                // @if CK_DEBUG_TYPING // 			'%cRemove text node' +
                 // @if CK_DEBUG_TYPING // 			`${ this.isComposing ? ' while composing (may break composition)' : '' }: ` +
                 // @if CK_DEBUG_TYPING // 			`%c${ _escapeTextNodeData( node.data ) }%c (${ node.data.length })`,
-                // @if CK_DEBUG_TYPING // 			'color: green; font-weight: bold',
-                // @if CK_DEBUG_TYPING // 			this.isComposing ? 'color: red; font-weight: bold' : '', 'color: blue', ''
-                // @if CK_DEBUG_TYPING // 		);
+                // @if CK_DEBUG_TYPING // 			this.isComposing ? 'color: red; font-weight: bold' : '',
+                // @if CK_DEBUG_TYPING // 			'color: blue', ''
+                // @if CK_DEBUG_TYPING // 		) );
                 // @if CK_DEBUG_TYPING // 	} else {
-                // @if CK_DEBUG_TYPING // 		console.info( '%c[Renderer]%c Remove element' +
+                // @if CK_DEBUG_TYPING // 		console.info( ..._buildLogMessage( this, 'Renderer',
+                // @if CK_DEBUG_TYPING // 			'%cRemove element' +
                 // @if CK_DEBUG_TYPING // 			`${ this.isComposing ? ' while composing (may break composition)' : '' }: `,
-                // @if CK_DEBUG_TYPING // 			'color: green; font-weight: bold',
                 // @if CK_DEBUG_TYPING // 			this.isComposing ? 'color: red; font-weight: bold' : '',
                 // @if CK_DEBUG_TYPING // 			node
-                // @if CK_DEBUG_TYPING // 		);
+                // @if CK_DEBUG_TYPING // 		) );
                 // @if CK_DEBUG_TYPING // 	}
                 // @if CK_DEBUG_TYPING // }
                 nodesToUnbind.add(actualDomChildren[i]);
@@ -562,18 +577,20 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
                 // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
                 // @if CK_DEBUG_TYPING //	const node = expectedDomChildren[ i ];
                 // @if CK_DEBUG_TYPING //	if ( isText( node ) ) {
-                // @if CK_DEBUG_TYPING //		console.info( '%c[Renderer]%c Insert text node' +
+                // @if CK_DEBUG_TYPING //		console.info( ..._buildLogMessage( this, 'Renderer',
+                // @if CK_DEBUG_TYPING //			'%cInsert text node' +
                 // @if CK_DEBUG_TYPING //			`${ this.isComposing ? ' while composing (may break composition)' : '' }: ` +
                 // @if CK_DEBUG_TYPING //			`%c${ _escapeTextNodeData( node.data ) }%c (${ node.data.length })`,
-                // @if CK_DEBUG_TYPING //			'color: green; font-weight: bold',
                 // @if CK_DEBUG_TYPING //			this.isComposing ? 'color: red; font-weight: bold' : '',
-                // @if CK_DEBUG_TYPING //			'color: blue', ''
-                // @if CK_DEBUG_TYPING //		);
+                // @if CK_DEBUG_TYPING //			'color: blue',
+                // @if CK_DEBUG_TYPING //			''
+                // @if CK_DEBUG_TYPING //		) );
                 // @if CK_DEBUG_TYPING //	} else {
-                // @if CK_DEBUG_TYPING //		console.info( '%c[Renderer]%c Insert element:',
-                // @if CK_DEBUG_TYPING //			'color: green; font-weight: bold', 'font-weight: normal',
+                // @if CK_DEBUG_TYPING //		console.info( ..._buildLogMessage( this, 'Renderer',
+                // @if CK_DEBUG_TYPING //			'%cInsert element:',
+                // @if CK_DEBUG_TYPING //			'font-weight: normal',
                 // @if CK_DEBUG_TYPING //			node
-                // @if CK_DEBUG_TYPING //		);
+                // @if CK_DEBUG_TYPING //		) );
                 // @if CK_DEBUG_TYPING //	}
                 // @if CK_DEBUG_TYPING // }
                 insertAt(domElement, i, expectedDomChildren[i]);
@@ -672,10 +689,13 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
         const actualText = domText.data;
         if (actualText == expectedText) {
             // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
-            // @if CK_DEBUG_TYPING // 	console.info( '%c[Renderer]%c Text node does not need update:%c ' +
+            // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'Renderer',
+            // @if CK_DEBUG_TYPING // 		'%cText node does not need update:%c ' +
             // @if CK_DEBUG_TYPING // 		`${ _escapeTextNodeData( actualText ) }%c (${ actualText.length })`,
-            // @if CK_DEBUG_TYPING // 		'color: green; font-weight: bold', 'font-style: italic', 'color: blue', ''
-            // @if CK_DEBUG_TYPING // 	);
+            // @if CK_DEBUG_TYPING // 		'font-style: italic',
+            // @if CK_DEBUG_TYPING // 		'color: blue',
+            // @if CK_DEBUG_TYPING // 		''
+            // @if CK_DEBUG_TYPING // 	) );
             // @if CK_DEBUG_TYPING // }
             return;
         }
@@ -685,22 +705,31 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
         // See: https://github.com/ckeditor/ckeditor5/issues/13994.
         if (env.isAndroid && this.isComposing && actualText.replace(/\u00A0/g, ' ') == expectedText.replace(/\u00A0/g, ' ')) {
             // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
-            // @if CK_DEBUG_TYPING // 	console.info( '%c[Renderer]%c Text node ignore NBSP changes while composing: ' +
-            // @if CK_DEBUG_TYPING // 		`%c${ _escapeTextNodeData( actualText ) }%c (${ actualText.length }) ->` +
-            // @if CK_DEBUG_TYPING // 		` %c${ _escapeTextNodeData( expectedText ) }%c (${ expectedText.length })`,
-            // @if CK_DEBUG_TYPING // 		'color: green; font-weight: bold', 'font-style: italic', 'color: blue', '', 'color: blue', ''
-            // @if CK_DEBUG_TYPING // 	);
+            // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'Renderer',
+            // @if CK_DEBUG_TYPING // 		'%cText node ignore NBSP changes while composing: ' +
+            // @if CK_DEBUG_TYPING // 		`%c${ _escapeTextNodeData( actualText ) }%c (${ actualText.length }) -> ` +
+            // @if CK_DEBUG_TYPING // 		`%c${ _escapeTextNodeData( expectedText ) }%c (${ expectedText.length })`,
+            // @if CK_DEBUG_TYPING // 		'font-style: italic',
+            // @if CK_DEBUG_TYPING // 		'color: blue',
+            // @if CK_DEBUG_TYPING // 		'',
+            // @if CK_DEBUG_TYPING // 		'color: blue',
+            // @if CK_DEBUG_TYPING // 		''
+            // @if CK_DEBUG_TYPING // 	) );
             // @if CK_DEBUG_TYPING // }
             return;
         }
         // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
-        // @if CK_DEBUG_TYPING // 	console.info( '%c[Renderer]%c Update text node' +
+        // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'Renderer',
+        // @if CK_DEBUG_TYPING // 		'%cUpdate text node' +
         // @if CK_DEBUG_TYPING // 		`${ this.isComposing ? ' while composing (may break composition)' : '' }: ` +
-        // @if CK_DEBUG_TYPING // 		`%c${ _escapeTextNodeData( actualText ) }%c (${ actualText.length }) ->` +
-        // @if CK_DEBUG_TYPING // 		` %c${ _escapeTextNodeData( expectedText ) }%c (${ expectedText.length })`,
-        // @if CK_DEBUG_TYPING // 		'color: green; font-weight: bold', this.isComposing ? 'color: red; font-weight: bold' : '',
-        // @if CK_DEBUG_TYPING // 		'color: blue', '', 'color: blue', ''
-        // @if CK_DEBUG_TYPING // 	);
+        // @if CK_DEBUG_TYPING // 		`%c${ _escapeTextNodeData( actualText ) }%c (${ actualText.length }) -> ` +
+        // @if CK_DEBUG_TYPING // 		`%c${ _escapeTextNodeData( expectedText ) }%c (${ expectedText.length })`,
+        // @if CK_DEBUG_TYPING // 		this.isComposing ? 'color: red; font-weight: bold' : '',
+        // @if CK_DEBUG_TYPING // 		'color: blue',
+        // @if CK_DEBUG_TYPING // 		'',
+        // @if CK_DEBUG_TYPING // 		'color: blue',
+        // @if CK_DEBUG_TYPING // 		''
+        // @if CK_DEBUG_TYPING // 	) );
         // @if CK_DEBUG_TYPING // }
         this._updateTextNodeInternal(domText, expectedText);
     }
@@ -751,6 +780,11 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
         }
         // If there is no selection - remove DOM and fake selections.
         if (this.selection.rangeCount === 0) {
+            // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'Renderer',
+            // @if CK_DEBUG_TYPING // 		'Update DOM selection: remove all ranges'
+            // @if CK_DEBUG_TYPING // 	) );
+            // @if CK_DEBUG_TYPING // }
             this._removeDomSelection();
             this._removeFakeSelection();
             return;
@@ -758,8 +792,19 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
         const domRoot = this.domConverter.mapViewToDom(this.selection.editableElement);
         // Do nothing if there is no focus, or there is no DOM element corresponding to selection's editable element.
         if (!this.isFocused || !domRoot) {
+            // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'Renderer',
+            // @if CK_DEBUG_TYPING // 		'Skip updating DOM selection:',
+            // @if CK_DEBUG_TYPING // 		`isFocused: ${ this.isFocused }, hasDomRoot: ${ !!domRoot }`
+            // @if CK_DEBUG_TYPING // 	) );
+            // @if CK_DEBUG_TYPING // }
             return;
         }
+        // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'Renderer',
+        // @if CK_DEBUG_TYPING // 		'Update DOM selection'
+        // @if CK_DEBUG_TYPING // 	) );
+        // @if CK_DEBUG_TYPING // }
         // Render fake selection - create the fake selection container (if needed) and move DOM selection to it.
         if (this.selection.isFake) {
             this._updateFakeSelection(domRoot);
@@ -798,6 +843,11 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
             domRoot.appendChild(container);
         }
         container.textContent = this.selection.fakeSelectionLabel || '\u00A0';
+        // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'Renderer',
+        // @if CK_DEBUG_TYPING // 		'Set DOM fake selection'
+        // @if CK_DEBUG_TYPING // 	) );
+        // @if CK_DEBUG_TYPING // }
         const domSelection = domDocument.getSelection();
         const domRange = domDocument.createRange();
         domSelection.removeAllRanges();
@@ -813,6 +863,12 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
         const domSelection = domRoot.ownerDocument.defaultView.getSelection();
         // Let's check whether DOM selection needs updating at all.
         if (!this._domSelectionNeedsUpdate(domSelection)) {
+            // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'Renderer',
+            // @if CK_DEBUG_TYPING // 		'%cDOM selection is already correct',
+            // @if CK_DEBUG_TYPING // 		'font-style: italic;'
+            // @if CK_DEBUG_TYPING // 	) );
+            // @if CK_DEBUG_TYPING // }
             return;
         }
         // Multi-range selection is not available in most browsers, and, at least in Chrome, trying to
@@ -823,9 +879,11 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
         const anchor = this.domConverter.viewPositionToDom(this.selection.anchor);
         const focus = this.domConverter.viewPositionToDom(this.selection.focus);
         // @if CK_DEBUG_TYPING // if ( ( window as any ).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 // 	console.info( ..._buildLogMessage( this, 'Renderer',
+        // @if CK_DEBUG_TYPING // 		'Update DOM selection:',
+        // @if CK_DEBUG_TYPING // 		anchor,
+        // @if CK_DEBUG_TYPING // 		focus
+        // @if CK_DEBUG_TYPING // 	) );
         // @if CK_DEBUG_TYPING // }
         domSelection.setBaseAndExtent(anchor.parent, anchor.offset, focus.parent, focus.offset);
         // Firefox–specific hack (https://github.com/ckeditor/ckeditor5-engine/issues/1439).
@@ -902,12 +960,26 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
      * Checks if focus needs to be updated and possibly updates it.
      */
     _updateFocus() {
+        // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	console.group( ..._buildLogMessage( this, 'Renderer',
+        // @if CK_DEBUG_TYPING // 		`update focus: ${ this.isFocused ? 'focused' : 'not focused' }`
+        // @if CK_DEBUG_TYPING // 	) );
+        // @if CK_DEBUG_TYPING // }
         if (this.isFocused) {
             const editable = this.selection.editableElement;
+            // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'Renderer',
+            // @if CK_DEBUG_TYPING // 		'focus editable:',
+            // @if CK_DEBUG_TYPING // 		{ editable }
+            // @if CK_DEBUG_TYPING // 	) );
+            // @if CK_DEBUG_TYPING // }
             if (editable) {
                 this.domConverter.focus(editable);
             }
         }
+        // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	console.groupEnd();
+        // @if CK_DEBUG_TYPING // }
     }
 }
 /**

package/src/view/selection.js

@@ -24,6 +24,22 @@ import { CKEditorError, EmitterMixin, count, isIterable } from '@ckeditor/ckedit
  * the {@link module:engine/view/selection~Selection#setTo `Selection#setTo()`} method.
  */
 export default class Selection extends /* #__PURE__ */ EmitterMixin(TypeCheckable) {
+    /**
+     * Stores all ranges that are selected.
+     */
+    _ranges;
+    /**
+     * Specifies whether the last added range was added as a backward or forward range.
+     */
+    _lastRangeBackward;
+    /**
+     * Specifies whether selection instance is fake.
+     */
+    _isFake;
+    /**
+     * Fake selection's label.
+     */
+    _fakeSelectionLabel;
     /**
      * Creates new selection instance.
      *