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

package/src/hooks/use-grid-tracks.ts

@@ -0,0 +1,52 @@
+import { useMemo } from 'react';
+
+import { parseTrackList, toPx } from '../utils/grid-outline-utils';
+
+export type GridTracks = {
+	columns: number[];
+	rows: number[];
+	columnGap: number;
+	rowGap: number;
+	padding: { top: number; right: number; bottom: number; left: number };
+	borderColor: string;
+};
+
+const EMPTY: GridTracks = {
+	columns: [],
+	rows: [],
+	columnGap: 0,
+	rowGap: 0,
+	padding: { top: 0, right: 0, bottom: 0, left: 0 },
+	borderColor: '',
+};
+
+export function useGridTracks( element: HTMLElement | null, rect: DOMRect ): GridTracks {
+	return useMemo( () => {
+		if ( ! element ) {
+			return EMPTY;
+		}
+
+		const previewWindow = element.ownerDocument?.defaultView;
+
+		if ( ! previewWindow ) {
+			return EMPTY;
+		}
+
+		const computedStyle = previewWindow.getComputedStyle( element );
+
+		return {
+			columns: parseTrackList( computedStyle.gridTemplateColumns ),
+			rows: parseTrackList( computedStyle.gridTemplateRows ),
+			columnGap: toPx( computedStyle.columnGap ),
+			rowGap: toPx( computedStyle.rowGap ),
+			padding: {
+				top: toPx( computedStyle.paddingTop ),
+				right: toPx( computedStyle.paddingRight ),
+				bottom: toPx( computedStyle.paddingBottom ),
+				left: toPx( computedStyle.paddingLeft ),
+			},
+			borderColor: computedStyle.getPropertyValue( '--e-a-border-color-bold' ).trim(),
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ element, rect.width, rect.height ] );
+}

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 );
+}

package/src/utils/__tests__/grid-outline-utils.test.ts

@@ -0,0 +1,142 @@
+import { type GridTracks } from '../../hooks/use-grid-tracks';
+import { computeOutlineGeometry, parseTrackList, snapToHalfPixel, toPx } from '../grid-outline-utils';
+
+function makeTracks( partial: Partial< GridTracks > = {} ): GridTracks {
+	return {
+		columns: [],
+		rows: [],
+		columnGap: 0,
+		rowGap: 0,
+		padding: { top: 0, right: 0, bottom: 0, left: 0 },
+		borderColor: '',
+		...partial,
+	};
+}
+
+describe( 'computeOutlineGeometry', () => {
+	it( 'returns empty boundary lists when there are no tracks', () => {
+		const geometry = computeOutlineGeometry( makeTracks(), 100, 100 );
+
+		expect( geometry.vertical ).toEqual( [] );
+		expect( geometry.horizontal ).toEqual( [] );
+	} );
+
+	it( 'shifts boundaries by the padding offset on each axis', () => {
+		const tracks = makeTracks( {
+			columns: [ 100, 100 ],
+			rows: [ 80, 80 ],
+			padding: { top: 5, right: 0, bottom: 0, left: 20 },
+		} );
+
+		const geometry = computeOutlineGeometry( tracks, 300, 300 );
+
+		expect( geometry.vertical ).toEqual( [ 20, 120, 220 ] );
+		expect( geometry.horizontal ).toEqual( [ 5, 85, 165 ] );
+	} );
+
+	it( 'emits both edges of every gap between tracks', () => {
+		const tracks = makeTracks( {
+			columns: [ 100, 100, 100 ],
+			columnGap: 10,
+		} );
+
+		const geometry = computeOutlineGeometry( tracks, 400, 100 );
+
+		// 0 — 100 [gap 10] 110 — 210 [gap 10] 220 — 320
+		expect( geometry.vertical ).toEqual( [ 0, 100, 110, 210, 220, 320 ] );
+	} );
+
+	it( 'collapses gap boundaries when the gap is zero', () => {
+		const tracks = makeTracks( {
+			rows: [ 50, 50, 50 ],
+			rowGap: 0,
+		} );
+
+		const geometry = computeOutlineGeometry( tracks, 100, 200 );
+
+		expect( geometry.horizontal ).toEqual( [ 0, 50, 100, 150 ] );
+	} );
+
+	it( 'handles uneven track sizes', () => {
+		const tracks = makeTracks( {
+			columns: [ 100, 200, 100 ],
+			columnGap: 5,
+			padding: { top: 0, right: 0, bottom: 0, left: 10 },
+		} );
+
+		const geometry = computeOutlineGeometry( tracks, 500, 100 );
+
+		// 10 — 110 [5] 115 — 315 [5] 320 — 420
+		expect( geometry.vertical ).toEqual( [ 10, 110, 115, 315, 320, 420 ] );
+	} );
+
+	it( 'derives the content rect from element size and padding', () => {
+		const tracks = makeTracks( {
+			padding: { top: 5, right: 8, bottom: 12, left: 20 },
+		} );
+
+		const geometry = computeOutlineGeometry( tracks, 300, 200 );
+
+		expect( geometry.top ).toBe( 5 );
+		expect( geometry.left ).toBe( 20 );
+		expect( geometry.right ).toBe( 292 );
+		expect( geometry.bottom ).toBe( 188 );
+	} );
+} );
+
+describe( 'snapToHalfPixel', () => {
+	it.each( [
+		[ 0, 0.5 ],
+		[ 0.4, 0.5 ],
+		[ 0.6, 1.5 ],
+		[ 99.2, 99.5 ],
+		[ 100, 100.5 ],
+		[ -0.4, 0.5 ],
+		[ -1.6, -1.5 ],
+	] )( 'snaps %p to %p for crisp 1px strokes', ( input, expected ) => {
+		expect( snapToHalfPixel( input ) ).toBe( expected );
+	} );
+} );
+
+describe( 'parseTrackList', () => {
+	it( 'returns an empty list for empty input', () => {
+		expect( parseTrackList( '' ) ).toEqual( [] );
+	} );
+
+	it( 'returns an empty list for the "none" keyword', () => {
+		expect( parseTrackList( 'none' ) ).toEqual( [] );
+	} );
+
+	it( 'parses a single resolved px track', () => {
+		expect( parseTrackList( '200px' ) ).toEqual( [ 200 ] );
+	} );
+
+	it( 'parses multiple resolved px tracks', () => {
+		expect( parseTrackList( '100px 200px 100px' ) ).toEqual( [ 100, 200, 100 ] );
+	} );
+
+	it( 'parses fractional pixel sizes', () => {
+		expect( parseTrackList( '99.5px 100.25px' ) ).toEqual( [ 99.5, 100.25 ] );
+	} );
+
+	it( 'collapses runs of whitespace between tracks', () => {
+		expect( parseTrackList( '  100px   200px\t300px ' ) ).toEqual( [ 100, 200, 300 ] );
+	} );
+
+	it( 'drops zero-width entries (e.g. tracks resolved to 0)', () => {
+		expect( parseTrackList( '100px 0px 200px' ) ).toEqual( [ 100, 200 ] );
+	} );
+} );
+
+describe( 'toPx', () => {
+	it.each( [
+		[ '0px', 0 ],
+		[ '10px', 10 ],
+		[ '99.5px', 99.5 ],
+		[ 'normal', 0 ],
+		[ '', 0 ],
+		[ 'auto', 0 ],
+	] )( 'parses %p as %p', ( input, expected ) => {
+		expect( toPx( input ) ).toBe( expected );
+	} );
+} );

