@elementor/editor-canvas 4.4.0-1112 → 4.4.0-1114

package/dist/index.js

@@ -2835,14 +2835,17 @@ function isRecord(value) {
 var import_editor_elements5 = require("@elementor/editor-elements");
 function createPendingElement(wrapperView, data, options = {}) {
   const parentContainer = wrapperView.getContainer();
-  const model = { ...data };
-  if (!model.id) {
+  const model = options.clone ? (0, import_editor_elements5.cloneElementTree)(data) : { ...data };
+  if (!options.clone && !model.id) {
     model.id = (0, import_editor_elements5.generateElementId)();
   }
   if (!model.elements) {
     model.elements = [];
   }
-  const added = (0, import_editor_elements5.addModelToParent)(parentContainer.id, model, options);
+  const added = (0, import_editor_elements5.addModelToParent)(parentContainer.id, model, {
+    ...options,
+    clone: false
+  });
   if (!added) {
     return void 0;
   }

package/dist/index.mjs

@@ -2791,20 +2791,24 @@ function isRecord(value) {
 // src/legacy/create-pending-element.ts
 import {
   addModelToParent,
+  cloneElementTree,
   findModelInDocument,
   generateElementId,
   getContainer
 } from "@elementor/editor-elements";
 function createPendingElement(wrapperView, data, options = {}) {
   const parentContainer = wrapperView.getContainer();
-  const model = { ...data };
-  if (!model.id) {
+  const model = options.clone ? cloneElementTree(data) : { ...data };
+  if (!options.clone && !model.id) {
     model.id = generateElementId();
   }
   if (!model.elements) {
     model.elements = [];
   }
-  const added = addModelToParent(parentContainer.id, model, options);
+  const added = addModelToParent(parentContainer.id, model, {
+    ...options,
+    clone: false
+  });
   if (!added) {
     return void 0;
   }

package/package.json

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

package/src/legacy/__tests__/create-pending-element.test.ts

@@ -0,0 +1,128 @@
+import { createMockElement } from 'test-utils';
+import { addModelToParent, findModelInDocument, type V1ElementModelProps } from '@elementor/editor-elements';
+
+import { createPendingElement } from '../create-pending-element';
+import { type ElementView } from '../types';
+
+jest.mock( '@elementor/editor-elements', () => ( {
+	...jest.requireActual( '@elementor/editor-elements' ),
+	addModelToParent: jest.fn(),
+	findModelInDocument: jest.fn(),
+	getContainer: jest.fn(),
+} ) );
+
+const mockAddModelToParent = jest.mocked( addModelToParent );
+const mockFindModelInDocument = jest.mocked( findModelInDocument );
+
+describe( 'createPendingElement', () => {
+	beforeEach( () => {
+		(
+			window as typeof window & {
+				elementorCommon?: { helpers?: { getUniqueId?: jest.Mock } };
+			}
+		 ).elementorCommon = {
+			helpers: {
+				getUniqueId: jest
+					.fn()
+					.mockReturnValueOnce( 'cloned-parent-id' )
+					.mockReturnValueOnce( 'cloned-child-id' ),
+			},
+		};
+
+		mockAddModelToParent.mockClear();
+		mockFindModelInDocument.mockClear();
+		mockAddModelToParent.mockReturnValue( true );
+		mockFindModelInDocument.mockReturnValue( createMockElement( {} ) as never );
+	} );
+
+	afterEach( () => {
+		delete ( window as typeof window & { elementorCommon?: unknown } ).elementorCommon;
+	} );
+
+	it( 'regenerates ids before pending clone insertion', () => {
+		// Arrange.
+		const wrapperView = {
+			getContainer: () => ( { id: 'parent-id' } ),
+			once: jest.fn(),
+			model: {
+				trigger: jest.fn(),
+			},
+		} as unknown as ElementView;
+
+		const source = {
+			id: 'original-parent-id',
+			elType: 'container',
+			settings: { _element_id: 'original-parent-element-id' },
+			elements: [
+				{
+					id: 'original-child-id',
+					elType: 'widget',
+					widgetType: 'button',
+					settings: { _element_id: 'original-child-element-id' },
+					elements: [],
+				},
+			],
+		} as unknown as Partial< V1ElementModelProps >;
+
+		// Act.
+		const pendingElement = createPendingElement( wrapperView, source, { clone: true } );
+
+		// Assert.
+		expect( pendingElement?.getContainer().id ).toBe( 'cloned-parent-id' );
+		expect( mockAddModelToParent ).toHaveBeenCalledWith(
+			'parent-id',
+			expect.objectContaining( {
+				id: 'cloned-parent-id',
+				settings: expect.objectContaining( { _element_id: '' } ),
+				elements: [
+					expect.objectContaining( {
+						id: 'cloned-child-id',
+						settings: expect.objectContaining( { _element_id: '' } ),
+					} ),
+				],
+			} ),
+			expect.objectContaining( {
+				clone: false,
+			} )
+		);
+		expect( mockFindModelInDocument ).toHaveBeenCalledWith( 'cloned-parent-id' );
+	} );
+
+	it( 'preserves the source id when clone is false', () => {
+		// Arrange.
+		const wrapperView = {
+			getContainer: () => ( { id: 'parent-id' } ),
+			once: jest.fn(),
+			model: {
+				trigger: jest.fn(),
+			},
+		} as unknown as ElementView;
+
+		const source = {
+			id: 'original-parent-id',
+			elType: 'widget',
+			widgetType: 'button',
+			settings: { _element_id: 'original-parent-element-id' },
+			elements: [],
+		};
+
+		// Act.
+		const pendingElement = createPendingElement( wrapperView, source, { clone: false } );
+
+		// Assert.
+		expect( pendingElement?.getContainer().id ).toBe( 'original-parent-id' );
+		expect( mockAddModelToParent ).toHaveBeenCalledWith(
+			'parent-id',
+			expect.objectContaining( {
+				id: 'original-parent-id',
+				settings: expect.objectContaining( {
+					_element_id: 'original-parent-element-id',
+				} ),
+			} ),
+			expect.objectContaining( {
+				clone: false,
+			} )
+		);
+		expect( mockFindModelInDocument ).toHaveBeenCalledWith( 'original-parent-id' );
+	} );
+} );

package/src/legacy/create-nested-templated-element-type.ts

@@ -422,7 +422,7 @@ export function createNestedTemplatedElementView( {
 			this._doAfterRender( () => parentOpenEditingPanel.call( this, options ) );
 		},
 
-		addElement( data: Partial< V1ElementModelProps >, options?: { edit?: boolean; at?: number } ) {
+		addElement( data: Partial< V1ElementModelProps >, options?: { edit?: boolean; at?: number; clone?: boolean } ) {
 			if ( this.isRendered ) {
 				return parentAddElement.call( this, data, options );
 			}

package/src/legacy/create-pending-element.ts

@@ -1,5 +1,6 @@
 import {
 	addModelToParent,
+	cloneElementTree,
 	findModelInDocument,
 	generateElementId,
 	getContainer,
@@ -12,12 +13,12 @@ import { type ElementView } from './types';
 export function createPendingElement(
 	wrapperView: ElementView,
 	data: Partial< V1ElementModelProps >,
-	options: { edit?: boolean; at?: number } = {}
+	options: { edit?: boolean; at?: number; clone?: boolean } = {}
 ): { getContainer: () => V1Element } | undefined {
 	const parentContainer = wrapperView.getContainer();
-	const model: Partial< V1ElementModelProps > = { ...data };
+	const model: Partial< V1ElementModelProps > = options.clone ? cloneElementTree( data ) : { ...data };
 
-	if ( ! model.id ) {
+	if ( ! options.clone && ! model.id ) {
 		model.id = generateElementId();
 	}
 
@@ -25,13 +26,16 @@ export function createPendingElement(
 		model.elements = [];
 	}
 
-	const added = addModelToParent( parentContainer.id, model as V1ElementModelProps, options );
+	const added = addModelToParent( parentContainer.id, model as V1ElementModelProps, {
+		...options,
+		clone: false,
+	} );
 
 	if ( ! added ) {
 		return undefined;
 	}
 
-	const childId = model.id;
+	const childId = model.id as string;
 	const childModel = findModelInDocument( childId );
 
 	if ( ! childModel ) {