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

package/dist/index.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 import { logWarning, EmitterMixin, CKEditorError, compareArrays, toArray, toMap, isIterable, ObservableMixin, count, EventInfo, Collection, keyCodes, isText, env, remove as remove$1, insertAt, diff, fastDiff, isNode, isComment, indexOf, global, isValidAttributeName, first, getAncestors, DomEmitterMixin, getCode, isArrowKeyCode, scrollViewportToShowTarget, uid, spliceArray, priorities, isInsideSurrogatePair, isInsideCombinedSymbol, isInsideEmojiSequence } from '@ckeditor/ckeditor5-utils/dist/index.js';
-import { clone, isObject, unset, get, merge, set, isPlainObject, extend, debounce, isEqualWith, cloneDeep, isEqual } from 'lodash-es';
+import { clone, isObject, unset, get, merge, set, isPlainObject, extend, debounce, isEqualWith, cloneDeep, isEqual } from 'es-toolkit/compat';
 
 // Each document stores information about its placeholder elements and check functions.
 const documentPlaceholders = new WeakMap();
@@ -1923,10 +1923,10 @@ TextProxy$1.prototype.is = function(type) {
             return [];
         }
         if (expand) {
-            this._cachedExpandedStyleNames = this._cachedExpandedStyleNames || this._styleProcessor.getStyleNames(this._styles);
+            this._cachedExpandedStyleNames ||= this._styleProcessor.getStyleNames(this._styles);
             return this._cachedExpandedStyleNames;
         }
