@elementor/editor-canvas 4.1.0-738 → 4.1.0-739

package/dist/index.js

@@ -1187,6 +1187,9 @@ function getArgsElementType(args) {
 function getElementType(element) {
   return element?.model.get("widgetType") || element?.model.get("elType");
 }
+function getClipboardElementType(element) {
+  return element?.widgetType || element?.elType;
+}
 function isElementWithinFormSelector(element) {
   return !!element?.view?.el?.closest('form,[data-element_type="e-form"]');
 }
@@ -1204,7 +1207,7 @@ function hasElementTypes(element, types) {
 }
 function hasClipboardElementType(elements, type) {
   return elements.some((element) => {
-    const elementType = element.widgetType || element.elType;
+    const elementType = getClipboardElementType(element);
     if (elementType === type) {
       return true;
     }
@@ -1213,13 +1216,22 @@ function hasClipboardElementType(elements, type) {
 }
 function hasClipboardElementTypes(elements, types) {
   return elements.some((element) => {
-    const elementType = element.widgetType || element.elType;
+    const elementType = getClipboardElementType(element);
     if (elementType && types.has(elementType)) {
       return true;
     }
     return element.elements ? hasClipboardElementTypes(element.elements, types) : false;
   });
 }
+function movedContainersIncludeAtomicFormRoot(containers) {
+  return containers.some((container) => getElementType(container) === FORM_ELEMENT_TYPE);
+}
+function clipboardRootsAreAtomicForms(elements) {
+  if (!elements.length) {
+    return false;
+  }
+  return elements.every((el) => getClipboardElementType(el) === FORM_ELEMENT_TYPE);
+}
 
 // src/form-structure/enforce-form-ancestor-commands.ts
 var FORM_FIELDS_OUTSIDE_ALERT = {
@@ -1257,7 +1269,7 @@ function blockFormFieldMove(args) {
   const hasFormFieldElement = containers.some(
     (container) => container ? hasElementTypes(container, FORM_FIELD_ELEMENT_TYPES) : false
   );
-  if (hasFormFieldElement && !isWithinForm(target)) {
+  if (hasFormFieldElement && !isWithinForm(target) && !movedContainersIncludeAtomicFormRoot(containers)) {
     handleBlockedFormField();
     return true;
   }
@@ -1273,7 +1285,7 @@ function blockFormFieldPaste(args) {
     return false;
   }
   const hasFormFieldElement = hasClipboardElementTypes(data.clipboard.elements, FORM_FIELD_ELEMENT_TYPES);
-  if (hasFormFieldElement && !isWithinForm(args.container)) {
+  if (hasFormFieldElement && !isWithinForm(args.container) && !clipboardRootsAreAtomicForms(data.clipboard.elements)) {
     handleBlockedFormField();
     return true;
   }

package/dist/index.mjs

@@ -1153,6 +1153,9 @@ function getArgsElementType(args) {
 function getElementType(element) {
   return element?.model.get("widgetType") || element?.model.get("elType");
 }
+function getClipboardElementType(element) {
+  return element?.widgetType || element?.elType;
+}
 function isElementWithinFormSelector(element) {
   return !!element?.view?.el?.closest('form,[data-element_type="e-form"]');
 }
@@ -1170,7 +1173,7 @@ function hasElementTypes(element, types) {
 }
 function hasClipboardElementType(elements, type) {
   return elements.some((element) => {
-    const elementType = element.widgetType || element.elType;
+    const elementType = getClipboardElementType(element);
     if (elementType === type) {
       return true;
     }
@@ -1179,13 +1182,22 @@ function hasClipboardElementType(elements, type) {
 }
 function hasClipboardElementTypes(elements, types) {
   return elements.some((element) => {
-    const elementType = element.widgetType || element.elType;
+    const elementType = getClipboardElementType(element);
     if (elementType && types.has(elementType)) {
       return true;
     }
     return element.elements ? hasClipboardElementTypes(element.elements, types) : false;
   });
 }
+function movedContainersIncludeAtomicFormRoot(containers) {
+  return containers.some((container) => getElementType(container) === FORM_ELEMENT_TYPE);
+}
+function clipboardRootsAreAtomicForms(elements) {
+  if (!elements.length) {
+    return false;
+  }
+  return elements.every((el) => getClipboardElementType(el) === FORM_ELEMENT_TYPE);
+}
 
 // src/form-structure/enforce-form-ancestor-commands.ts
 var FORM_FIELDS_OUTSIDE_ALERT = {
@@ -1223,7 +1235,7 @@ function blockFormFieldMove(args) {
   const hasFormFieldElement = containers.some(
     (container) => container ? hasElementTypes(container, FORM_FIELD_ELEMENT_TYPES) : false
   );
-  if (hasFormFieldElement && !isWithinForm(target)) {
+  if (hasFormFieldElement && !isWithinForm(target) && !movedContainersIncludeAtomicFormRoot(containers)) {
     handleBlockedFormField();
     return true;
   }
@@ -1239,7 +1251,7 @@ function blockFormFieldPaste(args) {
     return false;
   }
   const hasFormFieldElement = hasClipboardElementTypes(data.clipboard.elements, FORM_FIELD_ELEMENT_TYPES);
-  if (hasFormFieldElement && !isWithinForm(args.container)) {
+  if (hasFormFieldElement && !isWithinForm(args.container) && !clipboardRootsAreAtomicForms(data.clipboard.elements)) {
     handleBlockedFormField();
     return true;
   }

package/package.json

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

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

@@ -0,0 +1,70 @@
+import type { V1Element } from '@elementor/editor-elements';
+
+import {
+	clipboardRootsAreAtomicForms,
+	FORM_ELEMENT_TYPE,
+	getClipboardElementType,
+	movedContainersIncludeAtomicFormRoot,
+} from '../utils';
+
+function mockElement( widgetType?: string, elType?: string ): V1Element {
+	return {
+		model: {
+			get: ( key: string ) => {
+				if ( key === 'widgetType' ) {
+					return widgetType;
+				}
+				if ( key === 'elType' ) {
+					return elType;
+				}
+				return undefined;
+			},
+		},
+	} as V1Element;
+}
+
+describe( 'form-structure utils', () => {
+	describe( 'getClipboardElementType', () => {
+		it( 'prefers widgetType over elType', () => {
+			expect( getClipboardElementType( { widgetType: 'e-form-input', elType: 'widget' } ) ).toBe(
+				'e-form-input'
+			);
+		} );
+
+		it( 'falls back to elType', () => {
+			expect( getClipboardElementType( { elType: FORM_ELEMENT_TYPE } ) ).toBe( FORM_ELEMENT_TYPE );
+		} );
+
+		it( 'returns undefined when absent', () => {
+			expect( getClipboardElementType( {} ) ).toBeUndefined();
+		} );
+	} );
+
+	describe( 'movedContainersIncludeAtomicFormRoot', () => {
+		it( 'returns true when a top-level moved container is e-form', () => {
+			const form = mockElement( undefined, FORM_ELEMENT_TYPE );
+
+			expect( movedContainersIncludeAtomicFormRoot( [ form ] ) ).toBe( true );
+		} );
+
+		it( 'returns false when moved containers are only form fields', () => {
+			const input = mockElement( 'e-form-input', 'widget' );
+
+			expect( movedContainersIncludeAtomicFormRoot( [ input ] ) ).toBe( false );
+		} );
+	} );
+
+	describe( 'clipboardRootsAreAtomicForms', () => {
+		it( 'returns true when every root is e-form', () => {
+			expect( clipboardRootsAreAtomicForms( [ { elType: FORM_ELEMENT_TYPE, elements: [] } ] ) ).toBe( true );
+		} );
+
+		it( 'returns false when a root is a bare form field', () => {
+			expect( clipboardRootsAreAtomicForms( [ { widgetType: 'e-form-input', elements: [] } ] ) ).toBe( false );
+		} );
+
+		it( 'returns false for empty roots', () => {
+			expect( clipboardRootsAreAtomicForms( [] ) ).toBe( false );
+		} );
+	} );
+} );

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

@@ -3,6 +3,7 @@ import { blockCommand } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import {
+	clipboardRootsAreAtomicForms,
 	type CreateArgs,
 	FORM_FIELD_ELEMENT_TYPES,
 	getArgsElementType,
@@ -10,6 +11,7 @@ import {
 	hasElementTypes,
 	isWithinForm,
 	type MoveArgs,
+	movedContainersIncludeAtomicFormRoot,
 	type PasteArgs,
 	type StorageContent,
 } from './utils';
@@ -60,7 +62,7 @@ function blockFormFieldMove( args: MoveArgs ): boolean {
 		container ? hasElementTypes( container, FORM_FIELD_ELEMENT_TYPES ) : false
 	);
 
-	if ( hasFormFieldElement && ! isWithinForm( target ) ) {
+	if ( hasFormFieldElement && ! isWithinForm( target ) && ! movedContainersIncludeAtomicFormRoot( containers ) ) {
 		handleBlockedFormField();
 
 		return true;
@@ -86,7 +88,11 @@ function blockFormFieldPaste( args: PasteArgs ): boolean {
 
 	const hasFormFieldElement = hasClipboardElementTypes( data.clipboard.elements, FORM_FIELD_ELEMENT_TYPES );
 
-	if ( hasFormFieldElement && ! isWithinForm( args.container ) ) {
+	if (
+		hasFormFieldElement &&
+		! isWithinForm( args.container ) &&
+		! clipboardRootsAreAtomicForms( data.clipboard.elements )
+	) {
 		handleBlockedFormField();
 
 		return true;

package/src/form-structure/utils.ts

@@ -50,6 +50,10 @@ export function getElementType( element?: V1Element ): string | undefined {
 	return element?.model.get( 'widgetType' ) || element?.model.get( 'elType' );
 }
 
+export function getClipboardElementType( element?: ClipboardElement ): string | undefined {
+	return element?.widgetType || element?.elType;
+}
+
 export function isElementWithinFormSelector( element?: V1Element ): boolean {
 	return !! element?.view?.el?.closest( 'form,[data-element_type="e-form"]' );
 }
@@ -72,7 +76,7 @@ export function hasElementTypes( element: V1Element, types: Set< string > ): boo
 
 export function hasClipboardElementType( elements: ClipboardElement[], type: string ): boolean {
 	return elements.some( ( element ) => {
-		const elementType = element.widgetType || element.elType;
+		const elementType = getClipboardElementType( element );
 
 		if ( elementType === type ) {
 			return true;
@@ -84,7 +88,7 @@ export function hasClipboardElementType( elements: ClipboardElement[], type: str
 
 export function hasClipboardElementTypes( elements: ClipboardElement[], types: Set< string > ): boolean {
 	return elements.some( ( element ) => {
-		const elementType = element.widgetType || element.elType;
+		const elementType = getClipboardElementType( element );
 
 		if ( elementType && types.has( elementType ) ) {
 			return true;
@@ -93,3 +97,15 @@ export function hasClipboardElementTypes( elements: ClipboardElement[], types: S
 		return element.elements ? hasClipboardElementTypes( element.elements, types ) : false;
 	} );
 }
+
+export function movedContainersIncludeAtomicFormRoot( containers: ( V1Element | undefined )[] ): boolean {
+	return containers.some( ( container ) => getElementType( container ) === FORM_ELEMENT_TYPE );
+}
+
+export function clipboardRootsAreAtomicForms( elements: ClipboardElement[] ): boolean {
+	if ( ! elements.length ) {
+		return false;
+	}
+
+	return elements.every( ( el ) => getClipboardElementType( el ) === FORM_ELEMENT_TYPE );
+}