@elementor/editor-canvas 4.3.0-975 → 4.3.0-977

package/dist/index.js

@@ -943,6 +943,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 = (0, import_ui.styled)(import_ui.Box, {
@@ -954,12 +964,18 @@ var OverlayBox = (0, import_ui.styled)(import_ui.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 } = (0, import_react9.useInteractions)([(0, import_react9.useHover)(context)]);
   const hasOverlapping = useHasOverlapping();
   useBindReactPropsToElement(element, getReferenceProps);
-  const isSmallerOffset = element.offsetHeight <= 1;
+  const isSmallerOffset = shouldUseSmallerOutlineOffset(element, widgetType);
   return isVisible && !hasOverlapping && /* @__PURE__ */ React.createElement(import_react9.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
     OverlayBox,
     {
@@ -1167,17 +1183,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
         }
       )
     );
@@ -1190,7 +1207,8 @@ function useElementsDom() {
       return (0, import_editor_elements5.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);
     }
   );
@@ -2029,7 +2047,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;
   }

package/dist/index.mjs

@@ -881,6 +881,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, {
@@ -892,12 +902,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,
     {
@@ -1105,17 +1121,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
         }
       )
     );
@@ -1128,7 +1145,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);
     }
   );
@@ -1983,7 +2001,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;
   }

package/package.json

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

package/src/components/elements-overlays.tsx

@@ -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/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/enforce-form-ancestor-commands.ts

@@ -48,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;

package/src/form-structure/utils.ts

@@ -7,6 +7,7 @@ type Model = {
 
 export type CreateArgs = {
 	container?: V1Element;
+	containers?: V1Element[];
 	model?: Model;
 };
 

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