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

package/src/view/observer/focusobserver.js

@@ -21,6 +21,10 @@ export default class FocusObserver extends DomEventObserver {
      */
     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.
          *
@@ -33,31 +37,17 @@ export default class FocusObserver extends DomEventObserver {
         this.domEventType = ['focus', 'blur'];
         this.useCapture = true;
         const document = this.document;
-        document.on('focus', () => {
-            this._isFocusChanging = true;
-            // Unfortunately native `selectionchange` event is fired asynchronously.
-            // We need to wait until `SelectionObserver` handle the event and then render. Otherwise rendering will
-            // overwrite new DOM selection with selection from the view.
-            // See https://github.com/ckeditor/ckeditor5-engine/issues/795 for more details.
-            // Long timeout is needed to solve #676 and https://github.com/ckeditor/ckeditor5-engine/issues/1157 issues.
-            //
-            // Using `view.change()` instead of `view.forceRender()` to prevent double rendering
-            // in a situation where `selectionchange` already caused selection change.
-            this._renderTimeoutId = setTimeout(() => {
-                this.flush();
-                view.change(() => { });
-            }, 50);
-        });
-        document.on('blur', (evt, data) => {
-            const selectedEditable = document.selection.editableElement;
-            if (selectedEditable === null || selectedEditable === data.target) {
-                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).
-                view.change(() => { });
+        document.on('focus', () => this._handleFocus());
+        document.on('blur', (evt, data) => this._handleBlur(data));
+        // Focus the editor in cases where browser dispatches `beforeinput` event to a not-focused editable element.
+        // This is flushed by the beforeinput listener in the `InsertTextObserver`.
+        // Note that focus is set only if the document is not focused yet.
+        // See https://github.com/ckeditor/ckeditor5/issues/14702.
+        document.on('beforeinput', () => {
+            if (!document.isFocused) {
+                this._handleFocus();
             }
-        });
+        }, { priority: 'highest' });
     }
     /**
      * Finishes setting the document focus state.
@@ -78,9 +68,49 @@ export default class FocusObserver extends DomEventObserver {
      * @inheritDoc
      */
     destroy() {
+        this._clearTimeout();
+        super.destroy();
+    }
+    /**
+     * The `focus` event handler.
+     */
+    _handleFocus() {
+        this._clearTimeout();
+        this._isFocusChanging = true;
+        // Unfortunately native `selectionchange` event is fired asynchronously.
+        // We need to wait until `SelectionObserver` handle the event and then render. Otherwise rendering will
+        // overwrite new DOM selection with selection from the view.
+        // See https://github.com/ckeditor/ckeditor5-engine/issues/795 for more details.
+        // Long timeout is needed to solve #676 and https://github.com/ckeditor/ckeditor5-engine/issues/1157 issues.
+        //
+        // Using `view.change()` instead of `view.forceRender()` to prevent double rendering
+        // in a situation where `selectionchange` already caused selection change.
+        this._renderTimeoutId = setTimeout(() => {
+            this._renderTimeoutId = null;
+            this.flush();
+            this.view.change(() => { });
+        }, 50);
+    }
+    /**
+     * The `blur` event handler.
+     */
+    _handleBlur(data) {
+        const selectedEditable = this.document.selection.editableElement;
+        if (selectedEditable === null || selectedEditable === data.target) {
+            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(() => { });
+        }
+    }
+    /**
+     * Clears timeout.
+     */
+    _clearTimeout() {
         if (this._renderTimeoutId) {
             clearTimeout(this._renderTimeoutId);
+            this._renderTimeoutId = null;
         }
-        super.destroy();
     }
 }

package/src/view/observer/inputobserver.js

@@ -8,6 +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' );
 /**
  * Observer for events connected with data input.
  *
@@ -27,6 +28,7 @@ export default class InputObserver 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[InputObserver]%c ${ domEvent.type }: ${ domEvent.inputType }`,
         // @if CK_DEBUG_TYPING // 		'color: green', 'color: default'
         // @if CK_DEBUG_TYPING // 	);
@@ -44,7 +46,7 @@ export default class InputObserver extends DomEventObserver {
             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 // 		'color: green; font-weight: bold', 'font-weight: bold', 'color: blue;'
             // @if CK_DEBUG_TYPING // 	);
             // @if CK_DEBUG_TYPING // }
         }
@@ -52,7 +54,7 @@ export default class InputObserver extends DomEventObserver {
             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 // 		'color: green; font-weight: bold', 'font-weight: bold', 'color: blue;'
             // @if CK_DEBUG_TYPING // 	);
             // @if CK_DEBUG_TYPING // }
         }
@@ -63,7 +65,7 @@ export default class InputObserver extends DomEventObserver {
             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 // 		'color: green; font-weight: bold', 'font-weight: bold', targetRanges,
             // @if CK_DEBUG_TYPING // 		viewDocument.selection.isFake ? 'fake view selection' : 'fake DOM parent'
             // @if CK_DEBUG_TYPING // 	);
             // @if CK_DEBUG_TYPING // }
@@ -85,7 +87,7 @@ 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 // 		'color: green; font-weight: bold', 'font-weight: bold', targetRanges
             // @if CK_DEBUG_TYPING // 	);
             // @if CK_DEBUG_TYPING // }
         }
@@ -96,7 +98,7 @@ export default class InputObserver extends DomEventObserver {
             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 // 		'color: green; font-weight: bold', 'font-weight: bold', targetRanges
             // @if CK_DEBUG_TYPING // 	);
             // @if CK_DEBUG_TYPING // }
         }

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

@@ -7,8 +7,9 @@
  */
 import Observer from './observer.js';
 import type DomConverter from '../domconverter.js';
