@elementor/editor-canvas 4.1.0-beta1 → 4.1.0-beta2

package/dist/index.d.mts

@@ -319,8 +319,8 @@ type ImportedGlobalStylesPayload = {
         data: StyleVariables;
     };
     global_classes?: {
-        items: StyleDefinitionsMap;
-        order: StyleDefinitionID[];
+        added_items: StyleDefinitionsMap;
+        added_items_order: StyleDefinitionID[];
     };
 };
 

package/dist/index.d.ts

@@ -319,8 +319,8 @@ type ImportedGlobalStylesPayload = {
         data: StyleVariables;
     };
     global_classes?: {
-        items: StyleDefinitionsMap;
-        order: StyleDefinitionID[];
+        added_items: StyleDefinitionsMap;
+        added_items_order: StyleDefinitionID[];
     };
 };
 

package/dist/index.js

@@ -3987,6 +3987,15 @@ var doUpdateElementProperty = (params) => {
   }
   const propKey = elementPropSchema[propertyName].key;
   const value = resolvePropValue(propertyValue, propKey);
+  const { valid, jsonSchema } = import_editor_props6.Schema.validatePropValue(elementPropSchema[propertyName], propertyValue);
+  if (!valid) {
+    throw new Error(
+      `Invalid PropValue for elementId: ${elementId}. PropKey: ${propKey}, PropValue: ${JSON.stringify(
+        propertyValue
+      )}
+Expected Schema: ${jsonSchema}`
+    );
+  }
   (0, import_editor_elements11.updateElementSettings)({
     id: elementId,
     props: {
@@ -4566,24 +4575,32 @@ var initBuildCompositionsTool = (reg) => {
         compositionBuilder.setElementConfig(elementConfig);
         compositionBuilder.setStylesConfig(stylesConfig);
         compositionBuilder.setCustomCSS(customCSS);
-        const { invalidStyles, rootContainers: generatedRootContainers } = await compositionBuilder.build(targetContainer);
+        const {
+          invalidStyles,
+          configErrors,
+          rootContainers: generatedRootContainers
+        } = await compositionBuilder.build(targetContainer);
         rootContainers.push(...generatedRootContainers);
         generatedXML = new XMLSerializer().serializeToString(compositionBuilder.getXML());
-        Object.entries(invalidStyles).forEach(([elementId, rawCssRules]) => {
-          const customCss = {
-            value: rawCssRules.join(";\n")
-          };
-          doUpdateElementProperty({
-            elementId,
-            propertyName: "_styles",
-            propertyValue: {
-              _styles: {
-                custom_css: customCss
-              }
-            },
-            elementType: "widget"
+        if (configErrors.length) {
+          errors.push(...configErrors.map((msg) => new Error(msg)));
+        } else {
+          Object.entries(invalidStyles).forEach(([elementId, rawCssRules]) => {
+            const customCss = {
+              value: rawCssRules.join(";\n")
+            };
+            doUpdateElementProperty({
+              elementId,
+              propertyName: "_styles",
+              propertyValue: {
+                _styles: {
+                  custom_css: customCss
+                }
+              },
+              elementType: "widget"
+            });
           });
-        });
+        }
       } catch (error) {
         errors.push(error);
       }
@@ -4772,6 +4789,13 @@ Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property fr
   configureElementToolPrompt.instruction(
     "The $$type property is MANDATORY for every value; it is required to parse the value and apply application-level effects."
   );
+  configureElementToolPrompt.instruction(`
+V4 only: If MCP fails, give manual steps using V4 UI.
+
+V4 Editor structure:
+Panel tabs: General (\u2192 Settings section: ID, Tag, Link), Style, Interactions.
+NO Advanced tab. Never mention Advanced tab.
+`);
   return configureElementToolPrompt.prompt();
 };
 var CONFIGURE_ELEMENT_GUIDE_TEXT = generatePrompt2();

package/dist/index.mjs

@@ -3982,6 +3982,15 @@ var doUpdateElementProperty = (params) => {
   }
   const propKey = elementPropSchema[propertyName].key;
   const value = resolvePropValue(propertyValue, propKey);
+  const { valid, jsonSchema } = Schema2.validatePropValue(elementPropSchema[propertyName], propertyValue);
+  if (!valid) {
+    throw new Error(
+      `Invalid PropValue for elementId: ${elementId}. PropKey: ${propKey}, PropValue: ${JSON.stringify(
+        propertyValue
+      )}
+Expected Schema: ${jsonSchema}`
+    );
+  }
   updateElementSettings({
     id: elementId,
     props: {
@@ -4561,24 +4570,32 @@ var initBuildCompositionsTool = (reg) => {
         compositionBuilder.setElementConfig(elementConfig);
         compositionBuilder.setStylesConfig(stylesConfig);
         compositionBuilder.setCustomCSS(customCSS);
-        const { invalidStyles, rootContainers: generatedRootContainers } = await compositionBuilder.build(targetContainer);
+        const {
+          invalidStyles,
+          configErrors,
+          rootContainers: generatedRootContainers
+        } = await compositionBuilder.build(targetContainer);
         rootContainers.push(...generatedRootContainers);
         generatedXML = new XMLSerializer().serializeToString(compositionBuilder.getXML());
-        Object.entries(invalidStyles).forEach(([elementId, rawCssRules]) => {
-          const customCss = {
-            value: rawCssRules.join(";\n")
-          };
-          doUpdateElementProperty({
-            elementId,
-            propertyName: "_styles",
-            propertyValue: {
-              _styles: {
-                custom_css: customCss
-              }
-            },
-            elementType: "widget"
+        if (configErrors.length) {
+          errors.push(...configErrors.map((msg) => new Error(msg)));
+        } else {
+          Object.entries(invalidStyles).forEach(([elementId, rawCssRules]) => {
+            const customCss = {
+              value: rawCssRules.join(";\n")
+            };
+            doUpdateElementProperty({
+              elementId,
+              propertyName: "_styles",
+              propertyValue: {
+                _styles: {
+                  custom_css: customCss
+                }
+              },
+              elementType: "widget"
+            });
           });
-        });
+        }
       } catch (error) {
         errors.push(error);
       }
@@ -4767,6 +4784,13 @@ Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property fr
   configureElementToolPrompt.instruction(
     "The $$type property is MANDATORY for every value; it is required to parse the value and apply application-level effects."
   );
+  configureElementToolPrompt.instruction(`
+V4 only: If MCP fails, give manual steps using V4 UI.
+
+V4 Editor structure:
+Panel tabs: General (\u2192 Settings section: ID, Tag, Link), Style, Interactions.
+NO Advanced tab. Never mention Advanced tab.
+`);
   return configureElementToolPrompt.prompt();
 };
 var CONFIGURE_ELEMENT_GUIDE_TEXT = generatePrompt2();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.1.0-beta1",
+  "version": "4.1.0-beta2",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,25 +37,25 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.1.0-beta1",
+    "@elementor/editor": "4.1.0-beta2",
     "dompurify": "^3.2.6",
-    "@elementor/editor-controls": "4.1.0-beta1",
-    "@elementor/editor-documents": "4.1.0-beta1",
-    "@elementor/editor-elements": "4.1.0-beta1",
-    "@elementor/editor-interactions": "4.1.0-beta1",
-    "@elementor/editor-mcp": "4.1.0-beta1",
-    "@elementor/editor-notifications": "4.1.0-beta1",
-    "@elementor/editor-props": "4.1.0-beta1",
-    "@elementor/editor-responsive": "4.1.0-beta1",
-    "@elementor/editor-styles": "4.1.0-beta1",
-    "@elementor/editor-styles-repository": "4.1.0-beta1",
-    "@elementor/editor-ui": "4.1.0-beta1",
-    "@elementor/editor-v1-adapters": "4.1.0-beta1",
-    "@elementor/schema": "4.1.0-beta1",
-    "@elementor/twing": "4.1.0-beta1",
+    "@elementor/editor-controls": "4.1.0-beta2",
+    "@elementor/editor-documents": "4.1.0-beta2",
+    "@elementor/editor-elements": "4.1.0-beta2",
+    "@elementor/editor-interactions": "4.1.0-beta2",
+    "@elementor/editor-mcp": "4.1.0-beta2",
+    "@elementor/editor-notifications": "4.1.0-beta2",
+    "@elementor/editor-props": "4.1.0-beta2",
+    "@elementor/editor-responsive": "4.1.0-beta2",
+    "@elementor/editor-styles": "4.1.0-beta2",
+    "@elementor/editor-styles-repository": "4.1.0-beta2",
+    "@elementor/editor-ui": "4.1.0-beta2",
+    "@elementor/editor-v1-adapters": "4.1.0-beta2",
+    "@elementor/schema": "4.1.0-beta2",
+    "@elementor/twing": "4.1.0-beta2",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.1.0-beta1",
-    "@elementor/wp-media": "4.1.0-beta1",
+    "@elementor/utils": "4.1.0-beta2",
+    "@elementor/wp-media": "4.1.0-beta2",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

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

@@ -68,27 +68,34 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 				compositionBuilder.setStylesConfig( stylesConfig );
 				compositionBuilder.setCustomCSS( customCSS );
 
-				const { invalidStyles, rootContainers: generatedRootContainers } =
-					await compositionBuilder.build( targetContainer );
+				const {
+					invalidStyles,
+					configErrors,
+					rootContainers: generatedRootContainers,
+				} = await compositionBuilder.build( targetContainer );
 
 				rootContainers.push( ...generatedRootContainers );
 				generatedXML = new XMLSerializer().serializeToString( compositionBuilder.getXML() );
 
-				Object.entries( invalidStyles ).forEach( ( [ elementId, rawCssRules ] ) => {
-					const customCss = {
-						value: rawCssRules.join( ';\n' ),
-					};
-					doUpdateElementProperty( {
-						elementId,
-						propertyName: '_styles',
-						propertyValue: {
-							_styles: {
-								custom_css: customCss,
+				if ( configErrors.length ) {
+					errors.push( ...configErrors.map( ( msg ) => new Error( msg ) ) );
+				} else {
+					Object.entries( invalidStyles ).forEach( ( [ elementId, rawCssRules ] ) => {
+						const customCss = {
+							value: rawCssRules.join( ';\n' ),
+						};
+						doUpdateElementProperty( {
+							elementId,
+							propertyName: '_styles',
+							propertyValue: {
+								_styles: {
+									custom_css: customCss,
+								},
 							},
-						},
-						elementType: 'widget',
+							elementType: 'widget',
+						} );
 					} );
-				} );
+				}
 			} catch ( error ) {
 				errors.push( error as Error );
 			}

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

@@ -117,6 +117,14 @@ Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property fr
 		'The $$type property is MANDATORY for every value; it is required to parse the value and apply application-level effects.'
 	);
 
+	configureElementToolPrompt.instruction( `
+V4 only: If MCP fails, give manual steps using V4 UI.
+
+V4 Editor structure:
+Panel tabs: General (→ Settings section: ID, Tag, Link), Style, Interactions.
+NO Advanced tab. Never mention Advanced tab.
+` );
+
 	return configureElementToolPrompt.prompt();
 };
 

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

@@ -0,0 +1,135 @@
+import { getWidgetsCache, updateElementSettings } from '@elementor/editor-elements';
+import { Schema } from '@elementor/editor-props';
+import { __privateRunCommandSync } from '@elementor/editor-v1-adapters';
+
+import { doUpdateElementProperty } from '../do-update-element-property';
+
+jest.mock( '@elementor/editor-elements', () => ( {
+	createElementStyle: jest.fn(),
+	getElementStyles: jest.fn(),
+	getWidgetsCache: jest.fn(),
+	updateElementSettings: jest.fn(),
+	updateElementStyle: jest.fn(),
+} ) );
+
+jest.mock( '@elementor/editor-props', () => ( {
+	getPropSchemaFromCache: jest.fn(),
+	Schema: {
+		adjustLlmPropValueSchema: jest.fn( ( value: unknown ) => value ),
+		validatePropValue: jest.fn(),
+	},
+} ) );
+
+jest.mock( '@elementor/editor-styles', () => ( {
+	getStylesSchema: jest.fn( () => ( {} ) ),
+} ) );
+
+jest.mock( '@elementor/editor-v1-adapters', () => ( {
+	__privateRunCommandSync: jest.fn(),
+} ) );
+
+const ELEMENT_ID = 'test-element-id';
+const ELEMENT_TYPE = 'atomic-heading';
+const EXPECTED_JSON_SCHEMA_SNIPPET = '{"type":"object"}';
+const PROPERTY_NAME = 'title';
+const PROP_SCHEMA_ENTRY = { key: 'titlePropKey' };
+
+const widgetsCacheFixture = {
+	[ ELEMENT_TYPE ]: {
+		atomic_props_schema: {
+			[ PROPERTY_NAME ]: PROP_SCHEMA_ENTRY,
+		},
+	},
+};
+
+describe( 'doUpdateElementProperty', () => {
+	beforeEach( () => {
+		Object.assign( window, {
+			elementorV2: {
+				editorVariables: {
+					Utils: {
+						globalVariablesLLMResolvers: [],
+					},
+				},
+			},
+		} );
+		// @ts-ignore: Mock values for test
+		jest.mocked( getWidgetsCache ).mockReturnValue( widgetsCacheFixture );
+		// @ts-ignore: Mock values for test
+		jest.mocked( Schema.adjustLlmPropValueSchema ).mockImplementation( ( value: unknown ) => value );
+		jest.mocked( Schema.validatePropValue ).mockReset();
+	} );
+
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'throws when Schema.validatePropValue reports invalid PropValue and does not persist', () => {
+		// Arrange
+		const propertyValue = { invalid: true };
+		jest.mocked( Schema.validatePropValue ).mockReturnValue( {
+			jsonSchema: EXPECTED_JSON_SCHEMA_SNIPPET,
+			valid: false,
+			errorMessages: 'error',
+			errors: [],
+		} );
+
+		// Act
+		let thrown: unknown;
+		try {
+			doUpdateElementProperty( {
+				elementId: ELEMENT_ID,
+				elementType: ELEMENT_TYPE,
+				propertyName: PROPERTY_NAME,
+				propertyValue,
+			} );
+		} catch ( error ) {
+			thrown = error;
+		}
+
+		// Assert
+		expect( thrown ).toBeInstanceOf( Error );
+		expect( ( thrown as Error ).message ).toMatch( /Invalid PropValue/ );
+		expect( ( thrown as Error ).message ).toContain( ELEMENT_ID );
+		expect( ( thrown as Error ).message ).toContain( PROP_SCHEMA_ENTRY.key );
+		expect( ( thrown as Error ).message ).toContain( EXPECTED_JSON_SCHEMA_SNIPPET );
+		expect( Schema.validatePropValue ).toHaveBeenCalledWith( PROP_SCHEMA_ENTRY, propertyValue );
+		expect( updateElementSettings ).not.toHaveBeenCalled();
+		expect( __privateRunCommandSync ).not.toHaveBeenCalled();
+	} );
+
+	it( 'updates settings when Schema.validatePropValue reports valid PropValue', () => {
+		// Arrange
+		const propertyValue = 'resolved-title';
+		jest.mocked( Schema.validatePropValue ).mockReturnValue( {
+			jsonSchema: EXPECTED_JSON_SCHEMA_SNIPPET,
+			valid: true,
+			errorMessages: [],
+			errors: [],
+		} );
+
+		// Act
+		doUpdateElementProperty( {
+			elementId: ELEMENT_ID,
+			elementType: ELEMENT_TYPE,
+			propertyName: PROPERTY_NAME,
+			propertyValue,
+		} );
+
+		// Assert
+		expect( Schema.validatePropValue ).toHaveBeenCalledWith( PROP_SCHEMA_ENTRY, propertyValue );
+		expect( updateElementSettings ).toHaveBeenCalledTimes( 1 );
+		expect( updateElementSettings ).toHaveBeenCalledWith( {
+			id: ELEMENT_ID,
+			props: {
+				[ PROPERTY_NAME ]: propertyValue,
+			},
+			withHistory: false,
+		} );
+		expect( __privateRunCommandSync ).toHaveBeenCalledWith(
+			'document/save/set-is-modified',
+			{ status: true },
+			{ internal: true }
+		);
+	} );
+} );

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

@@ -129,6 +129,14 @@ export const doUpdateElementProperty = ( params: OwnParams ) => {
 	}
 	const propKey = elementPropSchema[ propertyName ].key;
 	const value = resolvePropValue( propertyValue, propKey );
+	const { valid, jsonSchema } = Schema.validatePropValue( elementPropSchema[ propertyName ], propertyValue );
+	if ( ! valid ) {
+		throw new Error(
+			`Invalid PropValue for elementId: ${ elementId }. PropKey: ${ propKey }, PropValue: ${ JSON.stringify(
+				propertyValue
+			) }\nExpected Schema: ${ jsonSchema }`
+		);
+	}
 	updateElementSettings( {
 		id: elementId,
 		props: {

package/src/sync/global-styles-imported-event.ts

@@ -4,5 +4,5 @@ export const GLOBAL_STYLES_IMPORTED_EVENT = 'elementor/global-styles/imported';
 
 export type ImportedGlobalStylesPayload = {
 	global_variables?: { data: StyleVariables };
-	global_classes?: { items: StyleDefinitionsMap; order: StyleDefinitionID[] };
+	global_classes?: { added_items: StyleDefinitionsMap; added_items_order: StyleDefinitionID[] };
 };