@elementor/editor-components 3.35.0-464 → 3.35.0-466

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "3.35.0-464",
+  "version": "3.35.0-466",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,30 +40,30 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.35.0-464",
-    "@elementor/editor-canvas": "3.35.0-464",
-    "@elementor/editor-controls": "3.35.0-464",
-    "@elementor/editor-documents": "3.35.0-464",
-    "@elementor/editor-editing-panel": "3.35.0-464",
-    "@elementor/editor-elements": "3.35.0-464",
-    "@elementor/editor-elements-panel": "3.35.0-464",
-    "@elementor/editor-mcp": "3.35.0-464",
-    "@elementor/editor-panels": "3.35.0-464",
-    "@elementor/editor-props": "3.35.0-464",
-    "@elementor/editor-styles-repository": "3.35.0-464",
-    "@elementor/editor-ui": "3.35.0-464",
-    "@elementor/editor-v1-adapters": "3.35.0-464",
-    "@elementor/http-client": "3.35.0-464",
+    "@elementor/editor": "3.35.0-466",
+    "@elementor/editor-canvas": "3.35.0-466",
+    "@elementor/editor-controls": "3.35.0-466",
+    "@elementor/editor-documents": "3.35.0-466",
+    "@elementor/editor-editing-panel": "3.35.0-466",
+    "@elementor/editor-elements": "3.35.0-466",
+    "@elementor/editor-elements-panel": "3.35.0-466",
+    "@elementor/editor-mcp": "3.35.0-466",
+    "@elementor/editor-panels": "3.35.0-466",
+    "@elementor/editor-props": "3.35.0-466",
+    "@elementor/editor-styles-repository": "3.35.0-466",
+    "@elementor/editor-ui": "3.35.0-466",
+    "@elementor/editor-v1-adapters": "3.35.0-466",
+    "@elementor/http-client": "3.35.0-466",
     "@elementor/icons": "^1.63.0",
-    "@elementor/mixpanel": "3.35.0-464",
-    "@elementor/query": "3.35.0-464",
-    "@elementor/schema": "3.35.0-464",
-    "@elementor/store": "3.35.0-464",
+    "@elementor/mixpanel": "3.35.0-466",
+    "@elementor/query": "3.35.0-466",
+    "@elementor/schema": "3.35.0-466",
+    "@elementor/store": "3.35.0-466",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-464",
+    "@elementor/utils": "3.35.0-466",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "3.35.0-464",
-    "@elementor/editor-current-user": "3.35.0-464"
+    "@elementor/editor-notifications": "3.35.0-466",
+    "@elementor/editor-current-user": "3.35.0-466"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/components/overridable-props/overridable-prop-control.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { type ComponentType } from 'react';
 import {
 	ControlReplacementsProvider,
-	createControl,
 	PropKeyProvider,
 	PropProvider,
 	useBoundProp,
+	useControlReplacement,
 } from '@elementor/editor-controls';
 import { createTopLevelObjectType, getControlReplacements, useElement } from '@elementor/editor-editing-panel';
 import { type PropValue } from '@elementor/editor-props';
@@ -26,7 +26,6 @@ export function OverridablePropControl< T extends object >( {
 	...props
 }: T & { OriginalControl: ComponentType< T > } ) {
 	const { elementType } = useElement();
-	const Control = createControl( OriginalControl );
 
 	const { value, bind, setValue, placeholder, ...propContext } = useBoundProp( componentOverridablePropTypeUtil );
 	const componentId = useCurrentComponentId();
@@ -97,10 +96,31 @@ export function OverridablePropControl< T extends object >( {
 			>
 				<PropKeyProvider bind={ bind }>
 					<ControlReplacementsProvider replacements={ filteredReplacements }>
-						<Control { ...( props as T ) } />
+						<ControlWithReplacements OriginalControl={ OriginalControl } props={ props as T } />
 					</ControlReplacementsProvider>
 				</PropKeyProvider>
 			</PropProvider>
 		</OverridablePropProvider>
 	);
 }
+
+type ControlComponentType = ComponentType< object & { OriginalControl: ComponentType } >;
+
+function ControlWithReplacements< T extends object >( {
+	OriginalControl,
+	props,
+}: {
+	OriginalControl: ComponentType< T >;
+	props: T;
+} ) {
+	const { ControlToRender, isReplaced } = useControlReplacement( OriginalControl as ControlComponentType );
+
+	if ( isReplaced ) {
+		const ReplacementControl = ControlToRender as unknown as ComponentType<
+			T & { OriginalControl: ComponentType< T > }
+		>;
+		return <ReplacementControl { ...props } OriginalControl={ OriginalControl } />;
+	}
+
+	return <OriginalControl { ...props } />;
+}

package/src/store/actions/delete-overridable-prop.ts

@@ -1,7 +1,7 @@
-import { getContainer, updateElementSettings } from '@elementor/editor-elements';
 import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
 
 import { type ComponentId } from '../../types';
+import { revertElementOverridableSetting } from '../../utils/revert-element-overridable-setting';
 import { type Source, trackComponentEvent } from '../../utils/tracking';
 import { selectCurrentComponent, selectOverridableProps, slice } from '../store';
 import { removePropFromAllGroups } from '../utils/groups-transformers';
@@ -25,7 +25,7 @@ export function deleteOverridableProp( { componentId, propKey, source }: DeleteP
 		return;
 	}
 
-	revertElementSetting( prop.elementId, prop.propKey, prop.originValue );
+	revertElementOverridableSetting( prop.elementId, prop.propKey, prop.originValue, propKey );
 
 	const { [ propKey ]: removedProp, ...remainingProps } = overridableProps.props;
 
@@ -54,17 +54,3 @@ export function deleteOverridableProp( { componentId, propKey, source }: DeleteP
 		element_type: removedProp.widgetType ?? removedProp.elType,
 	} );
 }
