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

package/src/view/node.js

@@ -7,7 +7,7 @@
  */
 import TypeCheckable from './typecheckable.js';
 import { CKEditorError, EmitterMixin, compareArrays } from '@ckeditor/ckeditor5-utils';
-import { clone } from 'lodash-es';
+import { clone } from 'es-toolkit/compat';
 /**
  * Abstract view node class.
  *
@@ -16,6 +16,14 @@ import { clone } from 'lodash-es';
  * to create new instances of view nodes.
  */
 export default class Node extends /* #__PURE__ */ EmitterMixin(TypeCheckable) {
+    /**
+     * The document instance to which this node belongs.
+     */
+    document;
+    /**
+     * Parent element. Null by default. Set by {@link module:engine/view/element~Element#_insertChild}.
+     */
+    parent;
     /**
      * Creates a tree view node.
      *

package/src/view/observer/bubblingeventinfo.js

@@ -11,6 +11,18 @@ import { EventInfo } from '@ckeditor/ckeditor5-utils';
  * manipulate it.
  */
 export default class BubblingEventInfo extends EventInfo {
+    /**
+     * The view range that the bubbling should start from.
+     */
+    startRange;
+    /**
+     * The current event phase.
+     */
+    _eventPhase;
+    /**
+     * The current bubbling target.
+     */
+    _currentTarget;
     /**
      * @param source The emitter.
      * @param name The event name.

package/src/view/observer/clickobserver.js

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

package/src/view/observer/compositionobserver.js

@@ -6,7 +6,7 @@
  * @module engine/view/observer/compositionobserver
  */
 import DomEventObserver from './domeventobserver.js';
-// @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
@@ -15,31 +15,31 @@ import DomEventObserver from './domeventobserver.js';
  * Note that this observer is attached by the {@link module:engine/view/view~View} and is available by default.
  */
 export default class CompositionObserver extends DomEventObserver {
+    /**
+     * @inheritDoc
+     */
+    domEventType = ['compositionstart', 'compositionupdate', 'compositionend'];
     /**
      * @inheritDoc
      */
     constructor(view) {
         super(view);
-        /**
-         * @inheritDoc
-         */
-        this.domEventType = ['compositionstart', 'compositionupdate', 'compositionend'];
         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;
         }, { priority: 'low' });
         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;
         }, { priority: 'low' });
