@elementor/editor-elements 4.0.0-543 → 4.0.0-545

package/src/sync/duplicate-element.ts

@@ -1,6 +1,5 @@
 import { __privateRunCommandSync as runCommandSync } from '@elementor/editor-v1-adapters';
 
-import { getContainer } from './get-container';
 import { type V1Element } from './types';
 
 type Options = {
@@ -10,23 +9,16 @@ type Options = {
 };
 
 export type DuplicateElementParams = {
-	elementId: string;
+	element: V1Element;
 	options?: Options;
 };
 
-export function duplicateElement( { elementId, options = {} }: DuplicateElementParams ): V1Element {
-	const elementToDuplicate = getContainer( elementId );
-
-	if ( ! elementToDuplicate ) {
-		throw new Error( `Element with ID "${ elementId }" not found` );
-	}
-
-	// Get the position after the original element (only when cloning)
-	const currentIndex = elementToDuplicate.view?._index ?? 0;
+export function duplicateElement( { element, options = {} }: DuplicateElementParams ): V1Element {
+	const currentIndex = element.view?._index ?? 0;
 	const insertPosition = options.clone !== false ? currentIndex + 1 : undefined;
 
 	return runCommandSync< V1Element >( 'document/elements/duplicate', {
-		container: elementToDuplicate,
+		container: element,
 		options: { at: insertPosition, edit: false, ...options },
 	} );
 }

package/src/sync/duplicate-elements.ts

@@ -5,7 +5,7 @@ import { createElement } from './create-element';
 import { deleteElement } from './delete-element';
 import { duplicateElement } from './duplicate-element';
 import { getContainer } from './get-container';
-import { type V1ElementModelProps } from './types';
+import { type V1Element, type V1ElementModelProps } from './types';
 
 type DuplicateElementsParams = {
 	elementIds: string[];
@@ -16,11 +16,9 @@ type DuplicateElementsParams = {
 };
 
 type DuplicatedElement = {
-	id: string;
+	container: V1Element;
+	parentContainer: V1Element;
 	model: V1ElementModelProps;
-	originalElementId: string;
-	modelToRestore?: V1ElementModelProps;
-	parentContainerId?: string;
 	at?: number;
 };
 
@@ -40,38 +38,40 @@ export const duplicateElements = ( {
 	const undoableDuplicate = undoable(
 		{
 			do: ( { elementIds: elementIdsToDuplicate }: { elementIds: string[] } ): DuplicatedElementsResult => {
-				// Call onCreate before duplicating elements to avoid conflicts between commands
 				onDuplicateElements?.();
-				const duplicatedElements: DuplicatedElement[] = elementIdsToDuplicate.reduce( ( acc, elementId ) => {
+				const duplicatedElements: DuplicatedElement[] = [];
+
+				elementIdsToDuplicate.forEach( ( elementId ) => {
 					const originalContainer = getContainer( elementId );
 
-					if ( originalContainer?.parent ) {
-						const duplicatedElement = duplicateElement( {
-							elementId,
-							options: { useHistory: false },
-						} );
+					if ( ! originalContainer?.parent ) {
+						return;
+					}
 
-						acc.push( {
-							id: duplicatedElement.id,
-							model: duplicatedElement.model.toJSON(),
-							originalElementId: elementId,
-							modelToRestore: duplicatedElement.model.toJSON(),
-							parentContainerId: duplicatedElement.parent?.id,
-							at: duplicatedElement.view?._index,
-						} );
+					const duplicatedElement = duplicateElement( {
+						element: originalContainer,
+						options: { useHistory: false },
+					} );
+
+					if ( ! duplicatedElement.parent ) {
+						return;
 					}
 
-					return acc;
-				}, [] as DuplicatedElement[] );
+					duplicatedElements.push( {
+						container: duplicatedElement,
+						parentContainer: duplicatedElement.parent,
+						model: duplicatedElement.model.toJSON(),
+						at: duplicatedElement.view?._index,
+					} );
+				} );
 
 				return { duplicatedElements };
 			},
 			undo: ( _: { elementIds: string[] }, { duplicatedElements }: DuplicatedElementsResult ) => {
 				onRestoreElements?.();
-				// Delete duplicated elements in reverse order to avoid dependency issues
-				[ ...duplicatedElements ].reverse().forEach( ( { id } ) => {
+				[ ...duplicatedElements ].reverse().forEach( ( { container } ) => {
 					deleteElement( {
-						elementId: id,
+						container,
 						options: { useHistory: false },
 					} );
 				} );
@@ -81,30 +81,26 @@ export const duplicateElements = ( {
 				{ duplicatedElements: previousElements }: DuplicatedElementsResult
 			): DuplicatedElementsResult => {
 				onDuplicateElements?.();
-				const duplicatedElements: DuplicatedElement[] = previousElements.reduce( ( acc, previousElement ) => {
-					if ( previousElement.modelToRestore && previousElement.parentContainerId ) {
+				const duplicatedElements: DuplicatedElement[] = [];
+
+				previousElements.forEach( ( { parentContainer, model, at } ) => {
+					const freshParent = parentContainer.lookup?.();
+
+					if ( freshParent ) {
 						const createdElement = createElement( {
-							containerId: previousElement.parentContainerId,
-							model: previousElement.modelToRestore,
-							options: {
-								useHistory: false,
-								clone: false,
-								at: previousElement.at,
-							},
+							container: freshParent,
+							model,
+							options: { useHistory: false, clone: false, at },
 						} );
 
-						acc.push( {
-							id: createdElement.id,
-							model: createdElement.model.toJSON(),
-							originalElementId: previousElement.originalElementId,
-							modelToRestore: previousElement.modelToRestore,
-							parentContainerId: previousElement.parentContainerId,
-							at: previousElement.at,
+						duplicatedElements.push( {
+							container: createdElement,
+							parentContainer: freshParent,
+							model,
+							at,
 						} );
 					}
-
-					return acc;
-				}, [] as DuplicatedElement[] );
+				} );
 
 				return { duplicatedElements };
 			},

package/src/sync/{get-model.ts → model-utils.ts}

@@ -1,31 +1,17 @@
-import { type ExtendedWindow, type V1Element } from './types';
+import { type V1Element } from './types';
 
-type V1Model = V1Element[ 'model' ];
+export type V1Model = V1Element[ 'model' ];
+
+export type V1Collection = V1Model[] & {
+	remove: ( model: V1Model ) => void;
+	add: ( model: V1Model, options?: { at?: number }, silent?: boolean ) => void;
+	indexOf: ( model: V1Model ) => number;
+};
 
 export type ModelResult = {
 	model: V1Model;
 };
 
-export function getModel( id: string, parentModel?: V1Model ): ModelResult | null {
-	const extendedWindow = window as unknown as ExtendedWindow;
-	const container = extendedWindow.elementor?.getContainer?.( id ) ?? null;
-
-	if ( container ) {
-		return { model: container.model };
-	}
-
-	if ( parentModel ) {
-		const childModels = parentModel.get( 'elements' ) ?? [];
-		const model = childModels.find( ( m ) => m.get( 'id' ) === id );
-
-		if ( model ) {
-			return { model };
-		}
-	}
-
-	return null;
-}
-
 export function findChildRecursive( model: V1Model, predicate: ( model: V1Model ) => boolean ): ModelResult | null {
 	const childModels = ( model.get( 'elements' ) ?? [] ) as V1Model[];
 

package/src/sync/move-element.ts

@@ -1,6 +1,6 @@
 import { createElement } from './create-element';
 import { deleteElement } from './delete-element';
-import { getContainer } from './get-container';
+import { type V1Element } from './types';
 
 type Options = {
 	useHistory?: boolean;
@@ -9,35 +9,33 @@ type Options = {
 };
 
 export type MoveElementParams = {
-	elementId: string;
-	targetContainerId: string;
+	element: V1Element;
+	targetContainer: V1Element;
 	options?: Options;
 };
 
-export function moveElement( { elementId, targetContainerId, options = {} }: MoveElementParams ) {
-	const container = getContainer( elementId );
-	const target = getContainer( targetContainerId );
+export function moveElement( { element, targetContainer, options = {} }: MoveElementParams ): V1Element {
+	const resolvedElement = element.lookup?.();
+	const resolvedTarget = targetContainer.lookup?.();
 
-	if ( ! container ) {
-		throw new Error( `Element with ID "${ elementId }" not found` );
+	if ( ! resolvedElement ) {
+		throw new Error( `Element not found: ${ element.id }` );
 	}
 
-	if ( ! target ) {
-		throw new Error( `Target container with ID "${ targetContainerId }" not found` );
+	if ( ! resolvedTarget ) {
+		throw new Error( `Target container not found: ${ targetContainer.id }` );
 	}
 
-	const modelToRecreate = container.model.toJSON();
+	const modelToRecreate = resolvedElement.model.toJSON();
 
 	deleteElement( {
-		elementId,
-		// prevent inner history from being created
+		container: resolvedElement,
 		options: { ...options, useHistory: false },
 	} );
 
 	const newContainer = createElement( {
-		containerId: targetContainerId,
+		container: resolvedTarget,
 		model: modelToRecreate,
-		// prevent inner history from being created
 		options: { edit: false, ...options, useHistory: false },
 	} );
 

package/src/sync/move-elements.ts

@@ -1,36 +1,42 @@
 import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
-import { getContainer } from './get-container';
-import { moveElement, type MoveElementParams } from './move-element';
+import { moveElement } from './move-element';
 import { type V1Element } from './types';
 
+type MoveOptions = {
+	useHistory?: boolean;
+	at?: number;
+	edit?: boolean;
+};
+
+type MoveInput = {
+	element: V1Element;
+	targetContainer: V1Element;
+	options?: MoveOptions;
+};
+
 type MoveElementsParams = {
-	moves: MoveElementParams[];
+	moves: MoveInput[];
 	title: string;
 	subtitle?: string;
 	onMoveElements?: () => void;
 	onRestoreElements?: () => void;
 };
 
-type OriginalPosition = {
-	elementId: string;
-	originalContainerId: string;
-	originalIndex: number;
-};
-
 type MovedElement = {
-	elementId: string;
-	originalPosition: OriginalPosition;
-	move: MoveElementParams;
 	element: V1Element;
+	originalContainer: V1Element;
+	originalIndex: number;
+	targetContainer: V1Element;
+	options?: MoveOptions;
 };
 
 type MovedElementsResult = {
 	movedElements: MovedElement[];
 };
 
-export type { MoveElementsParams, MovedElement, MovedElementsResult };
+export type { MoveElementsParams, MoveInput, MovedElement, MovedElementsResult };
 
 export const moveElements = ( {
 	moves: movesToMake,
@@ -41,51 +47,60 @@ export const moveElements = ( {
 }: MoveElementsParams ): MovedElementsResult => {
 	const undoableMove = undoable(
 		{
-			do: ( { moves }: { moves: MoveElementParams[] } ): MovedElementsResult => {
+			do: ( { moves }: { moves: MoveInput[] } ): MovedElementsResult => {
 				const movedElements: MovedElement[] = [];
-				// Call onMoveElements before moving element to avoid conflicts between commands
 				onMoveElements?.();
-				moves.forEach( ( move ) => {
-					const { elementId } = move;
-					const sourceContainer = getContainer( elementId );
 
-					if ( ! sourceContainer ) {
-						throw new Error( `Element with ID "${ elementId }" not found` );
+				moves.forEach( ( { element, targetContainer, options } ) => {
+					const sourceElement = element.lookup?.() ?? element;
+					const target = targetContainer.lookup?.() ?? targetContainer;
+
+					if ( ! sourceElement ) {
+						throw new Error( 'Element not found' );
 					}
 
-					const originalContainerId = sourceContainer.parent?.id || '';
-					const originalIndex = sourceContainer.parent?.children?.indexOf( sourceContainer ) ?? -1;
+					if ( ! target ) {
+						throw new Error( 'Target container not found' );
+					}
 
-					const originalPosition: OriginalPosition = {
-						elementId,
-						originalContainerId,
-						originalIndex,
-					};
+					if ( ! sourceElement.parent ) {
+						throw new Error( 'Element has no parent container' );
+					}
+
+					const originalContainer = sourceElement.parent;
+					const originalIndex = originalContainer.children?.indexOf( sourceElement ) ?? -1;
 
-					const element = moveElement( {
-						...move,
-						options: { ...move.options, useHistory: false },
+					const newElement = moveElement( {
+						element: sourceElement,
+						targetContainer: target,
+						options: { ...options, useHistory: false },
 					} );
 
 					movedElements.push( {
-						elementId,
-						originalPosition,
-						move,
-						element,
+						element: newElement,
+						originalContainer,
+						originalIndex,
+						targetContainer: target,
+						options,
 					} );
 				} );
 
 				return { movedElements };
 			},
-			undo: ( _: { moves: MoveElementParams[] }, { movedElements }: MovedElementsResult ) => {
+			undo: ( _: { moves: MoveInput[] }, { movedElements }: MovedElementsResult ) => {
 				onRestoreElements?.();
 
-				[ ...movedElements ].reverse().forEach( ( { originalPosition } ) => {
-					const { elementId, originalContainerId, originalIndex } = originalPosition;
+				[ ...movedElements ].reverse().forEach( ( { element, originalContainer, originalIndex } ) => {
+					const freshElement = element.lookup?.();
+					const freshOriginalContainer = originalContainer.lookup?.();
+
+					if ( ! freshElement || ! freshOriginalContainer ) {
+						return;
+					}
 
 					moveElement( {
-						elementId,
-						targetContainerId: originalContainerId,
+						element: freshElement,
+						targetContainer: freshOriginalContainer,
 						options: {
 							useHistory: false,
 							at: originalIndex >= 0 ? originalIndex : undefined,
@@ -93,24 +108,31 @@ export const moveElements = ( {
 					} );
 				} );
 			},
-			redo: (
-				_: { moves: MoveElementParams[] },
-				{ movedElements }: MovedElementsResult
-			): MovedElementsResult => {
+			redo: ( _: { moves: MoveInput[] }, { movedElements }: MovedElementsResult ): MovedElementsResult => {
 				const newMovedElements: MovedElement[] = [];
 				onMoveElements?.();
 
-				movedElements.forEach( ( { move, originalPosition } ) => {
-					const element = moveElement( {
-						...move,
-						options: { ...move.options, useHistory: false },
+				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( {
-						elementId: move.elementId,
-						originalPosition,
-						move,
-						element,
+						element: newElement,
+						originalContainer: freshOriginalContainer,
+						originalIndex,
+						targetContainer: freshTarget,
+						options,
 					} );
 				} );
 

package/src/sync/remove-elements.ts

@@ -6,7 +6,7 @@ import { deleteElement } from './delete-element';
 import { getContainer } from './get-container';
 import { type V1Element, type V1ElementModelProps } from './types';
 
-type RemoveNestedElementsParams = {
+type RemoveElementsParams = {
 	elementIds: string[];
 	title: string;
 	subtitle?: string;
@@ -15,26 +15,23 @@ type RemoveNestedElementsParams = {
 };
 
 type RemovedElement = {
-	elementId: string;
+	container: V1Element;
+	parent: V1Element;
 	model: V1ElementModelProps;
-	parent: V1Element | null;
 	at: number;
 };
 
 type RemovedElementsResult = {
-	elementIds: string[];
 	removedElements: RemovedElement[];
 };
 
-export type { RemoveNestedElementsParams, RemovedElement, RemovedElementsResult };
-
 export const removeElements = ( {
 	elementIds,
 	title,
 	subtitle = __( 'Item removed', 'elementor' ),
 	onRemoveElements,
 	onRestoreElements,
-}: RemoveNestedElementsParams ): RemovedElementsResult => {
+}: RemoveElementsParams ): RemovedElementsResult => {
 	const undoableRemove = undoable(
 		{
 			do: ( { elementIds: elementIdsParam }: { elementIds: string[] } ): RemovedElementsResult => {
@@ -43,41 +40,36 @@ export const removeElements = ( {
 				elementIdsParam.forEach( ( elementId ) => {
 					const container = getContainer( elementId );
 
-					if ( container ) {
-						const model = container.model.toJSON();
-						const parent = container.parent;
-
-						const at = container.view?._index ?? 0;
-
+					if ( container?.parent ) {
 						removedElements.push( {
-							elementId,
-							model,
-							parent: parent ?? null,
-							at,
+							container,
+							parent: container.parent,
+							model: container.model.toJSON(),
+							at: container.view?._index ?? 0,
 						} );
 					}
 				} );
 
-				// Call onRemoveElements before deleting elements to avoid conflicts between commands
 				onRemoveElements?.();
 
-				elementIdsParam.forEach( ( elementId ) => {
+				removedElements.forEach( ( { container } ) => {
 					deleteElement( {
-						elementId,
+						container,
 						options: { useHistory: false },
 					} );
 				} );
 
-				return { elementIds: elementIdsParam, removedElements };
+				return { removedElements };
 			},
 			undo: ( _: { elementIds: string[] }, { removedElements }: RemovedElementsResult ) => {
 				onRestoreElements?.();
 
-				// Restore elements in reverse order to maintain proper hierarchy
-				[ ...removedElements ].reverse().forEach( ( { model, parent, at } ) => {
-					if ( parent && model ) {
+				[ ...removedElements ].reverse().forEach( ( { parent, model, at } ) => {
+					const freshParent = parent.lookup?.();
+
+					if ( freshParent ) {
 						createElement( {
-							containerId: parent.id,
+							container: freshParent,
 							model,
 							options: { useHistory: false, at },
 						} );
@@ -86,18 +78,34 @@ export const removeElements = ( {
 			},
 			redo: (
 				_: { elementIds: string[] },
-				{ elementIds: originalElementIds, removedElements }: RemovedElementsResult
+				{ removedElements }: RemovedElementsResult
 			): RemovedElementsResult => {
 				onRemoveElements?.();
 
-				originalElementIds.forEach( ( elementId ) => {
+				const newRemovedElements: RemovedElement[] = [];
+
+				removedElements.forEach( ( { container, parent, model, at } ) => {
+					const freshContainer = container.lookup?.();
+					const freshParent = parent.lookup?.();
+
+					if ( ! freshContainer || ! freshParent ) {
+						return;
+					}
+
 					deleteElement( {
-						elementId,
+						container: freshContainer,
 						options: { useHistory: false },
 					} );
+
+					newRemovedElements.push( {
+						container: freshContainer,
+						parent: freshParent,
+						model,
+						at,
+					} );
 				} );
 
-				return { elementIds: originalElementIds, removedElements };
+				return { removedElements: newRemovedElements };
 			},
 		},
 		{

package/src/sync/replace-element.ts

@@ -2,10 +2,10 @@ import { ElementIndexNotFoundError, ElementNotFoundError, ElementParentNotFoundE
 import { createElement } from './create-element';
 import { deleteElement } from './delete-element';
 import { getContainer } from './get-container';
-import { type V1ElementData, type V1ElementModelProps } from './types';
+import { type V1Element, type V1ElementData, type V1ElementModelProps } from './types';
 
 type ElementLocation = {
-	containerId: string;
+	container: V1Element;
 	index: number;
 };
 
@@ -16,59 +16,58 @@ type ReplaceElementArgs = {
 };
 
 export const replaceElement = async ( { currentElement, newElement, withHistory = true }: ReplaceElementArgs ) => {
-	const { containerId, index } = getNewElementContainer( currentElement, newElement );
+	const currentElementContainer = getContainer( currentElement.id );
+
+	if ( ! currentElementContainer ) {
+		throw new ElementNotFoundError( { context: { elementId: currentElement.id } } );
+	}
+
+	const { container, index } = getNewElementContainer( currentElementContainer, newElement );
 
 	const newElementInstance = createElement( {
-		containerId,
+		container,
 		model: newElement,
 		options: { at: index, useHistory: withHistory },
 	} );
 
-	await deleteElement( { elementId: currentElement.id, options: { useHistory: withHistory } } );
+	await deleteElement( { container: currentElementContainer, options: { useHistory: withHistory } } );
 
 	return newElementInstance;
 };
 
 function getNewElementContainer(
-	currentElement: V1ElementData,
+	currentElementContainer: V1Element,
 	newElement: Omit< V1ElementModelProps, 'id' >
 ): ElementLocation {
-	const currentElementContainer = getContainer( currentElement.id );
-
-	if ( ! currentElementContainer ) {
-		throw new ElementNotFoundError( { context: { elementId: currentElement.id } } );
-	}
-
 	const { parent } = currentElementContainer;
 
 	if ( ! parent ) {
-		throw new ElementParentNotFoundError( { context: { elementId: currentElement.id } } );
+		throw new ElementParentNotFoundError( { context: { elementId: currentElementContainer.id } } );
 	}
 
 	const elementIndex = currentElementContainer.view?._index ?? 0;
 
 	if ( elementIndex === -1 ) {
-		throw new ElementIndexNotFoundError( { context: { elementId: currentElement.id } } );
+		throw new ElementIndexNotFoundError( { context: { elementId: currentElementContainer.id } } );
 	}
 
-	let container = { containerId: parent.id, index: elementIndex };
+	let location: ElementLocation = { container: parent, index: elementIndex };
 
-	// If the element is at document top level and is a widget, wrap it with an empty container
 	if ( parent.id === 'document' && newElement.elType === 'widget' ) {
-		container = createWrapperForWidget( parent.id, elementIndex );
+		location = createWrapperForWidget( parent, elementIndex );
 	}
 
-	return container;
+	return location;
 }
 
 const DEFAULT_CONTAINER_TYPE = 'e-flexbox';
 
-function createWrapperForWidget( parentId: string, elementIndex: number ): ElementLocation {
+function createWrapperForWidget( parent: V1Element, elementIndex: number ): ElementLocation {
 	const container = createElement( {
-		containerId: parentId,
+		container: parent,
 		model: { elType: DEFAULT_CONTAINER_TYPE },
 		options: { at: elementIndex, useHistory: false },
 	} );
 
-	return { containerId: container.id, index: 0 };
+	return { container, index: 0 };
 }

package/src/sync/types.ts

@@ -42,6 +42,7 @@ export type V1Element = {
 		};
 	};
 	parent?: V1Element;
+	lookup?: () => V1Element;
 };
 
 export type StringPropValue = {