@elementor/editor-components 4.0.0-506 → 4.0.0-509

package/package.json

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

package/src/components/instance-editing-panel/instance-editing-panel.tsx

@@ -69,7 +69,7 @@ export function InstanceEditingPanel() {
 					) : (
 						<Stack direction="column" alignItems="stretch">
 							{ groups.map( ( group ) => (
-								<React.Fragment key={ group.id }>
+								<React.Fragment key={ group.id + componentInstanceId }>
 									<OverridePropsGroup
 										group={ group }
 										props={ overridableProps.props }

package/src/components/instance-editing-panel/override-prop-control.tsx

@@ -36,6 +36,7 @@ import { getPropTypeForComponentOverride } from '../../utils/get-prop-type-for-c
 import { resolveOverridePropValue } from '../../utils/resolve-override-prop-value';
 import { ControlLabel } from '../control-label';
 import { OverrideControlInnerElementNotFoundError } from '../errors';
+import { useResolvedOriginValue } from './use-resolved-origin-value';
 
 type Props = {
 	overridableProp: OverridableProp;
@@ -61,6 +62,10 @@ function OverrideControl( { overridableProp, overrides }: Props ) {
 	);
 	const controlReplacements = getControlReplacements();
 
+	const matchingOverride = getMatchingOverride( overrides, overridableProp.overrideKey );
+
+	const recursiveOriginValue = useResolvedOriginValue( matchingOverride, overridableProp );
+
 	const propType = getPropTypeForComponentOverride( overridableProp );
 
 	if ( ! propType ) {
@@ -79,9 +84,8 @@ function OverrideControl( { overridableProp, overrides }: Props ) {
 		throw new Error( 'Component ID is required' );
 	}
 
-	const matchingOverride = getMatchingOverride( overrides, overridableProp.overrideKey );
-
-	const propValue = matchingOverride ? resolveOverridePropValue( matchingOverride ) : overridableProp.originValue;
+	const resolvedOverrideValue = matchingOverride ? resolveOverridePropValue( matchingOverride ) : null;
+	const propValue = resolvedOverrideValue ?? recursiveOriginValue ?? overridableProp.originValue;
 
 	const value = {
 		[ overridableProp.overrideKey ]: propValue,
@@ -180,7 +184,7 @@ function getMatchingOverride(
 	overrides: ComponentInstanceOverridesPropValue,
 	overrideKey: string
 ): ComponentInstanceOverride | null {
-	return (
+	const result =
 		overrides?.find( ( override ) => {
 			const overridableValue = componentOverridablePropTypeUtil.extract( override );
 			let comparedOverrideKey = null;
@@ -193,8 +197,9 @@ function getMatchingOverride(
 			}
 
 			return comparedOverrideKey === overrideKey;
-		} ) ?? null
-	);
+		} ) ?? null;
+
+	return result;
 }
 
 function createOverrideValue( {

package/src/components/instance-editing-panel/use-resolved-origin-value.tsx

@@ -0,0 +1,132 @@
+import { type PropValue } from '@elementor/editor-props';
+import { __useSelector as useSelector } from '@elementor/store';
+
+import { componentInstanceOverridePropTypeUtil } from '../../prop-types/component-instance-override-prop-type';
+import { type ComponentInstanceOverride } from '../../prop-types/component-instance-overrides-prop-type';
+import { componentOverridablePropTypeUtil } from '../../prop-types/component-overridable-prop-type';
+import { selectData } from '../../store/store';
+import { type OverridableProp, type PublishedComponent } from '../../types';
+
+export function useResolvedOriginValue( override: ComponentInstanceOverride | null, overridableProp: OverridableProp ) {
+	const components = useSelector( selectData );
+
+	return resolveOriginValue( components, override, overridableProp );
+}
+
+function resolveOriginValue(
+	components: PublishedComponent[],
+	matchingOverride: ComponentInstanceOverride | null,
+	overridableProp: OverridableProp
+): PropValue {
+	const { originValue: fallbackOriginValue, originPropFields } = overridableProp;
+
+	if ( hasValue( fallbackOriginValue ) ) {
+		return fallbackOriginValue;
+	}
+
+	if ( matchingOverride ) {
+		const result = getOriginFromOverride( components, matchingOverride );
+
+		if ( hasValue( result ) ) {
+			return result;
+		}
+	}
+
+	const { elementId, propKey } = originPropFields ?? {};
+
+	if ( elementId && propKey ) {
+		return findOriginValueByElementId( components, elementId, propKey );
+	}
+
+	return null;
+}
+
+function getOriginFromOverride( components: PublishedComponent[], override: ComponentInstanceOverride ): PropValue {
+	const overridableValue = componentOverridablePropTypeUtil.extract( override );
+	const innerOverride = overridableValue
+		? componentInstanceOverridePropTypeUtil.extract( overridableValue.origin_value )
+		: componentInstanceOverridePropTypeUtil.extract( override );
+
+	if ( ! innerOverride ) {
+		return null;
+	}
+
+	const { schema_source: schemaSource, override_key: overrideKey, override_value: overrideValue } = innerOverride;
+	const componentId = schemaSource?.id;
+
+	if ( ! componentId || ! overrideKey ) {
+		return null;
+	}
+
+	const prop = getOverridableProp( components, componentId, overrideKey );
+
+	if ( hasValue( prop?.originValue ) ) {
+		return prop.originValue;
+	}
+
+	if ( prop?.originPropFields?.elementId ) {
+		const targetPropKey = prop.originPropFields.propKey ?? prop.propKey;
+		const result = findOriginValueByElementId( components, prop.originPropFields.elementId, targetPropKey );
+
+		if ( hasValue( result ) ) {
+			return result;
+		}
+	}
+
+	const nestedOverridable = componentOverridablePropTypeUtil.extract( overrideValue );
+
+	if ( nestedOverridable ) {
+		return getOriginFromOverride( components, componentOverridablePropTypeUtil.create( nestedOverridable ) );
+	}
+
+	return null;
+}
+
+function findOriginValueByElementId(
+	components: PublishedComponent[],
+	targetElementId: string,
+	targetPropKey: string,
+	visited: Set< number > = new Set()
+): PropValue {
+	for ( const component of components ) {
+		if ( visited.has( component.id ) ) {
+			continue;
+		}
+		visited.add( component.id );
+
+		const matchingProp = Object.values( component.overridableProps?.props ?? {} ).find(
+			( { elementId, propKey } ) => elementId === targetElementId && propKey === targetPropKey
+		);
+
+		if ( ! matchingProp ) {
+			continue;
+		}
+
+		if ( hasValue( matchingProp.originValue ) ) {
+			return matchingProp.originValue;
+		}
+
+		if ( matchingProp.originPropFields?.elementId ) {
+			const innerPropKey = matchingProp.originPropFields.propKey ?? targetPropKey;
+
+			return findOriginValueByElementId(
+				components,
+				matchingProp.originPropFields.elementId,
+				innerPropKey,
+				visited
+			);
+		}
+	}
+
+	return null;
+}
+
+function hasValue< T >( value: T | null | undefined ): value is T {
+	return value !== null && value !== undefined;
+}
+
+function getOverridableProp( components: PublishedComponent[], componentId: number, overrideKey: string ) {
+	const component = components.find( ( { id } ) => id === componentId );
+
+	return component?.overridableProps?.props?.[ overrideKey ];
+}

package/src/store/store.ts

@@ -121,13 +121,6 @@ export const slice = createSlice( {
 
 			component.overridableProps = payload.overridableProps;
 		},
-		clearOverridableProps: ( state, { payload }: PayloadAction< { componentId: ComponentId } > ) => {
-			const component = state.data.find( ( comp ) => comp.id === payload.componentId );
-
-			if ( component ) {
-				component.overridableProps = undefined;
-			}
-		},
 		rename: ( state, { payload }: PayloadAction< { componentUid: string; name: string } > ) => {
 			const component = state.data.find( ( comp ) => comp.uid === payload.componentUid );
 
@@ -157,7 +150,7 @@ export const slice = createSlice( {
 	},
 } );
 
-const selectData = ( state: ComponentsSlice ) => state[ SLICE_NAME ].data;
+export const selectData = ( state: ComponentsSlice ) => state[ SLICE_NAME ].data;
 export const selectArchivedThisSession = ( state: ComponentsSlice ) => state[ SLICE_NAME ].archivedThisSession;
 const selectLoadStatus = ( state: ComponentsSlice ) => state[ SLICE_NAME ].loadStatus;
 const selectStylesDefinitions = ( state: ComponentsSlice ) => state[ SLICE_NAME ].styles ?? {};

package/src/sync/publish-draft-components-in-page-before-save.ts

@@ -3,7 +3,7 @@ import { type V1ElementData } from '@elementor/editor-elements';
 
 import { apiClient } from '../api';
 import { type DocumentSaveStatus } from '../types';
-import { invalidateComponentCache } from '../utils/component-document-data';
+import { invalidateComponentDocumentData } from '../utils/component-document-data';
 import { getComponentDocuments } from '../utils/get-component-documents';
 
 type Options = {
@@ -26,5 +26,5 @@ export async function publishDraftComponentsInPageBeforeSave( { status, elements
 
 	await apiClient.updateStatuses( draftIds, 'publish' );
 
-	draftIds.forEach( ( id ) => invalidateComponentCache( id ) );
+	draftIds.forEach( ( id ) => invalidateComponentDocumentData( id ) );
 }

package/src/utils/component-document-data.ts

@@ -1,7 +1,4 @@
 import { type Document, getV1DocumentsManager } from '@elementor/editor-documents';
-import { __dispatch as dispatch } from '@elementor/store';
-
-import { slice } from '../store/store';
 
 type ComponentDocumentData = Document;
 
@@ -15,10 +12,8 @@ export const getComponentDocumentData = async ( id: number ) => {
 	}
 };
 
-export const invalidateComponentCache = ( id: number ) => {
+export const invalidateComponentDocumentData = ( id: number ) => {
 	const documentManager = getV1DocumentsManager();
 
 	documentManager.invalidateCache( id );
-	dispatch( slice.actions.removeStyles( { id } ) );
-	dispatch( slice.actions.clearOverridableProps( { componentId: id } ) );
 };

package/src/utils/switch-to-component.ts

@@ -1,18 +1,15 @@
 import { getCurrentDocumentContainer, selectElement } from '@elementor/editor-elements';
 import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
 
-import { invalidateComponentCache } from './component-document-data';
 import { expandNavigator } from './expand-navigator';
 
 export async function switchToComponent(
-	componentId: number,
+	componentId: number | string,
 	componentInstanceId?: string | null,
 	element?: HTMLElement | null
 ) {
 	const selector = getSelector( element, componentInstanceId );
 
-	invalidateComponentCache( componentId );
-
 	await runCommand( 'editor/documents/switch', {
 		id: componentId,
 		selector,