@elementor/editor-components 3.33.0-99 → 3.35.0-325

package/src/store/actions/update-current-component.ts

@@ -0,0 +1,33 @@
+import { setDocumentModifiedStatus, type V1Document } from '@elementor/editor-documents';
+import { __getStore as getStore } from '@elementor/store';
+
+import { type ComponentsPathItem, slice } from '../store';
+
+export function updateCurrentComponent( {
+	path,
+	currentComponentId,
+}: {
+	path: ComponentsPathItem[];
+	currentComponentId: V1Document[ 'id' ] | null;
+} ) {
+	const dispatch = getStore()?.dispatch;
+
+	if ( ! dispatch ) {
+		return;
+	}
+
+	dispatch( slice.actions.setPath( path ) );
+	dispatch( slice.actions.setCurrentComponentId( currentComponentId ) );
+}
+
+export const archiveComponent = ( componentId: number ) => {
+	const store = getStore();
+	const dispatch = store?.dispatch;
+
+	if ( ! dispatch ) {
+		return;
+	}
+
+	dispatch( slice.actions.archive( componentId ) );
+	setDocumentModifiedStatus( true );
+};

package/src/store/actions/update-overridable-prop-origin-value.ts

@@ -0,0 +1,37 @@
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+
+import { type ComponentOverridablePropValue } from '../../prop-types/component-overridable-prop-type';
+import { type OverridableProps } from '../../types';
+import { selectOverridableProps, slice } from '../store';
+
+export function updateOverridablePropOriginValue( componentId: number, propValue: ComponentOverridablePropValue ) {
+	const overridableProps = selectOverridableProps( getState(), componentId );
+
+	if ( ! overridableProps ) {
+		return;
+	}
+
+	const existingOverridableProp = overridableProps.props[ propValue.override_key ];
+
+	if ( ! existingOverridableProp ) {
+		return;
+	}
+
+	const newOverridableProps = {
+		...overridableProps,
+		props: {
+			...overridableProps.props,
+			[ existingOverridableProp.overrideKey ]: {
+				...existingOverridableProp,
+				originValue: propValue.origin_value,
+			},
+		},
+	} satisfies OverridableProps;
+
+	dispatch(
+		slice.actions.setOverridableProps( {
+			componentId,
+			overridableProps: newOverridableProps,
+		} )
+	);
+}

package/src/store/components-styles-provider.ts

@@ -0,0 +1,24 @@
+import { createStylesProvider } from '@elementor/editor-styles-repository';
+import { __getState as getState, __subscribeWithSelector as subscribeWithSelector } from '@elementor/store';
+
+import { selectFlatStyles, SLICE_NAME } from './store';
+
+export const componentsStylesProvider = createStylesProvider( {
+	key: 'components-styles',
+	priority: 100,
+	subscribe: ( cb ) =>
+		subscribeWithSelector(
+			( state ) => state[ SLICE_NAME ],
+			() => {
+				cb();
+			}
+		),
+	actions: {
+		all: () => {
+			return selectFlatStyles( getState() );
+		},
+		get: ( id ) => {
+			return selectFlatStyles( getState() ).find( ( style ) => style.id === id ) ?? null;
+		},
+	},
+} );

package/src/store/store.ts

