@elementor/editor-canvas 4.2.0-beta1 → 4.2.3

package/dist/index.mjs

@@ -460,8 +460,8 @@ function toGridTracks(computedStyle) {
   return {
     columns: parseTrackList(computedStyle.gridTemplateColumns),
     rows: parseTrackList(computedStyle.gridTemplateRows),
-    columnGap: toPx(computedStyle.columnGap),
-    rowGap: toPx(computedStyle.rowGap),
+    columnGap: resolveGapPx(computedStyle.columnGap, computedStyle.width),
+    rowGap: resolveGapPx(computedStyle.rowGap, computedStyle.height),
     padding: {
       top: toPx(computedStyle.paddingTop),
       right: toPx(computedStyle.paddingRight),
@@ -536,6 +536,14 @@ function toPx(value) {
   const parsed = parseFloat(value);
   return Number.isFinite(parsed) ? parsed : 0;
 }
+function resolveGapPx(value, referenceSize) {
+  if (value.trim().endsWith("%")) {
+    const percent = parseFloat(value);
+    const reference = parseFloat(referenceSize);
+    return Number.isFinite(percent) && Number.isFinite(reference) ? percent / 100 * reference : 0;
+  }
+  return toPx(value);
+}
 
 // src/hooks/use-grid-children.ts
 import { useEffect as useEffect3, useState as useState2 } from "react";
@@ -807,8 +815,7 @@ var GridEmptyCellPositioner = ({ element }) => {
 
 // src/components/grid-outline/grid-outline-overlay.tsx
 import * as React6 from "react";
-import { useSelectedElementSettings } from "@elementor/editor-elements";
-import { booleanPropTypeUtil } from "@elementor/editor-props";
+import { useElementEditorSettings } from "@elementor/editor-elements";
 import { Box as Box2 } from "@elementor/ui";
 import { FloatingPortal as FloatingPortal2 } from "@floating-ui/react";
 
@@ -909,6 +916,16 @@ var useHasOverlapping = () => {
   return hasOverlapping;
 };
 
+// src/utils/outline-offset-utils.ts
+var THIN_ELEMENT_MAX_HEIGHT_PX = 1;
+var SMALLER_OUTLINE_OFFSET_WIDGET_TYPES = /* @__PURE__ */ new Set(["e-form-input"]);
+function shouldUseSmallerOutlineOffset(element, widgetType) {
+  if (element.offsetHeight <= THIN_ELEMENT_MAX_HEIGHT_PX) {
+    return true;
+  }
+  return widgetType !== void 0 && SMALLER_OUTLINE_OFFSET_WIDGET_TYPES.has(widgetType);
+}
+
 // src/components/outline-overlay.tsx
 var CANVAS_WRAPPER_ID = "elementor-preview-responsive-wrapper";
 var OverlayBox = styled(Box, {
@@ -920,12 +937,18 @@ var OverlayBox = styled(Box, {
     pointerEvents: "none"
   })
 );
-var OutlineOverlay = ({ element, isSelected, id, isGlobal = false }) => {
+var OutlineOverlay = ({
+  element,
+  isSelected,
+  id,
+  isGlobal = false,
+  widgetType
+}) => {
   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 && !hasOverlapping && /* @__PURE__ */ React.createElement(FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
     OverlayBox,
     {
@@ -1081,8 +1104,8 @@ function GridOutline({ element, tracks, width, height }) {
 
 // src/components/grid-outline/grid-outline-overlay.tsx
 var GridOutlineOverlay = ({ element, id, isSelected }) => {
-  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 });
@@ -1105,9 +1128,10 @@ var GridOutlineOverlay = ({ element, id, isSelected }) => {
 };
 
 // src/components/elements-overlays.tsx
+var hasGridStyleDisplay = (element) => {
+  return element.computedStyleMap().get("display")?.toString() === "grid";
+};
 var ELEMENTS_DATA_ATTR = "atomic";
-var E_GRID_TYPE = "e-grid";
-var isGridElement = (element) => [element.dataset.eType, element.dataset.element_type].includes(E_GRID_TYPE);
 var overlayRegistry = [
   {
     component: OutlineOverlay,
@@ -1115,11 +1139,11 @@ var overlayRegistry = [
   },
   {
     component: GridEmptyCellPositioner,
-    shouldRender: ({ element }) => isGridElement(element)
+    shouldRender: ({ element }) => hasGridStyleDisplay(element)
   },
   {
     component: GridOutlineOverlay,
-    shouldRender: ({ element, isSelected }) => isSelected && isGridElement(element)
+    shouldRender: ({ isSelected, element }) => isSelected && hasGridStyleDisplay(element)
   }
 ];
 function ElementsOverlays() {
@@ -1132,17 +1156,18 @@ function ElementsOverlays() {
   if (!isActive) {
     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 }) && /* @__PURE__ */ React7.createElement(
+      ({ shouldRender, component: Overlay }, index) => shouldRender({ id, element: domElement, isSelected, widgetType }) && /* @__PURE__ */ React7.createElement(
         Overlay,
         {
           key: `${id}-${index}`,
           id,
           element: domElement,
           isSelected,
-          isGlobal
+          isGlobal,
+          widgetType
         }
       )
     );
@@ -1155,7 +1180,8 @@ function useElementsDom() {
       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
+        isGlobal: element.model.get("isGlobal") ?? false,
+        widgetType: element.model.get("widgetType")
       })).filter((item) => !!item.domElement);
     }
   );
@@ -1984,6 +2010,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 = {
@@ -2010,7 +2076,8 @@ function blockFormFieldCreate(args) {
   if (!elementType || !FORM_FIELD_ELEMENT_TYPES.has(elementType)) {
     return false;
   }
-  if (!isWithinForm(args.container)) {
+  const containers = args.containers ?? [args.container];
+  if (containers.some((container) => !isWithinForm(container))) {
     handleBlockedFormField();
     return true;
   }
@@ -2018,10 +2085,10 @@ function blockFormFieldCreate(args) {
 }
 function blockFormFieldMove(args) {
   const { containers = [args.container], target } = args;
-  const hasFormFieldElement = containers.some(
-    (container) => container ? hasElementTypes(container, FORM_FIELD_ELEMENT_TYPES) : false
+  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;
   }
@@ -2677,13 +2744,13 @@ function initStyleTransformers() {
     "layout-direction",
     createMultiPropsTransformer(["row", "column"], ({ propKey, key }) => `${key}-${propKey}`)
   ).register("flex", flexTransformer).register(
-    "border-width",
+    "border-width-v2",
     createMultiPropsTransformer(
       ["block-start", "block-end", "inline-start", "inline-end"],
       ({ key }) => `border-${key}-width`
     )
   ).register(
-    "border-radius",
+    "border-radius-v2",
     createMultiPropsTransformer(
       ["start-start", "start-end", "end-start", "end-end"],
       ({ key }) => `border-${key}-radius`
@@ -5158,6 +5225,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);
@@ -5192,6 +5264,7 @@ ${childTypeErrors.join("\n")}`);
     return {
       configErrors,
       styleErrors,
+      formErrors,
       rootContainers: [...this.rootContainers]
     };
   }
@@ -5502,7 +5575,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) => {
@@ -5517,6 +5594,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.2.0-beta1",
+  "version": "4.2.3",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,27 +37,27 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.2.0-beta1",
+    "@elementor/editor": "4.2.3",
     "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-controls": "4.2.3",
+    "@elementor/editor-documents": "4.2.3",
+    "@elementor/editor-elements": "4.2.3",
+    "@elementor/editor-interactions": "4.2.3",
+    "@elementor/editor-mcp": "4.2.3",
+    "@elementor/editor-notifications": "4.2.3",
+    "@elementor/editor-props": "4.2.3",
+    "@elementor/editor-responsive": "4.2.3",
+    "@elementor/editor-styles": "4.2.3",
+    "@elementor/editor-styles-repository": "4.2.3",
+    "@elementor/editor-ui": "4.2.3",
+    "@elementor/editor-v1-adapters": "4.2.3",
+    "@elementor/events": "4.2.3",
+    "@elementor/http-client": "4.2.3",
+    "@elementor/schema": "4.2.3",
+    "@elementor/twing": "4.2.3",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-beta1",
-    "@elementor/wp-media": "4.2.0-beta1",
+    "@elementor/utils": "4.2.3",
+    "@elementor/wp-media": "4.2.3",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

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/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 ],
 		};
 	}