@elementor/editor-canvas 4.1.0-695 → 4.1.0-696

package/dist/index.js

@@ -3009,6 +3009,7 @@ function extractElementData(element) {
 }
 
 // src/mcp/tools/build-composition/tool.ts
+var import_editor_documents3 = require("@elementor/editor-documents");
 var import_editor_elements10 = require("@elementor/editor-elements");
 
 // src/composition-builder/composition-builder.ts
@@ -3423,6 +3424,16 @@ var CompositionBuilder = class _CompositionBuilder {
   }
 };
 
+// src/mcp/utils/get-composition-target-container.ts
+var import_editor_documents2 = require("@elementor/editor-documents");
+function getCompositionTargetContainer(documentContainer, documentType) {
+  const firstChild = documentContainer.children?.[0];
+  if (documentType === import_editor_documents2.COMPONENT_DOCUMENT_TYPE && firstChild) {
+    return firstChild;
+  }
+  return documentContainer;
+}
+
 // src/mcp/tools/build-composition/prompt.ts
 var import_editor_mcp2 = require("@elementor/editor-mcp");
 var generatePrompt = () => {
@@ -3618,6 +3629,8 @@ var initBuildCompositionsTool = (reg) => {
       const errors = [];
       const rootContainers = [];
       const documentContainer = (0, import_editor_elements10.getContainer)("document");
+      const currentDocument = (0, import_editor_documents3.getCurrentDocument)();
+      const targetContainer = getCompositionTargetContainer(documentContainer, currentDocument?.type.value);
       try {
         const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
           createElement: import_editor_elements10.createElement,
@@ -3630,7 +3643,7 @@ var initBuildCompositionsTool = (reg) => {
           configErrors,
           invalidStyles,
           rootContainers: generatedRootContainers
-        } = compositionBuilder.build(documentContainer);
+        } = compositionBuilder.build(targetContainer);
         rootContainers.push(...generatedRootContainers);
         generatedXML = new XMLSerializer().serializeToString(compositionBuilder.getXML());
         if (configErrors.length) {

package/dist/index.mjs

@@ -2979,6 +2979,7 @@ function extractElementData(element) {
 }
 
 // src/mcp/tools/build-composition/tool.ts
+import { getCurrentDocument } from "@elementor/editor-documents";
 import {
   createElement as createElement8,
   deleteElement,
@@ -3409,6 +3410,16 @@ var CompositionBuilder = class _CompositionBuilder {
   }
 };
 
+// src/mcp/utils/get-composition-target-container.ts
+import { COMPONENT_DOCUMENT_TYPE } from "@elementor/editor-documents";
+function getCompositionTargetContainer(documentContainer, documentType) {
+  const firstChild = documentContainer.children?.[0];
+  if (documentType === COMPONENT_DOCUMENT_TYPE && firstChild) {
+    return firstChild;
+  }
+  return documentContainer;
+}
+
 // src/mcp/tools/build-composition/prompt.ts
 import { toolPrompts } from "@elementor/editor-mcp";
 var generatePrompt = () => {
@@ -3604,6 +3615,8 @@ var initBuildCompositionsTool = (reg) => {
       const errors = [];
       const rootContainers = [];
       const documentContainer = getContainer3("document");
+      const currentDocument = getCurrentDocument();
+      const targetContainer = getCompositionTargetContainer(documentContainer, currentDocument?.type.value);
       try {
         const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
           createElement: createElement8,
@@ -3616,7 +3629,7 @@ var initBuildCompositionsTool = (reg) => {
           configErrors,
           invalidStyles,
           rootContainers: generatedRootContainers
-        } = compositionBuilder.build(documentContainer);
+        } = compositionBuilder.build(targetContainer);
         rootContainers.push(...generatedRootContainers);
         generatedXML = new XMLSerializer().serializeToString(compositionBuilder.getXML());
         if (configErrors.length) {

package/package.json

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

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

@@ -1,3 +1,4 @@
+import { getCurrentDocument } from '@elementor/editor-documents';
 import {
 	createElement,
 	deleteElement,
@@ -10,6 +11,7 @@ import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 import { CompositionBuilder } from '../../../composition-builder/composition-builder';
 import { BEST_PRACTICES_URI, STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
 import { doUpdateElementProperty } from '../../utils/do-update-element-property';
+import { getCompositionTargetContainer } from '../../utils/get-composition-target-container';
 import { generatePrompt } from './prompt';
 import { inputSchema as schema, outputSchema } from './schema';
 
@@ -37,6 +39,8 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 			const errors: Error[] = [];
 			const rootContainers: V1Element[] = [];
 			const documentContainer = getContainer( 'document' ) as unknown as V1Element;
+			const currentDocument = getCurrentDocument();
+			const targetContainer = getCompositionTargetContainer( documentContainer, currentDocument?.type.value );
 			try {
 				const compositionBuilder = CompositionBuilder.fromXMLString( xmlStructure, {
 					createElement,
@@ -50,7 +54,7 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 					configErrors,
 					invalidStyles,
 					rootContainers: generatedRootContainers,
-				} = compositionBuilder.build( documentContainer );
+				} = compositionBuilder.build( targetContainer );
 
 				rootContainers.push( ...generatedRootContainers );
 				generatedXML = new XMLSerializer().serializeToString( compositionBuilder.getXML() );

package/src/mcp/utils/__tests__/get-composition-target-container.test.ts

@@ -0,0 +1,59 @@
+import { type V1Element } from '@elementor/editor-elements';
+
+import { getCompositionTargetContainer } from '../get-composition-target-container';
+
+const createMockContainer = ( id: string, children?: V1Element[] ): V1Element =>
+	( {
+		id,
+		model: { get: jest.fn(), set: jest.fn(), toJSON: jest.fn() },
+		settings: { get: jest.fn(), set: jest.fn(), toJSON: jest.fn() },
+		children,
+	} ) as unknown as V1Element;
+
+describe( 'getCompositionTargetContainer', () => {
+	it( 'should return first child when document type is elementor_component', () => {
+		// Arrange
+		const firstChild = createMockContainer( 'child-1' );
+		const documentContainer = createMockContainer( 'document', [ firstChild ] );
+
+		// Act
+		const result = getCompositionTargetContainer( documentContainer, 'elementor_component' );
+
+		// Assert
+		expect( result ).toBe( firstChild );
+	} );
+
+	it( 'should return document container when document type is not a component', () => {
+		// Arrange
+		const firstChild = createMockContainer( 'child-1' );
+		const documentContainer = createMockContainer( 'document', [ firstChild ] );
+
+		// Act
+		const result = getCompositionTargetContainer( documentContainer, 'page' );
+
+		// Assert
+		expect( result ).toBe( documentContainer );
+	} );
+
+	it( 'should return document container when document type is undefined', () => {
+		// Arrange
+		const documentContainer = createMockContainer( 'document' );
+
+		// Act
+		const result = getCompositionTargetContainer( documentContainer, undefined );
+
+		// Assert
+		expect( result ).toBe( documentContainer );
+	} );
+
+	it( 'should return document container when component has no children', () => {
+		// Arrange
+		const documentContainer = createMockContainer( 'document' );
+
+		// Act
+		const result = getCompositionTargetContainer( documentContainer, 'elementor_component' );
+
+		// Assert
+		expect( result ).toBe( documentContainer );
+	} );
+} );

package/src/mcp/utils/get-composition-target-container.ts

@@ -0,0 +1,15 @@
+import { COMPONENT_DOCUMENT_TYPE } from '@elementor/editor-documents';
+import { type V1Element } from '@elementor/editor-elements';
+
+export function getCompositionTargetContainer(
+	documentContainer: V1Element,
+	documentType: string | undefined
+): V1Element {
+	const firstChild = documentContainer.children?.[ 0 ];
+
+	if ( documentType === COMPONENT_DOCUMENT_TYPE && firstChild ) {
+		return firstChild;
+	}
+
+	return documentContainer;
+}