@elementor/editor-components 3.33.0-290 → 3.33.0-292

package/src/components/create-component-form/utils/replace-element-with-component.ts

@@ -19,9 +19,11 @@ export const createComponentModel = ( component: ComponentInstanceParams ): Omit
 		elType: 'widget',
 		widgetType: 'e-component',
 		settings: {
-			component: {
-				$$type: 'component-id',
-				value: component.id ?? component.uid,
+			component_instance: {
+				$$type: 'component-instance',
+				value: {
+					component_id: component.id ?? component.uid,
+				},
 			},
 		},
 		editor_settings: {

package/src/create-component-type.ts

@@ -8,12 +8,11 @@ import {
 	type LegacyWindow,
 } from '@elementor/editor-canvas';
 import { getCurrentDocument } from '@elementor/editor-documents';
-import { type NumberPropValue } from '@elementor/editor-props';
 import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import { apiClient } from './api';
-import { type ExtendedWindow } from './types';
+import { type ComponentInstancePropValue, type ExtendedWindow } from './types';
 import { trackComponentEvent } from './utils/tracking';
 
 type ContextMenuEventData = { location: string; secondaryLocation: string; trigger: string };
@@ -46,16 +45,18 @@ function createComponentView(
 		isComponentCurrentlyEdited() {
 			const currentDocument = getCurrentDocument();
 
-			return currentDocument?.id === this.getComponentId()?.value;
+			return currentDocument?.id === this.getComponentId();
 		}
 
 		afterSettingsResolve( settings: { [ key: string ]: unknown } ) {
-			if ( settings.component ) {
-				this.collection = this.legacyWindow.elementor.createBackboneElementsCollection( settings.component );
+			if ( settings.component_instance ) {
+				this.collection = this.legacyWindow.elementor.createBackboneElementsCollection(
+					settings.component_instance
+				);
 
 				this.collection.models.forEach( setInactiveRecursively );
 
-				settings.component = '<template data-children-placeholder></template>';
+				settings.component_instance = '<template data-children-placeholder></template>';
 			}
 
 			return settings;
@@ -79,12 +80,16 @@ function createComponentView(
 		}
 
 		getComponentId() {
-			return this.options?.model?.get( 'settings' )?.get( 'component' ) as NumberPropValue;
+			const componentInstance = (
+				this.options?.model?.get( 'settings' )?.get( 'component_instance' ) as ComponentInstancePropValue
+			 )?.value;
+
+			return componentInstance.component_id;
 		}
 
 		getContextMenuGroups() {
 			const filteredGroups = super.getContextMenuGroups().filter( ( group ) => group.name !== 'save' );
-			const componentId = this.getComponentId()?.value as number;
+			const componentId = this.getComponentId();
 			if ( ! componentId ) {
 				return filteredGroups;
 			}
@@ -108,15 +113,16 @@ function createComponentView(
 		}
 
 		async switchDocument() {
+			//todo: handle unpublished
 			const { isAllowedToSwitchDocument, lockedBy } = await apiClient.getComponentLockStatus(
-				this.getComponentId()?.value as number
+				this.getComponentId() as number
 			);
 
 			if ( ! isAllowedToSwitchDocument ) {
 				options.showLockedByModal?.( lockedBy || '' );
 			} else {
 				runCommand( 'editor/documents/switch', {
-					id: this.getComponentId()?.value as number,
+					id: this.getComponentId(),
 					mode: 'autosave',
 					selector: `[data-id="${ this.model.get( 'id' ) }"]`,
 					shouldScroll: false,
@@ -165,7 +171,7 @@ function createComponentView(
 		attributes() {
 			return {
 				...super.attributes(),
-				'data-elementor-id': this.getComponentId().value,
+				'data-elementor-id': this.getComponentId(),
 			};
 		}
 	};

package/src/init.ts

@@ -12,7 +12,7 @@ import { __privateListenTo as listenTo, commandStartEvent, registerDataHook } fr
 import { __registerSlice as registerSlice } from '@elementor/store';
 import { __ } from '@wordpress/i18n';
 
-import { componentIdTransformer } from './component-id-transformer';
+import { componentInstanceTransformer } from './component-instance-transformer';
 import { Components } from './components/components-tab/components';
 import { CreateComponentForm } from './components/create-component-form/create-component-form';
 import { EditComponent } from './components/edit-component/edit-component';
@@ -81,5 +81,5 @@ export function init() {
 		loadComponentsStyles( ( config?.elements as V1ElementData[] ) ?? [] );
 	} );
 
-	settingsTransformersRegistry.register( 'component-id', componentIdTransformer );
+	settingsTransformersRegistry.register( 'component-instance', componentInstanceTransformer );
 }

package/src/sync/create-components-before-save.ts

@@ -1,10 +1,14 @@
 import { updateElementSettings, type V1ElementData } from '@elementor/editor-elements';
-import { type TransformablePropValue } from '@elementor/editor-props';
 import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
 
 import { apiClient } from '../api';
 import { selectUnpublishedComponents, slice } from '../store/store';
-import { type Container, type DocumentSaveStatus, type UnpublishedComponent } from '../types';
+import {
+	type ComponentInstancePropValue,
+	type Container,
+	type DocumentSaveStatus,
+	type UnpublishedComponent,
+} from '../types';
 
 export async function createComponentsBeforeSave( {
 	container,
@@ -80,8 +84,9 @@ function shouldUpdateElement(
 	uidToComponentId: Map< string, number >
 ): { shouldUpdate: true; newComponentId: number } | { shouldUpdate: false; newComponentId: null } {
 	if ( element.widgetType === 'e-component' ) {
-		const currentComponentId = ( element.settings?.component as TransformablePropValue< 'component-id', string > )
-			?.value;
+		const currentComponentId = ( element.settings?.component_instance as ComponentInstancePropValue< string > )
+			?.value?.component_id;
+
 		if ( currentComponentId && uidToComponentId.has( currentComponentId ) ) {
 			return { shouldUpdate: true, newComponentId: uidToComponentId.get( currentComponentId ) as number };
 		}
@@ -93,9 +98,9 @@ function updateElementComponentId( elementId: string, componentId: number ): voi
 	updateElementSettings( {
 		id: elementId,
 		props: {
-			component: {
-				$$type: 'component-id',
-				value: componentId,
+			component_instance: {
+				$$type: 'component-instance',
+				value: { component_id: componentId },
 			},
 		},
 		withHistory: false,

package/src/types.ts

@@ -1,4 +1,5 @@
 import { type V1ElementData } from '@elementor/editor-elements';
+import { type TransformablePropValue } from '@elementor/editor-props';
 import type { StyleDefinition } from '@elementor/editor-styles';
 
 export type ComponentFormValues = {
@@ -46,3 +47,17 @@ export type Container = {
 		};
 	};
 };
+
+export type ComponentInstancePropValue< TComponentId extends number | string = number | string > =
+	TransformablePropValue<
+		'component-instance',
+		{
+			component_id: TComponentId;
+			overrides?: ComponentOverride[];
+		}
+	>;
+
+type ComponentOverride = {
+	override_key: string;
+	value: TransformablePropValue< string >;
+};

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

@@ -9,7 +9,7 @@ type ComponentDocumentData = {
 	revisions: { current_id: number };
 };
 
-type ComponentIdTransformerWindow = Window & {
+type ComponentInstanceTransformerWindow = Window & {
 	elementor?: {
 		documents?: {
 			request: ( id: number ) => Promise< ComponentDocumentData >;
@@ -35,7 +35,7 @@ export const invalidateComponentDocumentData = ( id: number ) => {
 };
 
 function getDocumentsManager() {
-	const extendedWindow = window as unknown as ComponentIdTransformerWindow;
+	const extendedWindow = window as unknown as ComponentInstanceTransformerWindow;
 
 	const documentManager = extendedWindow.elementor?.documents;
 

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

@@ -1,5 +1,6 @@
 import { type V1ElementData } from '@elementor/editor-elements';
-import { isTransformable } from '@elementor/editor-props';
+
+import { type ComponentInstancePropValue } from '../types';
 
 export const getComponentIds = ( elements: V1ElementData[] ) => {
 	const result = elements.flatMap( ( element ) => {
@@ -7,8 +8,13 @@ export const getComponentIds = ( elements: V1ElementData[] ) => {
 
 		const type = element.widgetType || element.elType;
 
-		if ( type === 'e-component' && element.settings?.component && isTransformable( element.settings?.component ) ) {
-			ids.push( element.settings.component.value );
+		if ( type === 'e-component' ) {
+			const componentId = ( element.settings?.component_instance as ComponentInstancePropValue< number > )?.value
+				?.component_id;
+
+			if ( Boolean( componentId ) ) {
+				ids.push( componentId );
+			}
 		}
 
 		if ( element.elements ) {