@elementor/editor-components 3.33.0-252 → 3.33.0-254

package/src/components/components-tab/components-list.tsx

@@ -25,7 +25,7 @@ export function ComponentsList() {
 	return (
 		<List sx={ { display: 'flex', flexDirection: 'column', gap: 1, px: 2 } }>
 			{ components.map( ( component ) => (
-				<ComponentItem key={ component.id } component={ component } />
+				<ComponentItem key={ component.uid } component={ component } />
 			) ) }
 		</List>
 	);

package/src/components/consts.ts

@@ -0,0 +1 @@
+export const COMPONENT_DOCUMENT_TYPE = 'elementor_component';

package/src/components/create-component-form/create-component-form.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { useEffect, useMemo, useState } from 'react';
-import { getElementLabel, type V1Element } from '@elementor/editor-elements';
+import { getElementLabel, type V1Element, type V1ElementData } from '@elementor/editor-elements';
 import { ThemeProvider } from '@elementor/editor-ui';
 import { StarIcon } from '@elementor/icons';
 import { __useDispatch as useDispatch } from '@elementor/store';
 import { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack, TextField, Typography } from '@elementor/ui';
+import { generateUniqueId } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
 import { useComponents } from '../../hooks/use-components';
@@ -52,33 +53,32 @@ export function CreateComponentForm() {
 		};
 	}, [] );
 
