@elementor/editor-canvas 3.33.0-119 → 3.33.0-121

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import * as _elementor_editor_props from '@elementor/editor-props';
 import { AnyTransformable, PropTypeKey, PropsSchema, Props } from '@elementor/editor-props';
+import { V1ElementModelProps } from '@elementor/editor-elements';
 
 declare function init(): void;
 
@@ -59,4 +60,7 @@ type ResolvedProps = Record<string, unknown>;
 type PropsResolver = ReturnType<typeof createPropsResolver>;
 declare function createPropsResolver({ transformers, schema: initialSchema, onPropResolve }: CreatePropResolverArgs): ({ props, schema, signal }: ResolveArgs) => Promise<ResolvedProps>;
 
-export { type PropsResolver, createPropsResolver, createTransformer, createTransformersRegistry, init, settingsTransformersRegistry, styleTransformersRegistry };
+declare const startDragElementFromPanel: (props: Omit<V1ElementModelProps, "id">) => void;
+declare const endDragElementFromPanel: () => void;
+
+export { type PropsResolver, createPropsResolver, createTransformer, createTransformersRegistry, endDragElementFromPanel, init, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as _elementor_editor_props from '@elementor/editor-props';
 import { AnyTransformable, PropTypeKey, PropsSchema, Props } from '@elementor/editor-props';
+import { V1ElementModelProps } from '@elementor/editor-elements';
 
 declare function init(): void;
 
@@ -59,4 +60,7 @@ type ResolvedProps = Record<string, unknown>;
 type PropsResolver = ReturnType<typeof createPropsResolver>;
 declare function createPropsResolver({ transformers, schema: initialSchema, onPropResolve }: CreatePropResolverArgs): ({ props, schema, signal }: ResolveArgs) => Promise<ResolvedProps>;
 
-export { type PropsResolver, createPropsResolver, createTransformer, createTransformersRegistry, init, settingsTransformersRegistry, styleTransformersRegistry };
+declare const startDragElementFromPanel: (props: Omit<V1ElementModelProps, "id">) => void;
+declare const endDragElementFromPanel: () => void;
+
+export { type PropsResolver, createPropsResolver, createTransformer, createTransformersRegistry, endDragElementFromPanel, init, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };

package/dist/index.js

@@ -33,8 +33,10 @@ __export(index_exports, {
   createPropsResolver: () => createPropsResolver,
   createTransformer: () => createTransformer,
   createTransformersRegistry: () => createTransformersRegistry,
+  endDragElementFromPanel: () => endDragElementFromPanel,
   init: () => init,
   settingsTransformersRegistry: () => settingsTransformersRegistry,
+  startDragElementFromPanel: () => startDragElementFromPanel,
   styleTransformersRegistry: () => styleTransformersRegistry
 });
 module.exports = __toCommonJS(index_exports);
@@ -1604,13 +1606,50 @@ function init() {
     component: ClassesRename
   });
 }
+
+// src/sync/drag-element-from-panel.ts
+var startDragElementFromPanel = (props) => {
+  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 getElementorChannels = () => {
+  const extendedWindow = window;
+  const channels = extendedWindow.elementor?.channels;
+  if (!channels) {
+    throw new Error(
+      "Elementor channels not found: Elementor editor is not initialized or channels are unavailable."
+    );
+  }
+  return channels;
+};
+var getLegacyPanelElementView = ({ settings, ...rest }) => {
+  const extendedWindow = window;
+  const LegacyElementModel = extendedWindow.elementor?.modules?.elements?.models?.Element;
+  if (!LegacyElementModel) {
+    throw new Error("Elementor legacy Element model not found in editor modules");
+  }
+  const elementModel = new LegacyElementModel({
+    ...rest,
+    custom: {
+      isPreset: !!settings,
+      preset_settings: settings
+    }
+  });
+  return { model: elementModel };
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   createPropsResolver,
   createTransformer,
   createTransformersRegistry,
+  endDragElementFromPanel,
   init,
   settingsTransformersRegistry,
+  startDragElementFromPanel,
   styleTransformersRegistry
 });
 //# sourceMappingURL=index.js.map

package/dist/index.mjs

@@ -1587,12 +1587,49 @@ function init() {
     component: ClassesRename
   });
 }
