@elementor/editor-elements 3.33.0-98 → 3.35.0-324

package/src/mcp/handlers/get-element-props.ts

@@ -0,0 +1,28 @@
+import { getContainer } from '../../sync/get-container';
+import { getElementSettings } from '../../sync/get-element-setting';
+import { getElementType } from '../../sync/get-element-type';
+
+export function handleGetElementProps( elementId: string ): Record< string, unknown > {
+	const container = getContainer( elementId );
+
+	if ( ! container ) {
+		throw new Error( `Element with ID "${ elementId }" not found` );
+	}
+
+	const type = container.model.get( 'widgetType' ) || container.model.get( 'elType' );
+
+	if ( ! type ) {
+		throw new Error( `Element with ID "${ elementId }" has no type` );
+	}
+
+	const elementType = getElementType( type );
+
+	if ( ! elementType ) {
+		throw new Error( `Element type "${ type }" is not atomic` );
+	}
+
+	const propsSchema = elementType.propsSchema;
+	const propKeys = Object.keys( propsSchema );
+
+	return getElementSettings( elementId, propKeys );
+}

package/src/mcp/handlers/get-element-schema.ts

@@ -0,0 +1,17 @@
+import { type PropType } from '@elementor/editor-props';
+import { getStylesSchema } from '@elementor/editor-styles';
+
+import { getElementType } from '../../sync/get-element-type';
+import type { ElementType } from '../../types';
+
+export function handleGetElementSchema(
+	elementType: string
+): ElementType & { stylesSchema: Record< string, PropType > } {
+	const elementTypeData = getElementType( elementType );
+
+	if ( ! elementTypeData ) {
+		throw new Error( `Element type "${ elementType }" not found or is not atomic` );
+	}
+
+	return { ...elementTypeData, stylesSchema: getStylesSchema() };
+}

package/src/mcp/handlers/get-selected.ts

@@ -0,0 +1,5 @@
+import { getSelectedElements } from '../../sync/get-selected-elements';
+
+export function handleGetSelected(): Array< { id: string; type: string } > {
+	return getSelectedElements();
+}

package/src/mcp/handlers/get-styles.ts

@@ -0,0 +1,26 @@
+import { getElementStyles } from '../../sync/get-element-styles';
+
+export function handleGetStyles( elementId: string ): Record< string, unknown > | null {
+	const styles = getElementStyles( elementId );
+
+	if ( ! styles ) {
+		return null;
+	}
+
+	// Convert to plain object for JSON serialization
+	return Object.fromEntries(
+		Object.entries( styles ).map( ( [ id, style ] ) => [
+			id,
+			{
+				id: style.id,
+				label: style.label,
+				type: style.type,
+				variants: style.variants.map( ( variant ) => ( {
+					meta: variant.meta,
+					props: variant.props,
+					custom_css: variant.custom_css,
+				} ) ),
+			},
+		] )
+	);
+}

package/src/mcp/handlers/list-available-types.ts

@@ -0,0 +1,27 @@
+import { getWidgetsCache } from '../../sync/get-widgets-cache';
+
+export type AvailableElementType = {
+	type: string;
+	title: string;
+};
+
+export function handleListAvailableTypes(): AvailableElementType[] {
+	const widgetsCache = getWidgetsCache();
+
+	if ( ! widgetsCache ) {
+		return [];
+	}
+
+	const availableTypes: AvailableElementType[] = [];
+
+	Object.entries( widgetsCache ).forEach( ( [ type, config ] ) => {
+		if ( config?.atomic_controls && config?.atomic_props_schema ) {
+			availableTypes.push( {
+				type,
+				title: config.title || type,
+			} );
+		}
+	} );
+
+	return availableTypes;
+}

package/src/mcp/handlers/move-element.ts

