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

package/src/form-structure/__tests__/form-structure-utils.test.ts

@@ -1,7 +1,11 @@
 import type { V1Element } from '@elementor/editor-elements';
 
+import { parseXml } from '../../__tests__/parse-xml';
 import {
 	clipboardRootsAreAtomicForms,
+	collectEmptyMessageErrors,
+	collectFormAncestorErrors,
+	collectSubmitButtonErrors,
 	FORM_ELEMENT_TYPE,
 	getClipboardElementType,
 	movedContainersIncludeAtomicFormRoot,
@@ -67,4 +71,218 @@ describe( 'form-structure utils', () => {
 			expect( clipboardRootsAreAtomicForms( [] ) ).toBe( false );
 		} );
 	} );
+
+	describe( 'collectFormAncestorErrors', () => {
+		it( 'returns no errors when form field is a direct child of e-form', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-form-input />
+				</e-form>
+			` );
+			expect( collectFormAncestorErrors( xml ) ).toHaveLength( 0 );
+		} );
+		it( 'returns no errors when form field is a deep descendant of e-form (valid)', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-flexbox>
+						<e-form-input />
+					</e-flexbox>
+				</e-form>
+			` );
+			expect( collectFormAncestorErrors( xml ) ).toHaveLength( 0 );
+		} );
+		it( 'returns no errors when e-form wraps multiple containers with fields (valid)', () => {
+			const xml = parseXml( `
+				<e-flexbox>
+					<e-form>
+						<e-form-input />
+					</e-form>
+				</e-flexbox>
+			` );
+			expect( collectFormAncestorErrors( xml ) ).toHaveLength( 0 );
+		} );
+		it( 'returns an error when form field has no e-form ancestor (invalid)', () => {
+			const xml = parseXml( `
+				<e-flexbox>
+					<e-flexbox>
+						<e-form-input />
+					</e-flexbox>
+				</e-flexbox>
+			` );
+			const errors = collectFormAncestorErrors( xml );
+			expect( errors ).toHaveLength( 1 );
+			expect( errors[ 0 ] ).toContain( 'e-form-input' );
+			expect( errors[ 0 ] ).toContain( 'e-form' );
+		} );
+		it( 'returns an error for each orphaned form field', () => {
+			const xml = parseXml( `
+				<e-flexbox>
+					<e-form-input />
+					<e-form-label />
+				</e-flexbox>
+			` );
+			expect( collectFormAncestorErrors( xml ) ).toHaveLength( 2 );
+		} );
+		it( 'includes configuration-id in the error message when present', () => {
+			const xml = parseXml( `
+				<e-flexbox>
+					<e-form-input configuration-id="my-input" />
+				</e-flexbox>
+			` );
+			const errors = collectFormAncestorErrors( xml );
+			expect( errors[ 0 ] ).toContain( 'configuration-id="my-input"' );
+		} );
+		it( 'returns no errors when there are no form fields at all', () => {
+			const xml = parseXml( `
+				<e-flexbox>
+					<e-heading />
+				</e-flexbox>
+			` );
+			expect( collectFormAncestorErrors( xml ) ).toHaveLength( 0 );
+		} );
+	} );
+
+	describe( 'collectSubmitButtonErrors', () => {
+		it( 'returns no errors when e-form has exactly one submit button', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-form-input />
+					<e-form-submit-button />
+				</e-form>
+			` );
+			expect( collectSubmitButtonErrors( xml ) ).toHaveLength( 0 );
+		} );
+
+		it( 'returns no errors when submit button is nested inside a container within e-form', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-flexbox>
+						<e-form-submit-button />
+					</e-flexbox>
+				</e-form>
+			` );
+			expect( collectSubmitButtonErrors( xml ) ).toHaveLength( 0 );
+		} );
+
+		it( 'returns an error when e-form has no submit button', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-form-input />
+				</e-form>
+			` );
+			const errors = collectSubmitButtonErrors( xml );
+			expect( errors ).toHaveLength( 1 );
+			expect( errors[ 0 ] ).toContain( 'e-form-submit-button' );
+		} );
+
+		it( 'returns an error when e-form has more than one submit button', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-form-submit-button />
+					<e-form-submit-button />
+				</e-form>
+			` );
+			const errors = collectSubmitButtonErrors( xml );
+			expect( errors ).toHaveLength( 1 );
+			expect( errors[ 0 ] ).toContain( '2' );
+		} );
+
+		it( 'returns one error per e-form that is missing a submit button', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-form-input />
+				</e-form>
+				<e-form>
+					<e-form-input />
+				</e-form>
+			` );
+			expect( collectSubmitButtonErrors( xml ) ).toHaveLength( 2 );
+		} );
+
+		it( 'returns no errors when there are no e-form elements', () => {
+			const xml = parseXml( `
+				<e-flexbox>
+					<e-heading />
+				</e-flexbox>
+			` );
+			expect( collectSubmitButtonErrors( xml ) ).toHaveLength( 0 );
+		} );
+	} );
+
+	describe( 'collectEmptyMessageErrors', () => {
+		it( 'returns no errors when success message has children', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-form-success-message>
+						<e-atomic-paragraph />
+					</e-form-success-message>
+				</e-form>
+			` );
+			expect( collectEmptyMessageErrors( xml ) ).toHaveLength( 0 );
+		} );
+
+		it( 'returns no errors when error message has children', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-form-error-message>
+						<e-atomic-paragraph />
+					</e-form-error-message>
+				</e-form>
+			` );
+			expect( collectEmptyMessageErrors( xml ) ).toHaveLength( 0 );
+		} );
+
+		it( 'returns an error when success message is empty', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-form-success-message />
+				</e-form>
+			` );
+			const errors = collectEmptyMessageErrors( xml );
+			expect( errors ).toHaveLength( 1 );
+			expect( errors[ 0 ] ).toContain( 'e-form-success-message' );
+		} );
+
+		it( 'returns an error when error message is empty', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-form-error-message />
+				</e-form>
+			` );
+			const errors = collectEmptyMessageErrors( xml );
+			expect( errors ).toHaveLength( 1 );
+			expect( errors[ 0 ] ).toContain( 'e-form-error-message' );
+		} );
+
+		it( 'returns two errors when both success and error messages are empty', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-form-success-message />
+					<e-form-error-message />
+				</e-form>
+			` );
+			expect( collectEmptyMessageErrors( xml ) ).toHaveLength( 2 );
+		} );
+
+		it( 'returns no errors when there are no message elements', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-form-input />
+					<e-form-submit-button />
+				</e-form>
+			` );
+			expect( collectEmptyMessageErrors( xml ) ).toHaveLength( 0 );
+		} );
+
+		it( 'returns no errors when message element is outside e-form but has children', () => {
+			const xml = parseXml( `
+				<e-flexbox>
+					<e-form-success-message>
+						<e-atomic-paragraph />
+					</e-form-success-message>
+				</e-flexbox>
+			` );
+			expect( collectEmptyMessageErrors( xml ) ).toHaveLength( 0 );
+		} );
+	} );
 } );

package/src/form-structure/enforce-form-ancestor-commands.ts

@@ -5,9 +5,11 @@ import { __ } from '@wordpress/i18n';
 import {
 	clipboardRootsAreAtomicForms,
 	type CreateArgs,
+	FORM_ELEMENT_TYPE,
 	FORM_FIELD_ELEMENT_TYPES,
 	getArgsElementType,
 	hasClipboardElementTypes,
+	hasElementType,
 	hasElementTypes,
 	isWithinForm,
 	type MoveArgs,
@@ -46,7 +48,9 @@ function blockFormFieldCreate( args: CreateArgs ): boolean {
 		return false;
 	}
 
-	if ( ! isWithinForm( args.container ) ) {
+	const containers = args.containers ?? [ args.container ];
+
+	if ( containers.some( ( container ) => ! isWithinForm( container ) ) ) {
 		handleBlockedFormField();
 
 		return true;
@@ -58,11 +62,14 @@ function blockFormFieldCreate( args: CreateArgs ): boolean {
 function blockFormFieldMove( args: MoveArgs ): boolean {
 	const { containers = [ args.container ], target } = args;
 
-	const hasFormFieldElement = containers.some( ( container ) =>
-		container ? hasElementTypes( container, FORM_FIELD_ELEMENT_TYPES ) : false
+	// Form fields must not be outside a form, but can be moved while inside a form or the container IS a form [ED-23858]
+	const hasLooseFormFields = containers.some( ( container ) =>
+		container
+			? ! hasElementType( container, FORM_ELEMENT_TYPE ) && hasElementTypes( container, FORM_FIELD_ELEMENT_TYPES )
+			: false
 	);
 
-	if ( hasFormFieldElement && ! isWithinForm( target ) && ! movedContainersIncludeAtomicFormRoot( containers ) ) {
+	if ( hasLooseFormFields && ! isWithinForm( target ) && ! movedContainersIncludeAtomicFormRoot( containers ) ) {
 		handleBlockedFormField();
 
 		return true;

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/mcp/tools/build-composition/tool.ts

@@ -84,8 +84,11 @@ 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() );
@@ -105,6 +108,10 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 				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 );
 			}

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