-	const handleSave = async ( values: ComponentFormValues ) => {
+	const handleSave = ( values: ComponentFormValues ) => {
 		try {
 			if ( ! element ) {
 				throw new Error( `Can't save element as component: element not found` );
 			}
 
-			const tempId = generateTempId();
+			const uid = generateUniqueId( 'component' );
 
 			dispatch(
 				slice.actions.addUnpublished( {
-					id: tempId,
+					uid,
 					name: values.componentName,
-					elements: [ element.element.model.toJSON( { remove: [ 'default' ] } ) ],
+					elements: [ element.element.model.toJSON( { remove: [ 'default' ] } ) as V1ElementData ],
 				} )
 			);
 
-			replaceElementWithComponent( element.element, {
-				id: tempId,
-				name: values.componentName,
-			} );
+			dispatch( slice.actions.addCreatedThisSession( uid ) );
+
+			replaceElementWithComponent( element.element, { uid, name: values.componentName } );
 
 			setResultNotification( {
 				show: true,
-				// Translators: %1$s: Component name, %2$s: Component temp ID
-				message: __( 'Component saved successfully as: %1$s (temp ID: %2$s)', 'elementor' )
+				// Translators: %1$s: Component name, %2$s: Component UID
+				message: __( 'Component saved successfully as: %1$s (UID: %2$s)', 'elementor' )
 					.replace( '%1$s', values.componentName )
-					.replace( '%2$s', tempId.toString() ),
+					.replace( '%2$s', uid ),
 				type: 'success',
 			} );
 
@@ -98,11 +98,15 @@ export function CreateComponentForm() {
 		setAnchorPosition( undefined );
 	};
 
+	const cancelSave = () => {
+		resetAndClosePopup();
+	};
+
 	return (
 		<ThemeProvider>
 			<Popover
 				open={ element !== null }
-				onClose={ resetAndClosePopup }
+				onClose={ cancelSave }
 				anchorReference="anchorPosition"
 				anchorPosition={ anchorPosition }
 			>
@@ -110,7 +114,7 @@ export function CreateComponentForm() {
 					<Form
 						initialValues={ { componentName: element.elementLabel } }
 						handleSave={ handleSave }
-						closePopup={ resetAndClosePopup }
+						closePopup={ cancelSave }
 					/>
 				) }
 			</Popover>
@@ -215,7 +219,3 @@ const Form = ( {
 		</Stack>
 	);
 };
-
-export const generateTempId = () => {
-	return Date.now() + Math.floor( Math.random() * 1000000 );
-};

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

@@ -1,8 +1,12 @@
-import { replaceElement, type V1Element } from '@elementor/editor-elements';
+import { replaceElement, type V1Element, type V1ElementModelProps } from '@elementor/editor-elements';
 
-import { type Component } from '../../../types';
+type ComponentInstanceParams = {
+	id?: number;
+	name: string;
+	uid: string;
+};
 
-export const replaceElementWithComponent = ( element: V1Element, component: Component ) => {
+export const replaceElementWithComponent = ( element: V1Element, component: ComponentInstanceParams ) => {
 	replaceElement( {
 		currentElement: element,
 		newElement: createComponentModel( component ),
@@ -10,20 +14,19 @@ export const replaceElementWithComponent = ( element: V1Element, component: Comp
 	} );
 };
 
-export const createComponentModel = (
-	component: Component
-): Parameters< typeof replaceElement >[ 0 ][ 'newElement' ] => {
+export const createComponentModel = ( component: ComponentInstanceParams ): Omit< V1ElementModelProps, 'id' > => {
 	return {
 		elType: 'widget',
 		widgetType: 'e-component',
 		settings: {
 			component: {
 				$$type: 'component-id',
-				value: component.id,
+				value: component.id ?? component.uid,
 			},
 		},
 		editor_settings: {
 			title: component.name,
+			component_uid: component.uid,
 		},
 	};
 };

package/src/components/edit-component/edit-component.tsx

@@ -7,10 +7,9 @@ import {
 	__privateRunCommand as runCommand,
 	commandEndEvent,
 } from '@elementor/editor-v1-adapters';
-import { __useSelector as useSelector } from '@elementor/store';
 
 import { apiClient } from '../../api';
-import { selectComponentsObject } from '../../store/store';
+import { COMPONENT_DOCUMENT_TYPE } from '../consts';
 import { ComponentModal } from './component-modal';
 
 type ComponentsPathItem = {
@@ -41,7 +40,6 @@ function useHandleDocumentSwitches(
 	path: ComponentsPathItem[],
 	setPath: Dispatch< SetStateAction< ComponentsPathItem[] > >
 ) {
-	const components = useSelector( selectComponentsObject );
 	const documentsManager = getV1DocumentsManager();
 
 	useEffect(
@@ -59,7 +57,7 @@ function useHandleDocumentSwitches(
 					apiClient.unlockComponent( currentComponentId );
 				}
 
-				const isComponent = !! components?.[ nextDocument.id ];
+				const isComponent = nextDocument.config.type === COMPONENT_DOCUMENT_TYPE;
 
 				if ( ! isComponent ) {
 					setPath( [] );
@@ -69,7 +67,7 @@ function useHandleDocumentSwitches(
 
 				setPath( getUpdatedComponentPath( path, nextDocument ) );
 			} ),
-		[ path, setPath, components, documentsManager ]
+		[ path, setPath, documentsManager ]
 	);
 }
 

package/src/store/store.ts

@@ -1,4 +1,3 @@
-import { type V1ElementData } from '@elementor/editor-elements';
 import {
 	__createSelector as createSelector,
 	__createSlice as createSlice,
@@ -6,22 +5,25 @@ import {
 	type SliceState,
 } from '@elementor/store';
 
-import { type Component, type ComponentId, type StylesDefinition } from '../types';
+import {
+	type Component,
+	type ComponentId,
+	type PublishedComponent,
+	type StylesDefinition,
+	type UnpublishedComponent,
+} from '../types';
 import { loadComponents } from './thunks';
 
-type GetComponentResponse = Component[];
-
-export type UnpublishedComponent = Component & {
-	elements: V1ElementData[];
-};
+type GetComponentResponse = PublishedComponent[];
 
 type Status = 'idle' | 'pending' | 'error';
 
 type ComponentsState = {
-	data: Component[];
+	data: PublishedComponent[];
 	unpublishedData: UnpublishedComponent[];
 	loadStatus: Status;
 	styles: StylesDefinition;
+	createdThisSession: Component[ 'uid' ][];
 };
 
 type ComponentsSlice = SliceState< typeof slice >;
@@ -31,6 +33,7 @@ export const initialState: ComponentsState = {
 	unpublishedData: [],
 	loadStatus: 'idle',
 	styles: {},
+	createdThisSession: [],
 };
 
 export const SLICE_NAME = 'components';
@@ -38,17 +41,17 @@ export const slice = createSlice( {
 	name: SLICE_NAME,
 	initialState,
 	reducers: {
-		add: ( state, { payload }: PayloadAction< Component | Component[] > ) => {
+		add: ( state, { payload }: PayloadAction< PublishedComponent | PublishedComponent[] > ) => {
 			if ( Array.isArray( payload ) ) {
 				state.data = [ ...state.data, ...payload ];
 			} else {
 				state.data.unshift( payload );
 			}
 		},
-		load: ( state, { payload }: PayloadAction< Component[] > ) => {
+		load: ( state, { payload }: PayloadAction< PublishedComponent[] > ) => {
 			state.data = payload;
 		},
-		addUnpublished: ( state, { payload } ) => {
+		addUnpublished: ( state, { payload }: PayloadAction< UnpublishedComponent > ) => {
 			state.unpublishedData.unshift( payload );
 		},
 		resetUnpublished: ( state ) => {
@@ -62,6 +65,9 @@ export const slice = createSlice( {
 		addStyles: ( state, { payload } ) => {
 			state.styles = { ...state.styles, ...payload };
 		},
+		addCreatedThisSession: ( state, { payload }: PayloadAction< string > ) => {
+			state.createdThisSession.push( payload );
+		},
 	},
 	extraReducers: ( builder ) => {
 		builder.addCase( loadComponents.fulfilled, ( state, { payload }: PayloadAction< GetComponentResponse > ) => {
@@ -81,12 +87,13 @@ const selectData = ( state: ComponentsSlice ) => state[ SLICE_NAME ].data;
 const selectLoadStatus = ( state: ComponentsSlice ) => state[ SLICE_NAME ].loadStatus;
 const selectStylesDefinitions = ( state: ComponentsSlice ) => state[ SLICE_NAME ].styles ?? {};
 const selectUnpublishedData = ( state: ComponentsSlice ) => state[ SLICE_NAME ].unpublishedData;
+const getCreatedThisSession = ( state: ComponentsSlice ) => state[ SLICE_NAME ].createdThisSession;
 
 export const selectComponents = createSelector(
 	selectData,
 	selectUnpublishedData,
-	( data: Component[], unpublishedData: UnpublishedComponent[] ) => [
-		...unpublishedData.map( ( item ) => ( { id: item.id, name: item.name } ) ),
+	( data: PublishedComponent[], unpublishedData: UnpublishedComponent[] ) => [
+		...unpublishedData.map( ( item ) => ( { uid: item.uid, name: item.name } ) ),
 		...data,
 	]
 );
@@ -94,16 +101,11 @@ export const selectUnpublishedComponents = createSelector(
 	selectUnpublishedData,
 	( unpublishedData: UnpublishedComponent[] ) => unpublishedData
 );
-export const selectComponentsObject = createSelector(
-	selectData,
-	selectUnpublishedData,
-	( data: Component[], unpublishedData: UnpublishedComponent[] ) =>
-		data.concat( unpublishedData ).reduce< Record< ComponentId, Component > >( ( acc, component ) => {
-			acc[ component.id ] = component;
-			return acc;
-		}, {} )
-);
 export const selectLoadIsPending = createSelector( selectLoadStatus, ( status ) => status === 'pending' );
 export const selectLoadIsError = createSelector( selectLoadStatus, ( status ) => status === 'error' );
 export const selectStyles = ( state: ComponentsSlice ) => state[ SLICE_NAME ].styles ?? {};
 export const selectFlatStyles = createSelector( selectStylesDefinitions, ( data ) => Object.values( data ).flat() );
+export const selectCreatedThisSession = createSelector(
+	getCreatedThisSession,
+	( createdThisSession ) => createdThisSession
+);

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

@@ -3,8 +3,8 @@ import { type TransformablePropValue } from '@elementor/editor-props';
 import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
 
 import { apiClient } from '../api';
-import { selectUnpublishedComponents, slice, type UnpublishedComponent } from '../store/store';
-import { type Container, type DocumentSaveStatus } from '../types';
+import { selectUnpublishedComponents, slice } from '../store/store';
+import { type Container, type DocumentSaveStatus, type UnpublishedComponent } from '../types';
 
 export async function createComponentsBeforeSave( {
 	container,
@@ -20,16 +20,17 @@ export async function createComponentsBeforeSave( {
 	}
 
 	try {
-		const tempIdToComponentId = await createComponents( unpublishedComponents, status );
+		const uidToComponentId = await createComponents( unpublishedComponents, status );
 
 		const elements = container.model.get( 'elements' ).toJSON();
-		updateComponentInstances( elements, tempIdToComponentId );
+		updateComponentInstances( elements, uidToComponentId );
 
 		dispatch(
 			slice.actions.add(
 				unpublishedComponents.map( ( component ) => ( {
-					id: tempIdToComponentId.get( component.id ) as number,
+					id: uidToComponentId.get( component.uid ) as number,
 					name: component.name,
+					uid: component.uid,
 				} ) )
 			)
 		);
@@ -42,47 +43,47 @@ export async function createComponentsBeforeSave( {
 async function createComponents(
 	components: UnpublishedComponent[],
 	status: DocumentSaveStatus
-): Promise< Map< number, number > > {
+): Promise< Map< string, number > > {
 	const response = await apiClient.create( {
 		status,
 		items: components.map( ( component ) => ( {
-			temp_id: component.id,
+			uid: component.uid,
 			title: component.name,
 			elements: component.elements,
 		} ) ),
 	} );
 
-	const map = new Map< number, number >();
+	const map = new Map< string, number >();
 
 	Object.entries( response ).forEach( ( [ key, value ] ) => {
-		map.set( Number( key ), value );
+		map.set( key, value );
 	} );
 
 	return map;
 }
 
-function updateComponentInstances( elements: V1ElementData[], tempIdToComponentId: Map< number, number > ): void {
+function updateComponentInstances( elements: V1ElementData[], uidToComponentId: Map< string, number > ): void {
 	elements.forEach( ( element ) => {
-		const { shouldUpdate, newComponentId } = shouldUpdateElement( element, tempIdToComponentId );
+		const { shouldUpdate, newComponentId } = shouldUpdateElement( element, uidToComponentId );
 		if ( shouldUpdate ) {
 			updateElementComponentId( element.id, newComponentId );
 		}
 
 		if ( element.elements ) {
-			updateComponentInstances( element.elements, tempIdToComponentId );
+			updateComponentInstances( element.elements, uidToComponentId );
 		}
 	} );
 }
 
 function shouldUpdateElement(
 	element: V1ElementData,
-	tempIdToComponentId: Map< number, number >
+	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', number > )
+		const currentComponentId = ( element.settings?.component as TransformablePropValue< 'component-id', string > )
 			?.value;
-		if ( currentComponentId && tempIdToComponentId.has( currentComponentId ) ) {
-			return { shouldUpdate: true, newComponentId: tempIdToComponentId.get( currentComponentId ) as number };
+		if ( currentComponentId && uidToComponentId.has( currentComponentId ) ) {
+			return { shouldUpdate: true, newComponentId: uidToComponentId.get( currentComponentId ) as number };
 		}
 	}
 	return { shouldUpdate: false, newComponentId: null };

package/src/types.ts

@@ -9,8 +9,18 @@ export type ComponentId = number;
 
 export type StylesDefinition = Record< ComponentId, StyleDefinition[] >;
 
-export type Component = {
+export type Component = PublishedComponent | UnpublishedComponent;
+
+export type PublishedComponent = BaseComponent & {
 	id: number;
+};
+
+export type UnpublishedComponent = BaseComponent & {
+	elements: V1ElementData[];
+};
+
+type BaseComponent = {
+	uid: string;
 	name: string;
 };
 
@@ -18,7 +28,15 @@ export type DocumentStatus = 'publish' | 'draft';
 export type DocumentSaveStatus = DocumentStatus | 'autosave';
 
 export type ExtendedWindow = Window & {
-	elementorCommon: Record< string, unknown >;
+	elementorCommon: Record< string, unknown > & {
+		eventsManager: {
+			config: {
+				locations: Record< string, string >;
+				secondaryLocations: Record< string, string >;
+				triggers: Record< string, string >;
+			};
+		};
+	};
 };
 
 export type Container = {