@elementor/editor-canvas 3.33.0-291 → 3.33.0-293

package/src/mcp/tools/build-composition/tool.ts

@@ -26,16 +26,9 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 			const { xmlStructure, elementConfig, stylesConfig } = params;
 			const errors: Error[] = [];
 			const softErrors: Error[] = [];
+			const rootContainers: V1Element[] = [];
 			const widgetsCache = getWidgetsCache() || {};
 			const documentContainer = getContainer( 'document' ) as unknown as V1Element;
-			const rootContainer = createElement( {
-				containerId: documentContainer.id,
-				model: {
-					elType: 'container',
-					id: generateElementId(),
-				},
-				options: { useHistory: false },
-			} );
 			try {
 				const parser = new DOMParser();
 				xml = parser.parseFromString( xmlStructure, 'application/xml' );
@@ -45,7 +38,7 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 				}
 
 				const children = Array.from( xml.children );
-				const iterate = ( node: Element, containerElement: V1Element ) => {
+				const iterate = ( node: Element, containerElement: V1Element = documentContainer ) => {
 					const elementTag = node.tagName;
 					if ( ! widgetsCache[ elementTag ] ) {
 						errors.push( new Error( `Unknown widget type: ${ elementTag }` ) );
@@ -69,6 +62,9 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 								},
 								options: { useHistory: false },
 						  } );
