@ckeditor/ckeditor5-typing 45.0.0 → 45.1.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-typing",
-  "version": "45.0.0",
+  "version": "45.1.0-alpha.0",
   "description": "Typing feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,9 +13,9 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "45.0.0",
-    "@ckeditor/ckeditor5-engine": "45.0.0",
-    "@ckeditor/ckeditor5-utils": "45.0.0",
+    "@ckeditor/ckeditor5-core": "45.1.0-alpha.0",
+    "@ckeditor/ckeditor5-engine": "45.1.0-alpha.0",
+    "@ckeditor/ckeditor5-utils": "45.1.0-alpha.0",
     "es-toolkit": "1.32.0"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/delete.js

@@ -2,6 +2,10 @@
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
+/**
+ * @module typing/delete
+ */
+import { BubblingEventInfo, DomEventData } from '@ckeditor/ckeditor5-engine';
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import { keyCodes } from '@ckeditor/ckeditor5-utils';
 import DeleteCommand from './deletecommand.js';
@@ -73,7 +77,22 @@ export default class Delete extends Plugin {
             const ancestorLimit = editor.model.schema.getLimitElement(modelDocument.selection);
             const limitStartPosition = editor.model.createPositionAt(ancestorLimit, 0);
             if (limitStartPosition.isTouching(modelDocument.selection.getFirstPosition())) {
+                // Stop the beforeinput event as it could be invalid.
                 data.preventDefault();
+                // Create a fake delete event so all features can act on it and the target range is proper.
+                const modelRange = editor.model.schema.getNearestSelectionRange(limitStartPosition, 'forward');
+                if (!modelRange) {
+                    return;
+                }
+                const viewSelection = view.createSelection(editor.editing.mapper.toViewRange(modelRange));
+                const targetRange = viewSelection.getFirstRange();
+                const eventInfo = new BubblingEventInfo(document, 'delete', targetRange);
+                const deleteData = {
+                    unit: 'selection',
+                    direction: 'backward',
+                    selectionToRemove: viewSelection
+                };
+                viewDocument.fire(eventInfo, new DomEventData(view, data.domEvent, deleteData));
             }
         });
         if (this.editor.plugins.has('UndoEditing')) {

package/src/input.d.ts

@@ -13,7 +13,7 @@ export default class Input extends Plugin {
     /**
      * The queue of `insertText` command executions that are waiting for the DOM to get updated after beforeinput event.
      */
-    private _compositionQueue;
+    private _typingQueue;
     /**
      * @inheritDoc
      */

package/src/input.js

@@ -19,7 +19,7 @@ export default class Input extends Plugin {
     /**
      * The queue of `insertText` command executions that are waiting for the DOM to get updated after beforeinput event.
      */
-    _compositionQueue;
+    _typingQueue;
     /**
      * @inheritDoc
      */
@@ -41,25 +41,34 @@ export default class Input extends Plugin {
         const view = editor.editing.view;
         const mapper = editor.editing.mapper;
         const modelSelection = model.document.selection;
-        this._compositionQueue = new CompositionQueue(editor);
+        this._typingQueue = new TypingQueue(editor);
         view.addObserver(InsertTextObserver);
         // TODO The above default configuration value should be defined using editor.config.define() once it's fixed.
         const insertTextCommand = new InsertTextCommand(editor, editor.config.get('typing.undoStep') || 20);
         // Register `insertText` command and add `input` command as an alias for backward compatibility.
         editor.commands.add('insertText', insertTextCommand);
         editor.commands.add('input', insertTextCommand);
+        this.listenTo(view.document, 'beforeinput', () => {
+            // Flush queue on the next beforeinput event because it could happen
+            // that the mutation observer does not notice the DOM change in time.
+            this._typingQueue.flush('next beforeinput');
+        }, { priority: 'high' });
         this.listenTo(view.document, 'insertText', (evt, data) => {
-            // Rendering is disabled while composing so prevent events that will be rendered by the engine
-            // and should not be applied by the browser.
-            if (!view.document.isComposing) {
+            const { text, selection: viewSelection } = data;
+            // In case of a synthetic event, make sure that selection is not fake.
+            if (view.document.selection.isFake && viewSelection && view.document.selection.isSimilar(viewSelection)) {
                 data.preventDefault();
             }
-            // Flush queue on the next beforeinput event because it could happen
-            // that the mutation observer does not notice the DOM change in time.
-            if (env.isAndroid && view.document.isComposing) {
-                this._compositionQueue.flush('next beforeinput');
+            if (!insertTextCommand.isEnabled) {
+                // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+                // @if CK_DEBUG_TYPING // 	console.log( ..._buildLogMessage( this, 'Input',
+                // @if CK_DEBUG_TYPING // 		'%cInsertText command is disabled - prevent DOM change.',
+                // @if CK_DEBUG_TYPING // 		'font-style: italic'
+                // @if CK_DEBUG_TYPING // 	) );
+                // @if CK_DEBUG_TYPING // }
+                data.preventDefault();
+                return;
             }
-            const { text, selection: viewSelection } = data;
             let modelRanges;
             // If view selection was specified, translate it to model selection.
             if (viewSelection) {
@@ -100,41 +109,31 @@ export default class Input extends Plugin {
                     return;
                 }
             }
+            // Note: the TypingQueue stores live-ranges internally as RTC could change the model while waiting for mutations.
             const commandData = {
                 text: insertText,
                 selection: model.createSelection(modelRanges)
             };
-            // This is a composition event and those are not cancellable, so we need to wait until browser updates the DOM
+            // This is a beforeinput event, so we need to wait until the browser updates the DOM,
             // and we could apply changes to the model and verify if the DOM is valid.
             // The browser applies changes to the DOM not immediately on beforeinput event.
             // We just wait for mutation observer to notice changes or as a fallback a timeout.
-            if (env.isAndroid && view.document.isComposing) {
-                // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
-                // @if CK_DEBUG_TYPING // 	console.log( ..._buildLogMessage( this, 'Input',
-                // @if CK_DEBUG_TYPING // 		`%cQueue insertText:%c "${ commandData.text }"%c ` +
-                // @if CK_DEBUG_TYPING // 		`[${ commandData.selection.getFirstPosition().path }]-` +
-                // @if CK_DEBUG_TYPING // 		`[${ commandData.selection.getLastPosition().path }]` +
-                // @if CK_DEBUG_TYPING // 		` queue size: ${ this._compositionQueue.length + 1 }`,
-                // @if CK_DEBUG_TYPING // 		'font-weight: bold',
-                // @if CK_DEBUG_TYPING // 		'color: blue',
-                // @if CK_DEBUG_TYPING // 		''
-                // @if CK_DEBUG_TYPING // 	) );
-                // @if CK_DEBUG_TYPING // }
-                this._compositionQueue.push(commandData);
-            }
-            else {
-                // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
-                // @if CK_DEBUG_TYPING // 	console.log( ..._buildLogMessage( this, 'Input',
-                // @if CK_DEBUG_TYPING // 		`%cExecute insertText:%c "${ commandData.text }"%c ` +
-                // @if CK_DEBUG_TYPING // 		`[${ commandData.selection.getFirstPosition().path }]-` +
-                // @if CK_DEBUG_TYPING // 		`[${ commandData.selection.getLastPosition().path }]`,
-                // @if CK_DEBUG_TYPING // 		'font-weight: bold',
-                // @if CK_DEBUG_TYPING // 		'color: blue',
-                // @if CK_DEBUG_TYPING // 		''
-                // @if CK_DEBUG_TYPING // 	) );
-                // @if CK_DEBUG_TYPING // }
-                editor.execute('insertText', commandData);
-                view.scrollToTheSelection();
+            //
+            // Previously we were cancelling the non-composition events, but it caused issues especially in Safari.
+            // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.log( ..._buildLogMessage( this, 'Input',
+            // @if CK_DEBUG_TYPING // 		`%cQueue insertText:%c "${ commandData.text }"%c ` +
+            // @if CK_DEBUG_TYPING // 		`[${ commandData.selection.getFirstPosition().path }]-` +
+            // @if CK_DEBUG_TYPING // 		`[${ commandData.selection.getLastPosition().path }]` +
+            // @if CK_DEBUG_TYPING // 		` queue size: ${ this._typingQueue.length + 1 }`,
+            // @if CK_DEBUG_TYPING // 		'font-weight: bold',
+            // @if CK_DEBUG_TYPING // 		'color: blue',
+            // @if CK_DEBUG_TYPING // 		''
+            // @if CK_DEBUG_TYPING // 	) );
+            // @if CK_DEBUG_TYPING // }
+            this._typingQueue.push(commandData, Boolean(data.isComposing));
+            if (data.domEvent.defaultPrevented) {
+                this._typingQueue.flush('beforeinput default prevented');
             }
         });
         // Delete selected content on composition start.
@@ -177,102 +176,91 @@ export default class Input extends Plugin {
                 // @if CK_DEBUG_TYPING // 	) );
                 // @if CK_DEBUG_TYPING // }
                 deleteSelectionContent(model, insertTextCommand);
-            });
+            }, { priority: 'high' });
         }
-        // Apply composed changes to the model.
-        if (env.isAndroid) {
-            // Apply changes to the model as they are applied to the DOM by the browser.
-            // On beforeinput event, the DOM is not yet modified. We wait for detected mutations to apply model changes.
-            this.listenTo(view.document, 'mutations', (evt, { mutations }) => {
-                if (!view.document.isComposing) {
-                    return;
-                }
-                // Check if mutations are relevant for queued changes.
+        // Apply changes to the model as they are applied to the DOM by the browser.
+        // On beforeinput event, the DOM is not yet modified. We wait for detected mutations to apply model changes.
+        this.listenTo(view.document, 'mutations', (evt, { mutations }) => {
+            // Check if mutations are relevant for queued changes.
+            if (this._typingQueue.hasAffectedElements()) {
                 for (const { node } of mutations) {
                     const viewElement = findMappedViewAncestor(node, mapper);
                     const modelElement = mapper.toModelElement(viewElement);
-                    if (this._compositionQueue.isComposedElement(modelElement)) {
-                        this._compositionQueue.flush('mutations');
+                    if (this._typingQueue.isElementAffected(modelElement)) {
+                        this._typingQueue.flush('mutations');
                         return;
                     }
                 }
-                // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
-                // @if CK_DEBUG_TYPING // 	console.log( ..._buildLogMessage( this, 'Input',
-                // @if CK_DEBUG_TYPING // 		'%cMutations not related to the composition.',
-                // @if CK_DEBUG_TYPING // 		'font-style: italic'
-                // @if CK_DEBUG_TYPING // 	) );
-                // @if CK_DEBUG_TYPING // }
-            });
-            // Make sure that all changes are applied to the model before the end of composition.
-            this.listenTo(view.document, 'compositionend', () => {
-                this._compositionQueue.flush('composition end');
-            });
-            // Trigger mutations check after the composition completes to fix all DOM changes that got ignored during composition.
-            // On Android the Renderer is not disabled while composing. While updating DOM nodes we ignore some changes
-            // that are not that important (like NBSP vs plain space character) and could break the composition flow.
-            // After composition is completed we trigger additional `mutations` event for elements affected by the composition
-            // so the Renderer can adjust the DOM to the expected structure without breaking the composition.
-            this.listenTo(view.document, 'compositionend', () => {
-                const mutations = [];
-                for (const element of this._compositionQueue.flushComposedElements()) {
+            }
+            // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.log( ..._buildLogMessage( this, 'Input',
+            // @if CK_DEBUG_TYPING // 		'%cMutations not related to the composition.',
+            // @if CK_DEBUG_TYPING // 		'font-style: italic'
+            // @if CK_DEBUG_TYPING // 	) );
+            // @if CK_DEBUG_TYPING // }
+        });
+        // Make sure that all changes are applied to the model before the end of composition.
+        this.listenTo(view.document, 'compositionend', () => {
+            this._typingQueue.flush('before composition end');
+        }, { priority: 'high' });
+        // Trigger mutations check after the composition completes to fix all DOM changes that got ignored during composition.
+        // On Android, the Renderer is not disabled while composing. While updating DOM nodes, we ignore some changes
+        // that are not that important (like NBSP vs. plain space character) and could break the composition flow.
+        // After composition is completed, we trigger additional `mutations` event for elements affected by the composition
+        // so the Renderer can adjust the DOM to the expected structure without breaking the composition.
+        this.listenTo(view.document, 'compositionend', () => {
+            // There could be new item queued on the composition end, so flush it.
+            this._typingQueue.flush('after composition end');
+            const mutations = [];
+            if (this._typingQueue.hasAffectedElements()) {
+                for (const element of this._typingQueue.flushAffectedElements()) {
                     const viewElement = mapper.toViewElement(element);
                     if (!viewElement) {
                         continue;
                     }
                     mutations.push({ type: 'children', node: viewElement });
                 }
-                if (mutations.length) {
-                    // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
-                    // @if CK_DEBUG_TYPING // 	console.group( ..._buildLogMessage( this, 'Input',
-                    // @if CK_DEBUG_TYPING // 		'%cFire post-composition mutation fixes.',
-                    // @if CK_DEBUG_TYPING // 		'font-weight: bold'
-                    // @if CK_DEBUG_TYPING // 	) );
-                    // @if CK_DEBUG_TYPING // }
-                    view.document.fire('mutations', { mutations });
-                    // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
-                    // @if CK_DEBUG_TYPING // 	console.groupEnd();
-                    // @if CK_DEBUG_TYPING // }
-                }
-            }, { priority: 'lowest' });
-        }
-        else {
-            // After composition end we need to verify if there are no left-overs.
-            // Listening at the lowest priority so after the `InsertTextObserver` added above (all composed text
+            }
+            // Fire composition mutations, if any.
+            //
+            // For non-Android:
+            // After the composition end, we need to verify if there are no left-overs.
+            // Listening at the lowest priority, so after the `InsertTextObserver` added above (all composed text
             // should already be applied to the model, view, and DOM).
-            // On non-Android the `Renderer` is blocked while user is composing but the `MutationObserver` still collects
+            // On non-Android the `Renderer` is blocked while the user is composing, but the `MutationObserver` still collects
             // mutated nodes and fires `mutations` events.
             // Those events are recorded by the `Renderer` but not applied to the DOM while composing.
             // We need to trigger those checks (and fixes) once again but this time without specifying the exact mutations
             // since they are already recorded by the `Renderer`.
-            // It in the most cases just clears the internal record of mutated text nodes
+            // It in most cases just clears the internal record of mutated text nodes
             // since all changes should already be applied to the DOM.
-            // This is especially needed when user cancels composition, so we can clear nodes marked to sync.
-            this.listenTo(view.document, 'compositionend', () => {
+            // This is especially needed when a user cancels composition, so we can clear nodes marked to sync.
+            if (mutations.length || !env.isAndroid) {
                 // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
                 // @if CK_DEBUG_TYPING // 	console.group( ..._buildLogMessage( this, 'Input',
-                // @if CK_DEBUG_TYPING // 		'%cForce render after composition end.',
+                // @if CK_DEBUG_TYPING // 		'%cFire post-composition mutation fixes.',
                 // @if CK_DEBUG_TYPING // 		'font-weight: bold'
                 // @if CK_DEBUG_TYPING // 	) );
                 // @if CK_DEBUG_TYPING // }
-                view.document.fire('mutations', { mutations: [] });
+                view.document.fire('mutations', { mutations });
                 // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
                 // @if CK_DEBUG_TYPING // 	console.groupEnd();
                 // @if CK_DEBUG_TYPING // }
-            }, { priority: 'lowest' });
-        }
+            }
+        }, { priority: 'lowest' });
     }
     /**
      * @inheritDoc
      */
     destroy() {
         super.destroy();
-        this._compositionQueue.destroy();
+        this._typingQueue.destroy();
     }
 }
 /**
  * The queue of `insertText` command executions that are waiting for the DOM to get updated after beforeinput event.
  */
-class CompositionQueue {
+class TypingQueue {
     /**
      * The editor instance.
      */
@@ -286,9 +274,13 @@ class CompositionQueue {
      */
     _queue = [];
     /**
-     * A set of model elements. The composition happened in those elements. It's used for mutations check.
+     * Whether there is any composition enqueued or plain typing only.
+     */
+    _isComposing = false;
+    /**
+     * A set of model elements. The typing happened in those elements. It's used for mutations check.
      */
-    _compositionElements = new Set();
+    _affectedElements = new Set();
     /**
      * @inheritDoc
      */
@@ -300,7 +292,7 @@ class CompositionQueue {
      */
     destroy() {
         this.flushDebounced.cancel();
-        this._compositionElements.clear();
+        this._affectedElements.clear();
         while (this._queue.length) {
             this.shift();
         }
@@ -314,7 +306,7 @@ class CompositionQueue {
     /**
      * Push next insertText command data to the queue.
      */
-    push(commandData) {
+    push(commandData, isComposing) {
         const commandLiveData = {
             text: commandData.text
         };
@@ -323,10 +315,11 @@ class CompositionQueue {
             for (const range of commandData.selection.getRanges()) {
                 commandLiveData.selectionRanges.push(LiveRange.fromRange(range));
                 // Keep reference to the model element for later mutation checks.
-                this._compositionElements.add(range.start.parent);
+                this._affectedElements.add(range.start.parent);
             }
         }
         this._queue.push(commandLiveData);
+        this._isComposing ||= isComposing;
         this.flushDebounced();
     }
     /**
@@ -385,6 +378,15 @@ class CompositionQueue {
                 editor.execute('insertText', commandData);
             }
             buffer.unlock();
+            if (!this._isComposing) {
+                // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+                // @if CK_DEBUG_TYPING // 	console.log( ..._buildLogMessage( this, 'Input',
+                // @if CK_DEBUG_TYPING // 		'Clear affected elements set'
+                // @if CK_DEBUG_TYPING // 	) );
+                // @if CK_DEBUG_TYPING // }
+                this._affectedElements.clear();
+            }
+            this._isComposing = false;
         });
         view.scrollToTheSelection();
         // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
@@ -392,17 +394,23 @@ class CompositionQueue {
         // @if CK_DEBUG_TYPING // }
     }
     /**
-     * Returns `true` if the given model element is related to recent composition.
+     * Returns `true` if the given model element is related to recent typing.
+     */
+    isElementAffected(element) {
+        return this._affectedElements.has(element);
+    }
+    /**
+     * Returns `true` if there are any affected elements in the queue.
      */
-    isComposedElement(element) {
-        return this._compositionElements.has(element);
+    hasAffectedElements() {
+        return this._affectedElements.size > 0;
     }
     /**
-     * Returns an array of composition-related elements and clears the internal list.
+     * Returns an array of typing-related elements and clears the internal list.
      */
-    flushComposedElements() {
-        const result = Array.from(this._compositionElements);
-        this._compositionElements.clear();
+    flushAffectedElements() {
+        const result = Array.from(this._affectedElements);
+        this._affectedElements.clear();
         return result;
     }
 }

package/src/inserttextobserver.d.ts

@@ -52,4 +52,13 @@ export interface InsertTextEventData extends DomEventData {
      * If not specified, the insertion should occur at the current view selection.
      */
     selection?: ViewSelection | ViewDocumentSelection;
+    /**
+     * A flag indicating that event was fired during composition.
+     *
+     * Corresponds to the
+     * {@link module:engine/view/document~Document#event:compositionstart},
+     * {@link module:engine/view/document~Document#event:compositionupdate},
+     * and {@link module:engine/view/document~Document#event:compositionend } trio.
+     */
+    isComposing?: boolean;
 }

package/src/inserttextobserver.js

@@ -48,7 +48,7 @@ export default class InsertTextObserver extends Observer {
             if (!this.isEnabled) {
                 return;
             }
-            const { data: text, targetRanges, inputType, domEvent } = data;
+            const { data: text, targetRanges, inputType, domEvent, isComposing } = data;
             if (!typingInputTypes.includes(inputType)) {
                 return;
             }
@@ -58,7 +58,8 @@ export default class InsertTextObserver extends Observer {
             const eventInfo = new EventInfo(viewDocument, 'insertText');
             viewDocument.fire(eventInfo, new DomEventData(view, domEvent, {
                 text,
-                selection: view.createSelection(targetRanges)
+                selection: view.createSelection(targetRanges),
+                isComposing
             }));
             // Stop the beforeinput event if `delete` event was stopped.
             // https://github.com/ckeditor/ckeditor5/issues/753
@@ -92,11 +93,12 @@ export default class InsertTextObserver extends Observer {
                 // 1. The SelectionObserver is blocked and the view is not updated with the composition changes.
                 // 2. The last moment before it's locked is the `compositionstart` event.
                 // 3. The `SelectionObserver` is listening for `compositionstart` event and immediately converts
-                //    the selection. Handles this at the lowest priority so after the rendering is blocked.
+                //    the selection. Handle this at the low priority so after the rendering is blocked.
                 viewDocument.fire('insertText', new DomEventData(view, domEvent, {
-                    text: data
+                    text: data,
+                    isComposing: true
                 }));
-            }, { priority: 'lowest' });
+            }, { priority: 'low' });
         }
     }
     /**