package/src/utils/grid-outline-utils.ts

@@ -0,0 +1,70 @@
+import { type GridTracks } from '../hooks/use-grid-tracks';
+
+export type OutlineGeometry = {
+	vertical: number[];
+	horizontal: number[];
+	top: number;
+	bottom: number;
+	left: number;
+	right: number;
+};
+
+export function computeOutlineGeometry( tracks: GridTracks, width: number, height: number ): OutlineGeometry {
+	const { columns, rows, columnGap, rowGap, padding } = tracks;
+
+	return {
+		vertical: computeBoundaries( columns, columnGap, padding.left ),
+		horizontal: computeBoundaries( rows, rowGap, padding.top ),
+		top: padding.top,
+		bottom: height - padding.bottom,
+		left: padding.left,
+		right: width - padding.right,
+	};
+}
+
+function computeBoundaries( sizes: number[], gap: number, offset: number ): number[] {
+	if ( sizes.length === 0 ) {
+		return [];
+	}
+
+	const boundaries: number[] = [];
+	let cursor = offset;
+
+	for ( let i = 0; i < sizes.length; i++ ) {
+		if ( i === 0 ) {
+			boundaries.push( cursor );
+		}
+
+		cursor += sizes[ i ];
+		boundaries.push( cursor );
+
+		if ( i < sizes.length - 1 && gap > 0 ) {
+			cursor += gap;
+			boundaries.push( cursor );
+		}
+	}
+
+	return boundaries;
+}
+
+export function snapToHalfPixel( value: number ): number {
+	return Math.round( value ) + 0.5;
+}
+
+export function parseTrackList( value: string ): number[] {
+	if ( ! value || value === 'none' ) {
+		return [];
+	}
+
+	return value
+		.trim()
+		.split( /\s+/ )
+		.map( toPx )
+		.filter( ( n ) => n > 0 );
+}
+
+export function toPx( value: string ): number {
+	const parsed = parseFloat( value );
+
+	return Number.isFinite( parsed ) ? parsed : 0;
+}