+					if ( containerElement === documentContainer ) {
+						rootContainers.push( newElement );
+					}
 					node.setAttribute( 'id', newElement.id );
 					const configId = node.getAttribute( 'configuration-id' ) || '';
 					try {
@@ -78,7 +74,11 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 						for ( const [ propertyName, propertyValue ] of Object.entries( configObject ) ) {
 							// validate property existance
 							const widgetSchema = widgetsCache[ elementTag ];
-							if ( ! widgetSchema?.atomic_props_schema?.[ propertyName ] && propertyName !== '_styles' ) {
+							if (
+								! widgetSchema?.atomic_props_schema?.[ propertyName ] &&
+								propertyName !== '_styles' &&
+								propertyName !== 'custom_css'
+							) {
 								softErrors.push(
 									new Error(
 										`Property "${ propertyName }" does not exist on element type "${ elementTag }".`
@@ -90,7 +90,10 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 								doUpdateElementProperty( {
 									elementId: newElement.id,
 									propertyName,
-									propertyValue: propertyValue as unknown as PropValue,
+									propertyValue:
+										propertyName === 'custom_css'
+											? { _styles: propertyValue }
+											: ( propertyValue as unknown as PropValue ),
 									elementType: elementTag,
 								} );
 							} catch ( error ) {
@@ -110,7 +113,7 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 				};
 
 				for ( const childNode of children ) {
-					iterate( childNode, rootContainer );
+					iterate( childNode, documentContainer );
 					try {
 					} catch ( error ) {
 						errors.push( error as Error );
@@ -121,9 +124,11 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 			}
 
 			if ( errors.length ) {
-				deleteElement( {
-					elementId: rootContainer.id,
-					options: { useHistory: false },
+				rootContainers.forEach( ( rootContainer ) => {
+					deleteElement( {
+						elementId: rootContainer.id,
+						options: { useHistory: false },
+					} );
 				} );
 			}
 

package/src/mcp/tools/configure-element/prompt.ts

@@ -2,19 +2,20 @@ import { STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-sch
 
 export const configureElementToolPrompt = `Configure an existing element on the page.
 
-# **CRITICAL - REQUIRED RESOURCES (Must read before using this tool)**
+# **CRITICAL - REQUIRED INFORMATION (Must read before using this tool)**
 1. [${ WIDGET_SCHEMA_URI }]
    Required to understand which widgets are available, and what are their configuration schemas.
    Every widgetType (i.e. e-heading, e-button) that is supported has it's own property schema, that you must follow in order to apply property values correctly.
 2. [${ STYLE_SCHEMA_URI }]
    Required to understand the styles schema for the widgets. All widgets share the same styles schema, grouped by categories.
    Use this resource to understand which style properties are available for each element, and how to structure the "_styles" configuration property.
+3. If not sure about the PropValues schema, you can use the "get-element-configuration-values" tool to retreive the current PropValues configuration of the element.
 
 Before using this tool, check the definitions of the elements PropTypes at the resource "widget-schema-by-type" at editor-canvas__elementor://widgets/schema/{widgetType}
 All widgets share a common _style property for styling, which uses the common styles schema.
 Retreive and check the common styles schema at the resource list "styles-schema" at editor-canvas__elementor://styles/schema/{category}
 
-Unless specifically noted, attempt to use the _style property "custom_css" for any styling, read the resource editor-canvas__elementor://styles/schema/custom_css for more information.
+Attempt to use the _style property "custom_css" for any styling that have complicated schemas (such as backgrounds), read the resource editor-canvas__elementor://styles/schema/custom_css for more information.
 
 # Parameters
 - propertiesToChange: An object containing the properties to change, with their new values. MANDATORY
@@ -59,6 +60,7 @@ Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property fr
 \`\`\`json
 {
   propertiesToChange: {
+    // List of properties TO CHANGE, following the PropType schema for the element as defined in the resource [${ WIDGET_SCHEMA_URI }]
     title: {
       $$type: 'string',
       value: 'New Title Text'
@@ -68,8 +70,9 @@ Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property fr
       value: false
     },
     _styles: {
+      // List of available keys available at the [${ STYLE_SCHEMA_URI }] dynamic resource
       'line-height': {
-        $$type: 'size',
+        $$type: 'size', // MANDATORY do not forget to include the correct $$type for every property
         value: {
           size: {
             $$type: 'number',

package/src/mcp/tools/get-element-config/tool.ts

@@ -0,0 +1,75 @@
+import { getContainer, getElementStyles, getWidgetsCache } from '@elementor/editor-elements';
+import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+import { type PropValue, Schema } from '@elementor/editor-props';
+import { z } from '@elementor/schema';
+import { decodeString } from '@elementor/utils';
+
+const schema = {
+	elementId: z.string(),
+};
+
+const outputSchema = {
+	propValues: z
+		.record( z.string(), z.any() )
+		.describe(
+			'A record mapping PropTypes to their corresponding PropValues, with _styles record for style-related PropValues'
+		),
+	customCss: z.string().optional().describe( 'The custom CSS string associated with the element, if any.' ),
+};
+
+export const initGetElementConfigTool = ( reg: MCPRegistryEntry ) => {
+	const { addTool } = reg;
+
+	addTool( {
+		name: 'get-element-configuration-values',
+		description: "Retrieve the element's configuration PropValues for a specific element by unique ID.",
+		schema,
+		outputSchema,
+		handler: async ( { elementId } ) => {
+			const element = getContainer( elementId );
+			if ( ! element ) {
+				throw new Error( `Element with ID ${ elementId } not found.` );
+			}
+			const elementRawSettings = element.settings;
+			const propSchema = getWidgetsCache()?.[ element.model.get( 'widgetType' ) || '' ]?.atomic_props_schema;
+
+			if ( ! elementRawSettings || ! propSchema ) {
+				throw new Error( `No settings or prop schema found for element ID: ${ elementId }` );
+			}
+
+			const propValues: Record< string, PropValue > = {};
+			const stylePropValues: Record< string, PropValue > = {};
+
+			Schema.configurableKeys( propSchema ).forEach( ( key ) => {
+				propValues[ key ] = structuredClone( elementRawSettings.get( key ) );
+			} );
+			const elementStyles = getElementStyles( elementId ) || {};
+			const localStyle = Object.values( elementStyles ).find( ( style ) => style.label === 'local' );
+
+			if ( localStyle ) {
+				const defaultVariant = localStyle.variants.find(
+					( variant ) => variant.meta.breakpoint === 'desktop' && ! variant.meta.state
+				);
+				if ( defaultVariant ) {
+					const styleProps = defaultVariant.props || {};
+					Object.keys( styleProps ).forEach( ( stylePropName ) => {
+						if ( typeof styleProps[ stylePropName ] !== 'undefined' ) {
+							stylePropValues[ stylePropName ] = structuredClone( styleProps[ stylePropName ] );
+						}
+					} );
+
+					if ( defaultVariant.custom_css?.raw ) {
+						stylePropValues.custom_css = decodeString( defaultVariant.custom_css.raw, undefined );
+					}
+				}
+			}
+
+			return {
+				propValues: {
+					...propValues,
+					_styles: stylePropValues,
+				},
+			};
+		},
+	} );
+};

package/src/mcp/utils/do-update-element-property.ts

@@ -5,7 +5,13 @@ import {
 	updateElementSettings,
 	updateElementStyle,
 } from '@elementor/editor-elements';
-import { getPropSchemaFromCache, type PropValue, Schema, type TransformablePropValue } from '@elementor/editor-props';
+import {
+	getPropSchemaFromCache,
+	type PropValue,
+	Schema,
+	stringPropTypeUtil,
+	type TransformablePropValue,
+} from '@elementor/editor-props';
 import { type CustomCss, getStylesSchema } from '@elementor/editor-styles';
 
 type OwnParams = {
@@ -42,8 +48,15 @@ export const doUpdateElementProperty = ( params: OwnParams ) => {
 		Object.keys( propertyMapValue as Record< string, unknown > ).forEach( ( stylePropName ) => {
 			const propertyRawSchema = styleSchema[ stylePropName ];
 			if ( stylePropName === 'custom_css' ) {
+				let customCssValue = propertyMapValue[ stylePropName ] as object | string;
+				if ( typeof customCssValue === 'object' ) {
+					customCssValue =
+						stringPropTypeUtil.extract( customCssValue ) ||
+						( customCssValue as { value: unknown } )?.value ||
+						'';
+				}
 				customCss = {
-					raw: btoa( propertyMapValue[ stylePropName ] as string ),
+					raw: btoa( customCssValue as string ),
 				};
 				return;
 			}
@@ -65,7 +78,7 @@ export const doUpdateElementProperty = ( params: OwnParams ) => {
 		if ( ! localStyle ) {
 			createElementStyle( {
 				elementId,
-				custom_css: customCss,
+				...( typeof customCss !== 'undefined' ? { custom_css: customCss } : {} ),
 				classesProp: 'classes',
 				label: 'local',
 				meta: {
@@ -84,6 +97,7 @@ export const doUpdateElementProperty = ( params: OwnParams ) => {
 					breakpoint: 'desktop',
 					state: null,
 				},
+				...( typeof customCss !== 'undefined' ? { custom_css: customCss } : {} ),
 				props: {
 					...transformedStyleValues,
 				},