@ckeditor/ckeditor5-engine 41.0.0 → 41.2.0

package/package.json

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

package/src/controller/datacontroller.d.ts

@@ -194,6 +194,7 @@ export default class DataController extends DataController_base {
      */
     set(data: string | Record<string, string>, options?: {
         batchType?: BatchType;
+        [key: string]: unknown;
     }): void;
     /**
      * Returns the data parsed by the {@link #processor data processor} and then converted by upcast converters

package/src/conversion/downcasthelpers.js

@@ -14,6 +14,7 @@ import ModelElement from '../model/element.js';
 import ModelPosition from '../model/position.js';
 import ViewAttributeElement from '../view/attributeelement.js';
 import ConversionHelpers from './conversionhelpers.js';
+import StylesMap from '../view/stylesmap.js';
 import { CKEditorError, toArray } from '@ckeditor/ckeditor5-utils';
 import { cloneDeep } from 'lodash-es';
 /**
@@ -1353,15 +1354,24 @@ function changeAttribute(attributeCreator) {
         // First remove the old attribute if there was one.
         if (data.attributeOldValue !== null && oldAttribute) {
             if (oldAttribute.key == 'class') {
-                const classes = toArray(oldAttribute.value);
+                const classes = typeof oldAttribute.value == 'string' ? oldAttribute.value.split(/\s+/) : oldAttribute.value;
                 for (const className of classes) {
                     viewWriter.removeClass(className, viewElement);
                 }
             }
             else if (oldAttribute.key == 'style') {
-                const keys = Object.keys(oldAttribute.value);
-                for (const key of keys) {
-                    viewWriter.removeStyle(key, viewElement);
+                if (typeof oldAttribute.value == 'string') {
+                    const styles = new StylesMap(viewWriter.document.stylesProcessor);
+                    styles.setTo(oldAttribute.value);
+                    for (const [key] of styles.getStylesEntries()) {
+                        viewWriter.removeStyle(key, viewElement);
+                    }
+                }
+                else {
+                    const keys = Object.keys(oldAttribute.value);
+                    for (const key of keys) {
+                        viewWriter.removeStyle(key, viewElement);
+                    }
                 }
             }
             else {
@@ -1371,15 +1381,24 @@ function changeAttribute(attributeCreator) {
         // Then set the new attribute.
         if (data.attributeNewValue !== null && newAttribute) {
             if (newAttribute.key == 'class') {
-                const classes = toArray(newAttribute.value);
+                const classes = typeof newAttribute.value == 'string' ? newAttribute.value.split(/\s+/) : newAttribute.value;
                 for (const className of classes) {
                     viewWriter.addClass(className, viewElement);
                 }
             }
             else if (newAttribute.key == 'style') {
-                const keys = Object.keys(newAttribute.value);
-                for (const key of keys) {
-                    viewWriter.setStyle(key, newAttribute.value[key], viewElement);
+                if (typeof newAttribute.value == 'string') {
+                    const styles = new StylesMap(viewWriter.document.stylesProcessor);
+                    styles.setTo(newAttribute.value);
+                    for (const [key, value] of styles.getStylesEntries()) {
+                        viewWriter.setStyle(key, value, viewElement);
+                    }
+                }
+                else {
+                    const keys = Object.keys(newAttribute.value);
+                    for (const key of keys) {
+                        viewWriter.setStyle(key, newAttribute.value[key], viewElement);
+                    }
                 }
             }
             else {

package/src/conversion/upcasthelpers.js

@@ -776,15 +776,15 @@ function normalizeViewAttributeKeyValueConfig(config) {
         config.view = { key: config.view };
     }
     const key = config.view.key;
+    const value = typeof config.view.value == 'undefined' ? /[\s\S]*/ : config.view.value;
     let normalized;
     if (key == 'class' || key == 'style') {
         const keyName = key == 'class' ? 'classes' : 'styles';
         normalized = {
-            [keyName]: config.view.value
+            [keyName]: value
         };
     }
     else {
-        const value = typeof config.view.value == 'undefined' ? /[\s\S]*/ : config.view.value;
         normalized = {
             attributes: {
                 [key]: value

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 {
     /**
@@ -312,7 +310,7 @@ export default class StylesMap {
     /**
      * Returns normalized styles entries for further processing.
      */
-    private _getStylesEntries;
+    getStylesEntries(): Array<PropertyDescriptor>;
     /**
      * Removes empty objects upon removing an entry from internal object.
      */

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 {
     /**
@@ -190,7 +188,7 @@ export default class StylesMap {
         if (this.isEmpty) {
             return '';
         }
-        return this._getStylesEntries()
+        return this.getStylesEntries()
             .map(arr => arr.join(':'))
             .sort()
             .join(';') + ';';
@@ -290,7 +288,7 @@ export default class StylesMap {
         if (expand) {
             return this._styleProcessor.getStyleNames(this._styles);
         }
-        const entries = this._getStylesEntries();
+        const entries = this.getStylesEntries();
         return entries.map(([key]) => key);
     }
     /**
@@ -302,7 +300,7 @@ export default class StylesMap {
     /**
      * Returns normalized styles entries for further processing.
      */
-    _getStylesEntries() {
+    getStylesEntries() {
         const parsed = [];
         const keys = Object.keys(this._styles);
         for (const key of keys) {