@elementor/editor-components 3.33.0-99 → 3.34.2

package/src/store/actions.ts

@@ -0,0 +1,21 @@
+import { 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 ) );
+}

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/create-unpublished-component.ts

@@ -0,0 +1,40 @@
+import { type V1ElementData } from '@elementor/editor-elements';
+import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
+import { __dispatch as dispatch } from '@elementor/store';
+import { generateUniqueId } from '@elementor/utils';
+
+import { type ComponentEventData } from '../components/create-component-form/utils/get-component-event-data';
+import { replaceElementWithComponent } from '../components/create-component-form/utils/replace-element-with-component';
+import { trackComponentEvent } from '../utils/tracking';
+import { slice } from './store';
+
+export function createUnpublishedComponent(
+	name: string,
+	element: V1ElementData,
+	eventData: ComponentEventData | null
+) {
+	const uid = generateUniqueId( 'component' );
+	const componentBase = { uid, name };
+
+	dispatch(
+		slice.actions.addUnpublished( {
+			...componentBase,
+			elements: [ element ],
+		} )
+	);
+
+	dispatch( slice.actions.addCreatedThisSession( uid ) );
+
+	replaceElementWithComponent( element, componentBase );
+
+	trackComponentEvent( {
+		action: 'created',
+		component_uid: uid,
+		component_name: name,
+		...eventData,
+	} );
+
+	runCommand( 'document/save/auto' );
+
+	return uid;
+}

package/src/store/load-components-assets.ts

@@ -0,0 +1,26 @@
+import { isDocumentDirty, setDocumentModifiedStatus } from '@elementor/editor-documents';
+import { type V1ElementData } from '@elementor/editor-elements';
+
+import { getComponentDocumentData } from '../utils/component-document-data';
+import { getComponentIds } from '../utils/get-component-ids';
+import { loadComponentsStyles } from './load-components-styles';
+
+export async function loadComponentsAssets( elements: V1ElementData[] ) {
+	const componentIds = await getComponentIds( elements );
+
+	updateDocumentState( componentIds );
+
+	return loadComponentsStyles( componentIds );
+}
+
+async function updateDocumentState( componentIds: number[] ) {
+	const components = ( await Promise.all( componentIds.map( getComponentDocumentData ) ) ).filter(
+		( document ) => !! document
+	);
+
+	const isDrafted = components.some( isDocumentDirty );
+
+	if ( isDrafted ) {
+		setDocumentModifiedStatus( true );
+	}
+}

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

@@ -0,0 +1,44 @@
+import { type V1ElementData } from '@elementor/editor-elements';
+import { type StyleDefinition } from '@elementor/editor-styles';
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+
+import { apiClient } from '../api';
+import { type ComponentId } from '../types';
+import { selectStyles, slice } from './store';
+
+export async function loadComponentsStyles( componentIds: number[] ) {
+	if ( ! componentIds.length ) {
+		return;
+	}
+
+	const knownComponents = selectStyles( getState() );
+	const unknownComponentIds = componentIds.filter( ( id ) => ! knownComponents[ id ] );
+
+	if ( ! unknownComponentIds.length ) {
+		return;
+	}
+
+	addComponentStyles( unknownComponentIds );
+}
+
+async function addComponentStyles( ids: ComponentId[] ) {
+	const newComponents = await loadStyles( ids );
+
+	addStyles( newComponents );
+}
+
+async function loadStyles( ids: number[] ): Promise< [ number, V1ElementData ][] > {
+	return Promise.all( ids.map( async ( id ) => [ id, await apiClient.getComponentConfig( id ) ] ) );
+}
+
+function addStyles( data: ( readonly [ ComponentId, V1ElementData ] )[] ) {
+	const styles = Object.fromEntries(
+		data.map( ( [ componentId, componentData ] ) => [ componentId, extractStyles( componentData ) ] )
+	);
+
+	dispatch( slice.actions.addStyles( styles ) );
+}
+
+function extractStyles( element: V1ElementData ): Array< StyleDefinition > {
+	return [ ...Object.values( element.styles ?? {} ), ...( element.elements ?? [] ).flatMap( extractStyles ) ];
+}