@@ -0,0 +1,30 @@
+import { getContainer } from '../../sync/get-container';
+import { moveElement } from '../../sync/move-element';
+
+export function handleMoveElement( {
+	elementId,
+	targetContainerId,
+}: {
+	elementId: string;
+	targetContainerId: string;
+} ): { success: boolean } {
+	const container = getContainer( elementId );
+
+	if ( ! container ) {
+		throw new Error( `Element with ID "${ elementId }" not found` );
+	}
+
+	const targetContainer = getContainer( targetContainerId );
+
+	if ( ! targetContainer ) {
+		throw new Error( `Target container with ID "${ targetContainerId }" not found` );
+	}
+
+	moveElement( {
+		elementId,
+		targetContainerId,
+		options: { useHistory: true },
+	} );
+
+	return { success: true };
+}

package/src/mcp/handlers/select-element.ts

@@ -0,0 +1,25 @@
+import { getContainer, selectElement } from '../../sync/get-container';
+
+export function handleSelectElement( elementId: string ): { success: boolean } {
+	const container = getContainer( elementId );
+
+	if ( ! container ) {
+		throw new Error( `Element with ID "${ elementId }" not found` );
+	}
+
+	selectElement( elementId );
+
+	return { success: true };
+}
+
+export function handleSelectMultipleElements( elementIds: string[] ): { success: boolean } {
+	elementIds.forEach( ( elementId ) => {
+		const container = getContainer( elementId );
+
+		if ( container ) {
+			selectElement( elementId );
+		}
+	} );
+
+	return { success: true };
+}

package/src/mcp/handlers/update-props.ts

@@ -0,0 +1,22 @@
+import { type Props } from '@elementor/editor-props';
+
+import { getContainer } from '../../sync/get-container';
+import { updateElementSettings } from '../../sync/update-element-settings';
+
+export function handleUpdateProps( { elementId, props }: { elementId: string; props: Record< string, unknown > } ): {
+	success: boolean;
+} {
+	const container = getContainer( elementId );
+
+	if ( ! container ) {
+		throw new Error( `Element with ID "${ elementId }" not found` );
+	}
+
+	updateElementSettings( {
+		id: elementId,
+		props: props as Props,
+		withHistory: true,
+	} );
+
+	return { success: true };
+}

package/src/mcp/handlers/update-styles.ts

@@ -0,0 +1,45 @@
+import { type Props } from '@elementor/editor-props';
+import { type StyleDefinitionState } from '@elementor/editor-styles';
+
+import { updateElementStyle } from '../../styles/update-element-style';
+import { getElementStyles } from '../../sync/get-element-styles';
+import { resolveBreakpointId } from './common-style-utils';
+
+export function handleUpdateStyles( {
+	elementId,
+	styleId,
+	styles,
+	breakpoint = 'desktop',
+	state = null,
+}: {
+	elementId: string;
+	styleId?: string;
+	styles: Props;
+	breakpoint?: string | null;
+	state?: string | null;
+} ): { success: boolean } {
+	const resolvedBreakpoint = resolveBreakpointId( breakpoint );
+
+	const resolvedState: StyleDefinitionState =
+		state === null || state === undefined ? null : ( state as StyleDefinitionState );
+	const elementStyles = getElementStyles( elementId );
+
+	if ( ! elementStyles ) {
+		throw new Error( `Element with ID "${ elementId }" has no styles. Create a style first.` );
+	}
+
+	const resolvedStyleId = styleId || Object.keys( elementStyles )[ 0 ];
+
+	if ( ! resolvedStyleId ) {
+		throw new Error( `Element with ID "${ elementId }" has no styles. Create a style first.` );
+	}
+
+	updateElementStyle( {
+		elementId,
+		styleId: resolvedStyleId,
+		meta: { breakpoint: resolvedBreakpoint, state: resolvedState },
+		props: styles,
+	} );
+
+	return { success: true };
+}

package/src/mcp/index.ts

