@elementor/editor-components 3.35.0-385 → 3.35.0-387

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "3.35.0-385",
+  "version": "3.35.0-387",
   "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-385",
-    "@elementor/editor-canvas": "3.35.0-385",
-    "@elementor/editor-controls": "3.35.0-385",
-    "@elementor/editor-documents": "3.35.0-385",
-    "@elementor/editor-editing-panel": "3.35.0-385",
-    "@elementor/editor-elements": "3.35.0-385",
-    "@elementor/editor-elements-panel": "3.35.0-385",
-    "@elementor/editor-mcp": "3.35.0-385",
-    "@elementor/editor-panels": "3.35.0-385",
-    "@elementor/editor-props": "3.35.0-385",
-    "@elementor/editor-styles-repository": "3.35.0-385",
-    "@elementor/editor-ui": "3.35.0-385",
-    "@elementor/editor-v1-adapters": "3.35.0-385",
-    "@elementor/http-client": "3.35.0-385",
+    "@elementor/editor": "3.35.0-387",
+    "@elementor/editor-canvas": "3.35.0-387",
+    "@elementor/editor-controls": "3.35.0-387",
+    "@elementor/editor-documents": "3.35.0-387",
+    "@elementor/editor-editing-panel": "3.35.0-387",
+    "@elementor/editor-elements": "3.35.0-387",
+    "@elementor/editor-elements-panel": "3.35.0-387",
+    "@elementor/editor-mcp": "3.35.0-387",
+    "@elementor/editor-panels": "3.35.0-387",
+    "@elementor/editor-props": "3.35.0-387",
+    "@elementor/editor-styles-repository": "3.35.0-387",
+    "@elementor/editor-ui": "3.35.0-387",
+    "@elementor/editor-v1-adapters": "3.35.0-387",
+    "@elementor/http-client": "3.35.0-387",
     "@elementor/icons": "^1.63.0",
-    "@elementor/mixpanel": "3.35.0-385",
-    "@elementor/query": "3.35.0-385",
-    "@elementor/schema": "3.35.0-385",
-    "@elementor/store": "3.35.0-385",
+    "@elementor/mixpanel": "3.35.0-387",
+    "@elementor/query": "3.35.0-387",
+    "@elementor/schema": "3.35.0-387",
+    "@elementor/store": "3.35.0-387",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-385",
+    "@elementor/utils": "3.35.0-387",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "3.35.0-385",
-    "@elementor/editor-current-user": "3.35.0-385"
+    "@elementor/editor-notifications": "3.35.0-387",
+    "@elementor/editor-current-user": "3.35.0-387"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/create-component-type.ts

@@ -35,7 +35,7 @@ type ContextMenuGroup = {
 	actions: ContextMenuAction[];
 };
 