package/src/store/remove-component-styles.ts

@@ -0,0 +1,9 @@
+import { __dispatch as dispatch } from '@elementor/store';
+
+import { apiClient } from '../api';
+import { slice } from './store';
+
+export function removeComponentStyles( id: number ) {
+	apiClient.invalidateComponentConfigCache( id );
+	dispatch( slice.actions.removeStyles( { id } ) );
+}

package/src/store/set-overridable-prop.ts

@@ -0,0 +1,161 @@
+import { type PropValue } from '@elementor/editor-props';
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+import { generateUniqueId } from '@elementor/utils';
+import { __ } from '@wordpress/i18n';
+
+import { type OverridableProp, type OverridableProps, type OverridablePropsGroup } from '../types';
+import { selectOverridableProps, slice } from './store';
+
+type Props = {
+	componentId: number;
+	overrideKey: string | null;
+	elementId: string;
+	label: string;
+	groupId: string | null;
+	propKey: string;
+	elType: string;
+	widgetType: string;
+	originValue: PropValue;
+};
+export function setOverridableProp( {
+	componentId,
+	overrideKey,
+	elementId,
+	label,
+	groupId,
+	propKey,
+	elType,
+	widgetType,
+	originValue,
+}: Props ): OverridableProp | undefined {
+	const overridableProps = selectOverridableProps( getState(), componentId );
+
+	if ( ! overridableProps ) {
+		return;
+	}
+
+	const existingOverridableProp = overrideKey ? overridableProps.props[ overrideKey ] : null;
+
+	const { props: existingProps, groups: existingGroups } = { ...overridableProps };
+
+	const { groups: updatedGroups, currentGroupId } = getUpdatedGroups(
+		existingGroups,
+		groupId || existingOverridableProp?.groupId
+	);
+
+	const overridableProp = {
+		overrideKey: existingOverridableProp?.overrideKey || generateUniqueId( 'prop' ),
+		label,
+		elementId,
+		propKey,
+		widgetType,
+		elType,
+		originValue,
+		groupId: currentGroupId,
+	};
+
+	const props = {
+		...existingProps,
+		[ overridableProp.overrideKey ]: overridableProp,
+	};
+
+	const groups = {
+		items: {
+			...updatedGroups.items,
+			[ currentGroupId ]: getGroupWithProp( updatedGroups, currentGroupId, overridableProp ),
+		},
+		order: updatedGroups.order.includes( currentGroupId )
+			? updatedGroups.order
+			: [ ...updatedGroups.order, currentGroupId ],
+	};
+
+	const isChangingGroups = existingOverridableProp && existingOverridableProp.groupId !== currentGroupId;
+
+	if ( isChangingGroups ) {
+		groups.items[ existingOverridableProp.groupId ] = getGroupWithoutProp(
+			updatedGroups,
+			existingOverridableProp.groupId,
+			overridableProp
+		);
+	}
+
+	dispatch(
+		slice.actions.setOverridableProps( {
+			componentId,
+			overridableProps: {
+				props,
+				groups,
+			},
+		} )
+	);
+
+	return overridableProp;
+}
+
+type UpdatedGroups = { groups: OverridableProps[ 'groups' ]; currentGroupId: string };
+
+function getUpdatedGroups( groups: OverridableProps[ 'groups' ], groupId: string | undefined ): UpdatedGroups {
+	if ( ! groupId ) {
+		// use first existing group
+		if ( groups.order.length > 0 ) {
+			return { groups, currentGroupId: groups.order[ 0 ] };
+		}
+
+		// create the first group (default)
+		return addNewGroup( groups );
+	}
+
+	if ( ! groups.items[ groupId ] ) {
+		// fallback - if for any reason there's no such group - create it
+		return addNewGroup( groups, groupId );
+	}
+
+	// use the existing group
+	return { groups, currentGroupId: groupId };
+}
+
+function addNewGroup( groups: OverridableProps[ 'groups' ], groupId?: string | undefined ): UpdatedGroups {
+	const currentGroupId = groupId || generateUniqueId( 'group' );
+	const updatedGroups = {
+		...groups,
+		items: {
+			...groups.items,
+			[ currentGroupId ]: {
+				id: currentGroupId,
+				label: __( 'Default', 'elementor' ),
+				props: [],
+			},
+		},
+		order: [ ...groups.order, currentGroupId ],
+	};
+
+	return { groups: updatedGroups, currentGroupId };
+}
+
+function getGroupWithProp(
+	groups: OverridableProps[ 'groups' ],
+	groupId: string,
+	overridableProp: OverridableProp
+): OverridablePropsGroup {
+	const group: OverridablePropsGroup = { ...groups.items[ groupId ] };
+
+	if ( ! group.props.includes( overridableProp.overrideKey ) ) {
+		group.props = [ ...group.props, overridableProp.overrideKey ];
+	}
+
+	return group;
+}
+
+function getGroupWithoutProp(
+	groups: OverridableProps[ 'groups' ],
+	groupId: string,
+	overridableProp: OverridableProp
+): OverridablePropsGroup {
+	const group = { ...groups.items[ groupId ] };
+
+	if ( group ) {
+		group.props = group.props.filter( ( key ) => key !== overridableProp.overrideKey );
+	}
+
+	return group;
+}

