@elementor/editor-components 4.2.0-915 → 4.2.0-917

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "4.2.0-915",
+  "version": "4.2.0-917",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,32 +40,32 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.2.0-915",
-    "@elementor/editor-canvas": "4.2.0-915",
-    "@elementor/editor-controls": "4.2.0-915",
-    "@elementor/editor-documents": "4.2.0-915",
-    "@elementor/editor-editing-panel": "4.2.0-915",
-    "@elementor/editor-elements": "4.2.0-915",
-    "@elementor/editor-elements-panel": "4.2.0-915",
-    "@elementor/editor-global-classes": "4.2.0-915",
-    "@elementor/editor-mcp": "4.2.0-915",
-    "@elementor/editor-templates": "4.2.0-915",
-    "@elementor/editor-panels": "4.2.0-915",
-    "@elementor/editor-props": "4.2.0-915",
-    "@elementor/editor-styles-repository": "4.2.0-915",
-    "@elementor/editor-ui": "4.2.0-915",
-    "@elementor/editor-v1-adapters": "4.2.0-915",
-    "@elementor/http-client": "4.2.0-915",
+    "@elementor/editor": "4.2.0-917",
+    "@elementor/editor-canvas": "4.2.0-917",
+    "@elementor/editor-controls": "4.2.0-917",
+    "@elementor/editor-documents": "4.2.0-917",
+    "@elementor/editor-editing-panel": "4.2.0-917",
+    "@elementor/editor-elements": "4.2.0-917",
+    "@elementor/editor-elements-panel": "4.2.0-917",
+    "@elementor/editor-global-classes": "4.2.0-917",
+    "@elementor/editor-mcp": "4.2.0-917",
+    "@elementor/editor-templates": "4.2.0-917",
+    "@elementor/editor-panels": "4.2.0-917",
+    "@elementor/editor-props": "4.2.0-917",
+    "@elementor/editor-styles-repository": "4.2.0-917",
+    "@elementor/editor-ui": "4.2.0-917",
+    "@elementor/editor-v1-adapters": "4.2.0-917",
+    "@elementor/http-client": "4.2.0-917",
     "@elementor/icons": "~1.75.1",
-    "@elementor/events": "4.2.0-915",
-    "@elementor/query": "4.2.0-915",
-    "@elementor/schema": "4.2.0-915",
-    "@elementor/store": "4.2.0-915",
+    "@elementor/events": "4.2.0-917",
+    "@elementor/query": "4.2.0-917",
+    "@elementor/schema": "4.2.0-917",
+    "@elementor/store": "4.2.0-917",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-915",
+    "@elementor/utils": "4.2.0-917",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "4.2.0-915",
-    "@elementor/editor-current-user": "4.2.0-915"
+    "@elementor/editor-notifications": "4.2.0-917",
+    "@elementor/editor-current-user": "4.2.0-917"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/utils/detach-component-instance/detach-component-instance.ts

@@ -1,6 +1,13 @@
-import { getContainer, replaceElement, type V1Element, type V1ElementModelProps } from '@elementor/editor-elements';
+import { doAfterRender } from '@elementor/editor-canvas';
+import {
+	getContainer,
+	replaceElement,
+	selectElement,
+	type V1Element,
+	type V1ElementModelProps,
+} from '@elementor/editor-elements';
 import { undoable } from '@elementor/editor-v1-adapters';
-import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+import { __getState as getState } from '@elementor/store';
 import { __ } from '@wordpress/i18n';
 
 import { componentInstanceOverridesPropTypeUtil } from '../../prop-types/component-instance-overrides-prop-type';
@@ -8,8 +15,7 @@ import {
 	type ComponentInstanceProp,
 	componentInstancePropTypeUtil,
 } from '../../prop-types/component-instance-prop-type';
-import { selectComponent, selectCurrentComponentId, selectOverridableProps, slice } from '../../store/store';
-import { type OverridableProps } from '../../types';
+import { selectComponent } from '../../store/store';
 import { getComponentDocumentData } from '../component-document-data';
 import { trackComponentEvent } from '../tracking';
 import { resolveDetachedInstance } from './resolve-detached-instance';