@@ -0,0 +1,193 @@
+import { type V1Document } from '@elementor/editor-documents';
+import {
+	__createSelector as createSelector,
+	__createSlice as createSlice,
+	type PayloadAction,
+	type SliceState,
+} from '@elementor/store';
+
+import {
+	type Component,
+	type ComponentId,
+	type OverridableProps,
+	type PublishedComponent,
+	type StylesDefinition,
+	type UnpublishedComponent,
+} from '../types';
+import { loadComponents } from './thunks';
+
+type GetComponentResponse = PublishedComponent[];
+
+type Status = 'idle' | 'pending' | 'error';
+
+type ComponentsState = {
+	data: PublishedComponent[];
+	unpublishedData: UnpublishedComponent[];
+	loadStatus: Status;
+	styles: StylesDefinition;
+	createdThisSession: Component[ 'uid' ][];
+	archivedData: PublishedComponent[];
+	path: ComponentsPathItem[];
+	currentComponentId: V1Document[ 'id' ] | null;
+};
+
+export type ComponentsSlice = SliceState< typeof slice >;
+
+export type ComponentsPathItem = {
+	instanceId?: string;
+	componentId: V1Document[ 'id' ];
+};
+
+export const initialState: ComponentsState = {
+	data: [],
+	unpublishedData: [],
+	loadStatus: 'idle',
+	styles: {},
+	createdThisSession: [],
+	archivedData: [],
+	path: [],
+	currentComponentId: null,
+};
+
+export const SLICE_NAME = 'components';
+
+export const slice = createSlice( {
+	name: SLICE_NAME,
+	initialState,
+	reducers: {
+		add: ( state, { payload }: PayloadAction< PublishedComponent | PublishedComponent[] > ) => {
+			if ( Array.isArray( payload ) ) {
+				state.data = [ ...state.data, ...payload ];
+			} else {
+				state.data.unshift( payload );
+			}
+		},
+		load: ( state, { payload }: PayloadAction< PublishedComponent[] > ) => {
+			state.data = payload;
+		},
+		addUnpublished: ( state, { payload }: PayloadAction< UnpublishedComponent > ) => {
+			state.unpublishedData.unshift( payload );
+		},
+		resetUnpublished: ( state ) => {
+			state.unpublishedData = [];
+		},
+		removeStyles( state, { payload }: PayloadAction< { id: ComponentId } > ) {
+			const { [ payload.id ]: _, ...rest } = state.styles;
+
+			state.styles = rest;
+		},
+		addStyles: ( state, { payload } ) => {
+			state.styles = { ...state.styles, ...payload };
+		},
+		addCreatedThisSession: ( state, { payload }: PayloadAction< string > ) => {
+			state.createdThisSession.push( payload );
+		},
+		archive: ( state, { payload }: PayloadAction< number > ) => {
+			state.data = state.data.filter( ( component ) => {
+				const isArchived = component.id === payload;
+				if ( isArchived ) {
+					state.archivedData.push( component );
+				}
+
+				return ! isArchived;
+			} );
+		},
+		setCurrentComponentId: ( state, { payload }: PayloadAction< V1Document[ 'id' ] | null > ) => {
+			state.currentComponentId = payload;
+		},
+		setPath: ( state, { payload }: PayloadAction< ComponentsPathItem[] > ) => {
+			state.path = payload;
+		},
+		setOverridableProps: (
+			state,
+			{ payload }: PayloadAction< { componentId: ComponentId; overridableProps: OverridableProps } >
+		) => {
+			const component = state.data.find( ( comp ) => comp.id === payload.componentId );
+
+			if ( ! component ) {
+				return;
+			}
+
+			component.overridableProps = payload.overridableProps;
+		},
+	},
+	extraReducers: ( builder ) => {
+		builder.addCase( loadComponents.fulfilled, ( state, { payload }: PayloadAction< GetComponentResponse > ) => {
+			state.data = payload;
+			state.loadStatus = 'idle';
+		} );
+		builder.addCase( loadComponents.pending, ( state ) => {
+			state.loadStatus = 'pending';
+		} );
+		builder.addCase( loadComponents.rejected, ( state ) => {
+			state.loadStatus = 'error';
+		} );
+	},
+} );
+
+const selectData = ( state: ComponentsSlice ) => state[ SLICE_NAME ].data;
+const selectArchivedData = ( state: ComponentsSlice ) => state[ SLICE_NAME ].archivedData;
+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;
+const getPath = ( state: ComponentsSlice ) => state[ SLICE_NAME ].path;
+const getCurrentComponentId = ( state: ComponentsSlice ) => state[ SLICE_NAME ].currentComponentId;
+const selectComponent = ( state: ComponentsSlice, componentId: ComponentId ) =>
+	state[ SLICE_NAME ].data.find( ( component ) => component.id === componentId );
+
+export const selectComponents = createSelector(
+	selectData,
+	selectUnpublishedData,
+	( data: PublishedComponent[], unpublishedData: UnpublishedComponent[] ) => [
+		...unpublishedData.map( ( item ) => ( { uid: item.uid, 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 selectStyles = ( state: ComponentsSlice ) => state[ SLICE_NAME ].styles ?? {};
+export const selectFlatStyles = createSelector( selectStylesDefinitions, ( data ) => Object.values( data ).flat() );
+export const selectCreatedThisSession = createSelector(
+	getCreatedThisSession,
+	( createdThisSession ) => createdThisSession
+);
+
+const DEFAULT_OVERRIDABLE_PROPS: OverridableProps = {
+	props: {},
+	groups: {
+		items: {},
+		order: [],
+	},
+};
+
+export const selectOverridableProps = createSelector(
+	selectComponent,
+	( component: PublishedComponent | undefined ) => {
+		if ( ! component ) {
+			return undefined;
+		}
+
+		return component.overridableProps ?? DEFAULT_OVERRIDABLE_PROPS;
+	}
+);
+export const selectIsOverridablePropsLoaded = createSelector(
+	selectComponent,
+	( component: PublishedComponent | undefined ) => {
+		return !! component?.overridableProps;
+	}
+);
+export const selectPath = createSelector( getPath, ( path ) => path );
+export const selectCurrentComponentId = createSelector(
+	getCurrentComponentId,
+	( currentComponentId ) => currentComponentId
+);
+
+export const selectArchivedComponents = createSelector(
+	selectArchivedData,
+	( archivedData: PublishedComponent[] ) => archivedData
+);

package/src/store/thunks.ts

@@ -0,0 +1,10 @@
+import { __createAsyncThunk as createAsyncThunk } from '@elementor/store';
+
+import { apiClient } from '../api';
+
+const loadComponents = createAsyncThunk( 'components/load', async () => {
+	const response = await apiClient.get();
+	return response;
+} );
+
+export { loadComponents };

package/src/sync/before-save.ts

@@ -0,0 +1,31 @@
+import { type V1Document } from '@elementor/editor-documents';
+import { type V1Element, type V1ElementData } from '@elementor/editor-elements';
+
+import { type DocumentSaveStatus } from '../types';
+import { createComponentsBeforeSave } from './create-components-before-save';
+import { setComponentOverridablePropsSettingsBeforeSave } from './set-component-overridable-props-settings-before-save';
+import { updateArchivedComponentBeforeSave } from './update-archived-component-before-save';
+import { updateComponentsBeforeSave } from './update-components-before-save';
+
+type Options = {
+	container: V1Element & {
+		document: V1Document;
+		model: {
+			get: ( key: 'elements' ) => {
+				toJSON: () => V1ElementData[];
+			};
+		};
+	};
+	status: DocumentSaveStatus;
+};
+
+export const beforeSave = ( { container, status }: Options ) => {
+	const elements = container.model.get( 'elements' )?.toJSON() ?? [];
+
+	return Promise.all( [
+		updateArchivedComponentBeforeSave(),
+		createComponentsBeforeSave( { elements, status } ),
+		updateComponentsBeforeSave( { elements, status } ),
+		setComponentOverridablePropsSettingsBeforeSave( { container } ),
+	] );
+};

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

@@ -0,0 +1,102 @@
+import { updateElementSettings, type V1ElementData } from '@elementor/editor-elements';
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+
+import { apiClient } from '../api';
+import { selectUnpublishedComponents, slice } from '../store/store';
+import { type ComponentInstancePropValue, type DocumentSaveStatus, type UnpublishedComponent } from '../types';
+
+export async function createComponentsBeforeSave( {
+	elements,
+	status,
+}: {
+	elements: V1ElementData[];
+	status: DocumentSaveStatus;
+} ) {
+	const unpublishedComponents = selectUnpublishedComponents( getState() );
+
+	if ( ! unpublishedComponents.length ) {
+		return;
+	}
+
+	try {
+		const uidToComponentId = await createComponents( unpublishedComponents, status );
+
+		updateComponentInstances( elements, uidToComponentId );
+
+		dispatch(
+			slice.actions.add(
+				unpublishedComponents.map( ( component ) => ( {
+					id: uidToComponentId.get( component.uid ) as number,
+					name: component.name,
+					uid: component.uid,
+				} ) )
+			)
+		);
+		dispatch( slice.actions.resetUnpublished() );
+	} catch ( error ) {
+		throw new Error( `Failed to publish components and update component instances: ${ error }` );
+	}
+}
+
+async function createComponents(
+	components: UnpublishedComponent[],
+	status: DocumentSaveStatus
+): Promise< Map< string, number > > {
+	const response = await apiClient.create( {
+		status,
+		items: components.map( ( component ) => ( {
+			uid: component.uid,
+			title: component.name,
+			elements: component.elements,
+		} ) ),
+	} );
+
+	const map = new Map< string, number >();
+
+	Object.entries( response ).forEach( ( [ key, value ] ) => {
+		map.set( key, value );
+	} );
+
+	return map;
+}
+
+function updateComponentInstances( elements: V1ElementData[], uidToComponentId: Map< string, number > ): void {
+	elements.forEach( ( element ) => {
+		const { shouldUpdate, newComponentId } = shouldUpdateElement( element, uidToComponentId );
+		if ( shouldUpdate ) {
+			updateElementComponentId( element.id, newComponentId );
+		}
+
+		if ( element.elements ) {
+			updateComponentInstances( element.elements, uidToComponentId );
+		}
+	} );
+}
+
+function shouldUpdateElement(
+	element: V1ElementData,
+	uidToComponentId: Map< string, number >
+): { shouldUpdate: true; newComponentId: number } | { shouldUpdate: false; newComponentId: null } {
+	if ( element.widgetType === 'e-component' ) {
+		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 };
+		}
+	}
+	return { shouldUpdate: false, newComponentId: null };
+}
+
+function updateElementComponentId( elementId: string, componentId: number ): void {
+	updateElementSettings( {
+		id: elementId,
+		props: {
+			component_instance: {
+				$$type: 'component-instance',
+				value: { component_id: componentId },
+			},
+		},
+		withHistory: false,
+	} );
+}

package/src/sync/set-component-overridable-props-settings-before-save.ts

@@ -0,0 +1,23 @@
+import { type V1Document } from '@elementor/editor-documents';
+import { type V1Element } from '@elementor/editor-elements';
+import { __getState as getState } from '@elementor/store';
+
+import { COMPONENT_DOCUMENT_TYPE } from '../components/consts';
+import { selectOverridableProps } from '../store/store';
+
+export const setComponentOverridablePropsSettingsBeforeSave = ( {
+	container,
+}: {
+	container: V1Element & { document: V1Document };
+} ) => {
+	const currentDocument = container.document;
+
+	if ( ! currentDocument || currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE ) {
+		return;
+	}
+
+	const overridableProps = selectOverridableProps( getState(), currentDocument.id );
+	if ( overridableProps ) {
+		container.settings.set( 'overridable_props', overridableProps );
+	}
+};

package/src/sync/update-archived-component-before-save.ts

@@ -0,0 +1,44 @@
+import { type NotificationData, notify } from '@elementor/editor-notifications';
+import { __getState as getState } from '@elementor/store';
+
+import { apiClient } from '../api';
+import { selectArchivedComponents } from '../store/store';
+
+const failedNotification = ( message: string ): NotificationData => ( {
+	type: 'error',
+	message: `Failed to archive components: ${ message }`,
+	id: 'failed-archived-components-notification',
+} );
+
+const successNotification = ( message: string ): NotificationData => ( {
+	type: 'success',
+	message: `Successfully archived components: ${ message }`,
+	id: 'success-archived-components-notification',
+} );
+
+export const updateArchivedComponentBeforeSave = async () => {
+	try {
+		const archivedComponents = selectArchivedComponents( getState() );
+
+		if ( ! archivedComponents.length ) {
+			return;
+		}
+
+		const result = await apiClient.updateArchivedComponents(
+			archivedComponents.map( ( component ) => component.id )
+		);
+
+		const failedIds = result.failedIds.join( ', ' );
+		const successIds = result.successIds.join( ', ' );
+
+		if ( failedIds ) {
+			notify( failedNotification( failedIds ) );
+		}
+
+		if ( successIds ) {
+			notify( successNotification( successIds ) );
+		}
+	} catch ( error ) {
+		throw new Error( `Failed to update archived components: ${ error }` );
+	}
+};

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

@@ -0,0 +1,35 @@
+import { isDocumentDirty } from '@elementor/editor-documents';
+import { type V1ElementData } from '@elementor/editor-elements';
+
+import { apiClient } from '../api';
+import { type DocumentSaveStatus } from '../types';
+import { getComponentDocumentData, invalidateComponentDocumentData } from '../utils/component-document-data';
+import { getComponentIds } from '../utils/get-component-ids';
+
+type Options = {
+	status: DocumentSaveStatus;
+	elements: V1ElementData[];
+};
+
+export async function updateComponentsBeforeSave( { status, elements }: Options ) {
+	if ( status !== 'publish' ) {
+		return;
+	}
+
+	const componentIds = await getComponentIds( elements );
+
+	const componentDocumentData = await Promise.all( componentIds.map( getComponentDocumentData ) );
+
+	const draftIds = componentDocumentData
+		.filter( ( document ) => !! document )
+		.filter( isDocumentDirty )
+		.map( ( document ) => document.id );
+
+	if ( draftIds.length === 0 ) {
+		return;
+	}
+
+	await apiClient.updateStatuses( draftIds, 'publish' );
+
+	draftIds.forEach( ( id ) => invalidateComponentDocumentData( id ) );
+}

package/src/types.ts

@@ -1,3 +1,86 @@
+import { type V1ElementData } from '@elementor/editor-elements';
+import { type PropValue, type TransformablePropValue } from '@elementor/editor-props';
+import type { StyleDefinition } from '@elementor/editor-styles';
+
 export type ComponentFormValues = {
 	componentName: string;
 };
+
+export type ComponentId = number;
+
+export type StylesDefinition = Record< ComponentId, StyleDefinition[] >;
+
+export type Component = PublishedComponent | UnpublishedComponent;
+
+export type PublishedComponent = BaseComponent & {
+	id: number;
+};
+
+export type UnpublishedComponent = BaseComponent & {
+	elements: V1ElementData[];
+};
+
+export type OverridableProp = {
+	overrideKey: string;
+	label: string;
+	elementId: string;
+	propKey: string;
+	elType: string;
+	widgetType: string;
+	originValue: PropValue;
+	groupId: string;
+};
+
+export type OverridablePropsGroup = {
+	id: string;
+	label: string;
+	props: string[];
+};
+
+export type OverridableProps = {
+	props: Record< string, OverridableProp >;
+	groups: {
+		items: Record< string, OverridablePropsGroup >;
+		order: string[];
+	};
+};
+
+type BaseComponent = {
+	uid: string;
+	name: string;
+	overridableProps?: OverridableProps;
+};
+
+export type DocumentStatus = 'publish' | 'draft';
+export type DocumentSaveStatus = DocumentStatus | 'autosave';
+
+export type ExtendedWindow = Window & {
+	elementorCommon: Record< string, unknown > & {
+		eventsManager: {
+			config: {
+				locations: Record< string, string >;
+				secondaryLocations: Record< string, string >;
+				triggers: Record< string, string >;
+			};
+		};
+	};
+};
+
+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 >;
+};
+
+export type ComponentOverridable = {
+	override_key: string;
+	origin_value: TransformablePropValue< string >;
+};

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

@@ -0,0 +1,19 @@
+import { type Document, getV1DocumentsManager } from '@elementor/editor-documents';
+
+type ComponentDocumentData = Document;
+
+export const getComponentDocumentData = async ( id: number ) => {
+	const documentManager = getV1DocumentsManager();
+
+	try {
+		return await documentManager.request< ComponentDocumentData >( id );
+	} catch {
+		return null;
+	}
+};
+
+export const invalidateComponentDocumentData = ( id: number ) => {
+	const documentManager = getV1DocumentsManager();
+
+	documentManager.invalidateCache( id );
+};

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

@@ -0,0 +1,36 @@
+import { type V1ElementData } from '@elementor/editor-elements';
+
+import { TYPE } from '../create-component-type';
+import { type ComponentInstancePropValue } from '../types';
+import { getComponentDocumentData } from './component-document-data';
+
+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 );
+
+		if ( isComponent ) {
+			const componentId = ( settings?.component_instance as ComponentInstancePropValue< number > )?.value
+				?.component_id;
+
+			const document = await getComponentDocumentData( componentId );
+
+			childElements = document?.elements;
+
+			if ( Boolean( componentId ) ) {
+				ids.push( componentId );
+			}
+		}
+
+		if ( !! childElements?.length ) {
+			ids.push( ...( await getComponentIds( childElements ) ) );
+		}
+
+		return ids;
+	} );
+
+	const result = ( await Promise.all( components ) ).flat();
+
+	return Array.from( new Set( result ) );
+};