@elementor/editor-elements 4.1.0-726 → 4.1.0-727

package/src/sync/move-elements.ts

@@ -2,6 +2,7 @@ import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import { moveElement } from './move-element';
+import { resolveContainer } from './resolve-element';
 import { type V1Element } from './types';
 
 type MoveOptions = {
@@ -30,6 +31,9 @@ type MovedElement = {
 	originalIndex: number;
 	targetContainer: V1Element;
 	options?: MoveOptions;
+	elementId: string;
+	originalContainerId: string;
+	targetContainerId: string;
 };
 
 type MovedElementsResult = {
@@ -82,6 +86,9 @@ export const moveElements = ( {
 						originalIndex,
 						targetContainer: target,
 						options,
+						elementId: newElement.id,
+						originalContainerId: originalContainer.id,
+						targetContainerId: target.id,
 					} );
 				} );
 
@@ -90,51 +97,68 @@ export const moveElements = ( {
 			undo: ( _: { moves: MoveInput[] }, { movedElements }: MovedElementsResult ) => {
 				onRestoreElements?.();
 
-				[ ...movedElements ].reverse().forEach( ( { element, originalContainer, originalIndex } ) => {
-					const freshElement = element.lookup?.();
-					const freshOriginalContainer = originalContainer.lookup?.();
-
-					if ( ! freshElement || ! freshOriginalContainer ) {
-						return;
-					}
-
-					moveElement( {
-						element: freshElement,
-						targetContainer: freshOriginalContainer,
-						options: {
-							useHistory: false,
-							at: originalIndex >= 0 ? originalIndex : undefined,
-						},
+				// Fallback for async-rendered nested elements whose views may not exist yet (ED-22825).
+				[ ...movedElements ]
+					.reverse()
+					.forEach( ( { element, elementId, originalContainer, originalContainerId, originalIndex } ) => {
+						const freshElement = resolveContainer( element, elementId );
+						const freshOriginalContainer = resolveContainer( originalContainer, originalContainerId );
+
+						if ( ! freshElement || ! freshOriginalContainer ) {
+							return;
+						}
+
+						moveElement( {
+							element: freshElement,
+							targetContainer: freshOriginalContainer,
+							options: {
+								useHistory: false,
+								at: originalIndex >= 0 ? originalIndex : undefined,
+							},
+						} );
 					} );
-				} );
 			},
 			redo: ( _: { moves: MoveInput[] }, { movedElements }: MovedElementsResult ): MovedElementsResult => {
 				const newMovedElements: MovedElement[] = [];
 				onMoveElements?.();
 
-				movedElements.forEach( ( { element, originalContainer, originalIndex, targetContainer, options } ) => {
-					const freshElement = element.lookup?.();
-					const freshOriginalContainer = originalContainer.lookup?.();
-					const freshTarget = targetContainer.lookup?.();
-
-					if ( ! freshElement || ! freshOriginalContainer || ! freshTarget ) {
-						return;
-					}
-
-					const newElement = moveElement( {
-						element: freshElement,
-						targetContainer: freshTarget,
-						options: { ...options, useHistory: false },
-					} );
-
-					newMovedElements.push( {
-						element: newElement,
-						originalContainer: freshOriginalContainer,
+				movedElements.forEach(
+					( {
+						element,
+						elementId,
+						originalContainer,
+						originalContainerId,
 						originalIndex,
-						targetContainer: freshTarget,
+						targetContainer,
+						targetContainerId,
 						options,
-					} );
-				} );
+					} ) => {
+						const freshElement = resolveContainer( element, elementId );
+						const freshOriginalContainer = resolveContainer( originalContainer, originalContainerId );
+						const freshTarget = resolveContainer( targetContainer, targetContainerId );
+
+						if ( ! freshElement || ! freshOriginalContainer || ! freshTarget ) {
+							return;
+						}
+
+						const newElement = moveElement( {
+							element: freshElement,
+							targetContainer: freshTarget,
+							options: { ...options, useHistory: false },
+						} );
+
+						newMovedElements.push( {
+							element: newElement,
+							originalContainer: freshOriginalContainer,
+							originalIndex,
+							targetContainer: freshTarget,
+							options,
+							elementId: newElement.id,
+							originalContainerId: freshOriginalContainer.id,
+							targetContainerId: freshTarget.id,
+						} );
+					}
+				);
 
 				return { movedElements: newMovedElements };
 			},

package/src/sync/remove-elements.ts

@@ -4,6 +4,7 @@ import { __ } from '@wordpress/i18n';
 import { createElement } from './create-element';
 import { deleteElement } from './delete-element';
 import { getContainer } from './get-container';
+import { addModelToParent, removeModelFromParent, resolveContainer } from './resolve-element';
 import { type V1Element, type V1ElementModelProps } from './types';
 
 type RemoveElementsParams = {
@@ -19,6 +20,8 @@ type RemovedElement = {
 	parent: V1Element;
 	model: V1ElementModelProps;
 	at: number;
+	containerId: string;
+	parentId: string;
 };
 
 type RemovedElementsResult = {
@@ -46,6 +49,8 @@ export const removeElements = ( {
 							parent: container.parent,
 							model: container.model.toJSON(),
 							at: container.view?._index ?? 0,
+							containerId: container.id,
+							parentId: container.parent.id,
 						} );
 					}
 				} );
@@ -64,8 +69,8 @@ export const removeElements = ( {
 			undo: ( _: { elementIds: string[] }, { removedElements }: RemovedElementsResult ) => {
 				onRestoreElements?.();
 
-				[ ...removedElements ].reverse().forEach( ( { parent, model, at } ) => {
-					const freshParent = parent.lookup?.();
+				[ ...removedElements ].reverse().forEach( ( { parent, parentId, model, at } ) => {
+					const freshParent = resolveContainer( parent, parentId );
 
 					if ( freshParent ) {
 						createElement( {
@@ -73,7 +78,11 @@ export const removeElements = ( {
 							model,
 							options: { useHistory: false, at },
 						} );
+
+						return;
 					}
+
+					addModelToParent( parentId, model, { at } );
 				} );
 			},
 			redo: (
@@ -84,24 +93,37 @@ export const removeElements = ( {
 
 				const newRemovedElements: RemovedElement[] = [];
 
-				removedElements.forEach( ( { container, parent, model, at } ) => {
-					const freshContainer = container.lookup?.();
-					const freshParent = parent.lookup?.();
+				removedElements.forEach( ( { container, parent, model, at, containerId, parentId } ) => {
+					const freshContainer = resolveContainer( container, containerId );
+					const freshParent = resolveContainer( parent, parentId );
+
+					if ( freshContainer && freshParent ) {
+						deleteElement( {
+							container: freshContainer,
+							options: { useHistory: false },
+						} );
+
+						newRemovedElements.push( {
+							container: freshContainer,
+							parent: freshParent,
+							model,
+							at,
+							containerId,
+							parentId,
+						} );
 
-					if ( ! freshContainer || ! freshParent ) {
 						return;
 					}
 
-					deleteElement( {
-						container: freshContainer,
-						options: { useHistory: false },
-					} );
+					removeModelFromParent( parentId, containerId );
 
 					newRemovedElements.push( {
-						container: freshContainer,
-						parent: freshParent,
+						container,
+						parent,
 						model,
 						at,
+						containerId,
+						parentId,
 					} );
 				} );
 

package/src/sync/resolve-element.ts

@@ -0,0 +1,50 @@
+import { getContainer } from './get-container';
+import { type BackboneModel, type ExtendedWindow, type V1Element, type V1ElementModelProps } from './types';
+
+function isConnected( container: V1Element | null | undefined ): container is V1Element {
+	if ( ! container ) {
+		return false;
+	}
+
+	if ( ! container.view?.el ) {
+		return true;
+	}
+
+	return container.view.el.isConnected;
+}
+
+export function resolveContainer( container: V1Element, id: string ): V1Element | null {
+	const looked = container.lookup?.();
+
+	if ( isConnected( looked ) ) {
+		return looked;
+	}
+
+	const byId = getContainer( id );
+
+	if ( isConnected( byId ) ) {
+		return byId;
+	}
+
+	return null;
+}
+
+function getDocumentUtils() {
+	return ( window as unknown as ExtendedWindow ).$e?.components?.get?.( 'document' )?.utils;
+}
+
+export function findModelInDocument( id: string ): BackboneModel | null {
+	return getDocumentUtils()?.findModelById?.( id ) ?? null;
+}
+
+export function addModelToParent(
+	parentId: string,
+	childData: V1ElementModelProps,
+	options?: { at?: number }
+): boolean {
+	return getDocumentUtils()?.addModelToParent?.( parentId, childData, options ) ?? false;
+}
+
+export function removeModelFromParent( parentId: string, childId: string ): boolean {
+	return getDocumentUtils()?.removeModelFromParent?.( parentId, childId ) ?? false;
+}

package/src/sync/types.ts

@@ -4,6 +4,17 @@ import { type ClassState, type StyleDefinition, type StyleDefinitionID } from '@
 import { type ControlItem, type PseudoState } from '../types';
 
 export type ExtendedWindow = Window & {
+	$e?: {
+		components?: {
+			get?: ( name: string ) => {
+				utils?: {
+					findModelById?: ( id: string, collection?: unknown ) => BackboneModel | null;
+					addModelToParent?: ( parentId: string, childData: unknown, options?: { at?: number } ) => boolean;
+					removeModelFromParent?: ( parentId: string, childId: string ) => boolean;
+				};
+			};
+		};
+	};
 	elementor?: {
 		selection?: {
 			getElements: () => V1Element[];
@@ -18,6 +29,9 @@ export type ExtendedWindow = Window & {
 			getCurrentId?: () => number;
 		};
 		getContainer?: ( id: string ) => V1Element | undefined;
+		helpers?: {
+			isAtomicWidget?: ( model: unknown ) => boolean;
+		};
 	};
 	elementorCommon?: {
 		helpers?: {
@@ -26,6 +40,19 @@ export type ExtendedWindow = Window & {
 	};
 };
 
+export type BackboneModel = {
+	get: ( key: string ) => unknown;
+	set: ( key: string, value: unknown ) => void;
+	toJSON: () => Record< string, unknown >;
+};
+
+export type BackboneCollection = {
+	models: BackboneModel[];
+	add: ( model: unknown, options?: Record< string, unknown > ) => void;
+	remove: ( model: BackboneModel, options?: Record< string, unknown > ) => void;
+	findWhere: ( attrs: Record< string, unknown > ) => BackboneModel | undefined;
+};
+
 export type V1Element = {
 	id: string;
 	model: V1Model< V1ElementModelProps >;