@elementor/editor-canvas 4.0.0-manual → 4.0.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;
+}

package/src/renderers/__tests__/create-styles-renderer.test.ts

@@ -118,6 +118,123 @@ describe( 'renderStyles', () => {
 	} );
 } );
 
+describe( 'breakpoint deduplication', () => {
+	it( 'should render all breakpoints when same id has multiple breakpoint variants', async () => {
+		// Arrange - simulates output from breakToBreakpoints in use-style-items.
+		const desktopStyle: RendererStyleDefinition = {
+			id: 'button-style',
+			type: 'class',
+			cssName: 'e-button',
+			label: 'Button',
+			variants: [ { meta: { breakpoint: null, state: null }, props: { 'font-size': '16px' }, custom_css: null } ],
+		};
+		const tabletStyle: RendererStyleDefinition = {
+			...desktopStyle,
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: null }, props: { 'font-size': '14px' }, custom_css: null },
+			],
+		};
+		const mobileStyle: RendererStyleDefinition = {
+			...desktopStyle,
+			variants: [
+				{ meta: { breakpoint: 'mobile', state: null }, props: { 'font-size': '12px' }, custom_css: null },
+			],
+		};
+
+		const resolve = jest.fn( ( { props } ) => props );
+		const renderStyles = createStylesRenderer( {
+			breakpoints: {
+				tablet: { width: 992, type: 'max-width' },
+				mobile: { width: 768, type: 'max-width' },
+			} as BreakpointsMap,
+			resolve,
+		} );
+
+		// Act.
+		const result = await renderStyles( { styles: [ desktopStyle, tabletStyle, mobileStyle ] } );
+
+		// Assert - all three breakpoints must be rendered (previously tablet/mobile were dropped).
+		expect( result ).toHaveLength( 3 );
+		expect( result.map( ( r ) => r.breakpoint ) ).toEqual( [ 'desktop', 'tablet', 'mobile' ] );
+		expect( result[ 0 ].value ).toContain( 'font-size:16px' );
+		expect( result[ 1 ].value ).toContain( '@media(max-width:992px)' );
+		expect( result[ 1 ].value ).toContain( 'font-size:14px' );
+		expect( result[ 2 ].value ).toContain( '@media(max-width:768px)' );
+		expect( result[ 2 ].value ).toContain( 'font-size:12px' );
+	} );
+
+	it( 'should deduplicate same id + breakpoint + state combinations', async () => {
+		// Arrange - two styles with same id, breakpoint, and state should dedupe.
+		const style1: RendererStyleDefinition = {
+			id: 'button-style',
+			type: 'class',
+			cssName: 'e-button',
+			label: 'Button',
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: null }, props: { 'font-size': '14px' }, custom_css: null },
+			],
+		};
+		const style2: RendererStyleDefinition = {
+			...style1,
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: null }, props: { 'font-size': '16px' }, custom_css: null },
+			],
+		};
+
+		const resolve = jest.fn( ( { props } ) => props );
+		const renderStyles = createStylesRenderer( {
+			breakpoints: {
+				tablet: { width: 992, type: 'max-width' },
+			} as BreakpointsMap,
+			resolve,
+		} );
+
+		// Act.
+		const result = await renderStyles( { styles: [ style1, style2 ] } );
+
+		// Assert - should only render first occurrence.
+		expect( result ).toHaveLength( 1 );
+		expect( result[ 0 ].value ).toContain( 'font-size:14px' );
+	} );
+
+	it( 'should render separately when same id + breakpoint have different states', async () => {
+		// Arrange - same id and breakpoint but different states should NOT dedupe.
+		const normalStyle: RendererStyleDefinition = {
+			id: 'button-style',
+			type: 'class',
+			cssName: 'e-button',
+			label: 'Button',
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: null }, props: { 'font-size': '14px' }, custom_css: null },
+			],
+		};
+		const hoverStyle: RendererStyleDefinition = {
+			...normalStyle,
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: 'hover' }, props: { 'font-size': '16px' }, custom_css: null },
+			],
+		};
+
+		const resolve = jest.fn( ( { props } ) => props );
+		const renderStyles = createStylesRenderer( {
+			breakpoints: {
+				tablet: { width: 992, type: 'max-width' },
+			} as BreakpointsMap,
+			resolve,
+		} );
+
+		// Act.
+		const result = await renderStyles( { styles: [ normalStyle, hoverStyle ] } );
+
+		// Assert - both should be rendered since states differ.
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].state ).toBeNull();
+		expect( result[ 0 ].value ).toContain( 'font-size:14px' );
+		expect( result[ 1 ].state ).toBe( 'hover' );
+		expect( result[ 1 ].value ).toContain( 'font-size:16px' );
+	} );
+} );
+
 describe( 'custom_css rendering', () => {
 	it( 'should not render custom_css if raw is empty', async () => {
 		// Arrange.

package/src/renderers/create-styles-renderer.ts

@@ -46,14 +46,24 @@ const SELECTORS_MAP: Record< StyleDefinitionType, string > = {
 	class: '.',
 };
 
+const DEFAULT_BREAKPOINT = 'desktop';
+const DEFAULT_STATE = 'normal';
+
+function getStyleUniqueKey( style: RendererStyleDefinition ): string {
+	const breakpoint = style.variants[ 0 ]?.meta?.breakpoint ?? DEFAULT_BREAKPOINT;
+	const state = style.variants[ 0 ]?.meta?.state ?? DEFAULT_STATE;
+	return `${ style.id }-${ breakpoint }-${ state }`;
+}
+
 export function createStylesRenderer( { resolve, breakpoints, selectorPrefix = '' }: CreateStyleRendererArgs ) {
 	return async ( { styles, signal }: StyleRendererArgs ): Promise< StyleItem[] > => {
-		const seenIds = new Set< string >();
+		const seenKeys = new Set< string >();
 		const uniqueStyles = styles.filter( ( style ) => {
-			if ( seenIds.has( style.id ) ) {
+			const key = getStyleUniqueKey( style );
+			if ( seenKeys.has( key ) ) {
 				return false;
 			}
-			seenIds.add( style.id );
+			seenKeys.add( key );
 			return true;
 		} );
 

package/src/style-commands/__tests__/paste-style.test.ts

@@ -19,14 +19,16 @@ import { classesPropTypeUtil } from '@elementor/editor-props';
 import { type StyleDefinition } from '@elementor/editor-styles';
 import { ELEMENTS_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
 
+import { getClipboardElements } from '../../utils/command-utils';
 import { initPasteStyleCommand } from '../paste-style';
-import { getClipboardElements } from '../utils';
 
 jest.mock( '@elementor/editor-elements' );
-jest.mock( '../utils', () => ( {
-	...jest.requireActual( '../utils' ),
+
+jest.mock( '../../utils/command-utils', () => ( {
+	...jest.requireActual( '../../utils/command-utils' ),
 	getClipboardElements: jest.fn(),
 } ) );
+
 jest.mock( '@elementor/editor-v1-adapters', () => ( {
 	...jest.requireActual( '@elementor/editor-v1-adapters' ),
 	blockCommand: jest.fn(),

package/src/style-commands/__tests__/reset-style.test.ts

@@ -7,13 +7,13 @@ import {
 import { createElementStyle, deleteElementStyle, getElementStyles } from '@elementor/editor-elements';
 import { ELEMENTS_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
 
+import { getClassesProp, hasAtomicWidgets, isAtomicWidget } from '../../utils/command-utils';
 import { initResetStyleCommand } from '../reset-style';
-import { getClassesProp, hasAtomicWidgets, isAtomicWidget } from '../utils';
 
 jest.mock( '@elementor/editor-elements' );
 
-jest.mock( '../utils', () => ( {
-	...jest.requireActual( '../utils' ),
+jest.mock( '../../utils/command-utils', () => ( {
+	...jest.requireActual( '../../utils/command-utils' ),
 	getClassesProp: jest.fn(),
 	hasAtomicWidgets: jest.fn(),
 	isAtomicWidget: jest.fn(),

package/src/style-commands/paste-style.ts

@@ -8,8 +8,14 @@ import {
 	commandStartEvent,
 } from '@elementor/editor-v1-adapters';
 
+import {
+	type ContainerArgs,
+	getClassesProp,
+	getClipboardElements,
+	hasAtomicWidgets,
+	isAtomicWidget,
+} from '../utils/command-utils';
 import { undoablePasteElementStyle } from './undoable-actions/paste-element-style';
-import { type ContainerArgs, getClassesProp, getClipboardElements, hasAtomicWidgets, isAtomicWidget } from './utils';
 
 type PasteStylesCommandArgs = ContainerArgs & {
 	storageKey?: string;

package/src/style-commands/reset-style.ts

@@ -6,8 +6,8 @@ import {
 	commandStartEvent,
 } from '@elementor/editor-v1-adapters';
 
+import { type ContainerArgs, hasAtomicWidgets, isAtomicWidget } from '../utils/command-utils';
 import { undoableResetElementStyle } from './undoable-actions/reset-element-style';
-import { type ContainerArgs, hasAtomicWidgets, isAtomicWidget } from './utils';
 
 export function initResetStyleCommand() {
 	const resetElementStyles = undoableResetElementStyle();

package/src/style-commands/undoable-actions/paste-element-style.ts

@@ -10,7 +10,7 @@ import { ELEMENTS_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-reposit
 import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
-import { getClassesProp, getTitleForContainers } from '../utils';
+import { getClassesProp, getTitleForContainers } from '../../utils/command-utils';
 
 type PasteElementStyleArgs = {
 	containers: V1Element[];

package/src/style-commands/undoable-actions/reset-element-style.ts

@@ -3,7 +3,7 @@ import { ELEMENTS_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-reposit
 import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
-import { getClassesProp, getTitleForContainers } from '../utils';
+import { getClassesProp, getTitleForContainers } from '../../utils/command-utils';
 
 type ResetElementStyleArgs = {
 	containers: V1Element[];

package/src/transformers/styles/__tests__/size-transformer.test.ts

@@ -0,0 +1,24 @@
+import { sizeTransformer } from '../size-transformer';
+
+function run( val: { size?: number; unit?: string } ) {
+	return sizeTransformer( val, { key: 'width', signal: undefined } );
+}
+
+describe( 'sizeTransformer', () => {
+	it( 'returns "auto" when unit is auto and size is null', () => {
+		expect( run( { size: undefined, unit: 'auto' } ) ).toBe( 'auto' );
+	} );
+
+	it( 'returns "auto" when unit is auto and size is undefined', () => {
+		expect( run( { unit: 'auto' } ) ).toBe( 'auto' );
+	} );
+
+	it( 'concatenates size and unit for normal units', () => {
+		expect( run( { size: 100, unit: 'px' } ) ).toBe( '100px' );
+		expect( run( { size: 50, unit: '%' } ) ).toBe( '50%' );
+	} );
+
+	it( 'returns only size for custom unit', () => {
+		expect( run( { size: 100, unit: 'custom' } ) ).toBe( 100 );
+	} );
+} );

package/src/transformers/styles/size-transformer.ts

@@ -6,5 +6,8 @@ type Size = {
 };
 
 export const sizeTransformer = createTransformer( ( value: Size ) => {
+	if ( value.unit === 'auto' ) {
+		return 'auto';
+	}
 	return value.unit === 'custom' ? value.size : `${ value.size }${ value.unit }`;
 } );