@@ -27,11 +33,26 @@ type DetachParams = {
 type DoReturn = {
 	detachedElement: V1Element;
 	detachedInstanceElementData: V1ElementModelProps;
-	editedComponentOnDetach: number | null;
-	overridablePropsBeforeDetach: OverridableProps | null;
 	originalInstanceModel: V1ElementModelProps;
+	actionId: number;
+};
+
+type DetachEventData = {
+	detachedInstanceId: string;
+	detachActionId: number;
+};
+
+type UndoDetachEventData = {
+	restoredInstanceId: string;
+	detachActionId: number;
 };
 
+type RedoDetachEventData = DetachEventData;
+
+const DETACH_EVENT = 'elementor/components/detach-instance';
+const DETACH_UNDO_EVENT = 'elementor/components/undo-detach-instance';
+const DETACH_REDO_EVENT = 'elementor/components/redo-detach-instance';
+
 export async function detachComponentInstance( {
 	instanceId,
 	componentId,
@@ -64,20 +85,29 @@ export async function detachComponentInstance( {
 					overrides
 				) as V1ElementModelProps;
 
-				const editedComponentOnDetach = selectCurrentComponentId( getState() );
-				// We need to store the overridable props of the current component before detach to restore them on undo.
-				const overridablePropsBeforeDetach = editedComponentOnDetach
-					? selectOverridableProps( getState(), editedComponentOnDetach ) ?? null
-					: null;
-
 				const originalInstanceModel = instanceContainer.model.toJSON();
 
+				const actionId = new Date().getTime();
+
+				// We should fire the event *before* replacing the element, so it will happen before delete event is fired.
+				// As we do overridable props cleanup for both events.
+				window.dispatchEvent(
+					new CustomEvent( DETACH_EVENT, {
+						detail: {
+							detachedInstanceId: instanceId,
+							detachActionId: actionId,
+						} as DetachEventData,
+					} )
+				);
+
 				const detachedElement = replaceElement( {
 					currentElementId: instanceId,
 					newElement: detachedInstanceElementData,
 					withHistory: false,
 				} );
 
+				selectElement( detachedElement.id );
+
 				const componentUid = selectComponent( getState(), componentId )?.uid;
 				trackComponentEvent( {
 					action: 'detached',
@@ -92,50 +122,35 @@ export async function detachComponentInstance( {
 				return {
 					detachedElement,
 					detachedInstanceElementData,
-					editedComponentOnDetach,
-					overridablePropsBeforeDetach,
 					originalInstanceModel,
+					actionId,
 				};
 			},
-			undo: (
-				_: undefined,
-				{
-					detachedElement,
-					originalInstanceModel,
-					overridablePropsBeforeDetach,
-					editedComponentOnDetach,
-				}: DoReturn
-			): V1Element => {
+			undo: ( _: undefined, { detachedElement, originalInstanceModel, actionId }: DoReturn ): V1Element => {
 				const restoredInstance = replaceElement( {
 					currentElementId: detachedElement.id,
 					newElement: originalInstanceModel,
 					withHistory: false,
 				} );
 
-				const currentComponentId = selectCurrentComponentId( getState() );
-				if (
-					currentComponentId &&
-					currentComponentId === editedComponentOnDetach &&
-					overridablePropsBeforeDetach
-				) {
-					dispatch(
-						slice.actions.setOverridableProps( {
-							componentId: currentComponentId,
-							overridableProps: overridablePropsBeforeDetach,
-						} )
-					);
-				}
+				window.dispatchEvent(
+					new CustomEvent( DETACH_UNDO_EVENT, {
+						detail: {
+							restoredInstanceId: restoredInstance.id,
+							detachActionId: actionId,
+						} as UndoDetachEventData,
+					} )
+				);
+
+				// Wait for the instance to be restored
+				doAfterRender( [ restoredInstance.id ], () => {
+					selectElement( restoredInstance.id );
+				} );
 
 				return restoredInstance;
 			},
 			redo: ( _: undefined, doReturn: DoReturn, restoredInstance: V1Element ) => {
-				const { detachedInstanceElementData } = doReturn;
-
-				const editedComponentOnDetach = selectCurrentComponentId( getState() );
-				// We need to store the overridable props of the current component before detach to restore them on undo.
-				const overridablePropsBeforeDetach = editedComponentOnDetach
-					? selectOverridableProps( getState(), editedComponentOnDetach ) ?? null
-					: null;
+				const { detachedInstanceElementData, actionId } = doReturn;
 
 				const detachedElement = replaceElement( {
 					currentElementId: restoredInstance.id,
@@ -143,11 +158,20 @@ export async function detachComponentInstance( {
 					withHistory: false,
 				} );
 
+				window.dispatchEvent(
+					new CustomEvent( DETACH_REDO_EVENT, {
+						detail: {
+							detachedInstanceId: detachedElement.id,
+							detachActionId: actionId,
+						} as RedoDetachEventData,
+					} )
+				);
+
+				selectElement( detachedElement.id );
+
 				return {
 					...doReturn,
 					detachedElement,
-					editedComponentOnDetach,
-					overridablePropsBeforeDetach,
 				};
 			},
 		},

package/src/utils/detach-component-instance/resolve-overridable-settings.ts

@@ -97,10 +97,11 @@ function resolvePropValue(
 		return resolveOverridableOverride( matchingOverride, originValue );
 	}
 
-	// for regular props, when there's a matching override, return the matching override value
+	// for regular props, when there's a non null matching override, return the matching override value,
+	// otherwise return the origin value
 	const matchingOverrideValue = componentInstanceOverridePropTypeUtil.extract( matchingOverride )
 		?.override_value as PropValue | null;
-	return matchingOverrideValue;
+	return matchingOverrideValue ?? originValue;
 }
 
 function resolveOverridableOverride(