@ckeditor/ckeditor5-engine 47.1.0 → 47.2.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-engine",
-  "version": "47.1.0",
+  "version": "47.2.0-alpha.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": "47.1.0",
+    "@ckeditor/ckeditor5-utils": "47.2.0-alpha.1",
     "es-toolkit": "1.39.5"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/conversion/downcastdispatcher.d.ts

@@ -210,7 +210,7 @@ export declare class DowncastDispatcher extends /* #__PURE__ */ DowncastDispatch
      */
     private _convertAttribute;
     /**
-     * Fires re-insertion conversion (with a `reconversion` flag passed to `insert` events)
+     * Fires re-insertion conversion (with a `reconversion` flag passed to `remove` and `insert` events)
      * of a range of elements (only elements on the range depth, without children).
      *
      * For each node in the range on its depth (without children), {@link #event:insert `insert` event} is fired.
@@ -328,6 +328,10 @@ export type DowncastReduceChangesEventData = {
      * A buffered changes to get reduced.
      */
     changes: Iterable<DifferItem | DifferItemReinsert>;
+    /**
+     * Set of items marked for rebuild without reusing view nodes.
+     */
+    refreshedItems: Set<ModelItem>;
 };
 export type DowncastDispatcherEventMap<TItem = ModelItem> = {
     insert: {
@@ -338,6 +342,7 @@ export type DowncastDispatcherEventMap<TItem = ModelItem> = {
     remove: {
         position: ModelPosition;
         length: number;
+        reconversion?: boolean;
     };
     attribute: {
         item: TItem;

package/src/conversion/downcastdispatcher.js

@@ -138,13 +138,14 @@ export class DowncastDispatcher extends /* #__PURE__ */ EmitterMixin() {
      * @param writer The view writer that should be used to modify the view document.
      */
     convertChanges(differ, markers, writer) {
-        const conversionApi = this._createConversionApi(writer, differ.getRefreshedItems());
+        const refreshedItems = differ.getRefreshedItems();
+        const conversionApi = this._createConversionApi(writer, refreshedItems);
         // Before the view is updated, remove markers which have changed.
         for (const change of differ.getMarkersToRemove()) {
             this._convertMarkerRemove(change.name, change.range, conversionApi);
         }
         // Let features modify the change list (for example to allow reconversion).
-        const changes = this._reduceChanges(differ.getChanges());
+        const changes = this._reduceChanges(differ.getChanges(), refreshedItems);
         // Convert changes that happened on model tree.
         for (const entry of changes) {
             if (entry.type === 'insert') {
@@ -315,7 +316,7 @@ export class DowncastDispatcher extends /* #__PURE__ */ EmitterMixin() {
         }
     }
     /**
-     * Fires re-insertion conversion (with a `reconversion` flag passed to `insert` events)
+     * Fires re-insertion conversion (with a `reconversion` flag passed to `remove` and `insert` events)
      * of a range of elements (only elements on the range depth, without children).
      *
      * For each node in the range on its depth (without children), {@link #event:insert `insert` event} is fired.
@@ -333,6 +334,9 @@ export class DowncastDispatcher extends /* #__PURE__ */ EmitterMixin() {
         this._addConsumablesForInsert(conversionApi.consumable, walkerValues);
         // Fire a separate insert event for each node and text fragment contained shallowly in the range.
         for (const data of walkerValues.map(walkerValueToEventData)) {
+            // For backward compatibility and handlers that does not recognize reconversion.
+            this.fire(`remove:${data.item.is('element') ? data.item.name : '$text'}`, { position: data.range.start, length: data.item.offsetSize, reconversion: true }, conversionApi);
+            // Reinsert the view element.
             this._testAndFire('insert', { ...data, reconversion: true }, conversionApi);
         }
     }
@@ -401,8 +405,11 @@ export class DowncastDispatcher extends /* #__PURE__ */ EmitterMixin() {
      *
      * @fires reduceChanges
      */
-    _reduceChanges(changes) {
-        const data = { changes };
+    _reduceChanges(changes, refreshedItems) {
+        const data = {
+            changes,
+            refreshedItems
+        };
         this.fire('reduceChanges', data);
         return data.changes;
     }

package/src/conversion/downcasthelpers.d.ts

@@ -800,6 +800,7 @@ export declare function insertAttributesAndChildren(): (evt: unknown, data: {
 export declare function remove(): (evt: unknown, data: {
     position: ModelPosition;
     length: number;
+    reconversion?: boolean;
 }, conversionApi: DowncastConversionApi) => void;
 /**
  * Creates a `<span>` {@link module:engine/view/attributeelement~ViewAttributeElement view attribute element} from the information

package/src/conversion/downcasthelpers.js

@@ -761,18 +761,17 @@ export function insertAttributesAndChildren() {
  */
 export function remove() {
     return (evt, data, conversionApi) => {
+        // Ignore reconversion related remove as it is handled in the `insert` of reconversion.
+        if (data.reconversion) {
+            return;
+        }
         // Find the view range start position by mapping the model position at which the remove happened.
         const viewStart = conversionApi.mapper.toViewPosition(data.position);
         const modelEnd = data.position.getShiftedBy(data.length);
         const viewEnd = conversionApi.mapper.toViewPosition(modelEnd, { isPhantom: true });
         const viewRange = conversionApi.writer.createRange(viewStart, viewEnd);
         // Trim the range to remove in case some UI elements are on the view range boundaries.
-        const removed = conversionApi.writer.remove(viewRange.getTrimmed());
-        // After the range is removed, unbind all view elements from the model.
-        // Range inside view document fragment is used to unbind deeply.
-        for (const child of conversionApi.writer.createRangeIn(removed).getItems()) {
-            conversionApi.mapper.unbindViewElement(child, { defer: true });
-        }
+        removeRangeAndUnbind(viewRange.getTrimmed(), conversionApi);
     };
 }
 /**
@@ -1019,7 +1018,8 @@ export function insertElement(elementCreator, consumer = defaultConsumer) {
         }
         // Consume an element insertion and all present attributes that are specified as a reconversion triggers.
         consumer(data.item, conversionApi.consumable);
-        const viewPosition = conversionApi.mapper.toViewPosition(data.range.start);
+        const viewPosition = data.reconversion && removeElementAndUnbind(data.item, conversionApi) ||
+            conversionApi.mapper.toViewPosition(data.range.start);
         conversionApi.mapper.bindElements(data.item, viewElement);
         conversionApi.writer.insert(viewPosition, viewElement);
         // Convert attributes before converting children.
@@ -1059,7 +1059,8 @@ export function insertStructure(elementCreator, consumer) {
         validateSlotsChildren(data.item, slotsMap, conversionApi);
         // Consume an element insertion and all present attributes that are specified as a reconversion triggers.
         consumer(data.item, conversionApi.consumable);
-        const viewPosition = conversionApi.mapper.toViewPosition(data.range.start);
+        const viewPosition = data.reconversion && removeElementAndUnbind(data.item, conversionApi) ||
+            conversionApi.mapper.toViewPosition(data.range.start);
         conversionApi.mapper.bindElements(data.item, viewElement);
         conversionApi.writer.insert(viewPosition, viewElement);
         // Convert attributes before converting children.
@@ -1119,6 +1120,25 @@ export function insertUIElement(elementCreator) {
         evt.stop();
     };
 }
+/**
+ * Removes given view range content and unbinds removed elements.
+ */
+function removeRangeAndUnbind(viewRange, conversionApi) {
+    const removed = conversionApi.writer.remove(viewRange);
+    // After the range is removed, unbind all view elements from the model.
+    // Range inside view document fragment is used to unbind deeply.
+    for (const child of conversionApi.writer.createRangeIn(removed).getItems()) {
+        conversionApi.mapper.unbindViewElement(child, { defer: true });
+    }
+    return viewRange.start;
+}
+/**
+ * Removes view element for given model element and unbinds removed view elements.
+ */
+function removeElementAndUnbind(modelElement, conversionApi) {
+    const viewElement = conversionApi.mapper.toViewElement(modelElement);
+    return viewElement && removeRangeAndUnbind(conversionApi.writer.createRangeOn(viewElement), conversionApi);
+}
 /**
  * Function factory that returns a default downcast converter for removing a {@link module:engine/view/uielement~ViewUIElement UI element}
  * based on marker remove change.
@@ -1941,10 +1961,14 @@ function createChangeReducer(model) {
             // For attribute use node affected by the change.
             // For insert or remove use parent element because we need to check if it's added/removed child.
             const node = change.type == 'attribute' ? change.range.start.nodeAfter : change.position.parent;
-            if (!node || !shouldReplace(node, change)) {
+            if (!node || !shouldReplace(node, change) || change.type == 'reinsert') {
                 reducedChanges.push(change);
                 continue;
             }
+            // Force to not-reuse view elements renamed in model.
+            if (change.type == 'insert' && change.action == 'rename') {
+                data.refreshedItems.add(change.position.nodeAfter);
+            }
             // If it's already marked for reconversion, so skip this change, otherwise add the diff items.
             if (!data.reconvertedElements.has(node)) {
                 data.reconvertedElements.add(node);
@@ -1963,11 +1987,6 @@ function createChangeReducer(model) {
                     changeIndex = i;
                 }
                 reducedChanges.splice(changeIndex, 0, {
-                    type: 'remove',
-                    name: node.name,
-                    position,
-                    length: 1
-                }, {
                     type: 'reinsert',
                     name: node.name,
                     position,
@@ -2071,6 +2090,7 @@ function fillSlots(viewElement, slotsMap, conversionApi, options) {
     // Fill slots with nested view nodes.
     for ([currentSlot, currentSlotNodes] of slotsMap) {
         reinsertOrConvertNodes(viewElement, currentSlotNodes, conversionApi, options);
+        conversionApi.writer.setCustomProperty('$structureSlotParent', true, currentSlot.parent);
         conversionApi.writer.move(conversionApi.writer.createRangeIn(currentSlot), conversionApi.writer.createPositionBefore(currentSlot));
         conversionApi.writer.remove(currentSlot);
     }

package/src/model/utils/insertcontent.js

@@ -262,7 +262,10 @@ class Insertion {
      */
     handleNodes(nodes) {
         for (const node of Array.from(nodes)) {
-            this._handleNode(node);
+            // Ignore empty nodes, especially empty text nodes.
+            if (node.offsetSize > 0) {
+                this._handleNode(node);
+            }
         }
         // Insert nodes collected in temporary ModelDocumentFragment.
         this._insertPartialFragment();
@@ -344,7 +347,7 @@ class Insertion {
             return;
         }
         // Add node to the current temporary ModelDocumentFragment.
-        this._appendToFragment(node);
+        node = this._appendToFragment(node);
         // Store the first and last nodes for easy access for merging with sibling nodes.
         if (!this._firstNode) {
             this._firstNode = node;
@@ -408,6 +411,11 @@ class Insertion {
         }
         this.writer.insert(node, this._documentFragmentPosition);
         this._documentFragmentPosition = this._documentFragmentPosition.getShiftedBy(node.offsetSize);
+        // In case text node was merged with already inserted text node, we need to get the actual node that is in the document.
+        // This happens when there is a non-allowed object between text nodes.
+        if (!node.parent) {
+            node = this._documentFragmentPosition.nodeBefore;
+        }
         // The last inserted object should be selected because we can't put a collapsed selection after it.
         if (this.schema.isObject(node) && !this.schema.checkChild(this.position, '$text')) {
             this._nodeToSelect = node;
@@ -416,6 +424,7 @@ class Insertion {
             this._nodeToSelect = null;
         }
         this._filterAttributesOf.push(node);
+        return node;
     }
     /**
      * Sets `_affectedStart` and `_affectedEnd` to the given `position`. Should be used before a change is done during insertion process to
@@ -675,12 +684,14 @@ class Insertion {
      * @param childNode The node to check.
      */
     _getAllowedIn(contextElement, childNode) {
+        const context = this.schema.createContext(contextElement);
         // Check if a node can be inserted in the given context...
-        if (this.schema.checkChild(contextElement, childNode)) {
+        if (this.schema.checkChild(context, childNode)) {
             return contextElement;
         }
         // ...or it would be accepted if a paragraph would be inserted.
-        if (this.schema.checkChild(contextElement, 'paragraph') && this.schema.checkChild('paragraph', childNode)) {
+        if (this.schema.checkChild(context, 'paragraph') &&
+            this.schema.checkChild(context.push('paragraph'), childNode)) {
             return contextElement;
         }
         // If the child wasn't allowed in the context element and the element is a limit there's no point in

package/src/model/utils/insertobject.js

@@ -66,10 +66,11 @@ export function insertObject(model, object, selectable, options = {}) {
         }
         let elementToInsert = object;
         const insertionPositionParent = insertionSelection.anchor.parent;
-        // Autoparagraphing of an inline objects.
-        if (!model.schema.checkChild(insertionPositionParent, object) &&
-            model.schema.checkChild(insertionPositionParent, 'paragraph') &&
-            model.schema.checkChild('paragraph', object)) {
+        const context = model.schema.createContext(insertionPositionParent);
+        // Auto-paragraphing of an inline objects.
+        if (!model.schema.checkChild(context, object) &&
+            model.schema.checkChild(context, 'paragraph') &&
+            model.schema.checkChild(context.push('paragraph'), object)) {
             elementToInsert = writer.createElement('paragraph');
             writer.insert(object, elementToInsert);
         }

package/src/view/observer/keyobserver.d.ts

@@ -7,6 +7,7 @@
  */
 import { DomEventObserver } from './domeventobserver.js';
 import { type ViewDocumentDomEventData } from './domeventdata.js';
+import type { BubblingEvent } from './bubblingemittermixin.js';
 import { type KeystrokeInfo } from '@ckeditor/ckeditor5-utils';
 /**
  * Observer for events connected with pressing keyboard keys.
@@ -36,10 +37,10 @@ export declare class KeyObserver extends DomEventObserver<'keydown' | 'keyup', K
  * @see module:engine/view/observer/keyobserver~KeyObserver
  * @eventName module:engine/view/document~ViewDocument#keydown
  */
-export type ViewDocumentKeyDownEvent = {
+export type ViewDocumentKeyDownEvent = BubblingEvent<{
     name: 'keydown';
     args: [data: ViewDocumentKeyEventData];
-};
+}>;
 /**
  * Fired when a key has been released.
  *
@@ -51,10 +52,10 @@ export type ViewDocumentKeyDownEvent = {
  * @see module:engine/view/observer/keyobserver~KeyObserver
  * @eventName module:engine/view/document~ViewDocument#keyup
  */
-export type ViewDocumentKeyUpEvent = {
+export type ViewDocumentKeyUpEvent = BubblingEvent<{
     name: 'keyup';
     args: [data: ViewDocumentKeyEventData];
-};
+}>;
 /**
  * The value of both events - {@link ~ViewDocumentKeyDownEvent} and {@link ~ViewDocumentKeyUpEvent}.
  */

package/src/view/placeholder.js

@@ -197,6 +197,18 @@ function updateDocumentPlaceholders(placeholders, writer) {
             continue;
         }
         const hostElement = getChildPlaceholderHostSubstitute(element);
+        // If host element changed, remove the placeholder from the previous one.
+        // This can happen when user replaces the first child element of the parent element
+        // with new one, but the previous one is still in the view tree.
+        // See:
+        // https://github.com/ckeditor/ckeditor5/issues/14354
+        // https://github.com/ckeditor/ckeditor5/issues/18149
+        if (hostElement !== config.hostElement && config.hostElement) {
+            writer.removeAttribute('data-placeholder', config.hostElement);
+            hideViewPlaceholder(writer, config.hostElement);
+            config.hostElement = null;
+            wasViewModified = true;
+        }
         // When not a direct host, it could happen that there is no child element
         // capable of displaying a placeholder.
         if (!hostElement) {