@elementor/editor-canvas 4.2.0-899 → 4.2.0-900

package/dist/index.js

@@ -4873,6 +4873,56 @@ var outputSchema = {
   llm_instructions: import_schema.z.string().describe("Instructions what to do next, Important to follow these instructions!").optional()
 };
 
+// src/mcp/tools/build-composition/xml-leaf-wrapper.ts
+var DIV_BLOCK_TAG = "e-div-block";
+var ZERO_SPACING = {
+  $$type: "size",
+  value: {
+    size: {
+      $$type: "number",
+      value: 0
+    },
+    unit: {
+      $$type: "string",
+      value: "px"
+    }
+  }
+};
+function adaptLeafRootParams(params) {
+  const doc = new DOMParser().parseFromString(params.xmlStructure, "application/xml");
+  const rootElement = doc.documentElement;
+  if (!isLeafWidget(rootElement.tagName, params.widgetsCache)) {
+    return params;
+  }
+  const wrapperConfigId = getDivBlockWrapperConfigId(params.widgetsCache);
+  return {
+    ...params,
+    xmlStructure: serializeWrapped(doc, rootElement, wrapperConfigId),
+    stylesConfig: {
+      ...params.stylesConfig,
+      [wrapperConfigId]: {
+        margin: ZERO_SPACING,
+        padding: ZERO_SPACING,
+        ...params.stylesConfig[wrapperConfigId]
+      }
+    }
+  };
+}
+function getDivBlockWrapperConfigId(widgetsCache) {
+  return widgetsCache[DIV_BLOCK_TAG]?.title ?? DIV_BLOCK_TAG;
+}
+function isLeafWidget(tagName, widgetsCache) {
+  return widgetsCache[tagName]?.elType === "widget";
+}
+function serializeWrapped(doc, rootElement, wrapperConfigId) {
+  const wrapper = doc.createElement(DIV_BLOCK_TAG);
+  wrapper.setAttribute("configuration-id", wrapperConfigId);
+  wrapper.appendChild(rootElement.cloneNode(true));
+  const wrappedDoc = new DOMParser().parseFromString(`<${DIV_BLOCK_TAG} />`, "application/xml");
+  wrappedDoc.replaceChild(wrapper, wrappedDoc.documentElement);
+  return new XMLSerializer().serializeToString(wrappedDoc);
+}
+
 // src/mcp/tools/build-composition/tool.ts
 var initBuildCompositionsTool = (reg) => {
   const { addTool, resource } = reg;
@@ -4902,9 +4952,12 @@ var initBuildCompositionsTool = (reg) => {
       { description: "Available widgets for this tool", uri: AVAILABLE_WIDGETS_URI_V4 }
     ],
     outputSchema,
-    handler: async (params) => {
-      assertCompositionXmlUsesV4WidgetsOnly(params.xmlStructure);
-      const { xmlStructure, elementConfig, stylesConfig, customCSS } = params;
+    handler: async (rawParams) => {
+      assertCompositionXmlUsesV4WidgetsOnly(rawParams.xmlStructure);
+      const { xmlStructure, elementConfig, stylesConfig, customCSS } = adaptLeafRootParams({
+        ...rawParams,
+        widgetsCache: (0, import_editor_elements15.getWidgetsCache)() ?? {}
+      });
       let generatedXML = "";
       const errors = [];
       const rootContainers = [];
@@ -5015,10 +5068,8 @@ function assertCompositionXmlUsesV4WidgetsOnly(xmlStructure) {
     if (widgetData.elType !== "widget") {
       continue;
     }
-    if (!widgetData.atomic_props_schema) {
-      throw new Error(
-        `This tool does not support V3 elements. Please use the elementor-v3-mcp tools instead for element type: ${type}`
-      );
+    if (!isWidgetAvailableForLLM(widgetData) || !widgetData.atomic_props_schema) {
+      throw new Error(`This tool does not support element type: ${type}`);
     }
   }
 }

package/dist/index.mjs

@@ -4859,6 +4859,56 @@ var outputSchema = {
   llm_instructions: z.string().describe("Instructions what to do next, Important to follow these instructions!").optional()
 };
 
+// src/mcp/tools/build-composition/xml-leaf-wrapper.ts
+var DIV_BLOCK_TAG = "e-div-block";
+var ZERO_SPACING = {
+  $$type: "size",
+  value: {
+    size: {
+      $$type: "number",
+      value: 0
+    },
+    unit: {
+      $$type: "string",
+      value: "px"
+    }
+  }
+};
+function adaptLeafRootParams(params) {
+  const doc = new DOMParser().parseFromString(params.xmlStructure, "application/xml");
+  const rootElement = doc.documentElement;
+  if (!isLeafWidget(rootElement.tagName, params.widgetsCache)) {
+    return params;
+  }
+  const wrapperConfigId = getDivBlockWrapperConfigId(params.widgetsCache);
+  return {
+    ...params,
+    xmlStructure: serializeWrapped(doc, rootElement, wrapperConfigId),
+    stylesConfig: {
+      ...params.stylesConfig,
+      [wrapperConfigId]: {
+        margin: ZERO_SPACING,
+        padding: ZERO_SPACING,
+        ...params.stylesConfig[wrapperConfigId]
+      }
+    }
+  };
+}
+function getDivBlockWrapperConfigId(widgetsCache) {
+  return widgetsCache[DIV_BLOCK_TAG]?.title ?? DIV_BLOCK_TAG;
+}
+function isLeafWidget(tagName, widgetsCache) {
+  return widgetsCache[tagName]?.elType === "widget";
+}
+function serializeWrapped(doc, rootElement, wrapperConfigId) {
+  const wrapper = doc.createElement(DIV_BLOCK_TAG);
+  wrapper.setAttribute("configuration-id", wrapperConfigId);
+  wrapper.appendChild(rootElement.cloneNode(true));
+  const wrappedDoc = new DOMParser().parseFromString(`<${DIV_BLOCK_TAG} />`, "application/xml");
+  wrappedDoc.replaceChild(wrapper, wrappedDoc.documentElement);
+  return new XMLSerializer().serializeToString(wrappedDoc);
+}
+
 // src/mcp/tools/build-composition/tool.ts
 var initBuildCompositionsTool = (reg) => {
   const { addTool, resource } = reg;
@@ -4888,9 +4938,12 @@ var initBuildCompositionsTool = (reg) => {
       { description: "Available widgets for this tool", uri: AVAILABLE_WIDGETS_URI_V4 }
     ],
     outputSchema,
-    handler: async (params) => {
-      assertCompositionXmlUsesV4WidgetsOnly(params.xmlStructure);
-      const { xmlStructure, elementConfig, stylesConfig, customCSS } = params;
+    handler: async (rawParams) => {
+      assertCompositionXmlUsesV4WidgetsOnly(rawParams.xmlStructure);
+      const { xmlStructure, elementConfig, stylesConfig, customCSS } = adaptLeafRootParams({
+        ...rawParams,
+        widgetsCache: getWidgetsCache9() ?? {}
+      });
       let generatedXML = "";
       const errors = [];
       const rootContainers = [];
@@ -5001,10 +5054,8 @@ function assertCompositionXmlUsesV4WidgetsOnly(xmlStructure) {
     if (widgetData.elType !== "widget") {
       continue;
     }
-    if (!widgetData.atomic_props_schema) {
-      throw new Error(
-        `This tool does not support V3 elements. Please use the elementor-v3-mcp tools instead for element type: ${type}`
-      );
+    if (!isWidgetAvailableForLLM(widgetData) || !widgetData.atomic_props_schema) {
+      throw new Error(`This tool does not support element type: ${type}`);
     }
   }
 }

package/package.json

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

package/src/mcp/tools/build-composition/__tests__/xml-leaf-wrapper.test.ts

@@ -0,0 +1,117 @@
+import { type V1ElementConfig } from '@elementor/editor-elements';
+
+import { adaptLeafRootParams, type BuildCompositionParams, DIV_BLOCK_TAG, ZERO_SPACING } from '../xml-leaf-wrapper';
+
+const LEAF_WIDGET_TAG = 'e-heading';
+const CONTAINER_TAG = 'e-div-block';
+const DIV_BLOCK_TITLE = 'Div Block';
+
+const makeWidgetsCache = (
+	overrides: Record< string, Partial< V1ElementConfig > > = {}
+): Record< string, V1ElementConfig > =>
+	( {
+		[ LEAF_WIDGET_TAG ]: { title: 'Heading', controls: {}, elType: 'widget' },
+		[ CONTAINER_TAG ]: { title: DIV_BLOCK_TITLE, controls: {}, elType: 'e-div-block' },
+		...overrides,
+	} ) as Record< string, V1ElementConfig >;
+
+const parseXml = ( xml: string ) => new DOMParser().parseFromString( xml, 'application/xml' );
+
+const expectElementAttribute = ( element: Element, attribute: string, value: string ) => {
+	// eslint-disable-next-line jest-dom/prefer-to-have-attribute -- XML Element, not HTMLElement
+	expect( element.getAttribute( attribute ) ).toBe( value );
+};
+
+const makeParams = ( xmlStructure: string, overrides = {} ) =>
+	( {
+		xmlStructure,
+		stylesConfig: {},
+		elementConfig: {},
+		widgetsCache: makeWidgetsCache(),
+		...overrides,
+	} ) as BuildCompositionParams;
+
+describe( 'adaptLeafRootParams', () => {
+	it( 'wraps a leaf widget root in a div-block', () => {
+		// Arrange
+		const params = makeParams( `<${ LEAF_WIDGET_TAG } configuration-id="heading-1" />` );
+
+		// Act
+		const result = adaptLeafRootParams( params );
+
+		// Assert
+		const doc = parseXml( result.xmlStructure );
+		expect( doc.documentElement.tagName ).toBe( DIV_BLOCK_TAG );
+		expect( doc.documentElement.children[ 0 ].tagName ).toBe( LEAF_WIDGET_TAG );
+		expectElementAttribute( doc.documentElement, 'configuration-id', DIV_BLOCK_TITLE );
+	} );
+
+	it( 'preserves existing stylesConfig entries when wrapping', () => {
+		// Arrange
+		const params = makeParams( `<${ LEAF_WIDGET_TAG } configuration-id="heading-1" />`, {
+			stylesConfig: { 'heading-1': { color: 'red' } },
+		} );
+
+		// Act
+		const result = adaptLeafRootParams( params );
+
+		// Assert
+		expect( result.stylesConfig[ 'heading-1' ] ).toEqual( { color: 'red' } );
+	} );
+
+	it( 'does not wrap when root is a container', () => {
+		// Arrange
+		const params = makeParams(
+			`<${ CONTAINER_TAG } configuration-id="container-1"><${ LEAF_WIDGET_TAG } configuration-id="heading-1" /></${ CONTAINER_TAG }>`
+		);
+
+		// Act
+		const result = adaptLeafRootParams( params );
+
+		// Assert
+		expect( result ).toBe( params );
+	} );
+
+	it( 'preserves extra params fields unchanged', () => {
+		// Arrange
+		const params = makeParams( `<${ LEAF_WIDGET_TAG } configuration-id="heading-1" />`, {
+			elementConfig: { 'heading-1': { title: 'Hello' } },
+			stylesConfig: { 'heading-1': { color: 'red' } },
+		} );
+
+		// Act
+		const result = adaptLeafRootParams( params );
+
+		// Assert
+		expect( result.stylesConfig ).toEqual( {
+			'Div Block': {
+				margin: ZERO_SPACING,
+				padding: ZERO_SPACING,
+			},
+			...params.stylesConfig,
+		} );
+	} );
+
+	it( 'preserves leaf element attributes when wrapping', () => {
+		// Arrange
+		const params = makeParams( `<${ LEAF_WIDGET_TAG } configuration-id="heading-1" />` );
+
+		// Act
+		const { xmlStructure } = adaptLeafRootParams( params );
+
+		// Assert
+		const doc = parseXml( xmlStructure );
+		expectElementAttribute( doc.documentElement.children[ 0 ], 'configuration-id', 'heading-1' );
+	} );
+
+	it( 'returns unchanged params for unknown element types', () => {
+		// Arrange
+		const params = makeParams( '<unknown-widget configuration-id="w1" />' );
+
+		// Act
+		const result = adaptLeafRootParams( params );
+
+		// Assert
+		expect( result ).toBe( params );
+	} );
+} );

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

@@ -12,9 +12,11 @@ import { CompositionBuilder } from '../../../composition-builder/composition-bui
 import { AVAILABLE_WIDGETS_URI_V4 } from '../../resources/available-widgets-resource';
 import { BEST_PRACTICES_URI, STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
 import { doUpdateElementProperty } from '../../utils/do-update-element-property';
+import { isWidgetAvailableForLLM } from '../../utils/element-data-util';
 import { getCompositionTargetContainer } from '../../utils/get-composition-target-container';
 import { BUILD_COMPOSITIONS_GUIDE_URI, generatePrompt } from './prompt';
 import { inputSchema as schema, outputSchema } from './schema';
+import { adaptLeafRootParams } from './xml-leaf-wrapper';
 
 export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 	const { addTool, resource } = reg;
@@ -46,9 +48,13 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 			{ description: 'Available widgets for this tool', uri: AVAILABLE_WIDGETS_URI_V4 },
 		],
 		outputSchema,
-		handler: async ( params ) => {
-			assertCompositionXmlUsesV4WidgetsOnly( params.xmlStructure );
-			const { xmlStructure, elementConfig, stylesConfig, customCSS } = params;
+		handler: async ( rawParams ) => {
+			assertCompositionXmlUsesV4WidgetsOnly( rawParams.xmlStructure );
+			const { xmlStructure, elementConfig, stylesConfig, customCSS } = adaptLeafRootParams( {
+				...rawParams,
+				widgetsCache: getWidgetsCache() ?? {},
+			} );
+
 			let generatedXML: string = '';
 			const errors: Error[] = [];
 			const rootContainers: V1Element[] = [];
@@ -164,16 +170,15 @@ function assertCompositionXmlUsesV4WidgetsOnly( xmlStructure: string ) {
 	for ( const node of doc.querySelectorAll( '*' ) ) {
 		const type = node.tagName;
 		const widgetData = widgetsCache[ type ];
+
 		if ( ! widgetData ) {
 			continue;
 		}
 		if ( widgetData.elType !== 'widget' ) {
 			continue;
 		}
-		if ( ! widgetData.atomic_props_schema ) {
-			throw new Error(
-				`This tool does not support V3 elements. Please use the elementor-v3-mcp tools instead for element type: ${ type }`
-			);
+		if ( ! isWidgetAvailableForLLM( widgetData ) || ! widgetData.atomic_props_schema ) {
+			throw new Error( `This tool does not support element type: ${ type }` );
 		}
 	}
 }

package/src/mcp/tools/build-composition/xml-leaf-wrapper.ts

@@ -0,0 +1,68 @@
+import { type V1ElementConfig } from '@elementor/editor-elements';
+
+export const DIV_BLOCK_TAG = 'e-div-block';
+
+export const ZERO_SPACING = {
+	$$type: 'size',
+	value: {
+		size: {
+			$$type: 'number',
+			value: 0,
+		},
+		unit: {
+			$$type: 'string',
+			value: 'px',
+		},
+	},
+};
+
+export type BuildCompositionParams = {
+	xmlStructure: string;
+	stylesConfig: Record< string, Record< string, unknown > >;
+	widgetsCache: Record< string, V1ElementConfig >;
+	elementConfig: Record< string, Record< string, unknown > >;
+	[ key: string ]: unknown;
+};
+
+export function adaptLeafRootParams< T extends BuildCompositionParams >( params: T ): T {
+	const doc = new DOMParser().parseFromString( params.xmlStructure, 'application/xml' );
+	const rootElement = doc.documentElement;
+
+	if ( ! isLeafWidget( rootElement.tagName, params.widgetsCache ) ) {
+		return params;
+	}
+
+	const wrapperConfigId = getDivBlockWrapperConfigId( params.widgetsCache );
+
+	return {
+		...params,
+		xmlStructure: serializeWrapped( doc, rootElement, wrapperConfigId ),
+		stylesConfig: {
+			...params.stylesConfig,
+			[ wrapperConfigId ]: {
+				margin: ZERO_SPACING,
+				padding: ZERO_SPACING,
+				...params.stylesConfig[ wrapperConfigId ],
+			},
+		},
+	};
+}
+
+function getDivBlockWrapperConfigId( widgetsCache: Record< string, V1ElementConfig > ): string {
+	return widgetsCache[ DIV_BLOCK_TAG ]?.title ?? DIV_BLOCK_TAG;
+}
+
+function isLeafWidget( tagName: string, widgetsCache: Record< string, V1ElementConfig > ): boolean {
+	return widgetsCache[ tagName ]?.elType === 'widget';
+}
+
+function serializeWrapped( doc: Document, rootElement: Element, wrapperConfigId: string ): string {
+	const wrapper = doc.createElement( DIV_BLOCK_TAG );
+	wrapper.setAttribute( 'configuration-id', wrapperConfigId );
+	wrapper.appendChild( rootElement.cloneNode( true ) );
+
+	const wrappedDoc = new DOMParser().parseFromString( `<${ DIV_BLOCK_TAG } />`, 'application/xml' );
+	wrappedDoc.replaceChild( wrapper, wrappedDoc.documentElement );
+
+	return new XMLSerializer().serializeToString( wrappedDoc );
+}