@elementor/editor-canvas 4.2.0-beta1 → 4.3.0-1000

package/package.json

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

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/components/__tests__/elements-overlays.test.tsx

@@ -19,6 +19,10 @@ jest.mock( '@elementor/editor-v1-adapters', () => ( {
 	isExperimentActive: jest.fn(),
 } ) );
 
+function mockGridComputedStyle( element: HTMLElement ) {
+	element.computedStyleMap = jest.fn().mockReturnValue( new Map( [ [ 'display', { toString: () => 'grid' } ] ] ) );
+}
+
 describe( '<ElementsOverlays />', () => {
 	beforeEach( () => {
 		const documentEl = createDOMElement( { tag: 'div' } );
@@ -26,6 +30,9 @@ describe( '<ElementsOverlays />', () => {
 		const atomic1El = createDOMElement( { tag: 'div', attrs: { 'data-atomic': '', id: '10' } } );
 		const atomic2El = createDOMElement( { tag: 'div', attrs: { 'data-atomic': '', id: '20' } } );
 
+		mockGridComputedStyle( atomic1El );
+		mockGridComputedStyle( atomic2El );
+
 		jest.mocked( useEditMode ).mockReturnValue( 'edit' );
 		jest.mocked( useIsRouteActive ).mockReturnValue( false );
 		jest.mocked( isExperimentActive ).mockReturnValue( true );

package/src/components/elements-overlays.tsx

@@ -11,11 +11,11 @@ import type { ElementOverlayConfig } from '../types/element-overlay';
 import { GridEmptyCellPositioner, GridOutlineOverlay } from './grid-outline';
 import { OutlineOverlay } from './outline-overlay';
 
-const ELEMENTS_DATA_ATTR = 'atomic';
-const E_GRID_TYPE = 'e-grid';
+const hasGridStyleDisplay = ( element: HTMLElement ): boolean => {
+	return element.computedStyleMap().get( 'display' )?.toString() === 'grid';
+};
 
-const isGridElement = ( element: HTMLElement ): boolean =>
-	[ element.dataset.eType, element.dataset.element_type ].includes( E_GRID_TYPE );
+const ELEMENTS_DATA_ATTR = 'atomic';
 
 const overlayRegistry: ElementOverlayConfig[] = [
 	{
@@ -24,11 +24,11 @@ const overlayRegistry: ElementOverlayConfig[] = [
 	},
 	{
 		component: GridEmptyCellPositioner,
-		shouldRender: ( { element } ) => isGridElement( element ),
+		shouldRender: ( { element } ) => hasGridStyleDisplay( element ),
 	},
 	{
 		component: GridOutlineOverlay,
-		shouldRender: ( { element, isSelected } ) => isSelected && isGridElement( element ),
+		shouldRender: ( { isSelected, element } ) => isSelected && hasGridStyleDisplay( element ),
 	},
 ];
 
@@ -45,18 +45,19 @@ export function ElementsOverlays() {
 		return null;
 	}
 
-	return elements.map( ( { id, domElement, isGlobal } ) => {
+	return elements.map( ( { id, domElement, isGlobal, widgetType } ) => {
 		const isSelected = selected.element?.id === id;
 
 		return overlayRegistry.map(
 			( { shouldRender, component: Overlay }, index ) =>
-				shouldRender( { id, element: domElement, isSelected } ) && (
+				shouldRender( { id, element: domElement, isSelected, widgetType } ) && (
 					<Overlay
 						key={ `${ id }-${ index }` }
 						id={ id }
 						element={ domElement }
 						isSelected={ isSelected }
 						isGlobal={ isGlobal }
+						widgetType={ widgetType }
 					/>
 				)
 		);
@@ -67,18 +68,20 @@ type ElementData = {
 	id: string;
 	domElement: HTMLElement;
 	isGlobal: boolean;
+	widgetType: string | undefined;
 };
 
-function useElementsDom() {
+function useElementsDom(): ElementData[] {
 	return useListenTo(
 		[ windowEvent( 'elementor/editor/element-rendered' ), windowEvent( 'elementor/editor/element-destroyed' ) ],
-		() => {
+		(): ElementData[] => {
 			return getElements()
 				.filter( ( el ) => isV4Element( el.view?.el?.dataset ) )
 				.map( ( element ) => ( {
 					id: element.id,
 					domElement: element.view?.getDomElement?.()?.get?.( 0 ),
 					isGlobal: element.model.get( 'isGlobal' ) ?? false,
+					widgetType: element.model.get( 'widgetType' ),
 				} ) )
 				.filter( ( item ): item is ElementData => !! item.domElement );
 		}

package/src/components/grid-outline/__tests__/grid-outline-overlay.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createDOMElement, renderWithTheme } from 'test-utils';
-import { useSelectedElementSettings } from '@elementor/editor-elements';
+import { useElementEditorSettings } from '@elementor/editor-elements';
 import { screen } from '@testing-library/react';
 
 import { useElementRect } from '../../../hooks/use-element-rect';
@@ -34,12 +34,10 @@ const EMPTY_TRACKS: GridTracks = {
 	borderColor: '',
 };
 
-function mockGridOutlineSetting( value: { $$type: 'boolean'; value: boolean } | null ) {
-	jest.mocked( useSelectedElementSettings ).mockReturnValue( {
-		element: { id: ID, type: 'e-grid' },
-		elementType: {} as never,
-		settings: { grid_outline: value },
-	} );
+function mockGridOutlineSetting( gridOutline: boolean | undefined ) {
+	jest.mocked( useElementEditorSettings ).mockReturnValue(
+		gridOutline === undefined ? {} : { grid_outline: gridOutline }
+	);
 }
 
 function mockFloating() {
@@ -87,7 +85,7 @@ describe( '<GridOutlineOverlay />', () => {
 	} );
 
 	it( 'renders the outline svg with the element id when the setting is enabled', () => {
-		mockGridOutlineSetting( { $$type: 'boolean', value: true } );
+		mockGridOutlineSetting( true );
 
 		renderOverlay();
 
@@ -97,8 +95,8 @@ describe( '<GridOutlineOverlay />', () => {
 		expect( overlay.querySelector( 'svg' ) ).toBeInTheDocument();
 	} );
 
-	it( 'treats a null setting as default-on and renders the outline', () => {
-		mockGridOutlineSetting( null );
+	it( 'treats an unset setting as default-on and renders the outline', () => {
+		mockGridOutlineSetting( undefined );
 
 		renderOverlay();
 
@@ -106,7 +104,7 @@ describe( '<GridOutlineOverlay />', () => {
 	} );
 
 	it( 'renders nothing when the setting is explicitly disabled', () => {
-		mockGridOutlineSetting( { $$type: 'boolean', value: false } );
+		mockGridOutlineSetting( false );
 
 		renderOverlay();
 
@@ -114,7 +112,7 @@ describe( '<GridOutlineOverlay />', () => {
 	} );
 
 	it( 'renders nothing while tracks have not resolved yet', () => {
-		mockGridOutlineSetting( { $$type: 'boolean', value: true } );
+		mockGridOutlineSetting( true );
 		jest.mocked( useGridTracks ).mockReturnValue( EMPTY_TRACKS );
 
 		renderOverlay();
@@ -123,7 +121,7 @@ describe( '<GridOutlineOverlay />', () => {
 	} );
 
 	it( 'renders one rect per cell when the grid has a gap', () => {
-		mockGridOutlineSetting( null );
+		mockGridOutlineSetting( undefined );
 		jest.mocked( useGridTracks ).mockReturnValue( {
 			...NON_EMPTY_TRACKS,
 			columns: [ 100, 100, 100 ],
@@ -140,7 +138,7 @@ describe( '<GridOutlineOverlay />', () => {
 	} );
 
 	it( 'renders boundary lines when the grid has no gap', () => {
-		mockGridOutlineSetting( null );
+		mockGridOutlineSetting( undefined );
 		jest.mocked( useGridTracks ).mockReturnValue( {
 			...NON_EMPTY_TRACKS,
 			columns: [ 100, 100, 100 ],
@@ -157,7 +155,7 @@ describe( '<GridOutlineOverlay />', () => {
 	} );
 
 	it( 'mounts inside the canvas wrapper portal', () => {
-		mockGridOutlineSetting( null );
+		mockGridOutlineSetting( undefined );
 
 		renderOverlay();
 

package/src/components/grid-outline/grid-outline-overlay.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { useSelectedElementSettings } from '@elementor/editor-elements';
-import { booleanPropTypeUtil } from '@elementor/editor-props';
+import { useElementEditorSettings } from '@elementor/editor-elements';
 import { Box } from '@elementor/ui';
 import { FloatingPortal } from '@floating-ui/react';
 
@@ -12,8 +11,8 @@ import { CANVAS_WRAPPER_ID } from '../outline-overlay';
 import { GridOutline } from './grid-outline';
 
 export const GridOutlineOverlay = ( { element, id, isSelected }: ElementOverlayProps ): React.ReactElement | null => {
-	const { settings } = useSelectedElementSettings();
-	const enabled = booleanPropTypeUtil.extract( settings?.grid_outline );
+	const settings = useElementEditorSettings( id );
+	const enabled = settings?.grid_outline;
 	const rect = useElementRect( element );
 	const tracks = useGridTracks( element, rect );
 	const { floating } = useFloatingOnElement( { element, isSelected } );

package/src/components/outline-overlay.tsx

@@ -6,6 +6,7 @@ import { useBindReactPropsToElement } from '../hooks/use-bind-react-props-to-ele
 import { useFloatingOnElement } from '../hooks/use-floating-on-element';
 import { useHasOverlapping } from '../hooks/use-has-overlapping';
 import type { ElementOverlayProps } from '../types/element-overlay';
+import { shouldUseSmallerOutlineOffset } from '../utils/outline-offset-utils';
 
 export const CANVAS_WRAPPER_ID = 'elementor-preview-responsive-wrapper';
 
@@ -25,13 +26,19 @@ const OverlayBox = styled( Box, {
 	} )
 );
 
-export const OutlineOverlay = ( { element, isSelected, id, isGlobal = false }: Props ): React.ReactElement | false => {
+export const OutlineOverlay = ( {
+	element,
+	isSelected,
+	id,
+	isGlobal = false,
+	widgetType,
+}: Props ): React.ReactElement | false => {
 	const { context, floating, isVisible } = useFloatingOnElement( { element, isSelected } );
 	const { getFloatingProps, getReferenceProps } = useInteractions( [ useHover( context ) ] );
 	const hasOverlapping = useHasOverlapping();
 
 	useBindReactPropsToElement( element, getReferenceProps );
-	const isSmallerOffset = element.offsetHeight <= 1;
+	const isSmallerOffset = shouldUseSmallerOutlineOffset( element, widgetType );
 
 	return (
 		isVisible &&

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

@@ -44,4 +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';
+export { ELEMENT_ADDED_EVENT, type ElementAddedEvent } from './sync/element-added-event';

package/src/legacy/__tests__/init-legacy-views.test.ts

@@ -45,7 +45,7 @@ describe( 'initLegacyViews', () => {
 		mockLegacyElementor();
 	} );
 
-	it( 'should register a late element type via the legacy manager without leaking the state', () => {
+	it( 'should register a late element type via the legacy manager without leaking state', () => {
 		// Arrange
 		const elementsManager = createMockElementsManager();
 		attachMockElementsManager( elementsManager );

package/src/mcp/canvas-mcp.ts

@@ -2,6 +2,7 @@ import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 import { Schema } from '@elementor/editor-props';
 
 import { initAvailableWidgetsResource } from './resources/available-widgets-resource';
+import { initBestPracticesResource } from './resources/best-practices-resource';
 import { initBreakpointsResource } from './resources/breakpoints-resource';
 import { initDocumentStructureResource } from './resources/document-structure-resource';
 import { initDynamicTagsResource } from './resources/dynamic-tags-resource';
@@ -9,7 +10,7 @@ import { initEditorStateResource } from './resources/editor-state-resource';
 import { initGeneralContextResource } from './resources/general-context-resource';
 import { initSelectedElementResource } from './resources/selected-element-resource';
 import { initWidgetsSchemaResource } from './resources/widgets-schema-resource';
-import { initBuildCompositionsTool } from './tools/build-composition/tool';
+import { initBuildCompositionTool } from './tools/build-composition/tool';
 import { initConfigureElementTool } from './tools/configure-element/tool';
 import { initGetElementConfigTool } from './tools/get-element-config/tool';
 import { getDynamicTagNamesByCategories } from './utils/resolve-dynamic-tag';
@@ -26,8 +27,9 @@ export const initCanvasMcp = ( reg: MCPRegistryEntry ) => {
 	initSelectedElementResource( reg );
 	initEditorStateResource( reg );
 	initGeneralContextResource( reg );
-	initBuildCompositionsTool( reg );
+	initBestPracticesResource( reg );
 	initGetElementConfigTool( reg );
 	initConfigureElementTool( reg );
+	initBuildCompositionTool( reg );
 	initBreakpointsResource( reg );
 };