-
-function revertElementSetting( elementId: string, settingKey: string, originValue: unknown ): void {
-	const container = getContainer( elementId );
-
-	if ( ! container ) {
-		return;
-	}
-
-	updateElementSettings( {
-		id: elementId,
-		props: { [ settingKey ]: originValue ?? null },
-		withHistory: false,
-	} );
-}

package/src/utils/revert-element-overridable-setting.ts

@@ -0,0 +1,94 @@
+import { getContainer, getElementSetting, updateElementSettings } from '@elementor/editor-elements';
+
+import {
+	type ComponentInstanceOverrideProp,
+	componentInstanceOverridePropTypeUtil,
+} from '../prop-types/component-instance-override-prop-type';
+import {
+	componentInstanceOverridesPropTypeUtil,
+	type ComponentInstanceOverridesPropValue,
+} from '../prop-types/component-instance-overrides-prop-type';
+import {
+	type ComponentInstanceProp,
+	componentInstancePropTypeUtil,
+	type ComponentInstancePropValue,
+} from '../prop-types/component-instance-prop-type';
+import { componentOverridablePropTypeUtil } from '../prop-types/component-overridable-prop-type';
+import { isComponentInstance } from './is-component-instance';
+
+export function revertElementOverridableSetting(
+	elementId: string,
+	settingKey: string,
+	originValue: unknown,
+	overrideKey: string
+): void {
+	const container = getContainer( elementId );
+
+	if ( ! container ) {
+		return;
+	}
+
+	if ( isComponentInstance( container.model.toJSON() ) ) {
+		revertComponentInstanceSetting( elementId, overrideKey );
+
+		return;
+	}
+
+	updateElementSettings( {
+		id: elementId,
+		props: { [ settingKey ]: originValue ?? null },
+		withHistory: false,
+	} );
+}
+
+function revertComponentInstanceSetting( elementId: string, overrideKey: string ): void {
+	const setting = getElementSetting< ComponentInstanceProp >( elementId, 'component_instance' );
+
+	const componentInstance = componentInstancePropTypeUtil.extract( setting );
+	const overrides = componentInstanceOverridesPropTypeUtil.extract( componentInstance?.overrides );
+
+	if ( ! overrides ) {
+		return;
+	}
+
+	const updatedOverrides = getUpdatedComponentInstanceOverrides( overrides, overrideKey );
+
+	const updatedSetting = componentInstancePropTypeUtil.create( {
+		...componentInstance,
+		overrides: componentInstanceOverridesPropTypeUtil.create( updatedOverrides ),
+	} as ComponentInstancePropValue );
+
+	updateElementSettings( {
+		id: elementId,
+		props: { component_instance: updatedSetting },
+		withHistory: false,
+	} );
+}
+
+function getUpdatedComponentInstanceOverrides(
+	overrides: NonNullable< ComponentInstanceOverridesPropValue >,
+	overrideKey: string
+): ComponentInstanceOverridesPropValue {
+	return overrides
+		.map( ( item ) => {
+			const isOverridable = componentOverridablePropTypeUtil.isValid( item );
+			if ( ! isOverridable ) {
+				// we revert only overridable values
+				return item;
+			}
+
+			const isOriginValueOverride = componentInstanceOverridePropTypeUtil.isValid( item.value.origin_value );
+
+			if ( ! isOriginValueOverride ) {
+				// component instances cannot have overridables with origin value that is not an override
+				return null;
+			}
+
+			if ( item.value.override_key !== overrideKey ) {
+				return item;
+			}
+
+			return item.value.origin_value as ComponentInstanceOverrideProp;
+		} )
+		.filter( ( item ): item is NonNullable< typeof item > => item !== null );
+}