@elementor/editor-canvas 4.2.0-862 → 4.2.0-864

package/dist/index.js

@@ -4083,6 +4083,7 @@ var validateInput = {
 };
 
 // src/composition-builder/composition-builder.ts
+var CREATE_ELEMENT_INVALID_CONTAINER_MESSAGE = "createElement did not return an element container with a model.";
 var CompositionBuilder = class _CompositionBuilder {
   elementConfig = {};
   elementStylesConfig = {};
@@ -4301,6 +4302,9 @@ ${childTypeErrors.join("\n")}`);
           model: modelTree,
           options: { useHistory: false }
         });
+        if (!newElement?.model) {
+          throw new Error(CREATE_ELEMENT_INVALID_CONTAINER_MESSAGE);
+        }
         this.rootContainers.push(newElement);
         await this.awaitViewRender(newElement);
       } catch (e) {

package/dist/index.mjs

@@ -4078,6 +4078,7 @@ var validateInput = {
 };
 
 // src/composition-builder/composition-builder.ts
+var CREATE_ELEMENT_INVALID_CONTAINER_MESSAGE = "createElement did not return an element container with a model.";
 var CompositionBuilder = class _CompositionBuilder {
   elementConfig = {};
   elementStylesConfig = {};
@@ -4296,6 +4297,9 @@ ${childTypeErrors.join("\n")}`);
           model: modelTree,
           options: { useHistory: false }
         });
