@elementor/editor-components 4.0.0-662 → 4.0.0-664

package/src/utils/detach-component-instance/regenerate-local-style-ids.ts

@@ -0,0 +1,53 @@
+import { generateElementId, type V1ElementData, type V1ElementSettingsProps } from '@elementor/editor-elements';
+import { classesPropTypeUtil, type ClassesPropValue, type PropValue } from '@elementor/editor-props';
+import { type StyleDefinition, type StyleDefinitionID } from '@elementor/editor-styles';
+
+// Ts version for atomic-widgets/assets/js/editor/utils/regenerate-local-style-ids.js
+export function regenerateLocalStyleIds( element: V1ElementData ): {
+	styles: Record< StyleDefinitionID, StyleDefinition > | undefined;
+	settings: V1ElementSettingsProps | undefined;
+} {
+	const originalStyles = element.styles;
+
+	if ( ! originalStyles || Object.keys( originalStyles ).length === 0 ) {
+		return { styles: undefined, settings: undefined };
+	}
+
+	const newStyles: Record< string, StyleDefinition > = {};
+	const styleIdMapping: Record< string, string > = {};
+
+	for ( const [ originalStyleId, style ] of Object.entries( originalStyles ) ) {
+		const newStyleId = generateLocalStyleId( element.id );
+
+		newStyles[ newStyleId ] = { ...style, id: newStyleId };
+		styleIdMapping[ originalStyleId ] = newStyleId;
+	}
+
+	const settings = element.settings;
+	if ( ! settings || Object.keys( settings ).length === 0 ) {
+		return { styles: newStyles, settings: undefined };
+	}
+
+	const updatedSettings = { ...settings };
+
+	for ( const [ propKey, propValue ] of Object.entries( updatedSettings ) ) {
+		if ( isClassesProp( propValue ) && propValue.value.length > 0 ) {
+			const updatedClasses = propValue.value.map( ( classId ) => styleIdMapping[ classId ] ?? classId );
+
+			updatedSettings[ propKey ] = classesPropTypeUtil.create( updatedClasses );
+		}
+	}
+
+	return {
+		styles: newStyles,
+		settings: updatedSettings,
+	};
+}
+
+function isClassesProp( prop: PropValue ): prop is ClassesPropValue {
+	return classesPropTypeUtil.isValid( prop );
+}
+
+function generateLocalStyleId( elementId: string ): string {
+	return `e-${ elementId }-${ generateElementId() }`;
+}

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

