@ckeditor/ckeditor5-engine 45.1.0-alpha.7 → 45.2.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-engine",
-  "version": "45.1.0-alpha.7",
+  "version": "45.2.0-alpha.0",
   "description": "The editing engine of CKEditor 5 – the best browser-based rich text editor.",
   "keywords": [
     "wysiwyg",
@@ -24,7 +24,7 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-utils": "45.1.0-alpha.7",
+    "@ckeditor/ckeditor5-utils": "45.2.0-alpha.0",
     "es-toolkit": "1.32.0"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/dataprocessor/htmldataprocessor.js

@@ -5,7 +5,6 @@
 /**
  * @module engine/dataprocessor/htmldataprocessor
  */
-/* globals DOMParser */
 import BasicHtmlWriter from './basichtmlwriter.js';
 import DomConverter from '../view/domconverter.js';
 /**

package/src/dataprocessor/xmldataprocessor.js

@@ -5,7 +5,6 @@
 /**
  * @module engine/dataprocessor/xmldataprocessor
  */
-/* globals DOMParser */
 import BasicHtmlWriter from './basichtmlwriter.js';
 import DomConverter from '../view/domconverter.js';
 /**

package/src/dev-utils/model.js

@@ -378,7 +378,7 @@ function parseAttributeValue(attribute) {
     try {
         return JSON.parse(attribute);
     }
-    catch (e) {
+    catch {
         return attribute;
     }
 }

package/src/dev-utils/operationreplayer.js

@@ -5,7 +5,6 @@
 /**
  * @module engine/dev-utils/operationreplayer
  */
-/* global setTimeout */
 import OperationFactory from '../model/operation/operationfactory.js';
 /**
  * Operation replayer is a development tool created for easy replaying of operations on the document from stringified operations.

package/src/dev-utils/utils.js

@@ -9,7 +9,6 @@
  *
  * @module engine/dev-utils/utils
  */
-/* globals console */
 // @if CK_DEBUG_TYPING // const { debounce } = require( 'es-toolkit/compat' );
 /**
  * Helper function, converts a map to the 'key1="value1" key2="value1"' format.

package/src/dev-utils/view.js

@@ -5,7 +5,6 @@
 /**
  * @module engine/dev-utils/view
  */
-/* globals document */
 /**
  * Collection of methods for manipulating the {@link module:engine/view/view view} for testing purposes.
  */

package/src/view/domconverter.js

@@ -5,7 +5,6 @@
 /**
  * @module engine/view/domconverter
  */
-/* globals Node, NodeFilter, DOMParser */
 import ViewText from './text.js';
 import ViewElement from './element.js';
 import ViewUIElement from './uielement.js';
@@ -955,7 +954,7 @@ export default class DomConverter {
             range.setStart(selection.anchorNode, selection.anchorOffset);
             range.setEnd(selection.focusNode, selection.focusOffset);
         }
-        catch (e) {
+        catch {
             // Safari sometimes gives us a selection that makes Range.set{Start,End} throw.
             // See https://github.com/ckeditor/ckeditor5/issues/12375.
             return false;
@@ -1598,7 +1597,7 @@ function isGeckoRestrictedDomSelection(domSelection) {
     try {
         Object.prototype.toString.call(container);
     }
-    catch (error) {
+    catch {
         return true;
     }
     return false;

package/src/view/observer/focusobserver.js

@@ -5,7 +5,6 @@
 /**
  * @module engine/view/observer/focusobserver
  */
-/* globals setTimeout, clearTimeout */
 import DomEventObserver from './domeventobserver.js';
 // @if CK_DEBUG_TYPING // const { _debouncedLine, _buildLogMessage } = require( '../../dev-utils/utils.js' );
 /**

package/src/view/observer/inputobserver.js

@@ -7,7 +7,7 @@
  */
 import DomEventObserver from './domeventobserver.js';
 import DataTransfer from '../datatransfer.js';
-import { env } from '@ckeditor/ckeditor5-utils';
+import { env, isText, indexOf } from '@ckeditor/ckeditor5-utils';
 import { INLINE_FILLER_LENGTH, startsWithFiller } from '../filler.js';
 // @if CK_DEBUG_TYPING // const { _debouncedLine, _buildLogMessage } = require( '../../dev-utils/utils.js' );
 /**
@@ -90,7 +90,8 @@ export default class InputObserver extends DomEventObserver {
                 if (viewStart && startsWithFiller(domRange.startContainer) && domRange.startOffset < INLINE_FILLER_LENGTH) {
                     // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
                     // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'InputObserver',
-                    // @if CK_DEBUG_TYPING // 		'Target range starts in an inline filler - adjusting it',
+                    // @if CK_DEBUG_TYPING // 		'%cTarget range starts in an inline filler - adjusting it',
+                    // @if CK_DEBUG_TYPING // 		'font-style: italic'
                     // @if CK_DEBUG_TYPING // 	) );
                     // @if CK_DEBUG_TYPING // }
                     domEvent.preventDefault();
@@ -107,6 +108,16 @@ export default class InputObserver extends DomEventObserver {
                         return false;
                     }, { direction: 'backward', singleCharacters: true });
                 }
+                // Check if there is no an inline filler just after the target range.
+                if (isFollowedByInlineFiller(domRange.endContainer, domRange.endOffset)) {
+                    // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+                    // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'InputObserver',
+                    // @if CK_DEBUG_TYPING // 		'%cTarget range ends just before an inline filler - prevent default behavior',
+                    // @if CK_DEBUG_TYPING // 		'font-style: italic'
+                    // @if CK_DEBUG_TYPING // 	) );
+                    // @if CK_DEBUG_TYPING // }
+                    domEvent.preventDefault();
+                }
                 if (viewStart) {
                     return view.createRange(viewStart, viewEnd);
                 }
@@ -157,6 +168,8 @@ export default class InputObserver extends DomEventObserver {
             // it to paragraphs as it is our default action for enter handling.
             const parts = data.split(/\n{1,2}/g);
             let partTargetRanges = targetRanges;
+            // Handle all parts on our side as we rely on paragraph inserting and synchronously updated view selection.
+            domEvent.preventDefault();
             for (let i = 0; i < parts.length; i++) {
                 const dataPart = parts[i];
                 if (dataPart != '') {
@@ -197,3 +210,27 @@ export default class InputObserver extends DomEventObserver {
         // @if CK_DEBUG_TYPING // }
     }
 }
+/**
+ * Returns `true` if there is an inline filler just after the position in DOM.
+ * It walks up the DOM tree if the offset is at the end of the node.
+ */
+function isFollowedByInlineFiller(node, offset) {
+    while (node.parentNode) {
+        if (isText(node)) {
+            if (offset != node.data.length) {
+                return false;
+            }
+        }
+        else {
+            if (offset != node.childNodes.length) {
+                return false;
+            }
+        }
+        offset = indexOf(node) + 1;
+        node = node.parentNode;
+        if (offset < node.childNodes.length && startsWithFiller(node.childNodes[offset])) {
+            return true;
+        }
+    }
+    return false;
+}

package/src/view/observer/mutationobserver.js

@@ -5,7 +5,6 @@
 /**
  * @module engine/view/observer/mutationobserver
  */
-/* globals window */
 import Observer from './observer.js';
 import { startsWithFiller } from '../filler.js';
 import { isEqualWith } from 'es-toolkit/compat';

package/src/view/observer/selectionobserver.js

@@ -5,7 +5,6 @@
 /**
  * @module engine/view/observer/selectionobserver
  */
-/* global setInterval, clearInterval */
 import Observer from './observer.js';
 import MutationObserver from './mutationobserver.js';
 import FocusObserver from './focusobserver.js';
@@ -237,8 +236,9 @@ export default class SelectionObserver extends Observer {
         this.view.hasDomSelection = true;
         // Mark the latest focus change as complete (we got new selection after the focus so the selection is in the focused element).
         this.focusObserver.flush();
-        // Ignore selection change as the editable is not focused.
-        if (!this.view.document.isFocused) {
+        // Ignore selection change as the editable is not focused. Note that in read-only mode, we have to update
+        // the model selection as there won't be any focus change to flush the pending selection changes.
+        if (!this.view.document.isFocused && !this.view.document.isReadOnly) {
             // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
             // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'SelectionObserver',
             // @if CK_DEBUG_TYPING // 		'Ignore selection change while editable is not focused'

package/src/view/renderer.d.ts

@@ -240,13 +240,13 @@ export default class Renderer extends /* #__PURE__ */ Renderer_base {
     /**
      * Updates the fake selection.
      *
-     * @param domRoot A valid DOM root where the fake selection container should be added.
+     * @param domEditable A valid DOM editable where the fake selection container should be added.
      */
     private _updateFakeSelection;
     /**
      * Updates the DOM selection.
      *
-     * @param domRoot A valid DOM root where the DOM selection should be rendered.
+     * @param domEditable A valid DOM editable where the DOM selection should be rendered.
      */
     private _updateDomSelection;
     /**
@@ -258,7 +258,7 @@ export default class Renderer extends /* #__PURE__ */ Renderer_base {
     /**
      * Checks whether the fake selection needs to be updated.
      *
-     * @param domRoot A valid DOM root where a new fake selection container should be added.
+     * @param domEditable A valid DOM editable where a new fake selection container should be added.
      */
     private _fakeSelectionNeedsUpdate;
     /**

package/src/view/renderer.js

@@ -797,15 +797,25 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
             this._removeFakeSelection();
             return;
         }
-        const domRoot = this.domConverter.mapViewToDom(this.selection.editableElement);
-        // Do nothing if there is no focus, or there is no DOM element corresponding to selection's editable element.
-        if (!this.isFocused || !domRoot) {
+        const domEditable = this.domConverter.mapViewToDom(this.selection.editableElement);
+        // Do not update DOM selection if there is no focus, or there is no DOM element corresponding to selection's editable element.
+        if (!this.isFocused || !domEditable) {
             // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
             // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'Renderer',
             // @if CK_DEBUG_TYPING // 		'Skip updating DOM selection:',
-            // @if CK_DEBUG_TYPING // 		`isFocused: ${ this.isFocused }, hasDomRoot: ${ !!domRoot }`
+            // @if CK_DEBUG_TYPING // 		`isFocused: ${ this.isFocused }, hasDomEditable: ${ !!domEditable }`
             // @if CK_DEBUG_TYPING // 	) );
             // @if CK_DEBUG_TYPING // }
+            // But if there was a fake selection, and it is not fake anymore - remove it as it can map to no longer existing widget.
+            // See https://github.com/ckeditor/ckeditor5/issues/18123.
+            if (!this.selection.isFake && this._fakeSelectionContainer && this._fakeSelectionContainer.isConnected) {
+                // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+                // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'Renderer',
+                // @if CK_DEBUG_TYPING // 		'Remove fake selection (not focused editable)'
+                // @if CK_DEBUG_TYPING // 	) );
+                // @if CK_DEBUG_TYPING // }
+                this._removeFakeSelection();
+            }
             return;
         }
         // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
@@ -815,40 +825,40 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
         // @if CK_DEBUG_TYPING // }
         // Render fake selection - create the fake selection container (if needed) and move DOM selection to it.
         if (this.selection.isFake) {
-            this._updateFakeSelection(domRoot);
+            this._updateFakeSelection(domEditable);
         }
         // There was a fake selection so remove it and update the DOM selection.
         // This is especially important on Android because otherwise IME will try to compose over the fake selection container.
         else if (this._fakeSelectionContainer && this._fakeSelectionContainer.isConnected) {
             this._removeFakeSelection();
-            this._updateDomSelection(domRoot);
+            this._updateDomSelection(domEditable);
         }
         // Update the DOM selection in case of a plain selection change (no fake selection is involved).
         // On non-Android the whole rendering is disabled in composition mode (including DOM selection update),
         // but updating DOM selection should be also disabled on Android if in the middle of the composition
         // (to not interrupt it).
         else if (!(this.isComposing && env.isAndroid)) {
-            this._updateDomSelection(domRoot);
+            this._updateDomSelection(domEditable);
         }
     }
     /**
      * Updates the fake selection.
      *
-     * @param domRoot A valid DOM root where the fake selection container should be added.
+     * @param domEditable A valid DOM editable where the fake selection container should be added.
      */
-    _updateFakeSelection(domRoot) {
-        const domDocument = domRoot.ownerDocument;
+    _updateFakeSelection(domEditable) {
+        const domDocument = domEditable.ownerDocument;
         if (!this._fakeSelectionContainer) {
             this._fakeSelectionContainer = createFakeSelectionContainer(domDocument);
         }
         const container = this._fakeSelectionContainer;
         // Bind fake selection container with the current selection *position*.
         this.domConverter.bindFakeSelection(container, this.selection);
-        if (!this._fakeSelectionNeedsUpdate(domRoot)) {
+        if (!this._fakeSelectionNeedsUpdate(domEditable)) {
             return;
         }
-        if (!container.parentElement || container.parentElement != domRoot) {
-            domRoot.appendChild(container);
+        if (!container.parentElement || container.parentElement != domEditable) {
+            domEditable.appendChild(container);
         }
         container.textContent = this.selection.fakeSelectionLabel || '\u00A0';
         // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
@@ -865,10 +875,10 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
     /**
      * Updates the DOM selection.
      *
-     * @param domRoot A valid DOM root where the DOM selection should be rendered.
+     * @param domEditable A valid DOM editable where the DOM selection should be rendered.
      */
-    _updateDomSelection(domRoot) {
-        const domSelection = domRoot.ownerDocument.defaultView.getSelection();
+    _updateDomSelection(domEditable) {
+        const domSelection = domEditable.ownerDocument.defaultView.getSelection();
         // Let's check whether DOM selection needs updating at all.
         if (!this._domSelectionNeedsUpdate(domSelection)) {
             // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
@@ -924,14 +934,14 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
     /**
      * Checks whether the fake selection needs to be updated.
      *
-     * @param domRoot A valid DOM root where a new fake selection container should be added.
+     * @param domEditable A valid DOM editable where a new fake selection container should be added.
      */
-    _fakeSelectionNeedsUpdate(domRoot) {
+    _fakeSelectionNeedsUpdate(domEditable) {
         const container = this._fakeSelectionContainer;
-        const domSelection = domRoot.ownerDocument.getSelection();
+        const domSelection = domEditable.ownerDocument.getSelection();
         // Fake selection needs to be updated if there's no fake selection container, or the container currently sits
         // in a different root.
-        if (!container || container.parentElement !== domRoot) {
+        if (!container || container.parentElement !== domEditable) {
             return true;
         }
         // Make sure that the selection actually is within the fake selection.