@@ -50,7 +50,9 @@ export default class CompositionObserver extends DomEventObserver {
     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

package/src/view/observer/domeventdata.js

@@ -5,7 +5,7 @@
 /**
  * @module engine/view/observer/domeventdata
  */
-import { extend } from 'lodash-es';
+import { extend } from 'es-toolkit/compat';
 /**
  * Information about a DOM event in context of the {@link module:engine/view/document~Document}.
  * It wraps the native event, which usually should not be used as the wrapper contains
@@ -14,6 +14,22 @@ import { extend } from 'lodash-es';
  * @typeParam TEvent The type of DOM Event that this class represents.
  */
 export default class DomEventData {
+    /**
+     * Instance of the view controller.
+     */
+    view;
+    /**
+     * The instance of the document.
+     */
+    document;
+    /**
+     * The DOM event.
+     */
+    domEvent;
+    /**
+     * The DOM target.
+     */
+    domTarget;
     /**
      * @param view The instance of the view controller.
      * @param domEvent The DOM event.

package/src/view/observer/domeventobserver.js

@@ -35,19 +35,16 @@ import DomEventData from './domeventdata.js';
  * @typeParam AdditionalData Additional data passed along with the event.
  */
 export default class DomEventObserver extends Observer {
-    constructor() {
-        super(...arguments);
-        /**
-         * If set to `true` DOM events will be listened on the capturing phase.
-         * Default value is `false`.
-         */
-        this.useCapture = false;
-        /**
-         * If set to `true`, indicates that the function specified by listener will never call `preventDefault()`.
-         * Default value is `false`.
-         */
-        this.usePassive = false;
-    }
+    /**
+     * If set to `true` DOM events will be listened on the capturing phase.
+     * Default value is `false`.
+     */
+    useCapture = false;
+    /**
+     * If set to `true`, indicates that the function specified by listener will never call `preventDefault()`.
+     * Default value is `false`.
+     */
+    usePassive = false;
     /**
      * @inheritDoc
      */

package/src/view/observer/fakeselectionobserver.d.ts

@@ -16,7 +16,7 @@ import type View from '../view.js';
  */
 export default 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.
      */
     private readonly _fireSelectionChangeDoneDebounced;
     /**

package/src/view/observer/fakeselectionobserver.js

@@ -8,7 +8,7 @@
 import Observer from './observer.js';
 import ViewSelection from '../selection.js';
 import { keyCodes } from '@ckeditor/ckeditor5-utils';
-import { debounce } from 'lodash-es';
+import { debounce } from 'es-toolkit/compat';
 /**
  * Fake selection observer class. If view selection is fake it is placed in dummy DOM container. This observer listens
  * on {@link module:engine/view/document~Document#event:keydown keydown} events and handles moving fake view selection to the correct place
@@ -17,6 +17,10 @@ import { debounce } from 'lodash-es';
  * {@link module:engine/view/observer/selectionobserver~SelectionObserver SelectionObserver}.
  */
 export default class FakeSelectionObserver extends Observer {
+    /**
+     * Fires debounced event `selectionChangeDone`. It uses `es-toolkit#debounce` method to delay function call.
+     */
+    _fireSelectionChangeDoneDebounced;
     /**
      * Creates new FakeSelectionObserver instance.
      */

package/src/view/observer/focusobserver.js

@@ -7,6 +7,7 @@
  */
 /* globals setTimeout, clearTimeout */
 import DomEventObserver from './domeventobserver.js';
+// @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.
@@ -16,25 +17,25 @@ import DomEventObserver from './domeventobserver.js';
  * Note that this observer is attached by the {@link module:engine/view/view~View} and is available by default.
  */
 export default class FocusObserver extends DomEventObserver {
+    /**
+     * Identifier of the timeout currently used by focus listener to delay rendering execution.
+     */
+    _renderTimeoutId = null;
+    /**
+     * Set to `true` if the document is in the process of setting the focus.
+     *
+     * The flag is used to indicate that setting the focus is in progress.
+     */
+    _isFocusChanging = false;
+    /**
+     * @inheritDoc
+     */
+    domEventType = ['focus', 'blur'];
     /**
      * @inheritDoc
      */
     constructor(view) {
         super(view);
-        /**
-         * Identifier of the timeout currently used by focus listener to delay rendering execution.
-         */
-        this._renderTimeoutId = null;
-        /**
-         * Set to `true` if the document is in the process of setting the focus.
-         *
-         * The flag is used to indicate that setting the focus is in progress.
-         */
-        this._isFocusChanging = false;
-        /**
-         * @inheritDoc
-         */
-        this.domEventType = ['focus', 'blur'];
         this.useCapture = true;
         const document = this.document;
         document.on('focus', () => this._handleFocus());
@@ -54,15 +55,43 @@ export default class FocusObserver extends DomEventObserver {
      */
     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
@@ -87,8 +116,16 @@ export default class FocusObserver extends DomEventObserver {
         // 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);
     }
     /**
@@ -96,12 +133,26 @@ export default class FocusObserver extends DomEventObserver {
      */
     _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 // }
         }
     }
     /**

package/src/view/observer/inputobserver.js

@@ -8,7 +8,7 @@
 import DomEventObserver from './domeventobserver.js';
 import DataTransfer from '../datatransfer.js';
 import { env } from '@ckeditor/ckeditor5-utils';
-// @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.
  *
@@ -16,22 +16,19 @@ import { env } from '@ckeditor/ckeditor5-utils';
  * editor instances.
  */
 export default class InputObserver extends DomEventObserver {
-    constructor() {
-        super(...arguments);
-        /**
-         * @inheritDoc
-         */
-        this.domEventType = 'beforeinput';
-    }
+    /**
+     * @inheritDoc
+     */
+    domEventType = 'beforeinput';
     /**
      * @inheritDoc
      */
     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;
@@ -45,17 +42,21 @@ export default class InputObserver extends DomEventObserver {
         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
@@ -64,10 +65,12 @@ export default class InputObserver extends DomEventObserver {
             // 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) {
@@ -86,9 +89,11 @@ export default class InputObserver extends DomEventObserver {
                 }
             }).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 // }
         }
         // For Android devices we use a fallback to the current DOM selection, Android modifies it according
@@ -97,9 +102,11 @@ export default class InputObserver extends DomEventObserver {
             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

package/src/view/observer/keyobserver.js

@@ -13,13 +13,10 @@ import { getCode } from '@ckeditor/ckeditor5-utils';
  * Note that this observer is attached by the {@link module:engine/view/view~View} and is available by default.
  */
 export default class KeyObserver extends DomEventObserver {
-    constructor() {
-        super(...arguments);
-        /**
-         * @inheritDoc
-         */
-        this.domEventType = ['keydown', 'keyup'];
-    }
+    /**
+     * @inheritDoc
+     */
+    domEventType = ['keydown', 'keyup'];
     /**
      * @inheritDoc
      */

package/src/view/observer/mouseobserver.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 MouseObserver extends DomEventObserver {
-    constructor() {
-        super(...arguments);
-        /**
-         * @inheritDoc
-         */
-        this.domEventType = ['mousedown', 'mouseup', 'mouseover', 'mouseout'];
-    }
+    /**
+     * @inheritDoc
+     */
+    domEventType = ['mousedown', 'mouseup', 'mouseover', 'mouseout'];
     /**
      * @inheritDoc
      */

package/src/view/observer/mutationobserver.js

@@ -8,8 +8,8 @@
 /* globals window */
 import Observer from './observer.js';
 import { startsWithFiller } from '../filler.js';
-import { isEqualWith } from 'lodash-es';
-// @if CK_DEBUG_TYPING // const { _debouncedLine } = require( '../../dev-utils/utils.js' );
+import { isEqualWith } from 'es-toolkit/compat';
+// @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.
@@ -22,6 +22,22 @@ import { isEqualWith } 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 MutationObserver extends Observer {
+    /**
+     * Reference to the {@link module:engine/view/view~View#domConverter}.
+     */
+    domConverter;
+    /**
+     * Native mutation observer config.
+     */
+    _config;
+    /**
+     * Observed DOM elements.
+     */
+    _domElements;
+    /**
+     * Native mutation observer.
+     */
+    _mutationObserver;
     /**
      * @inheritDoc
      */
@@ -157,9 +173,10 @@ export default class MutationObserver extends Observer {
         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 });
             // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
@@ -186,7 +203,7 @@ export default class MutationObserver extends Observer {
     }
 }
 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;
     }

package/src/view/observer/observer.js

@@ -13,15 +13,23 @@ import { DomEmitterMixin } from '@ckeditor/ckeditor5-utils';
  * which need a refresh on DOM events.
  */
 export default class Observer extends /* #__PURE__ */ DomEmitterMixin() {
+    /**
+     * An instance of the view controller.
+     */
+    view;
+    /**
+     * A reference to the {@link module:engine/view/document~Document} object.
+     */
+    document;
+    /**
+     * The state of the observer. If it is disabled, no events will be fired.
+     */
+    _isEnabled = false;
     /**
      * Creates an instance of the observer.
      */
     constructor(view) {
         super();
-        /**
-         * The state of the observer. If it is disabled, no events will be fired.
-         */
-        this._isEnabled = false;
         this.view = view;
         this.document = view.document;
     }

package/src/view/observer/selectionobserver.d.ts

@@ -50,7 +50,7 @@ export default class SelectionObserver extends Observer {
      */
     private readonly _documents;
     /**
-     * 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.
      */
     private readonly _fireSelectionChangeDoneDebounced;
     /**
@@ -69,6 +69,11 @@ export default class SelectionObserver extends Observer {
      * Private property to check if the code does not enter infinite loop.
      */
     private _loopbackCounter;
+    /**
+     * 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.
+     */
+    private _pendingSelectionChange;
     constructor(view: View);
     /**
      * @inheritDoc