-        this._cachedStyleNames = this._cachedStyleNames || this.getStylesEntries().map(([key])=>key);
+        this._cachedStyleNames ||= this.getStylesEntries().map(([key])=>key);
         return this._cachedStyleNames;
     }
     /**
@@ -8376,16 +8376,18 @@ const validNodesToInsert = [
         // 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;
@@ -8662,9 +8664,10 @@ const validNodesToInsert = [
             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 ) {
@@ -8719,9 +8722,10 @@ const validNodesToInsert = [
             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.
@@ -8753,9 +8757,10 @@ const validNodesToInsert = [
         // 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();
@@ -8770,19 +8775,20 @@ const validNodesToInsert = [
                 // @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]);
@@ -8797,18 +8803,20 @@ const validNodesToInsert = [
                 // @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]);
@@ -8901,10 +8909,13 @@ const validNodesToInsert = [
         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;
         }
@@ -8914,22 +8925,31 @@ const validNodesToInsert = [
         // 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);
     }
@@ -8975,6 +8995,11 @@ const validNodesToInsert = [
         }
         // 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;
@@ -8982,8 +9007,19 @@ const validNodesToInsert = [
         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);
@@ -9013,6 +9049,11 @@ const validNodesToInsert = [
             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();
@@ -9027,6 +9068,12 @@ const validNodesToInsert = [
         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
@@ -9037,9 +9084,11 @@ const validNodesToInsert = [
         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).
@@ -9111,12 +9160,26 @@ const validNodesToInsert = [
     /**
 	 * 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 // }
     }
 }
 /**
@@ -9298,7 +9361,7 @@ const UNSAFE_ELEMENT_REPLACEMENT_ATTRIBUTE = 'data-ck-unsafe-element';
 	 * `<span data-ck-unsafe-element="[element name]"></span>` while rendering in the editing mode.
 	 */ unsafeElements;
     /**
-	 * The DOM Document used to create DOM nodes.
+	 * The DOM Document used by `DomConverter` to create DOM nodes.
 	 */ _domDocument;
     /**
 	 * The DOM-to-view mapping.
@@ -9403,6 +9466,11 @@ const UNSAFE_ELEMENT_REPLACEMENT_ATTRIBUTE = 'data-ck-unsafe-element';
         ];
         this._domDocument = this.renderingMode === 'editing' ? global.document : global.document.implementation.createHTMLDocument('');
     }
+    /**
+	 * The DOM Document used by `DomConverter` to create DOM nodes.
+	 */ get domDocument() {
+        return this._domDocument;
+    }
     /**
 	 * Binds a given DOM element that represents fake selection to a **position** of a
 	 * {@link module:engine/view/documentselection~DocumentSelection document selection}.
@@ -10075,33 +10143,46 @@ const UNSAFE_ELEMENT_REPLACEMENT_ATTRIBUTE = 'data-ck-unsafe-element';
 	 * Focuses DOM editable that is corresponding to provided {@link module:engine/view/editableelement~EditableElement}.
 	 */ focus(viewEditable) {
         const domEditable = this.mapViewToDom(viewEditable);
-        if (domEditable && domEditable.ownerDocument.activeElement !== domEditable) {
-            // Save the scrollX and scrollY positions before the focus.
-            const { scrollX, scrollY } = global.window;
-            const scrollPositions = [];
-            // Save all scrollLeft and scrollTop values starting from domEditable up to
-            // document#documentElement.
-            forEachDomElementAncestor(domEditable, (node)=>{
-                const { scrollLeft, scrollTop } = node;
-                scrollPositions.push([
-                    scrollLeft,
-                    scrollTop
-                ]);
-            });
-            domEditable.focus();
-            // Restore scrollLeft and scrollTop values starting from domEditable up to
-            // document#documentElement.
-            // https://github.com/ckeditor/ckeditor5-engine/issues/951
-            // https://github.com/ckeditor/ckeditor5-engine/issues/957
-            forEachDomElementAncestor(domEditable, (node)=>{
-                const [scrollLeft, scrollTop] = scrollPositions.shift();
-                node.scrollLeft = scrollLeft;
-                node.scrollTop = scrollTop;
-            });
-            // Restore the scrollX and scrollY positions after the focus.
-            // https://github.com/ckeditor/ckeditor5-engine/issues/951
-            global.window.scrollTo(scrollX, scrollY);
+        if (!domEditable || domEditable.ownerDocument.activeElement === domEditable) {
+            // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'DomConverter',
+            // @if CK_DEBUG_TYPING // 		'%cDOM editable is already active or does not exist',
+            // @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.info( ..._buildLogMessage( this, 'DomConverter',
+        // @if CK_DEBUG_TYPING // 		'Focus DOM editable:',
+        // @if CK_DEBUG_TYPING // 		{ domEditable }
+        // @if CK_DEBUG_TYPING // 	) );
+        // @if CK_DEBUG_TYPING // }
+        // Save the scrollX and scrollY positions before the focus.
+        const { scrollX, scrollY } = global.window;
+        const scrollPositions = [];
+        // Save all scrollLeft and scrollTop values starting from domEditable up to
+        // document#documentElement.
+        forEachDomElementAncestor(domEditable, (node)=>{
+            const { scrollLeft, scrollTop } = node;
+            scrollPositions.push([
+                scrollLeft,
+                scrollTop
+            ]);
+        });
+        domEditable.focus();
+        // Restore scrollLeft and scrollTop values starting from domEditable up to
+        // document#documentElement.
+        // https://github.com/ckeditor/ckeditor5-engine/issues/951
+        // https://github.com/ckeditor/ckeditor5-engine/issues/957
+        forEachDomElementAncestor(domEditable, (node)=>{
+            const [scrollLeft, scrollTop] = scrollPositions.shift();
+            node.scrollLeft = scrollLeft;
+            node.scrollTop = scrollTop;
+        });
+        // Restore the scrollX and scrollY positions after the focus.
+        // https://github.com/ckeditor/ckeditor5-engine/issues/951
+        global.window.scrollTo(scrollX, scrollY);
     }
     /**
 	 * Remove DOM selection from blurred editable, so it won't interfere with clicking on dropdowns (especially on iOS).
@@ -11042,7 +11123,7 @@ const UNSAFE_ELEMENT_REPLACEMENT_ATTRIBUTE = 'data-ck-unsafe-element';
  * {@link module:engine/view/observer/selectionobserver~SelectionObserver SelectionObserver}.
  */ class FakeSelectionObserver extends Observer {
     /**
-	 * Fires debounced event `selectionChangeDone`. It uses `lodash#debounce` method to delay function call.
+	 * Fires debounced event `selectionChangeDone`. It uses `es-toolkit#debounce` method to delay function call.
 	 */ _fireSelectionChangeDoneDebounced;
     /**
 	 * Creates new FakeSelectionObserver instance.
@@ -11119,7 +11200,7 @@ const UNSAFE_ELEMENT_REPLACEMENT_ATTRIBUTE = 'data-ck-unsafe-element';
     }
 }
 
-// @if CK_DEBUG_TYPING // const { _debouncedLine } = require( '../../dev-utils/utils.js' );
+// @if CK_DEBUG_TYPING // const { _debouncedLine, _buildLogMessage } = require( '../../dev-utils/utils.js' );
 /**
  * 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.
@@ -11274,9 +11355,10 @@ const UNSAFE_ELEMENT_REPLACEMENT_ATTRIBUTE = 'data-ck-unsafe-element';
         if (mutations.length) {
             // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
             // @if CK_DEBUG_TYPING // 	_debouncedLine();
-            // @if CK_DEBUG_TYPING // 	console.group( '%c[MutationObserver]%c Mutations detected',
-            // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green', 'font-weight: bold'
-            // @if CK_DEBUG_TYPING // 	);
+            // @if CK_DEBUG_TYPING // 	console.group( ..._buildLogMessage( this, 'MutationObserver',
+            // @if CK_DEBUG_TYPING // 		'%cMutations detected',
+            // @if CK_DEBUG_TYPING // 		'font-weight: bold'
+            // @if CK_DEBUG_TYPING // 	) );
             // @if CK_DEBUG_TYPING // }
             this.document.fire('mutations', {
                 mutations
@@ -11304,7 +11386,7 @@ const UNSAFE_ELEMENT_REPLACEMENT_ATTRIBUTE = 'data-ck-unsafe-element';
     }
 }
 function sameNodes(child1, child2) {
-    // First level of comparison (array of children vs array of children) – use the Lodash's default behavior.
+    // First level of comparison (array of children vs array of children) – use the es-toolkit's default behavior.
     if (Array.isArray(child1)) {
         return;
     }
@@ -11318,6 +11400,7 @@ function sameNodes(child1, child2) {
     return false;
 }
 
+// @if CK_DEBUG_TYPING // const { _debouncedLine, _buildLogMessage } = require( '../../dev-utils/utils.js' );
 /**
  * {@link module:engine/view/document~Document#event:focus Focus}
  * and {@link module:engine/view/document~Document#event:blur blur} events observer.
@@ -11364,14 +11447,42 @@ function sameNodes(child1, child2) {
 	 * Finishes setting the document focus state.
 	 */ flush() {
         if (this._isFocusChanging) {
+            // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	_debouncedLine();
+            // @if CK_DEBUG_TYPING // 	console.group( ..._buildLogMessage( this, 'FocusObserver',
+            // @if CK_DEBUG_TYPING // 		'flush focus'
+            // @if CK_DEBUG_TYPING // 	) );
+            // @if CK_DEBUG_TYPING // }
             this._isFocusChanging = false;
             this.document.isFocused = true;
+        // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	console.groupEnd();
+        // @if CK_DEBUG_TYPING // }
         }
     }
     /**
 	 * @inheritDoc
 	 */ onDomEvent(domEvent) {
+        // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	_debouncedLine();
+        // @if CK_DEBUG_TYPING // 	console.group( ..._buildLogMessage( this, 'FocusObserver',
+        // @if CK_DEBUG_TYPING // 		`${ domEvent.type } event`
+        // @if CK_DEBUG_TYPING // 	) );
+        // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'FocusObserver',
+        // @if CK_DEBUG_TYPING // 		'DOM target:',
+        // @if CK_DEBUG_TYPING // 		{ target: domEvent.target, relatedTarget: domEvent.relatedTarget }
+        // @if CK_DEBUG_TYPING // 	) );
+        // @if CK_DEBUG_TYPING // 	const domSelection = window.getSelection();
+        // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'FocusObserver',
+        // @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 // }
         this.fire(domEvent.type, domEvent);
+    // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+    // @if CK_DEBUG_TYPING // 	console.groupEnd();
+    // @if CK_DEBUG_TYPING // }
     }
     /**
 	 * @inheritDoc
@@ -11394,20 +11505,42 @@ function sameNodes(child1, child2) {
         // in a situation where `selectionchange` already caused selection change.
         this._renderTimeoutId = setTimeout(()=>{
             this._renderTimeoutId = null;
+            // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.group( ..._buildLogMessage( this, 'FocusObserver',
+            // @if CK_DEBUG_TYPING // 		'flush on timeout'
+            // @if CK_DEBUG_TYPING // 	) );
+            // @if CK_DEBUG_TYPING // }
             this.flush();
             this.view.change(()=>{});
+        // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	console.groupEnd();
+        // @if CK_DEBUG_TYPING // }
         }, 50);
     }
     /**
 	 * The `blur` event handler.
 	 */ _handleBlur(data) {
         const selectedEditable = this.document.selection.editableElement;
+        // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'FocusObserver',
+        // @if CK_DEBUG_TYPING // 		'selectedEditable:',
+        // @if CK_DEBUG_TYPING // 		{ selectedEditable }
+        // @if CK_DEBUG_TYPING // 	) );
+        // @if CK_DEBUG_TYPING // }
         if (selectedEditable === null || selectedEditable === data.target) {
+            // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.group( ..._buildLogMessage( this, 'FocusObserver',
+            // @if CK_DEBUG_TYPING // 		'document no longer focused'
+            // @if CK_DEBUG_TYPING // 	) );
+            // @if CK_DEBUG_TYPING // }
             this.document.isFocused = false;
             this._isFocusChanging = false;
             // Re-render the document to update view elements
             // (changing document.isFocused already marked view as changed since last rendering).
             this.view.change(()=>{});
+        // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	console.groupEnd();
+        // @if CK_DEBUG_TYPING // }
         }
     }
     /**
@@ -11449,9 +11582,9 @@ function sameNodes(child1, child2) {
     /**
 	 * A set of documents which have added `selectionchange` listener to avoid adding a listener twice to the same
 	 * document.
-	 */ _documents;
+	 */ _documents = new WeakSet();
     /**
-	 * Fires debounced event `selectionChangeDone`. It uses `lodash#debounce` method to delay function call.
+	 * 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
@@ -11465,20 +11598,36 @@ function sameNodes(child1, child2) {
 	 */ _documentIsSelectingInactivityTimeoutDebounced;
     /**
 	 * Private property to check if the code does not enter infinite loop.
-	 */ _loopbackCounter;
+	 */ _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
@@ -11528,20 +11677,22 @@ function sameNodes(child1, child2) {
             // @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;
@@ -11560,12 +11711,14 @@ function sameNodes(child1, child2) {
         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 ) {
@@ -11623,6 +11776,17 @@ function sameNodes(child1, child2) {
         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;
         }
@@ -11648,10 +11812,10 @@ function sameNodes(child1, child2) {
                 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);
@@ -11669,7 +11833,7 @@ function sameNodes(child1, child2) {
     }
 }
 
-// @if CK_DEBUG_TYPING // const { _debouncedLine } = require( '../../dev-utils/utils.js' );
+// @if CK_DEBUG_TYPING // const { _debouncedLine, _buildLogMessage } = require( '../../dev-utils/utils.js' );
 /**
  * {@link module:engine/view/document~Document#event:compositionstart Compositionstart},
  * {@link module:engine/view/document~Document#event:compositionupdate compositionupdate} and
@@ -11691,10 +11855,10 @@ function sameNodes(child1, child2) {
         const document = this.document;
         document.on('compositionstart', ()=>{
             // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
-            // @if CK_DEBUG_TYPING // 	console.log( '%c[CompositionObserver] ' +
-            // @if CK_DEBUG_TYPING // 		'┌───────────────────────────── isComposing = true ─────────────────────────────┐',
+            // @if CK_DEBUG_TYPING // 	console.log( ..._buildLogMessage( this, 'CompositionObserver',
+            // @if CK_DEBUG_TYPING // 		'%c┌───────────────────────────── isComposing = true ─────────────────────────────┐',
             // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green'
-            // @if CK_DEBUG_TYPING // 	);
+            // @if CK_DEBUG_TYPING // 	) );
             // @if CK_DEBUG_TYPING // }
             document.isComposing = true;
         }, {
@@ -11702,10 +11866,10 @@ function sameNodes(child1, child2) {
         });
         document.on('compositionend', ()=>{
             // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
-            // @if CK_DEBUG_TYPING // 	console.log( '%c[CompositionObserver] ' +
-            // @if CK_DEBUG_TYPING // 		'└───────────────────────────── isComposing = false ─────────────────────────────┘',
+            // @if CK_DEBUG_TYPING // 	console.log( ..._buildLogMessage( this, 'CompositionObserver',
+            // @if CK_DEBUG_TYPING // 		'%c└───────────────────────────── isComposing = false ─────────────────────────────┘',
             // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green'
-            // @if CK_DEBUG_TYPING // 	);
+            // @if CK_DEBUG_TYPING // 	) );
             // @if CK_DEBUG_TYPING // }
             document.isComposing = false;
         }, {
@@ -11717,7 +11881,9 @@ function sameNodes(child1, child2) {
 	 */ onDomEvent(domEvent) {
         // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
         // @if CK_DEBUG_TYPING // 	_debouncedLine();
-        // @if CK_DEBUG_TYPING // 	console.group( `%c[CompositionObserver]%c ${ domEvent.type }`, 'color: green', '' );
+        // @if CK_DEBUG_TYPING // 	console.group( ..._buildLogMessage( this, 'CompositionObserver',
+        // @if CK_DEBUG_TYPING // 		`${ domEvent.type }`
+        // @if CK_DEBUG_TYPING // 	) );
         // @if CK_DEBUG_TYPING // }
         this.fire(domEvent.type, domEvent, {
             data: domEvent.data
@@ -11822,7 +11988,7 @@ function getFiles(nativeDataTransfer) {
     return items.filter((item)=>item.kind === 'file').map((item)=>item.getAsFile());
 }
 
-// @if CK_DEBUG_TYPING // const { _debouncedLine } = require( '../../dev-utils/utils.js' );
+// @if CK_DEBUG_TYPING // const { _debouncedLine, _buildLogMessage } = require( '../../dev-utils/utils.js' );
 /**
  * Observer for events connected with data input.
  *
@@ -11837,9 +12003,9 @@ function getFiles(nativeDataTransfer) {
 	 */ onDomEvent(domEvent) {
         // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
         // @if CK_DEBUG_TYPING // 	_debouncedLine();
-        // @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 // 	console.group( ..._buildLogMessage( this, 'InputObserver',
+        // @if CK_DEBUG_TYPING // 		`${ domEvent.type }: ${ domEvent.inputType }`
+        // @if CK_DEBUG_TYPING // 	) );
         // @if CK_DEBUG_TYPING // }
         const domTargetRanges = domEvent.getTargetRanges();
         const view = this.view;
@@ -11853,16 +12019,20 @@ function getFiles(nativeDataTransfer) {
         if (domEvent.data !== null) {
             data = domEvent.data;
         // @if CK_DEBUG_TYPING // if ( ( window as any ).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 // 	console.info( ..._buildLogMessage( this, 'InputObserver',
+        // @if CK_DEBUG_TYPING // 		`%cevent data: %c${ JSON.stringify( data ) }`,
+        // @if CK_DEBUG_TYPING // 		'font-weight: bold',
+        // @if CK_DEBUG_TYPING // 		'color: blue;'
+        // @if CK_DEBUG_TYPING // 	) );
         // @if CK_DEBUG_TYPING // }
         } else if (dataTransfer) {
             data = dataTransfer.getData('text/plain');
         // @if CK_DEBUG_TYPING // if ( ( window as any ).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 // 	console.info( ..._buildLogMessage( this, 'InputObserver',
+        // @if CK_DEBUG_TYPING // 		`%cevent data transfer: %c${ JSON.stringify( data ) }`,
+        // @if CK_DEBUG_TYPING // 		'font-weight: bold',
+        // @if CK_DEBUG_TYPING // 		'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
@@ -11871,10 +12041,12 @@ function getFiles(nativeDataTransfer) {
             // Future-proof: in case of multi-range fake selections being possible.
             targetRanges = Array.from(viewDocument.selection.getRanges());
         // @if CK_DEBUG_TYPING // if ( ( window as any ).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 // 	console.info( ..._buildLogMessage( this, 'InputObserver',
+        // @if CK_DEBUG_TYPING // 		'%cusing fake selection:',
+        // @if CK_DEBUG_TYPING // 		'font-weight: bold',
+        // @if CK_DEBUG_TYPING // 		targetRanges,
         // @if CK_DEBUG_TYPING // 		viewDocument.selection.isFake ? 'fake view selection' : 'fake DOM parent'
-        // @if CK_DEBUG_TYPING // 	);
+        // @if CK_DEBUG_TYPING // 	) );
         // @if CK_DEBUG_TYPING // }
         } else if (domTargetRanges.length) {
             targetRanges = domTargetRanges.map((domRange)=>{
@@ -11891,17 +12063,21 @@ function getFiles(nativeDataTransfer) {
                 }
             }).filter((range)=>!!range);
         // @if CK_DEBUG_TYPING // if ( ( window as any ).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 // 	console.info( ..._buildLogMessage( this, 'InputObserver',
+        // @if CK_DEBUG_TYPING // 		'%cusing target ranges:',
+        // @if CK_DEBUG_TYPING // 		'font-weight: bold',
+        // @if CK_DEBUG_TYPING // 		targetRanges
+        // @if CK_DEBUG_TYPING // 	) );
         // @if CK_DEBUG_TYPING // }
         } 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 as any ).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 // 	console.info( ..._buildLogMessage( this, 'InputObserver',
+        // @if CK_DEBUG_TYPING // 		'%cusing selection ranges:',
+        // @if CK_DEBUG_TYPING // 		'font-weight: bold',
+        // @if CK_DEBUG_TYPING // 		targetRanges
+        // @if CK_DEBUG_TYPING // 	) );
         // @if CK_DEBUG_TYPING // }
         }
         // Android sometimes fires insertCompositionText with a new-line character at the end of the data