@elementor/editor-elements 3.32.0-70 → 3.32.0-71

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-elements",
   "description": "This package contains the elements model for the Elementor editor",
-  "version": "3.32.0-70",
+  "version": "3.32.0-71",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,10 +40,11 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-props": "3.32.0-70",
-    "@elementor/editor-styles": "3.32.0-70",
-    "@elementor/editor-v1-adapters": "3.32.0-70",
-    "@elementor/utils": "3.32.0-70"
+    "@elementor/editor-props": "3.32.0-71",
+    "@elementor/editor-styles": "3.32.0-71",
+    "@elementor/editor-v1-adapters": "3.32.0-71",
+    "@elementor/utils": "3.32.0-71",
+    "@wordpress/i18n": "^3.1.0"
   },
   "peerDependencies": {
     "react": "^18.3.1"

package/src/hooks/use-element-children.ts

@@ -24,19 +24,21 @@ export function useElementChildren< T extends ElementChildren >(
 		() => {
 			const container = getContainer( elementId );
 
-			const children = container?.children || [];
+			const elementChildren = childrenTypes.reduce( ( acc, type ) => {
+				acc[ type ] = [];
 
-			return childrenTypes.reduce( ( acc, type ) => {
-				const childElements = children
-					.filter( ( child ) => child.model?.get( 'widgetType' ) === type )
-					.map( ( child ) => ( { id: child.id } ) );
+				return acc;
+			}, {} as ElementChildren );
+
+			container?.children?.forEachRecursive?.( ( { model, id } ) => {
+				const widgetType = model.get( 'widgetType' );
 
-				if ( childElements ) {
-					acc[ type ] = childElements;
+				if ( widgetType && widgetType in elementChildren ) {
+					elementChildren[ widgetType ].push( { id } );
 				}
+			} );
 
-				return acc;
-			}, {} as ElementChildren );
+			return elementChildren;
 		},
 		[ elementId ]
 	) as T;

package/src/index.ts

@@ -10,8 +10,10 @@ export { useParentElement } from './hooks/use-parent-element';
 export { useElementChildren, type ElementChildren } from './hooks/use-element-children';
 
 // utils
-export { createElement } from './sync/create-element';
+export { createElement, type CreateElementParams } from './sync/create-element';
+export { createElements } from './sync/create-elements';
 export { deleteElement } from './sync/delete-element';
+export { removeElements } from './sync/remove-elements';
 export { getContainer, selectElement } from './sync/get-container';
 export { getElementSetting, getElementSettings } from './sync/get-element-setting';
 export { getElementStyles } from './sync/get-element-styles';
@@ -21,6 +23,7 @@ export { getCurrentDocumentId } from './sync/get-current-document-id';
 export { getSelectedElements } from './sync/get-selected-elements';
 export { getWidgetsCache } from './sync/get-widgets-cache';
 export { updateElementSettings, type UpdateElementSettingsArgs } from './sync/update-element-settings';
+export { generateElementId } from './sync/generate-element-id';
 
 export { ELEMENT_STYLE_CHANGE_EVENT, styleRerenderEvents } from './styles/consts';
 export {

package/src/sync/create-element.ts

@@ -5,21 +5,18 @@ import { type V1Element, type V1ElementSettingsProps } from './types';
 
 type Options = {
 	useHistory?: boolean;
+	at?: number;
 };
 
-export function createElement( {
-	containerId,
-	settings,
-	type,
-	id,
-	options,
-}: {
+export type CreateElementParams = {
 	settings: V1ElementSettingsProps;
 	type: string;
 	containerId: string;
 	id?: string;
 	options?: Options;
-} ) {
+};
+
+export function createElement( { containerId, settings, type, id, options }: CreateElementParams ) {
 	const container = getContainer( containerId );
 	const model = createElementModel( { settings, type, id } );
 

package/src/sync/create-elements.ts

@@ -0,0 +1,101 @@
+import { undoable } from '@elementor/editor-v1-adapters';
+import { __ } from '@wordpress/i18n';
+
+import { createElement, type CreateElementParams } from './create-element';
+import { deleteElement } from './delete-element';
+import { getContainer } from './get-container';
+import { type V1ElementModelProps } from './types';
+
+type CreateNestedElementsParams = {
+	elements: CreateElementParams[];
+	title: string;
+	subtitle?: string;
+};
+
+type CreatedElement = {
+	elementId: string;
+	model: V1ElementModelProps;
+	createParams: CreateElementParams;
+};
+
+type CreatedElementsResult = {
+	createdElements: CreatedElement[];
+};
+
+export type { CreateNestedElementsParams, CreatedElement, CreatedElementsResult };
+
+export const createElements = ( {
+	elements,
+	title,
+	subtitle = __( 'Item added', 'elementor' ),
+}: CreateNestedElementsParams ): CreatedElementsResult => {
+	const undoableCreate = undoable(
+		{
+			do: ( { elements: elementsParam }: { elements: CreateElementParams[] } ): CreatedElementsResult => {
+				const createdElements: CreatedElement[] = [];
+
+				elementsParam.forEach( ( createParams ) => {
+					const { options, ...elementParams } = createParams;
+					const element = createElement( {
+						...elementParams,
+						options: { ...options, useHistory: false },
+					} );
+
+					const elementId = element.id;
+
+					createdElements.push( {
+						elementId,
+						model: element.model?.toJSON() || {},
+						createParams: {
+							...createParams,
+							id: elementId,
+						},
+					} );
+				} );
+
+				return { createdElements };
+			},
+			undo: ( _: { elements: CreateElementParams[] }, { createdElements }: CreatedElementsResult ) => {
+				// Delete elements in reverse order to avoid dependency issues
+				[ ...createdElements ].reverse().forEach( ( { elementId } ) => {
+					deleteElement( {
+						elementId,
+						options: { useHistory: false },
+					} );
+				} );
+			},
+			redo: (
+				_: { elements: CreateElementParams[] },
+				{ createdElements }: CreatedElementsResult
+			): CreatedElementsResult => {
+				const newElements: CreatedElement[] = [];
+
+				createdElements.forEach( ( { createParams } ) => {
+					const element = createElement( {
+						...createParams,
+						options: { ...createParams.options, useHistory: false },
+					} );
+
+					const elementId = element.id;
+
+					const container = getContainer( elementId );
+					if ( container ) {
+						newElements.push( {
+							elementId,
+							model: container.model.toJSON(),
+							createParams,
+						} );
+					}
+				} );
+
+				return { createdElements: newElements };
+			},
+		},
+		{
+			title,
+			subtitle,
+		}
+	);
+
+	return undoableCreate( { elements } );
+};

package/src/sync/delete-element.ts

@@ -4,9 +4,10 @@ import { getContainer } from './get-container';
 
 type Options = {
 	useHistory?: boolean;
+	at?: number;
 };
 
-export function deleteElement( { elementId, options }: { elementId: string; options?: Options } ): void {
+export function deleteElement( { elementId, options = {} }: { elementId: string; options?: Options } ): void {
 	const container = getContainer( elementId );
 
 	if ( ! container ) {

package/src/sync/generate-element-id.ts

@@ -0,0 +1,10 @@
+import { type ExtendedWindow } from './types';
+
+export const generateElementId = () => {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	return (
+		extendedWindow.elementorCommon?.helpers?.getUniqueId?.() ??
+		`el-${ Date.now() }-${ Math.random().toString( 36 ).substring( 2, 9 ) }`
+	);
+};

package/src/sync/remove-elements.ts

@@ -0,0 +1,101 @@
+import { undoable } from '@elementor/editor-v1-adapters';
+import { __ } from '@wordpress/i18n';
+
+import { createElement } from './create-element';
+import { deleteElement } from './delete-element';
+import { getContainer } from './get-container';
+import { type V1Element, type V1ElementModelProps } from './types';
+
+type RemoveNestedElementsParams = {
+	elementIds: string[];
+	title: string;
+	subtitle?: string;
+};
+
+type RemovedElement = {
+	elementId: string;
+	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' ),
+}: RemoveNestedElementsParams ): RemovedElementsResult => {
+	const undoableRemove = undoable(
+		{
+			do: ( { elementIds: elementIdsParam }: { elementIds: string[] } ): RemovedElementsResult => {
+				const removedElements: RemovedElement[] = [];
+
+				elementIdsParam.forEach( ( elementId ) => {
+					const container = getContainer( elementId );
+
+					if ( container ) {
+						const model = container.model.toJSON();
+						const parent = container.parent;
+
+						const at = container.view?._index ?? 0;
+
+						removedElements.push( {
+							elementId,
+							model,
+							parent: parent ?? null,
+							at,
+						} );
+					}
+				} );
+
+				elementIdsParam.forEach( ( elementId ) => {
+					deleteElement( {
+						elementId,
+						options: { useHistory: false },
+					} );
+				} );
+
+				return { elementIds: elementIdsParam, removedElements };
+			},
+			undo: ( _: { elementIds: string[] }, { removedElements }: RemovedElementsResult ) => {
+				// Restore elements in reverse order to maintain proper hierarchy
+				[ ...removedElements ].reverse().forEach( ( { model, parent, at } ) => {
+					if ( parent && model ) {
+						createElement( {
+							containerId: parent.id,
+							settings: model.settings || {},
+							type: model.widgetType || model.elType,
+							id: model.id,
+							options: { useHistory: false, at },
+						} );
+					}
+				} );
+			},
+			redo: (
+				_: { elementIds: string[] },
+				{ elementIds: originalElementIds, removedElements }: RemovedElementsResult
+			): RemovedElementsResult => {
+				originalElementIds.forEach( ( elementId ) => {
+					deleteElement( {
+						elementId,
+						options: { useHistory: false },
+					} );
+				} );
+
+				return { elementIds: originalElementIds, removedElements };
+			},
+		},
+		{
+			title,
+			subtitle,
+		}
+	);
+
+	return undoableRemove( { elementIds } );
+};

package/src/sync/types.ts

@@ -19,15 +19,24 @@ export type ExtendedWindow = Window & {
 		};
 		getContainer?: ( id: string ) => V1Element | undefined;
 	};
+	elementorCommon?: {
+		helpers?: {
+			getUniqueId?: () => string;
+		};
+	};
 };
 
 export type V1Element = {
 	id: string;
 	model: V1Model< V1ElementModelProps >;
 	settings: V1Model< V1ElementSettingsProps >;
-	children?: V1Element[];
+	children?: V1Element[] & {
+		findRecursive?: ( predicate: ( child: V1Element ) => boolean ) => V1Element | undefined;
+		forEachRecursive?: ( callback: ( child: V1Element ) => void ) => V1Element[];
+	};
 	view?: {
 		el?: HTMLElement;
+		_index?: number;
 		getDomElement?: () => {
 			get?: ( index: number ) => HTMLElement | undefined;
 		};