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

package/dist/index.js

@@ -251,7 +251,7 @@ const TYPING_INPUT_TYPES_ANDROID = [
             if (!this.isEnabled) {
                 return;
             }
-            const { data: text, targetRanges, inputType, domEvent } = data;
+            const { data: text, targetRanges, inputType, domEvent, isComposing } = data;
             if (!typingInputTypes.includes(inputType)) {
                 return;
             }
@@ -261,7 +261,8 @@ const TYPING_INPUT_TYPES_ANDROID = [
             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
@@ -295,12 +296,13 @@ const TYPING_INPUT_TYPES_ANDROID = [
                 // 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'
             });
         }
     }
@@ -318,7 +320,7 @@ const TYPING_INPUT_TYPES_ANDROID = [
  */ 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
 	 */ static get pluginName() {
@@ -337,25 +339,36 @@ const TYPING_INPUT_TYPES_ANDROID = [
         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) {
@@ -394,40 +407,31 @@ const TYPING_INPUT_TYPES_ANDROID = [
                     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.
@@ -469,44 +473,48 @@ const TYPING_INPUT_TYPES_ANDROID = [
                 // @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;
@@ -516,63 +524,49 @@ const TYPING_INPUT_TYPES_ANDROID = [
                         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: []
+                    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.
 	 */ editor;
@@ -583,8 +577,11 @@ const TYPING_INPUT_TYPES_ANDROID = [
 	 * The queue of `insertText` command executions that are waiting for the DOM to get updated after beforeinput event.
 	 */ _queue = [];
     /**
-	 * A set of model elements. The composition happened in those elements. It's used for mutations check.
-	 */ _compositionElements = new Set();
+	 * 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.
+	 */ _affectedElements = new Set();
     /**
 	 * @inheritDoc
 	 */ constructor(editor){
@@ -594,7 +591,7 @@ const TYPING_INPUT_TYPES_ANDROID = [
 	 * Destroys the helper object.
 	 */ destroy() {
         this.flushDebounced.cancel();
-        this._compositionElements.clear();
+        this._affectedElements.clear();
         while(this._queue.length){
             this.shift();
         }
@@ -606,7 +603,7 @@ const TYPING_INPUT_TYPES_ANDROID = [
     }
     /**
 	 * Push next insertText command data to the queue.
-	 */ push(commandData) {
+	 */ push(commandData, isComposing) {
         const commandLiveData = {
             text: commandData.text
         };
@@ -615,10 +612,11 @@ const TYPING_INPUT_TYPES_ANDROID = [
             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();
     }
     /**
@@ -673,6 +671,15 @@ const TYPING_INPUT_TYPES_ANDROID = [
                 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 ) {
@@ -680,15 +687,20 @@ const TYPING_INPUT_TYPES_ANDROID = [
     // @if CK_DEBUG_TYPING // }
     }
     /**
-	 * Returns `true` if the given model element is related to recent composition.
-	 */ isComposedElement(element) {
-        return this._compositionElements.has(element);
+	 * 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.
+	 */ hasAffectedElements() {
+        return this._affectedElements.size > 0;
     }
     /**
-	 * Returns an array of composition-related elements and clears the internal list.
-	 */ flushComposedElements() {
-        const result = Array.from(this._compositionElements);
-        this._compositionElements.clear();
+	 * Returns an array of typing-related elements and clears the internal list.
+	 */ flushAffectedElements() {
+        const result = Array.from(this._affectedElements);
+        this._affectedElements.clear();
         return result;
     }
 }
@@ -1232,7 +1244,22 @@ const DELETE_EVENT_TYPES = {
             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')) {