+        if (!newElement?.model) {
+          throw new Error(CREATE_ELEMENT_INVALID_CONTAINER_MESSAGE);
+        }
         this.rootContainers.push(newElement);
         await this.awaitViewRender(newElement);
       } catch (e) {

package/package.json

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

package/src/composition-builder/__tests__/composition-builder.test.ts

@@ -0,0 +1,190 @@
+import { type V1Element } from '@elementor/editor-elements';
+
+import { CompositionBuilder } from '../composition-builder';
+
+const ROOT_CHILD_TAG = 'column';
+const GENERATED_ELEMENT_ID = 'generated-element-id';
+const CONFIG_ID = 'cfg-a';
+const ELEMENT_CONFIG_PROPERTY = 'title';
+const ELEMENT_CONFIG_VALUE = 'configured-value';
+
+const xmlStringWithConfiguration = `<${ ROOT_CHILD_TAG } configuration-id="${ CONFIG_ID }" />`;
+
+const createElementConfigPayload = () => ( {
+	[ CONFIG_ID ]: {
+		[ ELEMENT_CONFIG_PROPERTY ]: ELEMENT_CONFIG_VALUE,
+	},
+} );
+
+const createMinimalWidgetsCache = () =>
+	( {
+		[ ROOT_CHILD_TAG ]: {
+			elType: 'column',
+		},
+	} ) as Record< string, { elType: string } >;
+
+const createMockRootContainer = (): V1Element =>
+	( {
+		id: 'root',
+		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;
+
+const createMockPartialContainer = ( id: string ): 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( 'CompositionBuilder.build createElement failure cleanup', () => {
+	it( 'calls deleteElement when createElement fails and getContainer returns a container', async () => {
+		// Arrange
+		const partialContainer = createMockPartialContainer( GENERATED_ELEMENT_ID );
+		const deleteElement = jest.fn();
+		const doUpdateElementProperty = jest.fn();
+		const createElement = jest.fn().mockImplementation( () => {
+			throw new Error( 'create failed' );
+		} );
+		const getContainer = jest
+			.fn()
+			.mockImplementation( ( id: string ) => ( id === GENERATED_ELEMENT_ID ? partialContainer : undefined ) );
+		const builder = CompositionBuilder.fromXMLString( xmlStringWithConfiguration, {
+			createElement,
+			deleteElement,
+			getContainer,
+			generateElementId: jest.fn().mockReturnValue( GENERATED_ELEMENT_ID ),
+			getWidgetsCache: jest.fn().mockReturnValue( createMinimalWidgetsCache() ),
+			doUpdateElementProperty,
+		} );
+		builder.setElementConfig( createElementConfigPayload() );
+
+		// Act
+		await expect( builder.build( createMockRootContainer() ) ).rejects.toThrow( 'create failed' );
+
+		// Assert
+		expect( getContainer ).toHaveBeenCalledWith( GENERATED_ELEMENT_ID );
+		expect( deleteElement ).toHaveBeenCalledTimes( 1 );
+		expect( deleteElement ).toHaveBeenCalledWith( { container: partialContainer } );
+		expect( doUpdateElementProperty ).not.toHaveBeenCalled();
+	} );
+
+	it( 'does not call deleteElement when createElement fails and getContainer returns undefined', async () => {
+		// Arrange
+		const deleteElement = jest.fn();
+		const doUpdateElementProperty = jest.fn();
+		const createElement = jest.fn().mockImplementation( () => {
+			throw new Error( 'create failed' );
+		} );
+		const getContainer = jest.fn().mockReturnValue( undefined );
+		const builder = CompositionBuilder.fromXMLString( xmlStringWithConfiguration, {
+			createElement,
+			deleteElement,
+			getContainer,
+			generateElementId: jest.fn().mockReturnValue( GENERATED_ELEMENT_ID ),
+			getWidgetsCache: jest.fn().mockReturnValue( createMinimalWidgetsCache() ),
+			doUpdateElementProperty,
+		} );
+		builder.setElementConfig( createElementConfigPayload() );
+
+		// Act
+		await expect( builder.build( createMockRootContainer() ) ).rejects.toThrow( 'create failed' );
+
+		// Assert
+		expect( getContainer ).toHaveBeenCalledWith( GENERATED_ELEMENT_ID );
+		expect( deleteElement ).not.toHaveBeenCalled();
+		expect( doUpdateElementProperty ).not.toHaveBeenCalled();
+	} );
+
+	it( 'calls deleteElement when createElement returns without a model', async () => {
+		// Arrange
+		const partialContainer = createMockPartialContainer( GENERATED_ELEMENT_ID );
+		const deleteElement = jest.fn();
+		const doUpdateElementProperty = jest.fn();
+		const createElement = jest.fn().mockReturnValue( {} as V1Element );
+		const getContainer = jest
+			.fn()
+			.mockImplementation( ( id: string ) => ( id === GENERATED_ELEMENT_ID ? partialContainer : undefined ) );
+		const builder = CompositionBuilder.fromXMLString( xmlStringWithConfiguration, {
+			createElement,
+			deleteElement,
+			getContainer,
+			generateElementId: jest.fn().mockReturnValue( GENERATED_ELEMENT_ID ),
+			getWidgetsCache: jest.fn().mockReturnValue( createMinimalWidgetsCache() ),
+			doUpdateElementProperty,
+		} );
+		builder.setElementConfig( createElementConfigPayload() );
+
+		// Act
+		await expect( builder.build( createMockRootContainer() ) ).rejects.toThrow(
+			'createElement did not return an element container with a model.'
+		);
+
+		// Assert
+		expect( getContainer ).toHaveBeenCalledWith( GENERATED_ELEMENT_ID );
+		expect( deleteElement ).toHaveBeenCalledTimes( 1 );
+		expect( deleteElement ).toHaveBeenCalledWith( { container: partialContainer } );
+		expect( doUpdateElementProperty ).not.toHaveBeenCalled();
+	} );
+} );
+
+describe( 'CompositionBuilder.build applyProperties after create', () => {
+	it( 'calls doUpdateElementProperty when create succeeds with element config', async () => {
+		// Arrange
+		const deleteElement = jest.fn();
+		const doUpdateElementProperty = jest.fn();
+		const createdElement = createMockPartialContainer( GENERATED_ELEMENT_ID );
+		const createElement = jest.fn().mockReturnValue( createdElement );
+		const getContainer = jest
+			.fn()
+			.mockImplementation( ( id: string ) => ( id === GENERATED_ELEMENT_ID ? createdElement : undefined ) );
+		const builder = CompositionBuilder.fromXMLString( xmlStringWithConfiguration, {
+			createElement,
+			deleteElement,
+			getContainer,
+			generateElementId: jest.fn().mockReturnValue( GENERATED_ELEMENT_ID ),
+			getWidgetsCache: jest.fn().mockReturnValue( createMinimalWidgetsCache() ),
+			doUpdateElementProperty,
+		} );
+		builder.setElementConfig( createElementConfigPayload() );
+
+		// Act
+		await builder.build( createMockRootContainer() );
+
+		// Assert
+		expect( deleteElement ).not.toHaveBeenCalled();
+		expect( createElement ).toHaveBeenCalledTimes( 1 );
+		expect( doUpdateElementProperty ).toHaveBeenCalledTimes( 1 );
+		expect( doUpdateElementProperty ).toHaveBeenCalledWith( {
+			elementId: GENERATED_ELEMENT_ID,
+			propertyName: ELEMENT_CONFIG_PROPERTY,
+			propertyValue: ELEMENT_CONFIG_VALUE,
+			elementType: ROOT_CHILD_TAG,
+		} );
+	} );
+
+	it( 'does not call doUpdateElementProperty when create succeeds without element config', async () => {
+		// Arrange
+		const deleteElement = jest.fn();
+		const doUpdateElementProperty = jest.fn();
+		const createdElement = createMockPartialContainer( GENERATED_ELEMENT_ID );
+		const createElement = jest.fn().mockReturnValue( createdElement );
+		const builder = CompositionBuilder.fromXMLString( `<${ ROOT_CHILD_TAG } />`, {
+			createElement,
+			deleteElement,
+			getContainer: jest.fn(),
+			generateElementId: jest.fn().mockReturnValue( GENERATED_ELEMENT_ID ),
+			getWidgetsCache: jest.fn().mockReturnValue( createMinimalWidgetsCache() ),
+			doUpdateElementProperty,
+		} );
+
+		// Act
+		await builder.build( createMockRootContainer() );
+
+		// Assert
+		expect( deleteElement ).not.toHaveBeenCalled();
+		expect( doUpdateElementProperty ).not.toHaveBeenCalled();
+	} );
+} );

package/src/composition-builder/composition-builder.ts

@@ -17,6 +17,8 @@ import { validateInput } from '../mcp/utils/validate-input';
 type AnyValue = z.infer< z.ZodTypeAny >;
 type AnyConfig = Record< string, Record< string, AnyValue > >;
 
+const CREATE_ELEMENT_INVALID_CONTAINER_MESSAGE = 'createElement did not return an element container with a model.';
+
 type API = {
 	createElement: typeof createElement;
 	deleteElement: typeof deleteElement;
@@ -296,6 +298,9 @@ export class CompositionBuilder {
 					model: modelTree as CreateElementParams[ 'model' ],
 					options: { useHistory: false },
 				} );
+				if ( ! newElement?.model ) {
+					throw new Error( CREATE_ELEMENT_INVALID_CONTAINER_MESSAGE );
+				}
 				this.rootContainers.push( newElement );
 				await this.awaitViewRender( newElement );
 			} catch ( e: unknown ) {