+
+// src/sync/drag-element-from-panel.ts
+var startDragElementFromPanel = (props) => {
+  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 getElementorChannels = () => {
+  const extendedWindow = window;
+  const channels = extendedWindow.elementor?.channels;
+  if (!channels) {
+    throw new Error(
+      "Elementor channels not found: Elementor editor is not initialized or channels are unavailable."
+    );
+  }
+  return channels;
+};
+var getLegacyPanelElementView = ({ settings, ...rest }) => {
+  const extendedWindow = window;
+  const LegacyElementModel = extendedWindow.elementor?.modules?.elements?.models?.Element;
+  if (!LegacyElementModel) {
+    throw new Error("Elementor legacy Element model not found in editor modules");
+  }
+  const elementModel = new LegacyElementModel({
+    ...rest,
+    custom: {
+      isPreset: !!settings,
+      preset_settings: settings
+    }
+  });
+  return { model: elementModel };
+};
 export {
   createPropsResolver,
   createTransformer,
   createTransformersRegistry,
+  endDragElementFromPanel,
   init,
   settingsTransformersRegistry,
+  startDragElementFromPanel,
   styleTransformersRegistry
 };
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "3.33.0-119",
+  "version": "3.33.0-121",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,19 +37,19 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-119",
-    "@elementor/editor-notifications": "3.33.0-119",
-    "@elementor/editor-documents": "3.33.0-119",
-    "@elementor/editor-elements": "3.33.0-119",
-    "@elementor/editor-props": "3.33.0-119",
-    "@elementor/editor-responsive": "3.33.0-119",
-    "@elementor/editor-styles": "3.33.0-119",
-    "@elementor/editor-styles-repository": "3.33.0-119",
-    "@elementor/editor-v1-adapters": "3.33.0-119",
-    "@elementor/twing": "3.33.0-119",
+    "@elementor/editor": "3.33.0-121",
+    "@elementor/editor-notifications": "3.33.0-121",
+    "@elementor/editor-documents": "3.33.0-121",
+    "@elementor/editor-elements": "3.33.0-121",
+    "@elementor/editor-props": "3.33.0-121",
+    "@elementor/editor-responsive": "3.33.0-121",
+    "@elementor/editor-styles": "3.33.0-121",
+    "@elementor/editor-styles-repository": "3.33.0-121",
+    "@elementor/editor-v1-adapters": "3.33.0-121",
+    "@elementor/twing": "3.33.0-121",
     "@elementor/ui": "1.36.12",
-    "@elementor/utils": "3.33.0-119",
-    "@elementor/wp-media": "3.33.0-119",
+    "@elementor/utils": "3.33.0-121",
+    "@elementor/wp-media": "3.33.0-121",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/index.ts

@@ -5,3 +5,4 @@ export { settingsTransformersRegistry } from './settings-transformers-registry';
 export { createTransformer } from './transformers/create-transformer';
 export { createTransformersRegistry } from './transformers/create-transformers-registry';
 export { createPropsResolver, type PropsResolver } from './renderers/create-props-resolver';
+export { startDragElementFromPanel, endDragElementFromPanel } from './sync/drag-element-from-panel';

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

@@ -0,0 +1,49 @@
+import { type V1ElementModelProps } from '@elementor/editor-elements';
+
+import { type CanvasExtendedWindow } from './types';
+
+export const startDragElementFromPanel = ( props: Omit< V1ElementModelProps, 'id' > ) => {
+	const channels = getElementorChannels();
+
+	channels?.editor.reply( 'element:dragged', null );
+
+	channels?.panelElements
+		.reply( 'element:selected', getLegacyPanelElementView( props ) )
+		.trigger( 'element:drag:start' );
+};
+
+export const endDragElementFromPanel = () => {
+	getElementorChannels()?.panelElements?.trigger( 'element:drag:end' );
+};
+
+const getElementorChannels = () => {
+	const extendedWindow = window as unknown as CanvasExtendedWindow;
+	const channels = extendedWindow.elementor?.channels;
+
+	if ( ! channels ) {
+		throw new Error(
+			'Elementor channels not found: Elementor editor is not initialized or channels are unavailable.'
+		);
+	}
+
+	return channels;
+};
+
+const getLegacyPanelElementView = ( { settings, ...rest }: Omit< V1ElementModelProps, 'id' > ) => {
+	const extendedWindow = window as unknown as CanvasExtendedWindow;
+	const LegacyElementModel = extendedWindow.elementor?.modules?.elements?.models?.Element;
+
+	if ( ! LegacyElementModel ) {
+		throw new Error( 'Elementor legacy Element model not found in editor modules' );
+	}
+
+	const elementModel = new LegacyElementModel( {
+		...rest,
+		custom: {
+			isPreset: !! settings,
+			preset_settings: settings,
+		},
+	} );
+
+	return { model: elementModel };
+};

package/src/sync/types.ts

@@ -1,13 +1,39 @@
-import { type StorageContent } from '../prevent-link-in-link-commands';
+import { type V1ElementModelProps, type V1ElementSettingsProps } from '@elementor/editor-elements';
 
+import { type StorageContent } from '../prevent-link-in-link-commands';
 export type EnqueueFont = ( fontFamily: string, context?: 'preview' | 'editor' ) => void;
 
+export type ElementModelProps = Omit< V1ElementModelProps, 'id' > & {
+	custom: {
+		isPreset: boolean;
+		preset_settings?: V1ElementSettingsProps;
+	};
+};
+
+type Channel = {
+	reply: ( event: string, data: unknown ) => Channel;
+	trigger: ( event: string ) => void;
+};
+
+type ElementorChannels = {
+	editor: Channel;
+	panelElements: Channel;
+};
+
 export type CanvasExtendedWindow = Window & {
 	elementor?: {
 		$preview?: [ HTMLIFrameElement ];
 		helpers?: {
 			enqueueFont?: EnqueueFont;
 		};
+		channels?: ElementorChannels;
+		modules?: {
+			elements?: {
+				models?: {
+					Element?: new ( props: ElementModelProps ) => unknown;
+				};
+			};
+		};
 	};
 	elementorCommon?: {
 		storage?: {