@ckeditor/ckeditor5-engine 35.1.0 → 35.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-engine",
-  "version": "35.1.0",
+  "version": "35.2.0",
   "description": "The editing engine of CKEditor 5 – the best browser-based rich text editor.",
   "keywords": [
     "wysiwyg",
@@ -23,30 +23,30 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-utils": "^35.1.0",
+    "@ckeditor/ckeditor5-utils": "^35.2.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^35.1.0",
-    "@ckeditor/ckeditor5-block-quote": "^35.1.0",
-    "@ckeditor/ckeditor5-clipboard": "^35.1.0",
-    "@ckeditor/ckeditor5-cloud-services": "^35.1.0",
-    "@ckeditor/ckeditor5-core": "^35.1.0",
-    "@ckeditor/ckeditor5-editor-classic": "^35.1.0",
-    "@ckeditor/ckeditor5-enter": "^35.1.0",
-    "@ckeditor/ckeditor5-essentials": "^35.1.0",
-    "@ckeditor/ckeditor5-heading": "^35.1.0",
-    "@ckeditor/ckeditor5-image": "^35.1.0",
-    "@ckeditor/ckeditor5-link": "^35.1.0",
-    "@ckeditor/ckeditor5-list": "^35.1.0",
-    "@ckeditor/ckeditor5-mention": "^35.1.0",
-    "@ckeditor/ckeditor5-paragraph": "^35.1.0",
-    "@ckeditor/ckeditor5-table": "^35.1.0",
-    "@ckeditor/ckeditor5-theme-lark": "^35.1.0",
-    "@ckeditor/ckeditor5-typing": "^35.1.0",
-    "@ckeditor/ckeditor5-ui": "^35.1.0",
-    "@ckeditor/ckeditor5-undo": "^35.1.0",
-    "@ckeditor/ckeditor5-widget": "^35.1.0",
+    "@ckeditor/ckeditor5-basic-styles": "^35.2.0",
+    "@ckeditor/ckeditor5-block-quote": "^35.2.0",
+    "@ckeditor/ckeditor5-clipboard": "^35.2.0",
+    "@ckeditor/ckeditor5-cloud-services": "^35.2.0",
+    "@ckeditor/ckeditor5-core": "^35.2.0",
+    "@ckeditor/ckeditor5-editor-classic": "^35.2.0",
+    "@ckeditor/ckeditor5-enter": "^35.2.0",
+    "@ckeditor/ckeditor5-essentials": "^35.2.0",
+    "@ckeditor/ckeditor5-heading": "^35.2.0",
+    "@ckeditor/ckeditor5-image": "^35.2.0",
+    "@ckeditor/ckeditor5-link": "^35.2.0",
+    "@ckeditor/ckeditor5-list": "^35.2.0",
+    "@ckeditor/ckeditor5-mention": "^35.2.0",
+    "@ckeditor/ckeditor5-paragraph": "^35.2.0",
+    "@ckeditor/ckeditor5-table": "^35.2.0",
+    "@ckeditor/ckeditor5-theme-lark": "^35.2.0",
+    "@ckeditor/ckeditor5-typing": "^35.2.0",
+    "@ckeditor/ckeditor5-ui": "^35.2.0",
+    "@ckeditor/ckeditor5-undo": "^35.2.0",
+    "@ckeditor/ckeditor5-widget": "^35.2.0",
     "typescript": "^4.6.4",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"

package/src/model/nodelist.js

@@ -7,6 +7,7 @@
  */
 import Node from './node';
 import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+import spliceArray from '@ckeditor/ckeditor5-utils/src/splicearray';
 /**
  * Provides an interface to operate on a list of {@link module:engine/model/node~Node nodes}. `NodeList` is used internally
  * in classes like {@link module:engine/model/element~Element Element}
@@ -165,7 +166,7 @@ export default class NodeList {
                 throw new CKEditorError('model-nodelist-insertnodes-not-node', this);
             }
         }
-        this._nodes.splice(index, 0, ...nodes);
+        this._nodes = spliceArray(this._nodes, Array.from(nodes), index, 0);
     }
     /**
      * Removes one or more nodes starting at the given index.

package/src/model/position.js

@@ -442,48 +442,46 @@ export default class Position extends TypeCheckable {
      * @returns {Boolean} True if positions touch.
      */
     isTouching(otherPosition) {
-        let left = null;
-        let right = null;
-        const compare = this.compareWith(otherPosition);
-        switch (compare) {
-            case 'same':
-                return true;
-            case 'before':
-                left = Position._createAt(this);
-                right = Position._createAt(otherPosition);
-                break;
-            case 'after':
-                left = Position._createAt(otherPosition);
-                right = Position._createAt(this);
-                break;
-            default:
-                return false;
+        if (this.root !== otherPosition.root) {
+            return false;
         }
-        // Cached for optimization purposes.
-        let leftParent = left.parent;
-        while (left.path.length + right.path.length) {
-            if (left.isEqual(right)) {
-                return true;
+        const commonLevel = Math.min(this.path.length, otherPosition.path.length);
+        for (let level = 0; level < commonLevel; level++) {
+            const diff = this.path[level] - otherPosition.path[level];
+            // Positions are spread by a node, so they are not touching.
+            if (diff < -1 || diff > 1) {
+                return false;
             }
-            if (left.path.length > right.path.length) {
-                if (left.offset !== leftParent.maxOffset) {
-                    return false;
-                }
-                left.path = left.path.slice(0, -1);
-                leftParent = leftParent.parent;
-                left.offset++;
+            else if (diff === 1) {
+                // `otherPosition` is on the left.
+                // `this` is on the right.
+                return checkTouchingBranch(otherPosition, this, level);
             }
-            else {
-                if (right.offset !== 0) {
-                    return false;
-                }
-                right.path = right.path.slice(0, -1);
+            else if (diff === -1) {
+                // `this` is on the left.
+                // `otherPosition` is on the right.
+                return checkTouchingBranch(this, otherPosition, level);
             }
+            // `diff === 0`.
+            // Positions are inside the same element on this level, compare deeper.
+        }
+        // If we ended up here, it means that positions paths have the same beginning.
+        // If the paths have the same length, then it means that they are identical, so the positions are same.
+        if (this.path.length === otherPosition.path.length) {
+            return true;
+        }
+        // If positions have different length of paths, then the common part is the same.
+        // In this case, the "shorter" position is on the left, the "longer" position is on the right.
+        //
+        // If the positions are touching, the "longer" position must have only zeroes. For example:
+        // [ 1, 2 ] vs [ 1, 2, 0 ]
+        // [ 1, 2 ] vs [ 1, 2, 0, 0, 0 ]
+        else if (this.path.length > otherPosition.path.length) {
+            return checkOnlyZeroes(this.path, commonLevel);
+        }
+        else {
+            return checkOnlyZeroes(otherPosition.path, commonLevel);
         }
-        // TypeScript compiler thinks that the flow can reach the end of this function without `return` and requires `undefined` or `void`
-        // as the return type. This `throw` convinces the compiler that the flow won't pass till the end.
-        /* istanbul ignore next */
-        throw new Error('unreachable code');
     }
     /**
      * Checks if two positions are in the same parent.
@@ -1008,3 +1006,86 @@ export function getNodeBeforePosition(position, positionParent, textNode) {
     }
     return positionParent.getChild(positionParent.offsetToIndex(position.offset) - 1);
 }
+// This is a helper function for `Position#isTouching()`.
+//
+// It checks whether to given positions are touching, considering that they have the same root and paths
+// until given level, and at given level they differ by 1 (so they are branching at `level` point).
+//
+// The exact requirements for touching positions are described in `Position#isTouching()` and also
+// in the body of this function.
+//
+// @param {module:engine/model/position~Position} left Position "on the left" (it is before `right`).
+// @param {module:engine/model/position~Position} right Position "on the right" (it is after `left`).
+// @param {Number} level Level on which the positions are different.
+// @returns {Boolean}
+function checkTouchingBranch(left, right, level) {
+    if (level + 1 === left.path.length) {
+        // Left position does not have any more entries after the point where the positions differ.
+        // [ 2 ] vs [ 3 ]
+        // [ 2 ] vs [ 3, 0, 0 ]
+        // The positions are spread by node at [ 2 ].
+        return false;
+    }
+    if (!checkOnlyZeroes(right.path, level + 1)) {
+        // Right position does not have only zeroes, so we have situation like:
+        // [ 2, maxOffset ] vs [ 3, 1 ]
+        // [ 2, maxOffset ] vs [ 3, 1, 0, 0 ]
+        // The positions are spread by node at [ 3, 0 ].
+        return false;
+    }
+    if (!checkOnlyMaxOffset(left, level + 1)) {
+        // Left position does not have only max offsets, so we have situation like:
+        // [ 2, 4 ] vs [ 3 ]
+        // [ 2, 4 ] vs [ 3, 0, 0 ]
+        // The positions are spread by node at [ 2, 5 ].
+        return false;
+    }
+    // Left position has only max offsets and right position has only zeroes or nothing.
+    // [ 2, maxOffset ] vs [ 3 ]
+    // [ 2, maxOffset, maxOffset ] vs [ 3, 0 ]
+    // There are not elements between positions. The positions are touching.
+    return true;
+}
+// Checks whether for given array, starting from given index until the end of the array, all items are `0`s.
+//
+// This is a helper function for `Position#isTouching()`.
+//
+// @private
+// @param {Array.<Number>} arr Array to check.
+// @param {Number} idx Index to start checking from.
+// @returns {Boolean}
+function checkOnlyZeroes(arr, idx) {
+    while (idx < arr.length) {
+        if (arr[idx] !== 0) {
+            return false;
+        }
+        idx++;
+    }
+    return true;
+}
+// Checks whether for given position, starting from given path level, whether the position is at the end of
+// its parent and whether each element on the path to the position is also at at the end of its parent.
+//
+// This is a helper function for `Position#isTouching()`.
+//
+// @private
+// @param {module:engine/model/position~Position} pos Position to check.
+// @param {Number} level Level to start checking from.
+// @returns {Boolean}
+function checkOnlyMaxOffset(pos, level) {
+    let parent = pos.parent;
+    let idx = pos.path.length - 1;
+    let add = 0;
+    while (idx >= level) {
+        if (pos.path[idx] + add !== parent.maxOffset) {
+            return false;
+        }
+        // After the first check, we "go up", and check whether the position's parent-parent is the last element.
+        // However, we need to add 1 to the value in the path to "simulate" moving the path after the parent.
+        // It happens just once.
+        add = 1;
+        idx--;
+        parent = parent.parent;
+    }
+    return true;
+}

package/src/model/utils/insertcontent.js

@@ -12,6 +12,7 @@ import Position from '../position';
 import Range from '../range';
 import Selection from '../selection';
 import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+import { LiveRange } from '../../index';
 /**
  * Inserts content into the editor (specified selection) as one would expect the paste functionality to work.
  *
@@ -60,15 +61,117 @@ export default function insertContent(model, content, selectable, placeOrOffset)
             model.deleteContent(selection, { doNotAutoparagraph: true });
         }
         const insertion = new Insertion(model, writer, selection.anchor);
+        const fakeMarkerElements = [];
         let nodesToInsert;
         if (content.is('documentFragment')) {
+            // If document fragment has any markers, these markers should be inserted into the model as well.
+            if (content.markers.size) {
+                const markersPosition = [];
+                for (const [name, range] of content.markers) {
+                    const { start, end } = range;
+                    const isCollapsed = start.isEqual(end);
+                    markersPosition.push({ position: start, name, isCollapsed }, { position: end, name, isCollapsed });
+                }
+                // Markers position is sorted backwards to ensure that the insertion of fake markers will not change
+                // the position of the next markers.
+                markersPosition.sort(({ position: posA }, { position: posB }) => posA.isBefore(posB) ? 1 : -1);
+                for (const { position, name, isCollapsed } of markersPosition) {
+                    let fakeElement = null;
+                    let collapsed = null;
+                    const isAtBeginning = position.parent === content && position.isAtStart;
+                    const isAtEnd = position.parent === content && position.isAtEnd;
+                    // We have two ways of handling markers. In general, we want to add temporary <$marker> model elements to
+                    // represent marker boundaries. These elements will be inserted into content together with the rest
+                    // of the document fragment. After insertion is done, positions for these elements will be read
+                    // and proper, actual markers will be created in the model and fake elements will be removed.
+                    //
+                    // However, if the <$marker> element is at the beginning or at the end of the document fragment,
+                    // it may affect how the inserted content is merged with current model, impacting the insertion
+                    // result. To avoid that, we don't add <$marker> elements at these positions. Instead, we will use
+                    // `Insertion#getAffectedRange()` to figure out new positions for these marker boundaries.
+                    if (!isAtBeginning && !isAtEnd) {
+                        fakeElement = writer.createElement('$marker');
+                        writer.insert(fakeElement, position);
+                    }
+                    else if (isCollapsed) {
+                        // Save whether the collapsed marker was at the beginning or at the end of document fragment
+                        // to know where to create it after the insertion is done.
+                        collapsed = isAtBeginning ? 'start' : 'end';
+                    }
+                    fakeMarkerElements.push({
+                        name,
+                        element: fakeElement,
+                        collapsed
+                    });
+                }
+            }
             nodesToInsert = content.getChildren();
         }
         else {
             nodesToInsert = [content];
         }
         insertion.handleNodes(nodesToInsert);
-        const newRange = insertion.getSelectionRange();
+        let newRange = insertion.getSelectionRange();
+        if (content.is('documentFragment') && fakeMarkerElements.length) {
+            // After insertion was done, the selection was set but the model contains fake <$marker> elements.
+            // These <$marker> elements will be now removed. Because of that, we will need to fix the selection.
+            // We will create a live range that will automatically be update as <$marker> elements are removed.
+            const selectionLiveRange = newRange ? LiveRange.fromRange(newRange) : null;
+            // Marker name -> [ start position, end position ].
+            const markersData = {};
+            // Note: `fakeMarkerElements` are sorted backwards. However, now, we want to handle the markers
+            // from the beginning, so that existing <$marker> elements do not affect markers positions.
+            // This is why we iterate from the end to the start.
+            for (let i = fakeMarkerElements.length - 1; i >= 0; i--) {
+                const { name, element, collapsed } = fakeMarkerElements[i];
+                const isStartBoundary = !markersData[name];
+                if (isStartBoundary) {
+                    markersData[name] = [];
+                }
+                if (element) {
+                    // Read fake marker element position to learn where the marker should be created.
+                    const elementPosition = writer.createPositionAt(element, 'before');
+                    markersData[name].push(elementPosition);
+                    writer.remove(element);
+                }
+                else {
+                    // If the fake marker element does not exist, it means that the marker boundary was at the beginning or at the end.
+                    const rangeOnInsertion = insertion.getAffectedRange();
+                    if (!rangeOnInsertion) {
+                        // If affected range is `null` it means that nothing was in the document fragment or all content was filtered out.
+                        // Some markers that were in the filtered content may be removed (partially or totally).
+                        // Let's handle only those markers that were at the beginning or at the end of the document fragment.
+                        if (collapsed) {
+                            markersData[name].push(insertion.position);
+                        }
+                        continue;
+                    }
+                    if (collapsed) {
+                        // If the marker was collapsed at the beginning or at the end of the document fragment,
+                        // put both boundaries at the beginning or at the end of inserted range (to keep the marker collapsed).
+                        markersData[name].push(rangeOnInsertion[collapsed]);
+                    }
+                    else {
+                        markersData[name].push(isStartBoundary ? rangeOnInsertion.start : rangeOnInsertion.end);
+                    }
+                }
+            }
+            for (const [name, [start, end]] of Object.entries(markersData)) {
+                // For now, we ignore markers if they are included in the filtered-out content.
+                // In the future implementation we will improve that case to create markers that are not filtered out completely.
+                if (start && end && start.root === end.root) {
+                    writer.addMarker(name, {
+                        usingOperation: true,
+                        affectsData: true,
+                        range: new Range(start, end)
+                    });
+                }
+            }
+            if (selectionLiveRange) {
+                newRange = selectionLiveRange.toRange();
+                selectionLiveRange.detach();
+            }
+        }
         /* istanbul ignore else */
         if (newRange) {
             if (selection instanceof DocumentSelection) {

package/src/view/observer/selectionobserver.js

@@ -109,6 +109,12 @@ export default class SelectionObserver extends Observer {
             this._documentIsSelectingInactivityTimeoutDebounced();
         };
         const endDocumentIsSelecting = () => {
+            if (!this.document.isSelecting) {
+                return;
+            }
+            // Make sure that model selection is up-to-date at the end of selecting process.
+            // Sometimes `selectionchange` events could arrive after the `mouseup` event and that selection could be already outdated.
+            this._handleSelectionChange(null, domDocument);
             this.document.isSelecting = false;
             // The safety timeout can be canceled when the document leaves the "is selecting" state.
             this._documentIsSelectingInactivityTimeoutDebounced.cancel();
@@ -117,13 +123,15 @@ export default class SelectionObserver extends Observer {
         // (e.g. by holding the mouse button and moving the cursor). The state resets when they either released
         // the mouse button or interrupted the process by pressing or releasing any key.
         this.listenTo(domElement, 'selectstart', startDocumentIsSelecting, { priority: 'highest' });
-        this.listenTo(domElement, 'keydown', endDocumentIsSelecting, { priority: 'highest' });
-        this.listenTo(domElement, 'keyup', endDocumentIsSelecting, { priority: 'highest' });
+        this.listenTo(domElement, 'keydown', endDocumentIsSelecting, { priority: 'highest', useCapture: true });
+        this.listenTo(domElement, 'keyup', endDocumentIsSelecting, { priority: 'highest', useCapture: true });
         // Add document-wide listeners only once. This method could be called for multiple editing roots.
         if (this._documents.has(domDocument)) {
             return;
         }
-        this.listenTo(domDocument, 'mouseup', endDocumentIsSelecting, { priority: 'highest' });
+        // This listener is using capture mode to make sure that selection is upcasted before any other
+        // handler would like to check it and update (for example table multi cell selection).
+        this.listenTo(domDocument, 'mouseup', endDocumentIsSelecting, { priority: 'highest', useCapture: true });
         this.listenTo(domDocument, 'selectionchange', (evt, domEvent) => {
             this._handleSelectionChange(domEvent, domDocument);
             // Defer the safety timeout when the selection changes (e.g. the user keeps extending the selection