-import type Renderer from '../renderer.js';
 import type View from '../view.js';
+import type ViewNode from '../node.js';
+import type { ChangeType } from '../document.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.
@@ -25,10 +26,6 @@ export default class MutationObserver extends Observer {
      * Reference to the {@link module:engine/view/view~View#domConverter}.
      */
     readonly domConverter: DomConverter;
-    /**
-     * Reference to the {@link module:engine/view/view~View#_renderer}.
-     */
-    readonly renderer: Renderer;
     /**
      * Native mutation observer config.
      */
@@ -84,3 +81,35 @@ export default class MutationObserver extends Observer {
      */
     private _isBogusBrMutation;
 }
+/**
+ * Event fired on DOM mutations detected.
+ *
+ * This event is introduced by {@link module:engine/view/observer/mutationobserver~MutationObserver} and available
+ * by default in all editor instances (attached by {@link module:engine/view/view~View}).
+ *
+ * @eventName module:engine/view/document~Document#mutations
+ * @param data Event data containing detailed information about the event.
+ */
+export type ViewDocumentMutationsEvent = {
+    name: 'mutations';
+    args: [data: MutationsEventData];
+};
+/**
+ * The value of {@link ~ViewDocumentMutationsEvent}.
+ */
+export type MutationsEventData = {
+    mutations: Array<MutationData>;
+};
+/**
+ * A single entry in {@link ~MutationsEventData} mutations array.
+ */
+export type MutationData = {
+    /**
+     * Type of mutation detected.
+     */
+    type: ChangeType;
+    /**
+     * The view node related to the detected mutation.
+     */
+    node: ViewNode;
+};

package/src/view/observer/mutationobserver.js

@@ -9,6 +9,7 @@
 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' );
 /**
  * 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.
@@ -32,7 +33,6 @@ export default class MutationObserver extends Observer {
             subtree: true
         };
         this.domConverter = view.domConverter;
-        this.renderer = view._renderer;
         this._domElements = new Set();
         this._mutationObserver = new window.MutationObserver(this._onMutations.bind(this));
     }
@@ -139,10 +139,9 @@ export default class MutationObserver extends Observer {
         }
         // Now we build the list of mutations to mark elements. We did not do it earlier to avoid marking the
         // same node multiple times in case of duplication.
-        let hasMutations = false;
+        const mutations = [];
         for (const textNode of mutatedTextNodes) {
-            hasMutations = true;
-            this.renderer.markToSync('text', textNode);
+            mutations.push({ type: 'text', node: textNode });
         }
         for (const viewElement of elementsWithMutatedChildren) {
             const domElement = domConverter.mapViewToDom(viewElement);
@@ -151,20 +150,18 @@ export default class MutationObserver extends Observer {
             // It may happen that as a result of many changes (sth was inserted and then removed),
             // both elements haven't really changed. #1031
             if (!isEqualWith(viewChildren, newViewChildren, sameNodes)) {
-                hasMutations = true;
-                this.renderer.markToSync('children', viewElement);
+                mutations.push({ type: 'children', node: viewElement });
             }
         }
         // In case only non-relevant mutations were recorded it skips the event and force render (#5600).
-        if (hasMutations) {
+        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', ''
+            // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green', 'font-weight: bold'
             // @if CK_DEBUG_TYPING // 	);
             // @if CK_DEBUG_TYPING // }
-            // At this point we have "dirty DOM" (changed) and de-synched view (which has not been changed).
-            // In order to "reset DOM" we render the view again.
-            this.view.forceRender();
+            this.document.fire('mutations', { mutations });
             // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
             // @if CK_DEBUG_TYPING // 	console.groupEnd();
             // @if CK_DEBUG_TYPING // }

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

@@ -7,11 +7,11 @@
  */
 import Observer from './observer.js';
 import MutationObserver from './mutationobserver.js';
+import FocusObserver from './focusobserver.js';
 import type View from '../view.js';
 import type DocumentSelection from '../documentselection.js';
 import type DomConverter from '../domconverter.js';
 import type Selection from '../selection.js';
-import FocusObserver from './focusobserver.js';
 type DomSelection = globalThis.Selection;
 /**
  * Selection observer class observes selection changes in the document. If a selection changes on the document this
@@ -88,7 +88,6 @@ export default class SelectionObserver extends Observer {
      * a selection changes and fires {@link module:engine/view/document~Document#event:selectionChange} event on every change
      * and {@link module:engine/view/document~Document#event:selectionChangeDone} when a selection stop changing.
      *
-     * @param domEvent DOM event.
      * @param domDocument DOM document.
      */
     private _handleSelectionChange;

package/src/view/observer/selectionobserver.js

@@ -8,9 +8,9 @@
 /* global setInterval, clearInterval */
 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 FocusObserver from './focusobserver.js';
 /**
  * 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}.
@@ -52,7 +52,7 @@ export default class SelectionObserver extends Observer {
             }
             // Make sure that model selection is up-to-date at the end of selecting process.
             // Sometimes `selectionchange` events could arrive after the `mouseup` event and that selection could be already outdated.
-            this._handleSelectionChange(null, domDocument);
+            this._handleSelectionChange(domDocument);
             this.document.isSelecting = false;
             // The safety timeout can be canceled when the document leaves the "is selecting" state.
             this._documentIsSelectingInactivityTimeoutDebounced.cancel();
@@ -72,10 +72,11 @@ export default class SelectionObserver extends Observer {
         this.listenTo(domDocument, 'mouseup', endDocumentIsSelecting, { priority: 'highest', useCapture: true });
         this.listenTo(domDocument, 'selectionchange', (evt, domEvent) => {
             // @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 // 	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.info( '%c[SelectionObserver]%c DOM Selection:', 'font-weight: bold; color: green', '',
             // @if CK_DEBUG_TYPING // 		{ node: domSelection!.anchorNode, offset: domSelection!.anchorOffset },
             // @if CK_DEBUG_TYPING // 		{ node: domSelection!.focusNode, offset: domSelection!.focusOffset }
             // @if CK_DEBUG_TYPING // 	);
@@ -85,13 +86,13 @@ export default class SelectionObserver extends Observer {
             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 // 		'font-weight: bold; color: green', ''
                 // @if CK_DEBUG_TYPING // 	);
                 // @if CK_DEBUG_TYPING // 	console.groupEnd();
                 // @if CK_DEBUG_TYPING // }
                 return;
             }
-            this._handleSelectionChange(domEvent, domDocument);
+            this._handleSelectionChange(domDocument);
             // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
             // @if CK_DEBUG_TYPING // 	console.groupEnd();
             // @if CK_DEBUG_TYPING // }
@@ -99,6 +100,24 @@ export default class SelectionObserver extends Observer {
             // using their mouse).
             this._documentIsSelectingInactivityTimeoutDebounced();
         });
+        // Update the model DocumentSelection just after the Renderer and the SelectionObserver are locked.
+        // We do this synchronously (without waiting for the `selectionchange` DOM event) as browser updates
+        // the DOM selection (but not visually) to span the text that is under composition and could be replaced.
+        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 // 		{ 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._handleSelectionChange(domDocument);
+            // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.groupEnd();
+            // @if CK_DEBUG_TYPING // }
+        }, { priority: 'lowest' });
         this._documents.add(domDocument);
     }
     /**
@@ -128,10 +147,9 @@ export default class SelectionObserver extends Observer {
      * a selection changes and fires {@link module:engine/view/document~Document#event:selectionChange} event on every change
      * and {@link module:engine/view/document~Document#event:selectionChangeDone} when a selection stop changing.
      *
-     * @param domEvent DOM event.
      * @param domDocument DOM document.
      */
-    _handleSelectionChange(domEvent, domDocument) {
+    _handleSelectionChange(domDocument) {
         if (!this.isEnabled) {
             return;
         }
@@ -180,7 +198,7 @@ export default class SelectionObserver extends Observer {
             };
             // @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 // 		'font-weight: bold; color: green', '',
             // @if CK_DEBUG_TYPING // 		newViewSelection.getFirstRange()
             // @if CK_DEBUG_TYPING // 	);
             // @if CK_DEBUG_TYPING // }

package/src/view/renderer.d.ts

@@ -213,6 +213,18 @@ export default class Renderer extends /* #__PURE__ */ Renderer_base {
      * @returns Actions array modified with the `update` actions.
      */
     private _findUpdateActions;
+    /**
+     * Checks if text needs to be updated and possibly updates it by removing and inserting only parts
+     * of the data from the existing text node to reduce impact on the IME composition.
+     *
+     * @param domText DOM text node to update.
+     * @param expectedText The expected data of a text node.
+     */
+    private _updateTextNode;
+    /**
+     * Part of the `_updateTextNode` method extracted for easier testing.
+     */
+    private _updateTextNodeInternal;
     /**
      * Marks text nodes to be synchronized.
      *