@elementor/editor-components 4.0.0-543 → 4.0.0-545

package/src/store/store.ts

@@ -21,6 +21,8 @@ type GetComponentResponse = PublishedComponent[];
 
 type Status = 'idle' | 'pending' | 'error';
 
+export type SanitizeAttributes = 'overridableProps';
+
 type ComponentsState = {
 	data: PublishedComponent[];
 	unpublishedData: UnpublishedComponent[];
@@ -31,6 +33,10 @@ type ComponentsState = {
 	path: ComponentsPathItem[];
 	currentComponentId: V1Document[ 'id' ] | null;
 	updatedComponentNames: Record< number, string >;
+
+	// We use this map to flag any sanitized attribute of a given component
+	// This map currently resets in response to the `editor/documents/open` command
+	sanitized: Record< ComponentId, Partial< Record< SanitizeAttributes, boolean > > >;
 };
 
 export type ComponentsSlice = SliceState< typeof slice >;
@@ -51,6 +57,7 @@ export const initialState: ComponentsState = {
 	path: [],
 	currentComponentId: null,
 	updatedComponentNames: {},
+	sanitized: {},
 };
 
 export const SLICE_NAME = 'components';
@@ -135,6 +142,21 @@ export const slice = createSlice( {
 		cleanUpdatedComponentNames: ( state ) => {
 			state.updatedComponentNames = {};
 		},
+		updateComponentSanitizedAttribute: (
+			state,
+			{
+				payload: { componentId, attribute },
+			}: PayloadAction< { componentId: ComponentId; attribute: SanitizeAttributes } >
+		) => {
+			if ( ! state.sanitized[ componentId ] ) {
+				state.sanitized[ componentId ] = {};
+			}
+
+			state.sanitized[ componentId ][ attribute ] = true;
+		},
+		resetSanitizedComponents: ( state ) => {
+			state.sanitized = {};
+		},
 	},
 	extraReducers: ( builder ) => {
 		builder.addCase( loadComponents.fulfilled, ( state, { payload }: PayloadAction< GetComponentResponse > ) => {
@@ -248,3 +270,16 @@ export const selectUpdatedComponentNames = createSelector(
 			title,
 		} ) )
 );
+
+const useSanitizedComponents = () => {
+	return useSelector( ( state: ComponentsSlice ) => state[ SLICE_NAME ].sanitized );
+};
+export const useIsSanitizedComponent = ( componentId: ComponentId | null, key: SanitizeAttributes ) => {
+	const sanitizedComponents = useSanitizedComponents();
+
+	if ( ! componentId ) {
+		return false;
+	}
+
+	return !! sanitizedComponents[ componentId ]?.[ key ];
+};

package/src/sync/handle-component-edit-mode-container.ts

@@ -86,7 +86,7 @@ function initRedirectDropIntoComponent() {
 
 function createEmptyTopLevelContainer( container: Container ) {
 	const newContainer = createElement( {
-		containerId: container.id,
+		container,
 		model: { elType: V4_DEFAULT_CONTAINER_TYPE },
 	} );
 

package/src/utils/filter-valid-overridable-props.ts

@@ -0,0 +1,84 @@
+import { getElementSetting } from '@elementor/editor-elements';
+
+import { getOverridableProp } from '../components/overridable-props/utils/get-overridable-prop';
+import { type ComponentInstanceOverride } from '../prop-types/component-instance-overrides-prop-type';
+import { componentInstanceOverridesPropTypeUtil } from '../prop-types/component-instance-overrides-prop-type';
+import { componentInstancePropTypeUtil } from '../prop-types/component-instance-prop-type';
+import { componentOverridablePropTypeUtil } from '../prop-types/component-overridable-prop-type';
+import { type OverridableProp, type OverridableProps } from '../types';
+import { extractInnerOverrideInfo } from './overridable-props-utils';
+
+export function filterValidOverridableProps( overridableProps: OverridableProps ): OverridableProps {
+	const validProps: Record< string, OverridableProp > = {};
+
+	for ( const [ key, prop ] of Object.entries( overridableProps.props ) ) {
+		if ( isExposedPropValid( prop ) ) {
+			validProps[ key ] = prop;
+		}
+	}
+
+	const validPropKeys = new Set( Object.keys( validProps ) );
+	const filteredGroups = {
+		items: Object.fromEntries(
+			Object.entries( overridableProps.groups.items ).map( ( [ groupId, group ] ) => [
+				groupId,
+				{ ...group, props: group.props.filter( ( propKey ) => validPropKeys.has( propKey ) ) },
+			] )
+		),
+		order: overridableProps.groups.order,
+	};
+
+	return { props: validProps, groups: filteredGroups };
+}
+
+export function isExposedPropValid( prop: OverridableProp ): boolean {
+	if ( ! prop.originPropFields ) {
+		// if no originPropFields - the prop is on the widget level itself, therefore no need to lookup for a corresponding component's overridables
+		return true;
+	}
+
+	const setting = getElementSetting( prop.elementId, 'component_instance' );
+	const componentInstance = componentInstancePropTypeUtil.extract( setting );
+
+	if ( ! componentInstance?.component_id?.value ) {
+		return false;
+	}
+
+	const overrides = componentInstanceOverridesPropTypeUtil.extract( componentInstance.overrides ) ?? undefined;
+	const matchingOverride = findOverrideByOuterKey( overrides, prop.overrideKey );
+	const innerOverrideInfo = extractInnerOverrideInfo( matchingOverride );
+
+	if ( ! innerOverrideInfo ) {
+		return false;
+	}
+
+	const { componentId, innerOverrideKey } = innerOverrideInfo;
+	const innerOverridableProp = getOverridableProp( { componentId, overrideKey: innerOverrideKey } );
+
+	if ( ! innerOverridableProp ) {
+		return false;
+	}
+
+	return isExposedPropValid( innerOverridableProp );
+}
+
+function findOverrideByOuterKey(
+	overrides: ComponentInstanceOverride[] | undefined,
+	outerKey: string
+): ComponentInstanceOverride | null {
+	if ( ! overrides ) {
+		return null;
+	}
+
+	return (
+		overrides.find( ( override ) => {
+			const overridableValue = componentOverridablePropTypeUtil.extract( override );
+
+			if ( overridableValue ) {
+				return overridableValue.override_key === outerKey;
+			}
+
+			return override.value.override_key === outerKey;
+		} ) ?? null
+	);
+}

package/src/utils/overridable-props-utils.ts

@@ -0,0 +1,58 @@
+import { componentInstanceOverridePropTypeUtil } from '../prop-types/component-instance-override-prop-type';
+import {
+	type ComponentInstanceOverride,
+	type ComponentInstanceOverridesPropValue,
+} from '../prop-types/component-instance-overrides-prop-type';
+import { componentOverridablePropTypeUtil } from '../prop-types/component-overridable-prop-type';
+
+export type InnerOverrideInfo = {
+	componentId: number;
+	innerOverrideKey: string;
+	overrideValue: unknown;
+};
+
+export function getMatchingOverride(
+	overrides: ComponentInstanceOverridesPropValue,
+	overrideKey: string
+): ComponentInstanceOverride | null {
+	return (
+		overrides?.find( ( override ) => {
+			const overridableValue = componentOverridablePropTypeUtil.extract( override );
+
+			if ( overridableValue ) {
+				const overrideValue = componentInstanceOverridePropTypeUtil.extract( overridableValue.origin_value );
+				return overrideValue?.override_key === overrideKey;
+			}
+
+			return override.value.override_key === overrideKey;
+		} ) ?? null
+	);
+}
+
+export function extractInnerOverrideInfo( override: ComponentInstanceOverride | null ): InnerOverrideInfo | null {
+	if ( ! override ) {
+		return null;
+	}
+
+	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: innerOverrideKey,
+		override_value: overrideValue,
+	} = innerOverride;
+	const componentId = schemaSource?.id;
+
+	if ( ! componentId || ! innerOverrideKey ) {
+		return null;
+	}
+
+	return { componentId, innerOverrideKey, overrideValue };
+}

package/src/utils/tracking.ts

@@ -5,7 +5,7 @@ import { __getState as getState } from '@elementor/store';
 import { selectCreatedThisSession } from '../store/store';
 import { type ExtendedWindow } from '../types';
 
-export type Source = 'user' | 'mcp_tool';
+export type Source = 'user' | 'mcp_tool' | 'system';
 
 type ComponentEventData = Record< string, unknown > & {
 	action:
@@ -24,6 +24,10 @@ type ComponentEventData = Record< string, unknown > & {
 const FEATURE_NAME = 'Components';
 
 export const trackComponentEvent = ( { action, source, ...data }: ComponentEventData ) => {
+	if ( source === 'system' ) {
+		return;
+	}
+
 	const { dispatchEvent, config } = getMixpanel();
 	if ( ! config?.names?.components?.[ action ] ) {
 		return;

package/src/components/component-panel-header/use-overridable-props.ts

@@ -1,14 +0,0 @@
-import { __useSelector as useSelector } from '@elementor/store';
-
-import { type ComponentsSlice, selectOverridableProps } from '../../store/store';
-import { type ComponentId, type OverridableProps } from '../../types';
-
-export function useOverridableProps( componentId: ComponentId | null ): OverridableProps | undefined {
-	return useSelector( ( state: ComponentsSlice ) => {
-		if ( ! componentId ) {
-			return undefined;
-		}
-
-		return selectOverridableProps( state, componentId );
-	} );
-}