@elementor/editor-canvas 4.2.0-946 → 4.2.0-beta2

package/src/form-structure/utils.ts

@@ -7,6 +7,7 @@ type Model = {
 
 export type CreateArgs = {
 	container?: V1Element;
+	containers?: V1Element[];
 	model?: Model;
 };
 
@@ -114,3 +115,49 @@ export function clipboardRootsAreAtomicForms( elements: ClipboardElement[] ): bo
 
 	return elements.every( ( el ) => getClipboardElementType( el ) === FORM_ELEMENT_TYPE );
 }
+
+export function hasFormAncestor( node: Element ): boolean {
+	return node.closest( FORM_ELEMENT_TYPE ) !== null;
+}
+
+export function collectFormAncestorErrors( xml: Document ): string[] {
+	const errors: string[] = [];
+	for ( const node of xml.querySelectorAll( '*' ) ) {
+		if ( ! FORM_FIELD_ELEMENT_TYPES.has( node.tagName.toLowerCase() ) ) {
+			continue;
+		}
+		if ( hasFormAncestor( node ) ) {
+			continue;
+		}
+		const id = node.getAttribute( 'configuration-id' );
+		errors.push(
+			`<${ node.tagName }${
+				id ? ` configuration-id="${ id }"` : ''
+			}> must be nested inside <e-form> (any ancestor depth is allowed).`
+		);
+	}
+	return errors;
+}
+
+export function collectSubmitButtonErrors( xml: Document ): string[] {
+	const errors: string[] = [];
+	for ( const form of xml.querySelectorAll( 'e-form' ) ) {
+		const submitButtons = form.querySelectorAll( 'e-form-submit-button' );
+		if ( submitButtons.length === 0 ) {
+			errors.push( `<e-form> has no <e-form-submit-button>.` );
+		} else if ( submitButtons.length > 1 ) {
+			errors.push( `<e-form> has ${ submitButtons.length } submit buttons — only 1 is allowed.` );
+		}
+	}
+	return errors;
+}
+
+export function collectEmptyMessageErrors( xml: Document ): string[] {
+	const errors: string[] = [];
+	for ( const node of xml.querySelectorAll( 'e-form-success-message, e-form-error-message' ) ) {
+		if ( node.children.length === 0 ) {
+			errors.push( `<${ node.tagName }> must have at least one child element (e.g. <e-atomic-paragraph>).` );
+		}
+	}
+	return errors;
+}

package/src/index.ts

@@ -44,3 +44,4 @@ export { UnknownStyleTypeError, UnknownStyleStateError } from './renderers/error
 export { useCanvasDocument } from './hooks/use-canvas-document';
 export { useEscapeOnCanvas } from './hooks/use-escape-on-canvas';
 export { doAfterRender } from './utils/after-render';
+export { ELEMENT_ADDED_EVENT, type ElementAddedEvent } from './mcp/tools/build-composition/tool';

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

@@ -5,10 +5,13 @@ import {
 	getContainer,
 	getWidgetsCache,
 	type V1Element,
+	type V1ElementData,
 } from '@elementor/editor-elements';
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+import { dispatchMcpStylesAppliedEvent } from '@elementor/editor-mcp';
 
 import { CompositionBuilder } from '../../../composition-builder/composition-builder';
+import { trackCanvasEvent } from '../../../utils/tracking';
 import { AVAILABLE_WIDGETS_URI_V4 } from '../../resources/available-widgets-resource';
 import { DYNAMIC_TAGS_URI } from '../../resources/dynamic-tags-resource';
 import { BEST_PRACTICES_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
@@ -19,6 +22,13 @@ import { BUILD_COMPOSITIONS_GUIDE_URI, generatePrompt } from './prompt';
 import { inputSchema as schema, outputSchema } from './schema';
 import { adaptLeafRootParams } from './xml-leaf-wrapper';
 
+export type ElementAddedEvent = {
+	element: V1ElementData;
+	executedBy: 'mcp_tool' | 'user';
+};
+
+export const ELEMENT_ADDED_EVENT = 'elementor/canvas/element-added';
+
 export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 	const { addTool, resource } = reg;
 
@@ -74,15 +84,34 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 				compositionBuilder.setStylesConfig( stylesConfig );
 				compositionBuilder.setCustomCSS( customCSS );
 
-				const { configErrors, rootContainers: generatedRootContainers } =
-					await compositionBuilder.build( targetContainer );
+				const {
+					configErrors,
+					formErrors,
+					rootContainers: generatedRootContainers,
+				} = await compositionBuilder.build( targetContainer );
 
 				rootContainers.push( ...generatedRootContainers );
 				generatedXML = new XMLSerializer().serializeToString( compositionBuilder.getXML() );
 
+				rootContainers.forEach( ( container ) => {
+					const elementData = container.model?.toJSON();
+
+					if ( elementData ) {
+						onElementAdded( elementData as V1ElementData );
+					}
+				} );
+
+				Object.values( stylesConfig ).forEach( ( styleValue ) => {
+					dispatchMcpStylesAppliedEvent( { styleValue } );
+				} );
+
 				if ( configErrors.length ) {
 					errors.push( ...configErrors.map( ( msg ) => new Error( msg ) ) );
 				}
+
+				if ( formErrors.length ) {
+					errors.push( ...formErrors.map( ( msg ) => new Error( msg ) ) );
+				}
 			} catch ( error ) {
 				errors.push( error as Error );
 			}