package/src/store/store.ts

@@ -0,0 +1,168 @@
+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' ][];
+	path: ComponentsPathItem[];
+	currentComponentId: V1Document[ 'id' ] | null;
+};
+
+type ComponentsSlice = SliceState< typeof slice >;
+
+export type ComponentsPathItem = {
+	instanceId?: string;
+	componentId: V1Document[ 'id' ];
+};
+
+export const initialState: ComponentsState = {
+	data: [],
+	unpublishedData: [],
+	loadStatus: 'idle',
+	styles: {},
+	createdThisSession: [],
+	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 );
+		},
+		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 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 selectPath = createSelector( getPath, ( path ) => path );
+export const selectCurrentComponentId = createSelector(
+	getCurrentComponentId,
+	( currentComponentId ) => currentComponentId
+);

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,15 @@
+import { type Container, type DocumentSaveStatus } from '../types';
+import { createComponentsBeforeSave } from './create-components-before-save';
+import { updateComponentsBeforeSave } from './update-components-before-save';
+
+type Options = {
+	container: Container;
+	status: DocumentSaveStatus;
+};
+
+export const beforeSave = ( { container, status }: Options ) => {
+	return Promise.all( [
+		createComponentsBeforeSave( { container, status } ),
+		updateComponentsBeforeSave( { container, status } ),
+	] );
+};

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

@@ -0,0 +1,108 @@
+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 Container,
+	type DocumentSaveStatus,
+	type UnpublishedComponent,
+} from '../types';
+
+export async function createComponentsBeforeSave( {
+	container,
+	status,
+}: {
+	container: Container;
+	status: DocumentSaveStatus;
+} ) {
+	const unpublishedComponents = selectUnpublishedComponents( getState() );
+
+	if ( ! unpublishedComponents.length ) {
+		return;
+	}
+
+	try {
+		const uidToComponentId = await createComponents( unpublishedComponents, status );
+
+		const elements = container.model.get( 'elements' ).toJSON();
+		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/update-components-before-save.ts

@@ -0,0 +1,36 @@
+import { isDocumentDirty } from '@elementor/editor-documents';
+
+import { apiClient } from '../api';
+import { type Container, type DocumentSaveStatus } from '../types';
+import { getComponentDocumentData, invalidateComponentDocumentData } from '../utils/component-document-data';
+import { getComponentIds } from '../utils/get-component-ids';
+
+type Options = {
+	status: DocumentSaveStatus;
+	container: Container;
+};
+
+export async function updateComponentsBeforeSave( { status, container }: Options ) {
+	if ( status !== 'publish' ) {
+		return;
+	}
+
+	const elements = container.model.get( 'elements' ).toJSON();
+
+	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 ) );
+}