@@ -0,0 +1,9 @@
+import { getMCPByDomain } from '@elementor/editor-mcp';
+
+import { initElementsTool } from './elements-tool';
+
+export function initMcp() {
+	const { setMCPDescription } = getMCPByDomain( 'elements' );
+	setMCPDescription( 'Tools for managing atomic elements in Elementor v4 editor' );
+	initElementsTool();
+}

package/src/sync/delete-element.ts

@@ -7,14 +7,20 @@ type Options = {
 	at?: number;
 };
 
-export function deleteElement( { elementId, options = {} }: { elementId: string; options?: Options } ): void {
+export function deleteElement( {
+	elementId,
+	options = {},
+}: {
+	elementId: string;
+	options?: Options;
+} ): Promise< void > {
 	const container = getContainer( elementId );
 
 	if ( ! container ) {
 		throw new Error( `Element with ID "${ elementId }" not found` );
 	}
 
-	runCommand( 'document/elements/delete', {
+	return runCommand( 'document/elements/delete', {
 		container,
 		options,
 	} );

package/src/sync/drop-element.ts

@@ -0,0 +1,30 @@
+import { __privateRunCommandSync as runCommandSync } from '@elementor/editor-v1-adapters';
+
+import { getContainer } from './get-container';
+import { type V1Element, type V1ElementModelProps, type V1ElementSettingsProps } from './types';
+
+type Options = {
+	useHistory?: boolean;
+	at?: number;
+	scrollIntoView: boolean;
+};
+
+export type DropElementParams = {
+	containerId: string;
+	options?: Options;
+	model?: Omit< V1ElementModelProps, 'settings' | 'id' > & { settings?: V1ElementSettingsProps; id?: string };
+};
+
+export function dropElement( { containerId, model, options }: DropElementParams ) {
+	const container = getContainer( containerId );
+
+	if ( ! container ) {
+		throw new Error( `Container with ID "${ containerId }" not found` );
+	}
+
+	return runCommandSync< V1Element >( 'preview/drop', {
+		container,
+		model,
+		options,
+	} );
+}

package/src/sync/duplicate-elements.ts

@@ -11,7 +11,7 @@ type DuplicateElementsParams = {
 	elementIds: string[];
 	title: string;
 	subtitle?: string;
-	onCreate?: ( duplicatedElements: DuplicatedElement[] ) => DuplicatedElement[];
+	onCreate?: ( duplicatedElements: DuplicatedElement[] ) => void;
 };
 
 type DuplicatedElement = {
@@ -33,7 +33,6 @@ export const duplicateElements = ( {
 	elementIds,
 	title,
 	subtitle = __( 'Item duplicated', 'elementor' ),
-	onCreate,
 }: DuplicateElementsParams ): DuplicatedElementsResult => {
 	const undoableDuplicate = undoable(
 		{
@@ -60,7 +59,7 @@ export const duplicateElements = ( {
 					return acc;
 				}, [] as DuplicatedElement[] );
 
-				return { duplicatedElements: onCreate?.( duplicatedElements ) ?? duplicatedElements };
+				return { duplicatedElements };
 			},
 			undo: ( _: { elementIds: string[] }, { duplicatedElements }: DuplicatedElementsResult ) => {
 				// Delete duplicated elements in reverse order to avoid dependency issues
@@ -100,7 +99,7 @@ export const duplicateElements = ( {
 					return acc;
 				}, [] as DuplicatedElement[] );
 
-				return { duplicatedElements: onCreate?.( duplicatedElements ) ?? duplicatedElements };
+				return { duplicatedElements };
 			},
 		},
 		{

package/src/sync/get-current-document-container.ts

@@ -1,6 +1,6 @@
 import { type ExtendedWindow } from './types';
 
-export default function getCurrentDocumentContainer() {
+export function getCurrentDocumentContainer() {
 	const extendedWindow = window as unknown as ExtendedWindow;
 
 	return extendedWindow.elementor?.documents?.getCurrent?.()?.container ?? null;

package/src/sync/get-element-editor-settings.ts

@@ -0,0 +1,8 @@
+import { type ElementID } from '../types';
+import { getContainer } from './get-container';
+
+export function getElementEditorSettings( elementId: ElementID ) {
+	const container = getContainer( elementId );
+
+	return container?.model.get( 'editor_settings' ) ?? {};
+}

package/src/sync/get-element-interactions.ts

@@ -0,0 +1,15 @@
+import { type ElementID } from '../types';
+import { getContainer } from './get-container';
+import { type ElementInteractions } from './types';
+
+export function getElementInteractions( elementId: ElementID ): ElementInteractions | undefined {
+	const container = getContainer( elementId );
+
+	const interactions = container?.model?.get( 'interactions' );
+
+	if ( typeof interactions === 'string' ) {
+		return JSON.parse( interactions ) as ElementInteractions;
+	}
+
+	return interactions;
+}

package/src/sync/get-element-label.ts

@@ -2,8 +2,13 @@ import { ElementLabelNotExistsError, ElementTypeNotExistsError } from '../errors
 import { getContainer } from '../sync/get-container';
 import { getWidgetsCache } from '../sync/get-widgets-cache';
 import { type ElementID } from '../types';
+import { getSelectedElements } from './get-selected-elements';
+
+export function getElementLabel( elementId?: ElementID ) {
+	if ( ! elementId ) {
+		elementId = getSelectedElements()?.[ 0 ]?.id;
+	}
 
-export function getElementLabel( elementId: ElementID ) {
 	const container = getContainer( elementId );
 
 	const type = container?.model.get( 'widgetType' ) || container?.model.get( 'elType' );

package/src/sync/get-element-type.ts

@@ -0,0 +1,28 @@
+import { type ElementType } from '../types';
+import { getWidgetsCache } from './get-widgets-cache';
+
+export function getElementType( type: string ): ElementType | null {
+	if ( ! type ) {
+		return null;
+	}
+
+	const widgetsCache = getWidgetsCache();
+	const elementType = widgetsCache?.[ type ];
+
+	if ( ! elementType?.atomic_controls ) {
+		return null;
+	}
+
+	if ( ! elementType?.atomic_props_schema ) {
+		return null;
+	}
+
+	return {
+		key: type,
+		controls: elementType.atomic_controls,
+		propsSchema: elementType.atomic_props_schema,
+		dependenciesPerTargetMapping: elementType.dependencies_per_target_mapping ?? {},
+		title: elementType.title,
+		styleStates: elementType.atomic_style_states ?? [],
+	};
+}

package/src/sync/get-elements.ts

@@ -1,6 +1,6 @@
 import { type ElementID } from '../types';
 import { getContainer } from './get-container';
-import getCurrentDocumentContainer from './get-current-document-container';
+import { getCurrentDocumentContainer } from './get-current-document-container';
 import { type V1Element } from './types';
 
 export function getElements( root?: ElementID ): V1Element[] {

package/src/sync/get-widgets-cache.ts

@@ -1,7 +1,8 @@
-import { type ExtendedWindow } from './types';
+import { type ExtendedWindow, type V1ElementConfig } from '../sync/types.js';
+type WidgetsCache< T > = Record< string, T >;
 
-export function getWidgetsCache() {
+export function getWidgetsCache< T extends V1ElementConfig >(): WidgetsCache< T > | null {
 	const extendedWindow = window as unknown as ExtendedWindow;
 
-	return extendedWindow?.elementor?.widgetsCache || null;
+	return ( extendedWindow?.elementor?.widgetsCache as WidgetsCache< T > ) || null;
 }

package/src/sync/move-element.ts

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

package/src/sync/move-elements.ts

@@ -0,0 +1,127 @@
+import { undoable } from '@elementor/editor-v1-adapters';
+import { __ } from '@wordpress/i18n';
+
+import { getContainer } from './get-container';
+import { moveElement, type MoveElementParams } from './move-element';
+import { type V1Element } from './types';
+
+type MoveElementsParams = {
+	moves: MoveElementParams[];
+	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;
+};
+
+type MovedElementsResult = {
+	movedElements: MovedElement[];
+};
+
+export type { MoveElementsParams, MovedElement, MovedElementsResult };
+
+export const moveElements = ( {
+	moves: movesToMake,
+	title,
+	subtitle = __( 'Elements moved', 'elementor' ),
+	onMoveElements,
+	onRestoreElements,
+}: MoveElementsParams ): MovedElementsResult => {
+	const undoableMove = undoable(
+		{
+			do: ( { moves }: { moves: MoveElementParams[] } ): 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` );
+					}
+
+					const originalContainerId = sourceContainer.parent?.id || '';
+					const originalIndex = sourceContainer.parent?.children?.indexOf( sourceContainer ) ?? -1;
+
+					const originalPosition: OriginalPosition = {
+						elementId,
+						originalContainerId,
+						originalIndex,
+					};
+
+					const element = moveElement( {
+						...move,
+						options: { ...move.options, useHistory: false },
+					} );
+
+					movedElements.push( {
+						elementId,
+						originalPosition,
+						move,
+						element,
+					} );
+				} );
+
+				return { movedElements };
+			},
+			undo: ( _: { moves: MoveElementParams[] }, { movedElements }: MovedElementsResult ) => {
+				onRestoreElements?.();
+
+				[ ...movedElements ].reverse().forEach( ( { originalPosition } ) => {
+					const { elementId, originalContainerId, originalIndex } = originalPosition;
+
+					moveElement( {
+						elementId,
+						targetContainerId: originalContainerId,
+						options: {
+							useHistory: false,
+							at: originalIndex >= 0 ? originalIndex : undefined,
+						},
+					} );
+				} );
+			},
+			redo: (
+				_: { moves: MoveElementParams[] },
+				{ movedElements }: MovedElementsResult
+			): MovedElementsResult => {
+				const newMovedElements: MovedElement[] = [];
+				onMoveElements?.();
+
+				movedElements.forEach( ( { move, originalPosition } ) => {
+					const element = moveElement( {
+						...move,
+						options: { ...move.options, useHistory: false },
+					} );
+
+					newMovedElements.push( {
+						elementId: move.elementId,
+						originalPosition,
+						move,
+						element,
+					} );
+				} );
+
+				return { movedElements: newMovedElements };
+			},
+		},
+		{
+			title,
+			subtitle,
+		}
+	);
+
+	return undoableMove( { moves: movesToMake } );
+};

package/src/sync/remove-elements.ts

@@ -10,6 +10,8 @@ type RemoveNestedElementsParams = {
 	elementIds: string[];
 	title: string;
 	subtitle?: string;
+	onRemoveElements?: () => void;
+	onRestoreElements?: () => void;
 };
 
 type RemovedElement = {
@@ -30,6 +32,8 @@ export const removeElements = ( {
 	elementIds,
 	title,
 	subtitle = __( 'Item removed', 'elementor' ),
+	onRemoveElements,
+	onRestoreElements,
 }: RemoveNestedElementsParams ): RemovedElementsResult => {
 	const undoableRemove = undoable(
 		{
@@ -54,6 +58,9 @@ export const removeElements = ( {
 					}
 				} );
 
+				// Call onRemoveElements before deleting elements to avoid conflicts between commands
+				onRemoveElements?.();
+
 				elementIdsParam.forEach( ( elementId ) => {
 					deleteElement( {
 						elementId,
@@ -64,6 +71,8 @@ export const removeElements = ( {
 				return { elementIds: elementIdsParam, 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 ) {
@@ -79,6 +88,8 @@ export const removeElements = ( {
 				_: { elementIds: string[] },
 				{ elementIds: originalElementIds, removedElements }: RemovedElementsResult
 			): RemovedElementsResult => {
+				onRemoveElements?.();
+
 				originalElementIds.forEach( ( elementId ) => {
 					deleteElement( {
 						elementId,