@@ -186,3 +215,30 @@ function assertCompositionXmlUsesV4WidgetsOnly( xmlStructure: string ) {
 		}
 	}
 }
+
+function onElementAdded( element: V1ElementData ) {
+	const elType = element.elType ?? '';
+	const widgetType = element.widgetType ?? '';
+	const elementName = elType === 'widget' ? widgetType : elType;
+
+	trackCanvasEvent( {
+		eventName: 'add_element',
+		executed_by: 'mcp_tool',
+		element_name: elementName,
+		element_type: elType,
+		widget_type: widgetType,
+	} );
+
+	const event: ElementAddedEvent = {
+		element,
+		executedBy: 'mcp_tool',
+	};
+
+	window.dispatchEvent( new CustomEvent( ELEMENT_ADDED_EVENT, { detail: event } ) );
+
+	if ( element.elements?.length ) {
+		element.elements?.forEach( ( childElement ) => {
+			onElementAdded( childElement );
+		} );
+	}
+}

package/src/mcp/tools/configure-element/tool.ts

@@ -1,5 +1,6 @@
 import { getContainer, getWidgetsCache } from '@elementor/editor-elements';
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+import { dispatchMcpStylesAppliedEvent } from '@elementor/editor-mcp';
 import { type PropValue, Schema } from '@elementor/editor-props';
 
 import { DYNAMIC_TAGS_URI } from '../../resources/dynamic-tags-resource';
@@ -115,6 +116,8 @@ async function applyStyleFromCss( opts: {
 			propertyValue: styleValue,
 			customCssWriteMode: 'merge-with-stored',
 		} );
+
+		dispatchMcpStylesAppliedEvent( { styleValue } );
 	} catch ( error ) {
 		throw new Error(
 			createUpdateErrorMessage( {

package/src/types/element-overlay.ts

@@ -5,12 +5,14 @@ export type ElementOverlayProps = {
 	id: string;
 	isSelected: boolean;
 	isGlobal?: boolean;
+	widgetType?: string;
 };
 
 export type OverlayFilterArgs = {
 	id: string;
 	element: HTMLElement;
 	isSelected: boolean;
+	widgetType?: string;
 };
 
 export type ElementOverlayConfig = {

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

@@ -0,0 +1,39 @@
+import { shouldUseSmallerOutlineOffset, THIN_ELEMENT_MAX_HEIGHT_PX } from '../outline-offset-utils';
+
+describe( 'shouldUseSmallerOutlineOffset', () => {
+	it( 'returns true for thin elements like dividers', () => {
+		// Arrange.
+		const element = document.createElement( 'hr' );
+		Object.defineProperty( element, 'offsetHeight', { value: THIN_ELEMENT_MAX_HEIGHT_PX } );
+
+		// Act.
+		const result = shouldUseSmallerOutlineOffset( element );
+
+		// Assert.
+		expect( result ).toBe( true );
+	} );
+
+	it( 'returns true for atomic form input widgets', () => {
+		// Arrange.
+		const element = document.createElement( 'input' );
+		Object.defineProperty( element, 'offsetHeight', { value: 36 } );
+
+		// Act.
+		const result = shouldUseSmallerOutlineOffset( element, 'e-form-input' );
+
+		// Assert.
+		expect( result ).toBe( true );
+	} );
+
+	it( 'returns false for other atomic widgets', () => {
+		// Arrange.
+		const element = document.createElement( 'div' );
+		Object.defineProperty( element, 'offsetHeight', { value: 100 } );
+
+		// Act.
+		const result = shouldUseSmallerOutlineOffset( element, 'e-heading' );
+
+		// Assert.
+		expect( result ).toBe( false );
+	} );
+} );

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

@@ -0,0 +1,11 @@
+export const THIN_ELEMENT_MAX_HEIGHT_PX = 1;
+
+export const SMALLER_OUTLINE_OFFSET_WIDGET_TYPES = new Set( [ 'e-form-input' ] );
+
+export function shouldUseSmallerOutlineOffset( element: HTMLElement, widgetType?: string ): boolean {
+	if ( element.offsetHeight <= THIN_ELEMENT_MAX_HEIGHT_PX ) {
+		return true;
+	}
+
+	return widgetType !== undefined && SMALLER_OUTLINE_OFFSET_WIDGET_TYPES.has( widgetType );
+}

package/src/utils/tracking.ts

@@ -0,0 +1,14 @@
+import { trackEvent } from '@elementor/events';
+
+type ElementEventData = {
+	eventName: 'add_element';
+	element_name: string;
+	element_type: string;
+	widget_type: string;
+	location?: string;
+	executed_by: 'user' | 'mcp_tool' | 'system';
+};
+
+export const trackCanvasEvent = ( data: ElementEventData ) => {
+	trackEvent( data );
+};