@elementor/editor-canvas 4.3.0-984 → 4.3.0-985

package/dist/index.js

@@ -2021,6 +2021,46 @@ function clipboardRootsAreAtomicForms(elements) {
   }
   return elements.every((el) => getClipboardElementType(el) === FORM_ELEMENT_TYPE);
 }
+function hasFormAncestor(node) {
+  return node.closest(FORM_ELEMENT_TYPE) !== null;
+}
+function collectFormAncestorErrors(xml) {
+  const errors = [];
+  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;
+}
+function collectSubmitButtonErrors(xml) {
+  const errors = [];
+  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 \u2014 only 1 is allowed.`);
+    }
+  }
+  return errors;
+}
+function collectEmptyMessageErrors(xml) {
+  const errors = [];
+  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;
+}
 
 // src/form-structure/enforce-form-ancestor-commands.ts
 var FORM_FIELDS_OUTSIDE_ALERT = {
@@ -5195,6 +5235,11 @@ var CompositionBuilder = class _CompositionBuilder {
       throw new Error(`Invalid element structure:
 ${childTypeErrors.join("\n")}`);
     }
+    const formErrors = [
+      ...collectFormAncestorErrors(this.xml),
+      ...collectSubmitButtonErrors(this.xml),
+      ...collectEmptyMessageErrors(this.xml)
+    ];
     const children = Array.from(this.xml.children);
     for (const childNode of children) {
       const modelTree = this.buildModelTree(childNode, widgetsCache);
@@ -5229,6 +5274,7 @@ ${childTypeErrors.join("\n")}`);
     return {
       configErrors,
       styleErrors,
+      formErrors,
       rootContainers: [...this.rootContainers]
     };
   }
@@ -5539,7 +5585,11 @@ var initBuildCompositionsTool = (reg) => {
         compositionBuilder.setElementConfig(elementConfig);
         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) => {
@@ -5554,6 +5604,9 @@ var initBuildCompositionsTool = (reg) => {
         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);
       }

package/dist/index.mjs

@@ -1975,6 +1975,46 @@ function clipboardRootsAreAtomicForms(elements) {
   }
   return elements.every((el) => getClipboardElementType(el) === FORM_ELEMENT_TYPE);
 }
+function hasFormAncestor(node) {
+  return node.closest(FORM_ELEMENT_TYPE) !== null;
+}
+function collectFormAncestorErrors(xml) {
+  const errors = [];
+  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;
+}
+function collectSubmitButtonErrors(xml) {
+  const errors = [];
+  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 \u2014 only 1 is allowed.`);
+    }
+  }
+  return errors;
+}
+function collectEmptyMessageErrors(xml) {
+  const errors = [];
+  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;
+}
 
 // src/form-structure/enforce-form-ancestor-commands.ts
 var FORM_FIELDS_OUTSIDE_ALERT = {
@@ -5180,6 +5220,11 @@ var CompositionBuilder = class _CompositionBuilder {
       throw new Error(`Invalid element structure:
 ${childTypeErrors.join("\n")}`);
     }
+    const formErrors = [
+      ...collectFormAncestorErrors(this.xml),
+      ...collectSubmitButtonErrors(this.xml),
+      ...collectEmptyMessageErrors(this.xml)
+    ];
     const children = Array.from(this.xml.children);
     for (const childNode of children) {
       const modelTree = this.buildModelTree(childNode, widgetsCache);
@@ -5214,6 +5259,7 @@ ${childTypeErrors.join("\n")}`);
     return {
       configErrors,
       styleErrors,
+      formErrors,
       rootContainers: [...this.rootContainers]
     };
   }
@@ -5524,7 +5570,11 @@ var initBuildCompositionsTool = (reg) => {
         compositionBuilder.setElementConfig(elementConfig);
         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) => {
@@ -5539,6 +5589,9 @@ var initBuildCompositionsTool = (reg) => {
         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);
       }

package/package.json

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

package/src/__tests__/parse-xml.ts

@@ -0,0 +1,2 @@
+export const parseXml = ( xml: string ): Document =>
+	new DOMParser().parseFromString( `<root>${ xml }</root>`, 'application/xml' );

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

@@ -11,6 +11,11 @@ import {
 } from '@elementor/editor-elements';
 import { type z } from '@elementor/schema';
 
+import {
+	collectEmptyMessageErrors,
+	collectFormAncestorErrors,
+	collectSubmitButtonErrors,
+} from '../form-structure/utils';
 import { doUpdateElementProperty } from '../mcp/utils/do-update-element-property';
 import { mergeCustomCssText } from '../mcp/utils/merge-custom-css';
 import { RequiredChildrenEnforcer } from './utils/required-children-enforcer';
@@ -294,6 +299,12 @@ export class CompositionBuilder {
 			throw new Error( `Invalid element structure:\n${ childTypeErrors.join( '\n' ) }` );
 		}
 
+		const formErrors = [
+			...collectFormAncestorErrors( this.xml ),
+			...collectSubmitButtonErrors( this.xml ),
+			...collectEmptyMessageErrors( this.xml ),
+		];
+
 		const children = Array.from( this.xml.children );
 		for ( const childNode of children ) {
 			const modelTree = this.buildModelTree( childNode, widgetsCache );
@@ -332,6 +343,7 @@ export class CompositionBuilder {
 		return {
 			configErrors,
 			styleErrors,
+			formErrors,
 			rootContainers: [ ...this.rootContainers ],
 		};
 	}

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/utils.ts

@@ -115,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 );
 			}