@ckeditor/ckeditor5-engine 41.1.0 → 41.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-engine",
-  "version": "41.1.0",
+  "version": "41.2.1",
   "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": "41.1.0",
+    "@ckeditor/ckeditor5-utils": "41.2.1",
     "lodash-es": "4.17.21"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/conversion/viewconsumable.js

@@ -5,8 +5,7 @@
 /**
  * @module engine/conversion/viewconsumable
  */
-import { CKEditorError } from '@ckeditor/ckeditor5-utils';
-import { isArray } from 'lodash-es';
+import { CKEditorError, toArray } from '@ckeditor/ckeditor5-utils';
 /**
  * Class used for handling consumption of view {@link module:engine/view/element~Element elements},
  * {@link module:engine/view/text~Text text nodes} and {@link module:engine/view/documentfragment~DocumentFragment document fragments}.
@@ -420,7 +419,7 @@ export class ViewElementConsumables {
      * @param item Consumable item or array of items.
      */
     _add(type, item) {
-        const items = isArray(item) ? item : [item];
+        const items = toArray(item);
         const consumables = this._consumables[type];
         for (const name of items) {
             if (type === 'attributes' && (name === 'class' || name === 'style')) {
@@ -461,7 +460,7 @@ export class ViewElementConsumables {
      * consumed and `false` when one of the items is already consumed.
      */
     _test(type, item) {
-        const items = isArray(item) ? item : [item];
+        const items = toArray(item);
         const consumables = this._consumables[type];
         for (const name of items) {
             if (type === 'attributes' && (name === 'class' || name === 'style')) {
@@ -492,7 +491,7 @@ export class ViewElementConsumables {
      * @param item Consumable item or array of items.
      */
     _consume(type, item) {
-        const items = isArray(item) ? item : [item];
+        const items = toArray(item);
         const consumables = this._consumables[type];
         for (const name of items) {
             if (type === 'attributes' && (name === 'class' || name === 'style')) {
@@ -517,7 +516,7 @@ export class ViewElementConsumables {
      * @param item Consumable item or array of items.
      */
     _revert(type, item) {
-        const items = isArray(item) ? item : [item];
+        const items = toArray(item);
         const consumables = this._consumables[type];
         for (const name of items) {
             if (type === 'attributes' && (name === 'class' || name === 'style')) {

package/src/index.d.ts

@@ -105,7 +105,7 @@ export type { ViewDocumentTabEvent } from './view/observer/tabobserver.js';
 export type { ViewDocumentClickEvent } from './view/observer/clickobserver.js';
 export type { ViewDocumentSelectionChangeEvent } from './view/observer/selectionobserver.js';
 export type { ViewRenderEvent, ViewScrollToTheSelectionEvent } from './view/view.js';
-export { StylesProcessor, type BoxSides } from './view/stylesmap.js';
+export { default as StylesMap, StylesProcessor, type BoxSides } from './view/stylesmap.js';
 export * from './view/styles/background.js';
 export * from './view/styles/border.js';
 export * from './view/styles/margin.js';

package/src/index.js

@@ -69,7 +69,7 @@ export { default as Matcher } from './view/matcher.js';
 export { default as BubblingEventInfo } from './view/observer/bubblingeventinfo.js';
 export { default as DomEventData } from './view/observer/domeventdata.js';
 // View / Styles.
-export { StylesProcessor } from './view/stylesmap.js';
+export { default as StylesMap, StylesProcessor } from './view/stylesmap.js';
 export * from './view/styles/background.js';
 export * from './view/styles/border.js';
 export * from './view/styles/margin.js';

package/src/model/operation/transform.js

@@ -460,6 +460,14 @@ class ContextFactory {
                     this._setRelation(opA, opB, 'splitAtSource');
                 }
             }
+            else if (opB instanceof MoveOperation && opB.howMany > 0) {
+                if (opA.sourcePosition.isEqual(opB.sourcePosition.getShiftedBy(opB.howMany))) {
+                    this._setRelation(opA, opB, 'mergeSourceAffected');
+                }
+                if (opA.targetPosition.isEqual(opB.sourcePosition)) {
+                    this._setRelation(opA, opB, 'mergeTargetWasBefore');
+                }
+            }
         }
         else if (opA instanceof MarkerOperation) {
             const markerRange = opA.newRange;
@@ -1103,16 +1111,68 @@ setTransformation(MergeOperation, MoveOperation, (a, b, context) => {
             return [new NoOperation(0)];
         }
     }
-    // The default case.
+    // In most cases we want `sourcePosition` to stick to previous and `targetPosition` to stick to next.
+    // Usually, `sourcePosition` is at the beginning of the merged element and `targetPosition` is at the end of the merge-target element.
     //
-    if (a.sourcePosition.hasSameParentAs(b.targetPosition)) {
-        a.howMany += b.howMany;
+    // However, `sourcePosition` and `targetPosition` may end up in the middle of an element due to some OT magic that happens during undo.
+    // It is expected and used in `MergeOperation` x `SplitOperation` transformation.
+    //
+    // But when these positions are in the middle, it messes up the regular `MergeOperation` x `MoveOperation` transformation because
+    // these positions may "follow" some moved elements. And we want them stick in the original elements.
+    //
+    // This is why we add two extra cases: (1) and (2).
+    //
+    // But after this `MergeOperation` is transformed by "this" move (which is undone), we also need to define extra cases for
+    // the operation undoing previous move. These are (3) and (4).
+    //
+    // (1). Note that this case is also added to `updateRelations()` and sets `mergeSourceAffected` relation.
+    //
+    // [] is move operation, } is merge source position (sticks to previous by default):
+    // <p>A[b]}c</p>  ->  <p>A}c</p>
+    //
+    if (b.sourcePosition.getShiftedBy(b.howMany).isEqual(a.sourcePosition)) {
+        a.sourcePosition.stickiness = 'toNone';
+    }
+    // (3). This is the transformation for undoing operation of the above case.
+    //
+    // [] is move operation, } is merge source position (sticks to previous by default):
+    // <p>A}c</p>  ->  <p>A[b]}c</p>  (instead of <p>A}[b]c</p>)
+    //
+    else if (b.targetPosition.isEqual(a.sourcePosition) && context.abRelation == 'mergeSourceAffected') {
+        a.sourcePosition.stickiness = 'toNext';
     }
-    if (a.sourcePosition.hasSameParentAs(b.sourcePosition)) {
+    // (2). Note that this case is also added to `updateRelations()` and sets `mergeTargetWasBefore` relation.
+    //
+    // [] is move operation, { is merge target position (sticks to next by default):
+    // <p>A{[b]c</p>  ->  <p>A{c</p>
+    //
+    else if (b.sourcePosition.isEqual(a.targetPosition)) {
+        a.targetPosition.stickiness = 'toNone';
         a.howMany -= b.howMany;
     }
+    // (4). This is the transformation for undoing operation of the above case.
+    //
+    // [] is move operation, { is merge target position (sticks to next by default):
+    // <p>A{c</p>  ->  <p>A{[b]c</p>  (instead of <p>A[b]{c</p>)
+    //
+    else if (b.targetPosition.isEqual(a.targetPosition) && context.abRelation == 'mergeTargetWasBefore') {
+        a.targetPosition.stickiness = 'toPrevious';
+        a.howMany += b.howMany;
+    }
+    // The default case.
+    else {
+        if (a.sourcePosition.hasSameParentAs(b.targetPosition)) {
+            a.howMany += b.howMany;
+        }
+        if (a.sourcePosition.hasSameParentAs(b.sourcePosition)) {
+            a.howMany -= b.howMany;
+        }
+    }
     a.sourcePosition = a.sourcePosition._getTransformedByMoveOperation(b);
     a.targetPosition = a.targetPosition._getTransformedByMoveOperation(b);
+    // After transformations are done, make sure to revert stickiness in case if (1) - (4) scenario happened.
+    a.sourcePosition.stickiness = 'toPrevious';
+    a.targetPosition.stickiness = 'toNext';
     // `MergeOperation` graveyard position is like `MoveOperation` target position. It is a position where element(s) will
     // be moved. Like in other similar cases, we need to consider the scenario when those positions are same.
     // Here, we will treat `MergeOperation` like it is always strong (see `InsertOperation` x `InsertOperation` for comparison).

package/src/model/utils/insertcontent.js

@@ -149,7 +149,7 @@ export default function insertContent(model, content, selectable) {
             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) {
+                if (start && end && start.root === end.root && start.root.document) {
                     writer.addMarker(name, {
                         usingOperation: true,
                         affectsData: true,

package/src/model/writer.d.ts

@@ -519,7 +519,7 @@ export default class Writer {
      *
      * The `options.affectsData` parameter, which defaults to `false`, allows you to define if a marker affects the data. It should be
      * `true` when the marker change changes the data returned by the
-     * {@link module:core/editor/utils/dataapimixin~DataApi#getData `editor.getData()`} method.
+     * {@link module:core/editor/editor~Editor#getData `editor.getData()`} method.
      * When set to `true` it fires the {@link module:engine/model/document~Document#event:change:data `change:data`} event.
      * When set to `false` it fires the {@link module:engine/model/document~Document#event:change `change`} event.
      *
@@ -573,7 +573,7 @@ export default class Writer {
      *
      * The `options.affectsData` parameter, which defaults to `false`, allows you to define if a marker affects the data. It should be
      * `true` when the marker change changes the data returned by
-     * the {@link module:core/editor/utils/dataapimixin~DataApi#getData `editor.getData()`} method.
+     * the {@link module:core/editor/editor~Editor#getData `editor.getData()`} method.
      * When set to `true` it fires the {@link module:engine/model/document~Document#event:change:data `change:data`} event.
      * When set to `false` it fires the {@link module:engine/model/document~Document#event:change `change`} event.
      *

package/src/model/writer.js

@@ -705,7 +705,7 @@ export default class Writer {
      *
      * The `options.affectsData` parameter, which defaults to `false`, allows you to define if a marker affects the data. It should be
      * `true` when the marker change changes the data returned by the
-     * {@link module:core/editor/utils/dataapimixin~DataApi#getData `editor.getData()`} method.
+     * {@link module:core/editor/editor~Editor#getData `editor.getData()`} method.
      * When set to `true` it fires the {@link module:engine/model/document~Document#event:change:data `change:data`} event.
      * When set to `false` it fires the {@link module:engine/model/document~Document#event:change `change`} event.
      *
@@ -789,7 +789,7 @@ export default class Writer {
      *
      * The `options.affectsData` parameter, which defaults to `false`, allows you to define if a marker affects the data. It should be
      * `true` when the marker change changes the data returned by
-     * the {@link module:core/editor/utils/dataapimixin~DataApi#getData `editor.getData()`} method.
+     * the {@link module:core/editor/editor~Editor#getData `editor.getData()`} method.
      * When set to `true` it fires the {@link module:engine/model/document~Document#event:change:data `change:data`} event.
      * When set to `false` it fires the {@link module:engine/model/document~Document#event:change `change`} event.
      *

package/src/view/styles/padding.d.ts

@@ -7,7 +7,7 @@
  */
 import type { StylesProcessor } from '../stylesmap.js';
 /**
- * Adds a margin CSS styles processing rules.
+ * Adds a padding CSS styles processing rules.
  *
  * ```ts
  * editor.data.addStyleProcessorRules( addPaddingRules );

package/src/view/styles/padding.js

@@ -4,7 +4,7 @@
  */
 import { getPositionShorthandNormalizer, getBoxSidesValueReducer } from './utils.js';
 /**
- * Adds a margin CSS styles processing rules.
+ * Adds a padding CSS styles processing rules.
  *
  * ```ts
  * editor.data.addStyleProcessorRules( addPaddingRules );

package/src/view/stylesmap.d.ts

@@ -4,8 +4,6 @@
  */
 /**
  * Styles map. Allows handling (adding, removing, retrieving) a set of style rules (usually, of an element).
- *
- * The styles map is capable of normalizing style names so e.g. the following operations are possible:
  */
 export default class StylesMap {
     /**

package/src/view/stylesmap.js

@@ -8,8 +8,6 @@
 import { get, isObject, merge, set, unset } from 'lodash-es';
 /**
  * Styles map. Allows handling (adding, removing, retrieving) a set of style rules (usually, of an element).
- *
- * The styles map is capable of normalizing style names so e.g. the following operations are possible:
  */
 export default class StylesMap {
     /**