@@ -0,0 +1,94 @@
+import { generateElementId, type V1ElementData } from '@elementor/editor-elements';
+import { type PropValue } from '@elementor/editor-props';
+
+import {
+	type ComponentInstanceOverrideProp,
+	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 { regenerateLocalStyleIds } from './regenerate-local-style-ids';
+import { resolveOverridableSettings } from './resolve-overridable-settings';
+
+/**
+ * Creates detached element from component instance
+ * by applying overrides, reverting overridables, and regenerating IDs.
+ * This is used when detaching a component instance from its origin component.
+ *
+ * The function goes through all nested elements recursively and:
+ * - Regenerates element IDs and local style IDs
+ * - Resolves overridable settings - applies all instance overrides to element settings,
+ * or replaces overridable with origin_value when no matching override exists.
+ *
+ * @param element   - The component's root element
+ * @param overrides - Array of overrides from the component instance
+ * @return A new element data with all overrides applied and new IDs
+ */
+export function resolveDetachedInstance(
+	element: V1ElementData,
+	overrides: ComponentInstanceOverride[]
+): V1ElementData {
+	const overrideMap = createOverrideMap( overrides );
+
+	return resolveElementRecursive( structuredClone( element ), overrideMap );
+}
+
+function resolveElementRecursive(
+	element: V1ElementData,
+	overrideMap: Map< string, ComponentInstanceOverrideProp >
+): V1ElementData {
+	element.id = generateElementId();
+
+	if ( element.styles ) {
+		const { styles, settings } = regenerateLocalStyleIds( element );
+
+		element.styles = styles;
+		if ( settings ) {
+			element.settings = { ...element.settings, ...settings };
+		}
+	}
+
+	if ( element.settings ) {
+		element.settings = resolveOverridableSettings( element, overrideMap );
+	}
+
+	if ( element.elements?.length ) {
+		element.elements = element.elements.map( ( child ) => resolveElementRecursive( child, overrideMap ) );
+	}
+
+	return element;
+}
+
+function createOverrideMap( overrides: ComponentInstanceOverride[] ): Map< string, ComponentInstanceOverrideProp > {
+	const map = new Map< string, ComponentInstanceOverrideProp >();
+
+	overrides.forEach( ( item ) => {
+		let override: ComponentInstanceOverrideProp | null = null;
+
+		if ( componentInstanceOverridePropTypeUtil.isValid( item ) ) {
+			override = item;
+		} else if ( componentOverridablePropTypeUtil.isValid( item ) ) {
+			override = getOverridableOverride( item );
+		}
+
+		if ( override ) {
+			const overrideKey = override.value.override_key;
+			map.set( overrideKey, override );
+		}
+	} );
+
+	return map;
+}
+
+export function getOverridableOverride( propValue: PropValue ): ComponentInstanceOverrideProp | null {
+	if ( ! componentOverridablePropTypeUtil.isValid( propValue ) ) {
+		return null;
+	}
+
+	const originValue = componentOverridablePropTypeUtil.extract( propValue )?.origin_value;
+	if ( ! componentInstanceOverridePropTypeUtil.isValid( originValue ) ) {
+		return null;
+	}
+
+	return originValue;
+}

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

@@ -0,0 +1,121 @@
+import { type V1ElementData, type V1ElementSettingsProps } from '@elementor/editor-elements';
+import { type PropValue } from '@elementor/editor-props';
+
+import {
+	type ComponentInstanceOverrideProp,
+	componentInstanceOverridePropTypeUtil,
+} from '../../prop-types/component-instance-override-prop-type';
+import {
+	type ComponentInstanceProp,
+	componentInstancePropTypeUtil,
+} from '../../prop-types/component-instance-prop-type';
+import { componentOverridablePropTypeUtil } from '../../prop-types/component-overridable-prop-type';
+import { isComponentInstance } from '../is-component-instance';
+
+export function resolveOverridableSettings(
+	element: V1ElementData,
+	overrideMap: Map< string, ComponentInstanceOverrideProp >
+): V1ElementSettingsProps {
+	if ( isComponentInstance( { widgetType: element.widgetType, elType: element.elType } ) ) {
+		return resolveOverridableSettingsForComponentInstance( element, overrideMap );
+	}
+
+	return resolveOverridableSettingsForElement( element, overrideMap );
+}
+
+function resolveOverridableSettingsForElement(
+	element: V1ElementData,
+	overrideMap: Map< string, ComponentInstanceOverrideProp >
+): V1ElementSettingsProps {
+	const updatedSettings = element.settings ? { ...element.settings } : {};
+
+	for ( const [ settingKey, settingValue ] of Object.entries( element.settings ?? {} ) ) {
+		updatedSettings[ settingKey ] = resolvePropValue( settingValue, overrideMap );
+	}
+
+	return updatedSettings;
+}
+
+function resolveOverridableSettingsForComponentInstance(
+	element: V1ElementData,
+	overrideMap: Map< string, ComponentInstanceOverrideProp >
+): V1ElementSettingsProps {
+	const componentInstance = element.settings?.component_instance as ComponentInstanceProp | undefined;
+
+	if ( ! componentInstancePropTypeUtil.isValid( componentInstance ) ) {
+		return element.settings ?? {};
+	}
+
+	const instanceOverrides = componentInstance.value.overrides?.value;
+
+	if ( ! instanceOverrides?.length ) {
+		return element.settings ?? {};
+	}
+
+	const updatedOverrides = instanceOverrides.map( ( item ) =>
+		resolvePropValue( item, overrideMap, { isOverridableOverride: true } )
+	);
+
+	return {
+		...element.settings,
+		component_instance: {
+			...componentInstance,
+			value: {
+				...componentInstance.value,
+				overrides: {
+					...componentInstance.value.overrides,
+					value: updatedOverrides,
+				},
+			},
+		},
+	};
+}
+
+function resolvePropValue(
+	propValue: PropValue,
+	overrideMap: Map< string, ComponentInstanceOverrideProp >,
+	options?: { isOverridableOverride?: boolean }
+): PropValue | null {
+	const { isOverridableOverride = false } = options ?? {};
+
+	// if it's not an overridable, return the prop value as is
+	if ( ! componentOverridablePropTypeUtil.isValid( propValue ) ) {
+		return propValue;
+	}
+
+	const overridableKey = propValue.value.override_key;
+	const matchingOverride = overrideMap.get( overridableKey );
+
+	const originValue = componentOverridablePropTypeUtil.extract( propValue )?.origin_value;
+
+	// if no matching override, return the overridable's origin value
+	if ( ! matchingOverride ) {
+		return originValue;
+	}
+
+	if ( isOverridableOverride ) {
+		return resolveOverridableOverride( matchingOverride, originValue );
+	}
+
+	// for regular props, when there's a matching override, return the matching override value
+	const matchingOverrideValue = componentInstanceOverridePropTypeUtil.extract( matchingOverride )
+		?.override_value as PropValue | null;
+	return matchingOverrideValue;
+}
+
+function resolveOverridableOverride(
+	matchingOverride: ComponentInstanceOverrideProp,
+	originValue: PropValue
+): ComponentInstanceOverrideProp | null {
+	if ( ! originValue || ! componentInstanceOverridePropTypeUtil.isValid( originValue ) ) {
+		return null;
+	}
+
+	// for overridable overrides, we should create a new override with the matching override value
+	// but keep the origin value's override key and schema source, so they'll match the inner component.
+	return componentInstanceOverridePropTypeUtil.create( {
+		override_value: matchingOverride.value.override_value,
+		override_key: originValue.value.override_key,
+		schema_source: originValue.value.schema_source,
+	} );
+}

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

@@ -1,6 +1,6 @@
 import { type V1ElementModelProps } from '@elementor/editor-elements';
 
-import { COMPONENT_WIDGET_TYPE } from '../create-component-type';
+import { COMPONENT_WIDGET_TYPE } from '../consts';
 
 export function isComponentInstance( elementModel: Partial< V1ElementModelProps > ) {
 	return [ elementModel.widgetType, elementModel.elType ].includes( COMPONENT_WIDGET_TYPE );

package/src/utils/tracking.ts

@@ -17,7 +17,8 @@ type ComponentEventData = Record< string, unknown > & {
 		| 'propertyExposed'
 		| 'propertyRemoved'
 		| 'propertiesPanelOpened'
-		| 'propertiesGroupCreated';
+		| 'propertiesGroupCreated'
+		| 'detached';
 	source: Source;
 };