@elementor/editor-canvas 3.35.0-400 → 3.35.0-402

package/dist/index.d.mts

@@ -211,8 +211,8 @@ declare const styleTransformersRegistry: {
     };
 };
 
-declare const startDragElementFromPanel: (props: Omit<V1ElementModelProps, "id">) => void;
 declare const endDragElementFromPanel: () => void;
+declare const startDragElementFromPanel: (props: Omit<V1ElementModelProps, "id">, event: React.DragEvent) => void;
 
 declare function getCanvasIframeDocument(): Document | null | undefined;
 

package/dist/index.d.ts

@@ -211,8 +211,8 @@ declare const styleTransformersRegistry: {
     };
 };
 
-declare const startDragElementFromPanel: (props: Omit<V1ElementModelProps, "id">) => void;
 declare const endDragElementFromPanel: () => void;
+declare const startDragElementFromPanel: (props: Omit<V1ElementModelProps, "id">, event: React.DragEvent) => void;
 
 declare function getCanvasIframeDocument(): Document | null | undefined;
 

package/dist/index.js

@@ -3589,13 +3589,23 @@ var RenderContext = class {
 };
 
 // src/sync/drag-element-from-panel.ts
-var startDragElementFromPanel = (props) => {
+var DRAG_GROUPS = ["elementor-element"];
+var endDragElementFromPanel = () => {
+  getElementorChannels()?.panelElements?.trigger("element:drag:end");
+};
+var startDragElementFromPanel = (props, event) => {
+  setDragGroups(event);
   const channels = getElementorChannels();
   channels?.editor.reply("element:dragged", null);
   channels?.panelElements.reply("element:selected", getLegacyPanelElementView(props)).trigger("element:drag:start");
 };
-var endDragElementFromPanel = () => {
-  getElementorChannels()?.panelElements?.trigger("element:drag:end");
+var setDragGroups = (event) => {
+  const dataContainer = { groups: getDragGroups(event) };
+  event.dataTransfer?.setData(JSON.stringify(dataContainer), "true");
+};
+var getDragGroups = (event) => {
+  const dataContainer = event.dataTransfer?.getData("text/plain");
+  return dataContainer ? JSON.parse(dataContainer).groups : DRAG_GROUPS;
 };
 var getElementorChannels = () => {
   const extendedWindow = window;

package/dist/index.mjs

@@ -3579,13 +3579,23 @@ var RenderContext = class {
 };
 
 // src/sync/drag-element-from-panel.ts
-var startDragElementFromPanel = (props) => {
+var DRAG_GROUPS = ["elementor-element"];
+var endDragElementFromPanel = () => {
+  getElementorChannels()?.panelElements?.trigger("element:drag:end");
+};
+var startDragElementFromPanel = (props, event) => {
+  setDragGroups(event);
   const channels = getElementorChannels();
   channels?.editor.reply("element:dragged", null);
   channels?.panelElements.reply("element:selected", getLegacyPanelElementView(props)).trigger("element:drag:start");
 };
-var endDragElementFromPanel = () => {
-  getElementorChannels()?.panelElements?.trigger("element:drag:end");
+var setDragGroups = (event) => {
+  const dataContainer = { groups: getDragGroups(event) };
+  event.dataTransfer?.setData(JSON.stringify(dataContainer), "true");
+};
+var getDragGroups = (event) => {
+  const dataContainer = event.dataTransfer?.getData("text/plain");
+  return dataContainer ? JSON.parse(dataContainer).groups : DRAG_GROUPS;
 };
 var getElementorChannels = () => {
   const extendedWindow = window;

package/package.json

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

package/src/sync/__tests__/drag-element-from-panel.test.ts

@@ -0,0 +1,69 @@
+import { endDragElementFromPanel, startDragElementFromPanel } from '../drag-element-from-panel';
+import { type CanvasExtendedWindow } from '../types';
+
+const EXPECTED_DRAG_GROUPS = [ 'elementor-element' ];
+
+const mockTrigger = jest.fn();
+const mockReply = jest.fn( () => ( { trigger: mockTrigger } ) );
+
+describe( 'drag-element-from-panel', () => {
+	const extendedWindow = window as unknown as CanvasExtendedWindow;
+
+	extendedWindow.elementor = {
+		channels: {
+			editor: { reply: mockReply },
+			panelElements: { reply: mockReply, trigger: mockTrigger },
+		} as unknown as never,
+		modules: {
+			elements: {
+				models: {
+					Element: jest.fn( ( props ) => props ),
+				},
+			},
+		},
+	};
+
+	describe( 'startDragElementFromPanel', () => {
+		it( 'should set dataTransfer with drag groups', () => {
+			// Arrange
+			const mockSetData = jest.fn();
+			const mockEvent = {
+				dataTransfer: {
+					setData: mockSetData,
+					getData: () => '',
+				},
+			} as unknown as React.DragEvent;
+
+			// Act
+			startDragElementFromPanel( { elType: 'widget', widgetType: 'test' }, mockEvent );
+
+			// Assert
+			expect( mockSetData ).toHaveBeenCalledWith( JSON.stringify( { groups: EXPECTED_DRAG_GROUPS } ), 'true' );
+		} );
+
+		it( 'should trigger panel element events', () => {
+			// Arrange
+			const mockEvent = {
+				dataTransfer: { setData: jest.fn(), getData: () => '' },
+			} as unknown as React.DragEvent;
+
+			// Act
+			startDragElementFromPanel( { elType: 'widget', widgetType: 'test' }, mockEvent );
+
+			// Assert
+			expect( mockReply ).toHaveBeenCalledWith( 'element:dragged', null );
+			expect( mockReply ).toHaveBeenCalledWith( 'element:selected', expect.any( Object ) );
+			expect( mockTrigger ).toHaveBeenCalledWith( 'element:drag:start' );
+		} );
+	} );
+
+	describe( 'endDragElementFromPanel', () => {
+		it( 'should trigger element:drag:end event', () => {
+			// Act
+			endDragElementFromPanel();
+
+			// Assert
+			expect( mockTrigger ).toHaveBeenCalledWith( 'element:drag:end' );
+		} );
+	} );
+} );

package/src/sync/drag-element-from-panel.ts

@@ -2,7 +2,15 @@ import { type V1ElementModelProps } from '@elementor/editor-elements';
 
 import { type CanvasExtendedWindow } from './types';
 
-export const startDragElementFromPanel = ( props: Omit< V1ElementModelProps, 'id' > ) => {
+const DRAG_GROUPS = [ 'elementor-element' ];
+
+export const endDragElementFromPanel = () => {
+	getElementorChannels()?.panelElements?.trigger( 'element:drag:end' );
+};
+
+export const startDragElementFromPanel = ( props: Omit< V1ElementModelProps, 'id' >, event: React.DragEvent ) => {
+	setDragGroups( event );
+
 	const channels = getElementorChannels();
 
 	channels?.editor.reply( 'element:dragged', null );
@@ -12,8 +20,15 @@ export const startDragElementFromPanel = ( props: Omit< V1ElementModelProps, 'id
 		.trigger( 'element:drag:start' );
 };
 
-export const endDragElementFromPanel = () => {
-	getElementorChannels()?.panelElements?.trigger( 'element:drag:end' );
+const setDragGroups = ( event: React.DragEvent ) => {
+	const dataContainer = { groups: getDragGroups( event ) };
+	event.dataTransfer?.setData( JSON.stringify( dataContainer ), 'true' );
+};
+
+const getDragGroups = ( event: React.DragEvent ) => {
+	const dataContainer = event.dataTransfer?.getData( 'text/plain' );
+
+	return dataContainer ? JSON.parse( dataContainer ).groups : DRAG_GROUPS;
 };
 
 const getElementorChannels = () => {