-export const TYPE = 'e-component';
+export const COMPONENT_WIDGET_TYPE = 'e-component';
 
 const updateGroups = ( groups: ContextMenuGroup[], config: ContextMenuGroupConfig ): ContextMenuGroup[] => {
 	const disableMap = new Map( Object.entries( config.disable ?? {} ) );

package/src/hooks/regenerate-override-keys.ts

@@ -0,0 +1,118 @@
+import { getContainer, updateElementSettings, type V1Element } from '@elementor/editor-elements';
+import { registerDataHook } from '@elementor/editor-v1-adapters';
+import { generateUniqueId } from '@elementor/utils';
+
+import { componentInstanceOverridePropTypeUtil } from '../prop-types/component-instance-override-prop-type';
+import { componentInstanceOverridesPropTypeUtil } from '../prop-types/component-instance-overrides-prop-type';
+import {
+	componentInstancePropTypeUtil,
+	type ComponentInstancePropValue,
+} from '../prop-types/component-instance-prop-type';
+import { type ComponentOverride } from '../types';
+import { isComponentInstance } from '../utils/is-component-instance';
+
+export function initRegenerateOverrideKeys() {
+	registerDataHook( 'after', 'document/elements/duplicate', ( _args, result: V1Element | V1Element[] ) => {
+		regenerateOverrideKeysForContainers( result );
+	} );
+
+	registerDataHook( 'after', 'document/elements/paste', ( _args, result: V1Element | V1Element[] ) => {
+		regenerateOverrideKeysForContainers( result );
+	} );
+
+	registerDataHook( 'after', 'document/elements/import', ( _args, result: V1Element | V1Element[] ) => {
+		regenerateOverrideKeysForContainers( result );
+	} );
+}
+
+export function regenerateOverrideKeysForContainers( result: V1Element | V1Element[] ) {
+	const containers = Array.isArray( result ) ? result : [ result ];
+
+	containers.forEach( ( container ) => {
+		regenerateOverrideKeysRecursive( container.id );
+	} );
+}
+
+function regenerateOverrideKeysRecursive( elementId: string ) {
+	const container = getContainer( elementId );
+
+	if ( ! container ) {
+		return;
+	}
+
+	getAllElements( container ).forEach( regenerateOverrideKeys );
+}
+
+function getAllElements( container: V1Element ): V1Element[] {
+	const children = ( container.children ?? [] ).flatMap( getAllElements ) ?? [];
+
+	return [ container, ...children ];
+}
+
+function regenerateOverrideKeys( element: V1Element ) {
+	if ( ! isComponentInstance( element.model.toJSON() ) ) {
+		return;
+	}
+
+	const settings = element.settings?.toJSON() ?? {};
+
+	if ( ! hasOverrides( settings ) ) {
+		return;
+	}
+
+	const componentInstance = settings.component_instance;
+	const overrides = componentInstance.value.overrides;
+
+	const newOverrides = overrides.value.map( ( override: ComponentOverride ) => {
+		if ( ! componentInstanceOverridePropTypeUtil.isValid( override ) ) {
+			return override;
+		}
+
+		return {
+			...override,
+			value: {
+				...override.value,
+				override_key: generateUniqueId( 'prop' ),
+			},
+		};
+	} );
+
+	const newComponentInstance = {
+		...componentInstance,
+		value: {
+			...componentInstance.value,
+			overrides: {
+				...overrides,
+				value: newOverrides,
+			},
+		},
+	};
+
+	updateElementSettings( {
+		id: element.id,
+		props: { component_instance: newComponentInstance },
+		withHistory: false,
+	} );
+}
+
+function hasOverrides( settings: Record< string, unknown > ): settings is {
+	component_instance: NonNullable< ComponentInstancePropValue > & {
+		value: { overrides: { $$type: string; value: ComponentOverride[] } };
+	};
+} {
+	if ( ! componentInstancePropTypeUtil.isValid( settings?.component_instance ) ) {
+		return false;
+	}
+
+	const componentInstance = componentInstancePropTypeUtil.extract( settings?.component_instance );
+
+	const overrides = componentInstance?.overrides;
+
+	if ( ! componentInstanceOverridesPropTypeUtil.isValid( overrides ) ) {
+		return false;
+	}
+
+	const overridesValue = overrides?.value;
+
+	return !! overridesValue?.length;
+}

package/src/init.ts

@@ -33,7 +33,8 @@ import { openEditModeDialog } from './components/in-edit-mode';
 import { InstanceEditingPanel } from './components/instance-editing-panel/instance-editing-panel';
 import { OverridablePropControl } from './components/overridable-props/overridable-prop-control';
 import { OverridablePropIndicator } from './components/overridable-props/overridable-prop-indicator';
-import { createComponentType, TYPE } from './create-component-type';
+import { COMPONENT_WIDGET_TYPE, createComponentType } from './create-component-type';
+import { initRegenerateOverrideKeys } from './hooks/regenerate-override-keys';
 import { initMcp } from './mcp';
 import { PopulateStore } from './populate-store';
 import { componentOverridablePropTypeUtil } from './prop-types/component-overridable-prop-type';
@@ -51,7 +52,7 @@ export function init() {
 	registerSlice( slice );
 	registerPanel( componentPropertiesPanel );
 
-	registerElementType( TYPE, ( options: CreateTemplatedElementTypeOptions ) =>
+	registerElementType( COMPONENT_WIDGET_TYPE, ( options: CreateTemplatedElementTypeOptions ) =>
 		createComponentType( { ...options, showLockedByModal: openEditModeDialog } )
 	);
 
@@ -125,5 +126,7 @@ export function init() {
 	settingsTransformersRegistry.register( 'overridable', componentOverridableTransformer );
 	settingsTransformersRegistry.register( 'override', componentOverrideTransformer );
 
+	initRegenerateOverrideKeys();
+
 	initMcp();
 }

package/src/prop-types/component-instance-override-prop-type.ts

@@ -13,6 +13,6 @@ export const componentInstanceOverridePropTypeUtil = createPropUtils(
 	} )
 );
 
-export type ComponentInstanceOverridePropValue = z.infer<
-	typeof componentInstanceOverridePropTypeUtil.schema
->[ 'value' ];
+export type ComponentInstanceOverrideProp = z.infer< typeof componentInstanceOverridePropTypeUtil.schema >;
+
+export type ComponentInstanceOverridePropValue = ComponentInstanceOverrideProp[ 'value' ];

package/src/types.ts

@@ -2,6 +2,11 @@ import { type V1ElementData } from '@elementor/editor-elements';
 import { type PropValue, type TransformablePropValue } from '@elementor/editor-props';
 import type { StyleDefinition } from '@elementor/editor-styles';
 
+import {
+	type ComponentInstanceOverrideProp,
+	type ComponentInstanceOverridePropValue,
+} from './prop-types/component-instance-override-prop-type';
+
 export type ComponentFormValues = {
 	componentName: string;
 };
@@ -77,16 +82,9 @@ export type ComponentInstancePropValue< TComponentId extends number | string = n
 
 type ComponentOverrides = TransformablePropValue< 'overrides', ComponentOverride[] >;
 
-type ComponentOverride = TransformablePropValue< 'override', ComponentOverridePropValue >;
+export type ComponentOverride = ComponentInstanceOverrideProp;
 
-export type ComponentOverridePropValue = {
-	override_key: string;
-	override_value: TransformablePropValue< string >;
-	schema_source: {
-		type: string;
-		id: number;
-	};
-};
+export type ComponentOverridePropValue = ComponentInstanceOverridePropValue;
 
 export type ComponentOverridable = {
 	override_key: string;

package/src/utils/get-component-ids.ts

@@ -1,14 +1,14 @@
 import { type V1ElementData } from '@elementor/editor-elements';
 
-import { TYPE } from '../create-component-type';
 import { type ComponentInstancePropValue } from '../types';
 import { getComponentDocumentData } from './component-document-data';
+import { isComponentInstance } from './is-component-instance';
 
 export const getComponentIds = async ( elements: V1ElementData[] ) => {
 	const components = elements.map( async ( { widgetType, elType, elements: childElements, settings } ) => {
 		const ids: number[] = [];
 
-		const isComponent = [ widgetType, elType ].includes( TYPE );
+		const isComponent = isComponentInstance( { widgetType, elType } );
 
 		if ( isComponent ) {
 			const componentId = ( settings?.component_instance as ComponentInstancePropValue< number > )?.value

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

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