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

package/dist/index.js

@@ -4,8 +4,8 @@
  */
 import { Command, Plugin } from '@ckeditor/ckeditor5-core/dist/index.js';
 import { env, EventInfo, count, keyCodes, isInsideSurrogatePair, isInsideCombinedSymbol, isInsideEmojiSequence, ObservableMixin } from '@ckeditor/ckeditor5-utils/dist/index.js';
-import { Observer, FocusObserver, DomEventData, BubblingEventInfo, MouseObserver } from '@ckeditor/ckeditor5-engine/dist/index.js';
-import { escapeRegExp } from 'lodash-es';
+import { Observer, FocusObserver, DomEventData, LiveRange, BubblingEventInfo, MouseObserver } from '@ckeditor/ckeditor5-engine/dist/index.js';
+import { debounce, escapeRegExp } from 'lodash-es';
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
@@ -225,6 +225,10 @@ const TYPING_INPUT_TYPES = [
     // This one is used by Safari when accepting spell check suggestions from the autocorrection pop-up (Mac).
     'insertReplacementText'
 ];
+const TYPING_INPUT_TYPES_ANDROID = [
+    ...TYPING_INPUT_TYPES,
+    'insertCompositionText'
+];
 /**
  * Text insertion observer introduces the {@link module:engine/view/document~Document#event:insertText} event.
  */ class InsertTextObserver extends Observer {
@@ -240,16 +244,14 @@ const TYPING_INPUT_TYPES = [
         // On Android composition events should immediately be applied to the model. Rendering is not disabled.
         // On non-Android the model is updated only on composition end.
         // On Android we can't rely on composition start/end to update model.
-        if (env.isAndroid) {
-            TYPING_INPUT_TYPES.push('insertCompositionText');
-        }
+        const typingInputTypes = env.isAndroid ? TYPING_INPUT_TYPES_ANDROID : TYPING_INPUT_TYPES;
         const viewDocument = view.document;
         viewDocument.on('beforeinput', (evt, data)=>{
             if (!this.isEnabled) {
                 return;
             }
             const { data: text, targetRanges, inputType, domEvent } = data;
-            if (!TYPING_INPUT_TYPES.includes(inputType)) {
+            if (!typingInputTypes.includes(inputType)) {
                 return;
             }
             // Mark the latest focus change as complete (we are typing in editable after the focus
@@ -266,46 +268,38 @@ const TYPING_INPUT_TYPES = [
                 evt.stop();
             }
         });
-        // Note: The priority must be lower than the CompositionObserver handler to call it after the renderer is unblocked.
-        viewDocument.on('compositionend', (evt, { data, domEvent })=>{
-            // On Android composition events are immediately applied to the model.
-            // On non-Android the model is updated only on composition end.
-            // On Android we can't rely on composition start/end to update model.
-            if (!this.isEnabled || env.isAndroid) {
-                return;
-            }
-            // In case of aborted composition.
-            if (!data) {
-                return;
-            }
-            // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
-            // @if CK_DEBUG_TYPING // 	console.log( `%c[InsertTextObserver]%c Fire insertText event, text: ${ JSON.stringify( data ) }`,
-            // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green;', ''
-            // @if CK_DEBUG_TYPING // 	);
-            // @if CK_DEBUG_TYPING // }
-            // How do we know where to insert the composed text?
-            // The selection observer is blocked and the view is not updated with the composition changes.
-            // There were three options:
-            //   - Store the selection on `compositionstart` and use it now. This wouldn't work in RTC
-            //     where the view would change and the stored selection might get incorrect.
-            //     We'd need to fallback to the current view selection anyway.
-            //   - Use the current view selection. This is a bit weird and non-intuitive because
-            //     this isn't necessarily the selection on which the user started composing.
-            //     We cannot even know whether it's still collapsed (there might be some weird
-            //     editor feature that changed it in unpredictable ways for us). But it's by far
-            //     the simplest solution and should be stable (the selection is definitely correct)
-            //     and probably mostly predictable (features usually don't modify the selection
-            //     unless called explicitly by the user).
-            //   - Try to follow it from the `beforeinput` events. This would be really complex as each
-            //     `beforeinput` would come with just the range it's changing and we'd need to calculate that.
-            // We decided to go with the 2nd option for its simplicity and stability.
-            viewDocument.fire('insertText', new DomEventData(view, domEvent, {
-                text: data,
-                selection: viewDocument.selection
-            }));
-        }, {
-            priority: 'lowest'
-        });
+        // On Android composition events are immediately applied to the model.
+        // On non-Android the model is updated only on composition end.
+        // On Android we can't rely on composition start/end to update model.
+        if (!env.isAndroid) {
+            // Note: The priority must be lower than the CompositionObserver handler to call it after the renderer is unblocked.
+            // This is important for view to DOM position mapping.
+            // This causes the effect of first remove composed DOM and then reapply it after model modification.
+            viewDocument.on('compositionend', (evt, { data, domEvent })=>{
+                if (!this.isEnabled) {
+                    return;
+                }
+                // In case of aborted composition.
+                if (!data) {
+                    return;
+                }
+                // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+                // @if CK_DEBUG_TYPING // 	console.log( `%c[InsertTextObserver]%c Fire insertText event, %c${ JSON.stringify( data ) }`,
+                // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green;', 'font-weight: bold', 'color: blue'
+                // @if CK_DEBUG_TYPING // 	);
+                // @if CK_DEBUG_TYPING // }
+                // How do we know where to insert the composed text?
+                // 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.
+                viewDocument.fire('insertText', new DomEventData(view, domEvent, {
+                    text: data
+                }));
+            }, {
+                priority: 'lowest'
+            });
+        }
     }
     /**
 	 * @inheritDoc
@@ -318,6 +312,9 @@ const TYPING_INPUT_TYPES = [
 /**
  * Handles text input coming from the keyboard or other input methods.
  */ class Input extends Plugin {
+    /**
+	 * The queue of `insertText` command executions that are waiting for the DOM to get updated after beforeinput event.
+	 */ _compositionQueue;
     /**
 	 * @inheritDoc
 	 */ static get pluginName() {
@@ -329,7 +326,9 @@ const TYPING_INPUT_TYPES = [
         const editor = this.editor;
         const model = editor.model;
         const view = editor.editing.view;
+        const mapper = editor.editing.mapper;
         const modelSelection = model.document.selection;
+        this._compositionQueue = new CompositionQueue(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);
@@ -342,11 +341,19 @@ const TYPING_INPUT_TYPES = [
             if (!view.document.isComposing) {
                 data.preventDefault();
             }
-            const { text, selection: viewSelection, resultRange: viewResultRange } = data;
+            // 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');
+            }
+            const { text, selection: viewSelection } = data;
+            let modelRanges;
             // If view selection was specified, translate it to model selection.
-            const modelRanges = Array.from(viewSelection.getRanges()).map((viewRange)=>{
-                return editor.editing.mapper.toModelRange(viewRange);
-            });
+            if (viewSelection) {
+                modelRanges = Array.from(viewSelection.getRanges()).map((viewRange)=>mapper.toModelRange(viewRange));
+            } else {
+                modelRanges = Array.from(modelSelection.getRanges());
+            }
             let insertText = text;
             // Typing in English on Android is firing composition events for the whole typed word.
             // We need to check the target range text to only apply the difference.
@@ -368,24 +375,46 @@ const TYPING_INPUT_TYPES = [
                         }
                     }
                 }
+                if (insertText.length == 0 && modelRanges[0].isCollapsed) {
+                    // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+                    // @if CK_DEBUG_TYPING // 	console.log( '%c[Input]%c Ignore insertion of an empty data to the collapsed range.',
+                    // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green;', 'font-style: italic'
+                    // @if CK_DEBUG_TYPING // 	);
+                    // @if CK_DEBUG_TYPING // }
+                    return;
+                }
             }
-            const insertTextCommandData = {
+            const commandData = {
                 text: insertText,
                 selection: model.createSelection(modelRanges)
             };
-            // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
-            // @if CK_DEBUG_TYPING // 	console.log( '%c[Input]%c Execute insertText:',
-            // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green;', '',
-            // @if CK_DEBUG_TYPING // 		insertText,
-            // @if CK_DEBUG_TYPING // 		`[${ modelRanges[ 0 ].start.path }]-[${ modelRanges[ 0 ].end.path }]`
-            // @if CK_DEBUG_TYPING // 	);
-            // @if CK_DEBUG_TYPING // }
-            if (viewResultRange) {
-                insertTextCommandData.resultRange = editor.editing.mapper.toModelRange(viewResultRange);
+            // This is a composition event and those are not cancellable, so we need to wait until 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( `%c[Input]%c Queue 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; color: green;', 'font-weight: bold', 'color: blue', ''
+                // @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( `%c[Input]%c Execute 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; color: green;', 'font-weight: bold', 'color: blue', ''
+                // @if CK_DEBUG_TYPING // 	);
+                // @if CK_DEBUG_TYPING // }
+                editor.execute('insertText', commandData);
+                view.scrollToTheSelection();
             }
-            editor.execute('insertText', insertTextCommandData);
-            view.scrollToTheSelection();
         });
+        // Delete selected content on composition start.
         if (env.isAndroid) {
             // On Android with English keyboard, the composition starts just by putting caret
             // at the word end or by selecting a table column. This is not a real composition started.
@@ -397,9 +426,9 @@ const TYPING_INPUT_TYPES = [
                 // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
                 // @if CK_DEBUG_TYPING // 	const firstPositionPath = modelSelection.getFirstPosition()!.path;
                 // @if CK_DEBUG_TYPING // 	const lastPositionPath = modelSelection.getLastPosition()!.path;
-                // @if CK_DEBUG_TYPING // 	console.log( '%c[Input]%c KeyDown 229 -> model.deleteContent()',
-                // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green;', '',
-                // @if CK_DEBUG_TYPING // 		`[${ firstPositionPath }]-[${ lastPositionPath }]`
+                // @if CK_DEBUG_TYPING // 	console.log( '%c[Input]%c KeyDown 229%c -> model.deleteContent() ' +
+                // @if CK_DEBUG_TYPING // 		`[${ firstPositionPath }]-[${ lastPositionPath }]`,
+                // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green;', 'font-weight: bold', '',
                 // @if CK_DEBUG_TYPING // 	);
                 // @if CK_DEBUG_TYPING // }
                 deleteSelectionContent(model, insertTextCommand);
@@ -414,17 +443,232 @@ const TYPING_INPUT_TYPES = [
                 // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
                 // @if CK_DEBUG_TYPING // 	const firstPositionPath = modelSelection.getFirstPosition()!.path;
                 // @if CK_DEBUG_TYPING // 	const lastPositionPath = modelSelection.getLastPosition()!.path;
-                // @if CK_DEBUG_TYPING // 	console.log( '%c[Input]%c Composition start -> model.deleteContent()',
-                // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green;', '',
-                // @if CK_DEBUG_TYPING // 		`[${ firstPositionPath }]-[${ lastPositionPath }]`
+                // @if CK_DEBUG_TYPING // 	console.log( '%c[Input]%c Composition start%c -> model.deleteContent() ' +
+                // @if CK_DEBUG_TYPING // 		`[${ firstPositionPath }]-[${ lastPositionPath }]`,
+                // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green;', 'font-weight: bold', '',
                 // @if CK_DEBUG_TYPING // 	);
                 // @if CK_DEBUG_TYPING // }
                 deleteSelectionContent(model, insertTextCommand);
             });
         }
+        // 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.
+                for (const { node } of mutations){
+                    const viewElement = findMappedViewAncestor(node, mapper);
+                    const modelElement = mapper.toModelElement(viewElement);
+                    if (this._compositionQueue.isComposedElement(modelElement)) {
+                        this._compositionQueue.flush('mutations');
+                        return;
+                    }
+                }
+            // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.log( '%c[Input]%c Mutations not related to the composition.',
+            // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green;', '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()){
+                    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( '%c[Input]%c Fire post-composition mutation fixes.',
+                    // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green', '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
+            // 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
+            // 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
+            // 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', ()=>{
+                // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+                // @if CK_DEBUG_TYPING // 	console.group( '%c[Input]%c Force render after composition end.',
+                // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green', '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'
+            });
+        }
+    }
+    /**
+	 * @inheritDoc
+	 */ destroy() {
+        super.destroy();
+        this._compositionQueue.destroy();
+    }
+}
+/**
+ * The queue of `insertText` command executions that are waiting for the DOM to get updated after beforeinput event.
+ */ class CompositionQueue {
+    /**
+	 * The editor instance.
+	 */ editor;
+    /**
+	 * Debounced queue flush as a safety mechanism for cases of mutation observer not triggering.
+	 */ flushDebounced = debounce(()=>this.flush('timeout'), 50);
+    /**
+	 * 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();
+    /**
+	 * @inheritDoc
+	 */ constructor(editor){
+        this.editor = editor;
+    }
+    /**
+	 * Destroys the helper object.
+	 */ destroy() {
+        this.flushDebounced.cancel();
+        this._compositionElements.clear();
+        while(this._queue.length){
+            this.shift();
+        }
+    }
+    /**
+	 * Returns the size of the queue.
+	 */ get length() {
+        return this._queue.length;
+    }
+    /**
+	 * Push next insertText command data to the queue.
+	 */ push(commandData) {
+        const commandLiveData = {
+            text: commandData.text
+        };
+        if (commandData.selection) {
+            commandLiveData.selectionRanges = [];
+            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._queue.push(commandLiveData);
+        this.flushDebounced();
+    }
+    /**
+	 * Shift the first item from the insertText command data queue.
+	 */ shift() {
+        const commandLiveData = this._queue.shift();
+        const commandData = {
+            text: commandLiveData.text
+        };
+        if (commandLiveData.selectionRanges) {
+            const ranges = commandLiveData.selectionRanges.map((liveRange)=>detachLiveRange(liveRange)).filter((range)=>!!range);
+            if (ranges.length) {
+                commandData.selection = this.editor.model.createSelection(ranges);
+            }
+        }
+        return commandData;
+    }
+    /**
+	 * Applies all queued insertText command executions.
+	 *
+	 * @param reason Used only for debugging.
+	 */ flush(reason) {
+        const editor = this.editor;
+        const model = editor.model;
+        const view = editor.editing.view;
+        this.flushDebounced.cancel();
+        if (!this._queue.length) {
+            return;
+        }
+        // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	console.group( `%c[Input]%c Flush insertText queue on ${ reason }.`,
+        // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green;', 'font-weight: bold'
+        // @if CK_DEBUG_TYPING // 	);
+        // @if CK_DEBUG_TYPING // }
+        const insertTextCommand = editor.commands.get('insertText');
+        const buffer = insertTextCommand.buffer;
+        model.enqueueChange(buffer.batch, ()=>{
+            buffer.lock();
+            while(this._queue.length){
+                const commandData = this.shift();
+                // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+                // @if CK_DEBUG_TYPING // 	console.log( '%c[Input]%c Execute queued insertText:%c ' +
+                // @if CK_DEBUG_TYPING // 		`"${ 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; color: green;', 'font-weight: bold', 'color: blue', ''
+                // @if CK_DEBUG_TYPING // 	);
+                // @if CK_DEBUG_TYPING // }
+                editor.execute('insertText', commandData);
+            }
+            buffer.unlock();
+        });
+        view.scrollToTheSelection();
+    // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+    // @if CK_DEBUG_TYPING // 	console.groupEnd();
+    // @if CK_DEBUG_TYPING // }
+    }
+    /**
+	 * Returns `true` if the given model element is related to recent composition.
+	 */ isComposedElement(element) {
+        return this._compositionElements.has(element);
+    }
+    /**
+	 * Returns an array of composition-related elements and clears the internal list.
+	 */ flushComposedElements() {
+        const result = Array.from(this._compositionElements);
+        this._compositionElements.clear();
+        return result;
     }
 }
-function deleteSelectionContent(model, insertTextCommand) {
+/**
+ * Deletes the content selected by the document selection at the start of composition.
+ */ function deleteSelectionContent(model, insertTextCommand) {
     // By relying on the state of the input command we allow disabling the entire input easily
     // by just disabling the input command. We could’ve used here the delete command but that
     // would mean requiring the delete feature which would block loading one without the other.
@@ -440,6 +684,25 @@ function deleteSelectionContent(model, insertTextCommand) {
     });
     buffer.unlock();
 }
+/**
+ * Detaches a LiveRange and returns the static range from it.
+ */ function detachLiveRange(liveRange) {
+    const range = liveRange.toRange();
+    liveRange.detach();
+    if (range.root.rootName == '$graveyard') {
+        return null;
+    }
+    return range;
+}
+/**
+ * For the given `viewNode`, finds and returns the closest ancestor of this node that has a mapping to the model.
+ */ function findMappedViewAncestor(viewNode, mapper) {
+    let node = viewNode.is('$text') ? viewNode.parent : viewNode;
+    while(!mapper.toModelElement(node)){
+        node = node.parent;
+    }
+    return node;
+}
 
 /**
  * The delete command. Used by the {@link module:typing/delete~Delete delete feature} to handle the <kbd>Delete</kbd> and