@elementor/editor-elements 3.33.0-99 → 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-elements.ts

@@ -9,6 +9,8 @@ type MoveElementsParams = {
 	moves: MoveElementParams[];
 	title: string;
 	subtitle?: string;
+	onMoveElements?: () => void;
+	onRestoreElements?: () => void;
 };
 
 type OriginalPosition = {
@@ -34,12 +36,15 @@ 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 );
@@ -73,6 +78,8 @@ export const moveElements = ( {
 				return { movedElements };
 			},
 			undo: ( _: { moves: MoveElementParams[] }, { movedElements }: MovedElementsResult ) => {
+				onRestoreElements?.();
+
 				[ ...movedElements ].reverse().forEach( ( { originalPosition } ) => {
 					const { elementId, originalContainerId, originalIndex } = originalPosition;
 
@@ -91,6 +98,7 @@ export const moveElements = ( {
 				{ movedElements }: MovedElementsResult
 			): MovedElementsResult => {
 				const newMovedElements: MovedElement[] = [];
+				onMoveElements?.();
 
 				movedElements.forEach( ( { move, originalPosition } ) => {
 					const element = moveElement( {

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,

package/src/sync/replace-element.ts

@@ -1,31 +1,69 @@
+import { ElementIndexNotFoundError, ElementNotFoundError, ElementParentNotFoundError } from '../errors';
 import { createElement } from './create-element';
 import { deleteElement } from './delete-element';
 import { getContainer } from './get-container';
-import { type V1Element, type V1ElementModelProps } from './types';
+import { type V1ElementData, type V1ElementModelProps } from './types';
+
+type ElementLocation = {
+	containerId: string;
+	index: number;
+};
 
 type ReplaceElementArgs = {
-	currentElement: V1Element;
+	currentElement: V1ElementData;
 	newElement: Omit< V1ElementModelProps, 'id' >;
 	withHistory?: boolean;
 };
 
 export const replaceElement = ( { currentElement, newElement, withHistory = true }: ReplaceElementArgs ) => {
-	const parent = getContainer( currentElement.id )?.parent;
+	const { containerId, index } = getNewElementLocation( currentElement, newElement );
+
+	createElement( {
+		containerId,
+		model: newElement,
+		options: { at: index, useHistory: withHistory },
+	} );
+
+	deleteElement( { elementId: currentElement.id, options: { useHistory: withHistory } } );
+};
+
+function getNewElementLocation(
+	currentElement: V1ElementData,
+	newElement: Omit< V1ElementModelProps, 'id' >
+): ElementLocation {
+	let location: ElementLocation;
 
+	const currentElementContainer = getContainer( currentElement.id );
+	if ( ! currentElementContainer ) {
+		throw new ElementNotFoundError( { context: { elementId: currentElement.id } } );
+	}
+
+	const parent = currentElementContainer.parent;
 	if ( ! parent ) {
-		throw new Error( `Parent not found for element ${ currentElement.id }. Cannot replace element.` );
+		throw new ElementParentNotFoundError( { context: { elementId: currentElement.id } } );
 	}
 
-	const elementIndex = parent.children?.findIndex( ( child ) => child.id === currentElement.id );
+	const elementIndex = currentElementContainer.view?._index ?? 0;
 	if ( elementIndex === undefined || elementIndex === -1 ) {
-		throw new Error( `Element ${ currentElement.id } not found in parent container. Cannot replace element.` );
+		throw new ElementIndexNotFoundError( { context: { elementId: currentElement.id } } );
 	}
 
-	createElement( {
-		containerId: parent.id,
-		model: newElement,
-		options: { at: elementIndex, useHistory: withHistory },
+	location = { containerId: parent.id, 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' ) {
+		location = createWrapperForWidget( parent.id, elementIndex );
+	}
+
+	return location;
+}
+
+function createWrapperForWidget( parentId: string, elementIndex: number ): ElementLocation {
+	const container = createElement( {
+		containerId: parentId,
+		model: { elType: 'container' },
+		options: { at: elementIndex, useHistory: false },
 	} );
 
-	deleteElement( { elementId: currentElement.id, options: { useHistory: withHistory } } );
-};
+	return { containerId: container.id, index: 0 };
+}

package/src/sync/types.ts

@@ -1,5 +1,5 @@
 import { type PropsSchema, type PropValue } from '@elementor/editor-props';
-import { type StyleDefinition, type StyleDefinitionID } from '@elementor/editor-styles';
+import { type ClassState, type StyleDefinition, type StyleDefinitionID } from '@elementor/editor-styles';
 
 import { type ControlItem } from '../types';
 
@@ -44,19 +44,47 @@ export type V1Element = {
 	parent?: V1Element;
 };
 
+export type ElementInteractions = {
+	version: number;
+	items: InteractionItem[];
+};
+
+export type InteractionItem = {
+	interaction_id?: string;
+	animation: {
+		animation_type: string;
+		animation_id: string;
+	};
+};
+
 export type V1ElementModelProps = {
+	isLocked?: boolean;
 	widgetType?: string;
 	elType: string;
 	id: string;
 	styles?: Record< StyleDefinitionID, StyleDefinition >;
 	elements?: V1Model< V1ElementModelProps >[];
 	settings?: V1ElementSettingsProps;
+	editor_settings?: V1ElementEditorSettingsProps;
+	interactions?: string | ElementInteractions;
+};
+
+export type V1ElementData = Omit< V1ElementModelProps, 'elements' > & {
+	elements?: V1ElementData[];
+};
+
+export type V1ElementEditorSettingsProps = {
+	title?: string;
+	initial_position?: number;
+	component_uid?: string;
 };
 
 export type V1ElementSettingsProps = Record< string, PropValue >;
 
-export type V1ElementConfig = {
+export type V1ElementConfig< T = object > = {
 	title: string;
+	widgetType?: string;
+	elType?: string;
 	controls: object;
 	atomic?: boolean;
 	atomic_controls?: ControlItem[];
@@ -66,7 +94,8 @@ export type V1ElementConfig = {
 	twig_main_template?: string;
 	base_styles?: Record< string, StyleDefinition >;
 	base_styles_dictionary?: Record< string, string >;
-};
+	atomic_style_states?: ClassState[];
+} & T;
 
 type V1Model< T > = {
 	get: < K extends keyof T >( key: K ) => T[ K ];