@elementor/editor-components 3.33.0-201 → 3.33.0-202

package/src/store/store.ts

@@ -1,3 +1,4 @@
+import { type V1ElementData } from '@elementor/editor-elements';
 import {
 	__createSelector as createSelector,
 	__createSlice as createSlice,
@@ -10,10 +11,15 @@ import { createComponent, loadComponents } from './thunks';
 
 type GetComponentResponse = Component[];
 
+export type UnpublishedComponent = Component & {
+	content: V1ElementData[];
+};
+
 type Status = 'idle' | 'pending' | 'error';
 
 type ComponentsState = {
 	data: Component[];
+	unpublishedData: UnpublishedComponent[];
 	loadStatus: Status;
 	createStatus: Status;
 	styles: StylesDefinition;
@@ -23,6 +29,7 @@ type ComponentsSlice = SliceState< typeof slice >;
 
 export const initialState: ComponentsState = {
 	data: [],
+	unpublishedData: [],
 	loadStatus: 'idle',
 	createStatus: 'idle',
 	styles: {},
@@ -33,12 +40,22 @@ export const slice = createSlice( {
 	name: SLICE_NAME,
 	initialState,
 	reducers: {
-		add: ( state, { payload } ) => {
-			state.data = { ...payload };
+		add: ( state, { payload }: PayloadAction< Component | Component[] > ) => {
+			if ( Array.isArray( payload ) ) {
+				state.data = [ ...state.data, ...payload ];
+			} else {
+				state.data.unshift( payload );
+			}
 		},
-		load: ( state, { payload } ) => {
+		load: ( state, { payload }: PayloadAction< Component[] > ) => {
 			state.data = payload;
 		},
+		addUnpublished: ( state, { payload } ) => {
+			state.unpublishedData.unshift( payload );
+		},
+		resetUnpublished: ( state ) => {
+			state.unpublishedData = [];
+		},
 		removeStyles( state, { payload }: PayloadAction< { id: ComponentId } > ) {
 			const { [ payload.id ]: _, ...rest } = state.styles;
 
@@ -79,8 +96,20 @@ const selectData = ( state: ComponentsSlice ) => state[ SLICE_NAME ].data;
 const selectLoadStatus = ( state: ComponentsSlice ) => state[ SLICE_NAME ].loadStatus;
 const selectCreateStatus = ( state: ComponentsSlice ) => state[ SLICE_NAME ].createStatus;
 const selectStylesDefinitions = ( state: ComponentsSlice ) => state[ SLICE_NAME ].styles ?? {};
+const selectUnpublishedData = ( state: ComponentsSlice ) => state[ SLICE_NAME ].unpublishedData;
 
-export const selectComponents = createSelector( selectData, ( data: Component[] ) => data );
+export const selectComponents = createSelector(
+	selectData,
+	selectUnpublishedData,
+	( data: Component[], unpublishedData: UnpublishedComponent[] ) => [
+		...unpublishedData.map( ( item ) => ( { id: item.id, name: item.name } ) ),
+		...data,
+	]
+);
+export const selectUnpublishedComponents = createSelector(
+	selectUnpublishedData,
+	( unpublishedData: UnpublishedComponent[] ) => unpublishedData
+);
 export const selectLoadIsPending = createSelector( selectLoadStatus, ( status ) => status === 'pending' );
 export const selectLoadIsError = createSelector( selectLoadStatus, ( status ) => status === 'error' );
 export const selectCreateIsPending = createSelector( selectCreateStatus, ( status ) => status === 'pending' );

package/src/types.ts

@@ -1,5 +1,4 @@
 import { type V1ElementModelProps, type V1ElementSettingsProps } from '@elementor/editor-elements';
-import { type NumberPropValue } from '@elementor/editor-props';
 import type { StyleDefinition } from '@elementor/editor-styles';
 
 export type ComponentFormValues = {
@@ -15,9 +14,18 @@ export type Component = {
 	name: string;
 };
 
+export type DocumentStatus = 'publish' | 'draft' | 'autosave';
+
 export type Element = V1ElementModelProps & {
 	elements?: Element[];
 	settings?: V1ElementSettingsProps & {
-		component_id?: NumberPropValue;
+		component?: {
+			$$type: 'component-id';
+			value: number;
+		};
 	};
 };
+
+export type ExtendedWindow = Window & {
+	elementorCommon: Record< string, unknown >;
+};

package/src/utils/before-save.ts

@@ -0,0 +1,99 @@
+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, type UnpublishedComponent } from '../store/store';
+import { type DocumentStatus } from '../types';
+
+type Container = {
+	model: {
+		get: ( key: 'elements' ) => {
+			toJSON: () => V1ElementData[];
+		};
+	};
+};
+
+export const beforeSave = async ( { container, status }: { container: Container; status: DocumentStatus } ) => {
+	const unpublishedComponents = selectUnpublishedComponents( getState() );
+
+	if ( ! unpublishedComponents.length ) {
+		return;
+	}
+
+	try {
+		const tempIdToComponentId = await createComponents( unpublishedComponents, status );
+
+		const elements = container.model.get( 'elements' ).toJSON();
+		updateComponentInstances( elements, tempIdToComponentId );
+
+		dispatch(
+			slice.actions.add(
+				unpublishedComponents.map( ( component ) => ( {
+					id: tempIdToComponentId.get( component.id ) as number,
+					name: component.name,
+				} ) )
+			)
+		);
+		dispatch( slice.actions.resetUnpublished() );
+	} catch ( error ) {
+		throw new Error( `Failed to publish components and update component instances: ${ error }` );
+	}
+};
+
+async function createComponents(
+	components: UnpublishedComponent[],
+	status: DocumentStatus
+): Promise< Map< number, number > > {
+	const tempIdToComponentId = new Map< number, number >();
+
+	const promises = components.map( ( component ) => {
+		return apiClient.create( { name: component.name, content: component.content, status } ).then( ( response ) => {
+			tempIdToComponentId.set( component.id, response.component_id );
+		} );
+	} );
+
+	await Promise.all( promises );
+
+	return tempIdToComponentId;
+}
+
+function updateComponentInstances( elements: V1ElementData[], tempIdToComponentId: Map< number, number > ): void {
+	elements.forEach( ( element ) => {
+		const { shouldUpdate, newComponentId } = shouldUpdateElement( element, tempIdToComponentId );
+		if ( shouldUpdate ) {
+			updateElementComponentId( element.id, newComponentId );
+		}
+
+		if ( element.elements ) {
+			updateComponentInstances( element.elements, tempIdToComponentId );
+		}
+	} );
+}
+
+function shouldUpdateElement(
+	element: V1ElementData,
+	tempIdToComponentId: Map< number, number >
+): { shouldUpdate: true; newComponentId: number } | { shouldUpdate: false; newComponentId: null } {
+	if ( element.widgetType === 'e-component' ) {
+		const currentComponentId = ( element.settings?.component as TransformablePropValue< 'component-id', number > )
+			?.value;
+		if ( currentComponentId && tempIdToComponentId.has( currentComponentId ) ) {
+			return { shouldUpdate: true, newComponentId: tempIdToComponentId.get( currentComponentId ) as number };
+		}
+	}
+	return { shouldUpdate: false, newComponentId: null };
+}
+
+function updateElementComponentId( elementId: string, componentId: number ): void {
+	updateElementSettings( {
+		id: elementId,
+		props: {
+			component: {
+				$$type: 'component-id',
+				value: componentId,
+			},
+		},
+		withHistory: false,
+	} );
+}