@elementor/editor-components 4.0.0-manual → 4.0.1

package/src/store/extensible-slice.ts

@@ -0,0 +1,168 @@
+import type { V1Document } from '@elementor/editor-documents';
+import {
+	__createAction as createAction,
+	__createSlice as createSlice,
+	__dispatch as dispatch,
+	type AnyAction,
+	type PayloadAction,
+} from '@elementor/store';
+
+import type { ComponentId, OverridableProps, PublishedComponent, UnpublishedComponent } from '../types';
+import { type ComponentsState, initialState, type SanitizeAttributes, SLICE_NAME } from './store-types';
+import { loadComponents } from './thunks';
+
+type GetComponentResponse = PublishedComponent[];
+
+type ComponentsReducer< P > = ( state: ComponentsState, action: PayloadAction< P > ) => void;
+
+const extraReducersMap = new Map< string, ComponentsReducer< unknown > >();
+
+export function registerComponentsReducer< P >( name: string, reducer: ComponentsReducer< P > ) {
+	extraReducersMap.set( `${ SLICE_NAME }/${ name }`, reducer as ComponentsReducer< unknown > );
+}
+
+export function createComponentsAction< P >( name: string ) {
+	const action = createAction< P >( `${ SLICE_NAME }/${ name }` );
+
+	return {
+		action,
+		register( reducer: ComponentsReducer< P > ) {
+			registerComponentsReducer( name, reducer );
+		},
+		dispatch( payload: P ) {
+			dispatch( action( payload ) );
+		},
+	};
+}
+
+export function __resetExtraReducers() {
+	extraReducersMap.clear();
+}
+
+const baseSlice = createSlice( {
+	name: SLICE_NAME,
+	initialState,
+	reducers: {
+		add: ( state, { payload }: PayloadAction< PublishedComponent | PublishedComponent[] > ) => {
+			if ( Array.isArray( payload ) ) {
+				state.data = [ ...payload, ...state.data ];
+			} else {
+				state.data.unshift( payload );
+			}
+		},
+		load: ( state, { payload }: PayloadAction< PublishedComponent[] > ) => {
+			state.data = payload;
+		},
+		addUnpublished: ( state, { payload }: PayloadAction< UnpublishedComponent > ) => {
+			state.unpublishedData.unshift( payload );
+		},
+		removeUnpublished: ( state, { payload }: PayloadAction< string | string[] > ) => {
+			const uidsToRemove = Array.isArray( payload ) ? payload : [ payload ];
+			state.unpublishedData = state.unpublishedData.filter(
+				( component ) => ! uidsToRemove.includes( component.uid )
+			);
+		},
+		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 );
+		},
+		removeCreatedThisSession: ( state, { payload }: PayloadAction< string > ) => {
+			state.createdThisSession = state.createdThisSession.filter( ( uid ) => uid !== payload );
+		},
+		archive: ( state, { payload }: PayloadAction< number > ) => {
+			const component = state.data.find( ( comp ) => comp.id === payload );
+
+			if ( component ) {
+				component.isArchived = true;
+				state.archivedThisSession.push( payload );
+			}
+		},
+		setCurrentComponentId: ( state, { payload }: PayloadAction< V1Document[ 'id' ] | null > ) => {
+			state.currentComponentId = payload;
+		},
+		setPath: ( state, { payload }: PayloadAction< ComponentsState[ 'path' ] > ) => {
+			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;
+		},
+		rename: ( state, { payload }: PayloadAction< { componentUid: string; name: string } > ) => {
+			const component = state.data.find( ( comp ) => comp.uid === payload.componentUid );
+
+			if ( ! component ) {
+				return;
+			}
+			if ( component.id ) {
+				state.updatedComponentNames[ component.id ] = payload.name;
+			}
+			component.name = payload.name;
+		},
+		cleanUpdatedComponentNames: ( state ) => {
+			state.updatedComponentNames = {};
+		},
+		updateComponentSanitizedAttribute: (
+			state,
+			{
+				payload: { componentId, attribute },
+			}: PayloadAction< { componentId: ComponentId; attribute: SanitizeAttributes } >
+		) => {
+			if ( ! state.sanitized[ componentId ] ) {
+				state.sanitized[ componentId ] = {};
+			}
+
+			state.sanitized[ componentId ][ attribute ] = true;
+		},
+		resetSanitizedComponents: ( state ) => {
+			state.sanitized = {};
+		},
+	},
+	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';
+		} );
+	},
+} );
+
+export const slice: typeof baseSlice = {
+	...baseSlice,
+	reducer( state: ComponentsState | undefined, action: AnyAction ) {
+		const nextState = baseSlice.reducer( state, action );
+
+		const extraReducer = extraReducersMap.get( action.type );
+
+		if ( ! extraReducer || ! nextState ) {
+			return nextState;
+		}
+
+		const clonedState = structuredClone( nextState );
+		extraReducer( clonedState, action as PayloadAction< unknown > );
+
+		return clonedState;
+	},
+};

package/src/store/selectors.ts

@@ -0,0 +1,53 @@
+import { __getState as getState, __getStore as getStore } from '@elementor/store';
+
+import { type ComponentId } from '../types';
+import {
+	type ComponentsSlice,
+	selectArchivedThisSession,
+	selectComponentByUid,
+	selectComponents,
+	selectCreatedThisSession,
+	selectCurrentComponent,
+	selectCurrentComponentId,
+	selectOverridableProps,
+	selectUnpublishedComponents,
+	selectUpdatedComponentNames,
+} from './store';
+
+function safeGetState(): ComponentsSlice | undefined {
+	return getStore()?.getState() as ComponentsSlice | undefined;
+}
+
+export const componentsSelectors = {
+	getOverridableProps( componentId: ComponentId ) {
+		return selectOverridableProps( getState(), componentId );
+	},
+	getCurrentComponent() {
+		return selectCurrentComponent( getState() );
+	},
+	getCurrentComponentId() {
+		const state = safeGetState();
+		if ( ! state ) {
+			return null;
+		}
+		return selectCurrentComponentId( state );
+	},
+	getUnpublishedComponents() {
+		return selectUnpublishedComponents( getState() );
+	},
+	getUpdatedComponentNames() {
+		return selectUpdatedComponentNames( getState() );
+	},
+	getArchivedThisSession() {
+		return selectArchivedThisSession( getState() );
+	},
+	getCreatedThisSession() {
+		return selectCreatedThisSession( getState() );
+	},
+	getComponents() {
+		return selectComponents( getState() );
+	},
+	getComponentByUid( componentUid: string ) {
+		return selectComponentByUid( getState(), componentUid );
+	},
+};

package/src/store/store-types.ts

@@ -0,0 +1,48 @@
+import { type V1Document } from '@elementor/editor-documents';
+
+import {
+	type Component,
+	type ComponentId,
+	type PublishedComponent,
+	type StylesDefinition,
+	type UnpublishedComponent,
+} from '../types';
+
+export type SanitizeAttributes = 'overridableProps';
+
+export type ComponentsState = {
+	data: PublishedComponent[];
+	unpublishedData: UnpublishedComponent[];
+	loadStatus: 'idle' | 'pending' | 'error';
+	styles: StylesDefinition;
+	createdThisSession: Component[ 'uid' ][];
+	archivedThisSession: ComponentId[];
+	path: ComponentsPathItem[];
+	currentComponentId: V1Document[ 'id' ] | null;
+	updatedComponentNames: Record< number, string >;
+
+	// We use this map to flag any sanitized attribute of a given component
+	// This map currently resets in response to the `editor/documents/open` command
+	sanitized: Record< ComponentId, Partial< Record< SanitizeAttributes, boolean > > >;
+};
+
+export type ComponentsPathItem = {
+	instanceId?: string;
+	instanceTitle?: string;
+	componentId: V1Document[ 'id' ];
+};
+
+export const initialState: ComponentsState = {
+	data: [],
+	unpublishedData: [],
+	loadStatus: 'idle',
+	styles: {},
+	createdThisSession: [],
+	archivedThisSession: [],
+	path: [],
+	currentComponentId: null,
+	updatedComponentNames: {},
+	sanitized: {},
+};
+
+export const SLICE_NAME = 'components';

package/src/store/store.ts

@@ -1,176 +1,14 @@
-import { type V1Document } from '@elementor/editor-documents';
-import {
-	__createSelector as createSelector,
-	__createSlice as createSlice,
-	__useSelector as useSelector,
-	type PayloadAction,
-	type SliceState,
-} from '@elementor/store';
+import { __createSelector as createSelector, __useSelector as useSelector, 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';
-
-export type SanitizeAttributes = 'overridableProps';
-
-type ComponentsState = {
-	data: PublishedComponent[];
-	unpublishedData: UnpublishedComponent[];
-	loadStatus: Status;
-	styles: StylesDefinition;
-	createdThisSession: Component[ 'uid' ][];
-	archivedThisSession: ComponentId[];
-	path: ComponentsPathItem[];
-	currentComponentId: V1Document[ 'id' ] | null;
-	updatedComponentNames: Record< number, string >;
-
-	// We use this map to flag any sanitized attribute of a given component
-	// This map currently resets in response to the `editor/documents/open` command
-	sanitized: Record< ComponentId, Partial< Record< SanitizeAttributes, boolean > > >;
-};
+import type { ComponentId, OverridableProps, PublishedComponent, UnpublishedComponent } from '../types';
+import { type slice } from './extensible-slice';
+import { type SanitizeAttributes, SLICE_NAME } from './store-types';
 
 export type ComponentsSlice = SliceState< typeof slice >;
 
-export type ComponentsPathItem = {
-	instanceId?: string;
-	instanceTitle?: string;
-	componentId: V1Document[ 'id' ];
-};
-
-export const initialState: ComponentsState = {
-	data: [],
-	unpublishedData: [],
-	loadStatus: 'idle',
-	styles: {},
-	createdThisSession: [],
-	archivedThisSession: [],
-	path: [],
-	currentComponentId: null,
-	updatedComponentNames: {},
-	sanitized: {},
-};
-
-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 = [ ...payload, ...state.data ];
-			} else {
-				state.data.unshift( payload );
-			}
-		},
-		load: ( state, { payload }: PayloadAction< PublishedComponent[] > ) => {
-			state.data = payload;
-		},
-		addUnpublished: ( state, { payload }: PayloadAction< UnpublishedComponent > ) => {
-			state.unpublishedData.unshift( payload );
-		},
-		removeUnpublished: ( state, { payload }: PayloadAction< string | string[] > ) => {
-			const uidsToRemove = Array.isArray( payload ) ? payload : [ payload ];
-			state.unpublishedData = state.unpublishedData.filter(
-				( component ) => ! uidsToRemove.includes( component.uid )
-			);
-		},
-		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 );
-		},
-		removeCreatedThisSession: ( state, { payload }: PayloadAction< string > ) => {
-			state.createdThisSession = state.createdThisSession.filter( ( uid ) => uid !== payload );
-		},
-		archive: ( state, { payload }: PayloadAction< number > ) => {
-			const component = state.data.find( ( comp ) => comp.id === payload );
-
-			if ( component ) {
-				component.isArchived = true;
-				state.archivedThisSession.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;
-		},
-		rename: ( state, { payload }: PayloadAction< { componentUid: string; name: string } > ) => {
-			const component = state.data.find( ( comp ) => comp.uid === payload.componentUid );
-
-			if ( ! component ) {
-				return;
-			}
-			if ( component.id ) {
-				state.updatedComponentNames[ component.id ] = payload.name;
-			}
-			component.name = payload.name;
-		},
-		cleanUpdatedComponentNames: ( state ) => {
-			state.updatedComponentNames = {};
-		},
-		updateComponentSanitizedAttribute: (
-			state,
-			{
-				payload: { componentId, attribute },
-			}: PayloadAction< { componentId: ComponentId; attribute: SanitizeAttributes } >
-		) => {
-			if ( ! state.sanitized[ componentId ] ) {
-				state.sanitized[ componentId ] = {};
-			}
-
-			state.sanitized[ componentId ][ attribute ] = true;
-		},
-		resetSanitizedComponents: ( state ) => {
-			state.sanitized = {};
-		},
-	},
-	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';
-		} );
-	},
-} );
+export { slice, registerComponentsReducer, createComponentsAction, __resetExtraReducers } from './extensible-slice';
+export type { ComponentsState, ComponentsPathItem, SanitizeAttributes } from './store-types';
+export { initialState, SLICE_NAME } from './store-types';
 
 export const selectData = ( state: ComponentsSlice ) => state[ SLICE_NAME ].data;
 export const selectArchivedThisSession = ( state: ComponentsSlice ) => state[ SLICE_NAME ].archivedThisSession;

package/src/sync/publish-draft-components-in-page-before-save.ts

@@ -1,10 +1,17 @@
 import { invalidateDocumentData, isDocumentDirty } from '@elementor/editor-documents';
 import { type V1ElementData } from '@elementor/editor-elements';
+import { notify } from '@elementor/editor-notifications';
+import { AxiosError } from '@elementor/http-client';
+import { __ } from '@wordpress/i18n';
 
 import { apiClient } from '../api';
 import { type DocumentSaveStatus } from '../types';
 import { getComponentDocuments } from '../utils/get-component-documents';
 
+const INSUFFICIENT_PERMISSIONS_ERROR_CODE = 'insufficient_permissions';
+const PUBLISH_UPGRADE_URL = 'https://go.elementor.com/go-pro-components-Instance-draft-failure/';
+const PUBLISH_UPGRADE_NOTIFICATION_ID = 'component-publish-upgrade';
+
 type Options = {
 	status: DocumentSaveStatus;
 	elements: V1ElementData[];
@@ -23,7 +30,41 @@ export async function publishDraftComponentsInPageBeforeSave( { status, elements
 		return;
 	}
 
-	await apiClient.updateStatuses( draftIds, 'publish' );
+	try {
+		await apiClient.updateStatuses( draftIds, 'publish' );
+	} catch ( error ) {
+		if ( isInsufficientPermissionsError( error ) ) {
+			notifyPublishUpgrade();
+			return;
+		}
+
+		throw error;
+	}
 
 	draftIds.forEach( ( id ) => invalidateDocumentData( id ) );
 }
+
+function isInsufficientPermissionsError( error: unknown ): boolean {
+	return error instanceof AxiosError && error.response?.data?.code === INSUFFICIENT_PERMISSIONS_ERROR_CODE;
+}
+
+function notifyPublishUpgrade() {
+	notify( {
+		type: 'promotion',
+		id: PUBLISH_UPGRADE_NOTIFICATION_ID,
+		message: __(
+			'You have unpublished component on this page. You need a pro version to publish it.',
+			'elementor'
+		),
+		additionalActionProps: [
+			{
+				size: 'small',
+				variant: 'contained',
+				color: 'promotion',
+				href: PUBLISH_UPGRADE_URL,
+				target: '_blank',
+				children: __( 'Upgrade Now', 'elementor' ),
+			},
+		],
+	} );
+}

package/src/types.ts

@@ -74,7 +74,7 @@ export type ExtendedWindow = Window & {
 	elementorCommon: Record< string, unknown > & {
 		eventsManager: {
 			config: {
-				locations: Record< string, string >;
+				locations: Record< string, string | Record< string, string > >;
 				secondaryLocations: Record< string, string >;
 				triggers: Record< string, string >;
 			};

package/src/utils/detach-component-instance/detach-component-instance.ts

@@ -0,0 +1,172 @@
+import { getContainer, replaceElement, type V1Element, type V1ElementModelProps } from '@elementor/editor-elements';
+import { undoable } from '@elementor/editor-v1-adapters';
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+import { __ } from '@wordpress/i18n';
+
+import { componentInstanceOverridesPropTypeUtil } from '../../prop-types/component-instance-overrides-prop-type';
+import {
+	type ComponentInstanceProp,
+	componentInstancePropTypeUtil,
+} from '../../prop-types/component-instance-prop-type';
+import { selectComponent, selectCurrentComponentId, selectOverridableProps, slice } from '../../store/store';
+import { type OverridableProps } from '../../types';
+import { getComponentDocumentData } from '../component-document-data';
+import { trackComponentEvent } from '../tracking';
+import { resolveDetachedInstance } from './resolve-detached-instance';
+
+type DetachParams = {
+	instanceId: string;
+	componentId: number;
+	trackingInfo: {
+		location: string;
+		secondaryLocation?: string;
+		trigger: string;
+	};
+};
+
+type DoReturn = {
+	detachedElement: V1Element;
+	detachedInstanceElementData: V1ElementModelProps;
+	editedComponentOnDetach: number | null;
+	overridablePropsBeforeDetach: OverridableProps | null;
+	originalInstanceModel: V1ElementModelProps;
+};
+
+export async function detachComponentInstance( {
+	instanceId,
+	componentId,
+	trackingInfo,
+}: DetachParams ): Promise< DoReturn > {
+	const instanceContainer = getContainer( instanceId );
+
+	if ( ! instanceContainer ) {
+		throw new Error( `Instance container with ID "${ instanceId }" not found.` );
+	}
+
+	const componentData = await getComponentDocumentData( componentId );
+
+	if ( ! componentData ) {
+		throw new Error( `Component with ID "${ componentId }" not found.` );
+	}
+
+	const rootElement = componentData.elements?.[ 0 ];
+
+	if ( ! rootElement ) {
+		throw new Error( `Component with ID "${ componentId }" has no root element.` );
+	}
+
+	const undoableDetach = undoable(
+		{
+			do: (): DoReturn => {
+				const overrides = extractInstanceOverrides( instanceContainer );
+				const detachedInstanceElementData = resolveDetachedInstance(
+					rootElement,
+					overrides
+				) as V1ElementModelProps;
+
+				const editedComponentOnDetach = selectCurrentComponentId( getState() );
+				// We need to store the overridable props of the current component before detach to restore them on undo.
+				const overridablePropsBeforeDetach = editedComponentOnDetach
+					? selectOverridableProps( getState(), editedComponentOnDetach ) ?? null
+					: null;
+
+				const originalInstanceModel = instanceContainer.model.toJSON();
+
+				const detachedElement = replaceElement( {
+					currentElementId: instanceId,
+					newElement: detachedInstanceElementData,
+					withHistory: false,
+				} );
+
+				const componentUid = selectComponent( getState(), componentId )?.uid;
+				trackComponentEvent( {
+					action: 'detached',
+					source: 'user',
+					component_uid: componentUid,
+					instance_id: instanceId,
+					location: trackingInfo.location,
+					secondary_location: trackingInfo.secondaryLocation,
+					trigger: trackingInfo.trigger,
+				} );
+
+				return {
+					detachedElement,
+					detachedInstanceElementData,
+					editedComponentOnDetach,
+					overridablePropsBeforeDetach,
+					originalInstanceModel,
+				};
+			},
+			undo: (
+				_: undefined,
+				{
+					detachedElement,
+					originalInstanceModel,
+					overridablePropsBeforeDetach,
+					editedComponentOnDetach,
+				}: DoReturn
+			): V1Element => {
+				const restoredInstance = replaceElement( {
+					currentElementId: detachedElement.id,
+					newElement: originalInstanceModel,
+					withHistory: false,
+				} );
+
+				const currentComponentId = selectCurrentComponentId( getState() );
+				if (
+					currentComponentId &&
+					currentComponentId === editedComponentOnDetach &&
+					overridablePropsBeforeDetach
+				) {
+					dispatch(
+						slice.actions.setOverridableProps( {
+							componentId: currentComponentId,
+							overridableProps: overridablePropsBeforeDetach,
+						} )
+					);
+				}
+
+				return restoredInstance;
+			},
+			redo: ( _: undefined, doReturn: DoReturn, restoredInstance: V1Element ) => {
+				const { detachedInstanceElementData } = doReturn;
+
+				const editedComponentOnDetach = selectCurrentComponentId( getState() );
+				// We need to store the overridable props of the current component before detach to restore them on undo.
+				const overridablePropsBeforeDetach = editedComponentOnDetach
+					? selectOverridableProps( getState(), editedComponentOnDetach ) ?? null
+					: null;
+
+				const detachedElement = replaceElement( {
+					currentElementId: restoredInstance.id,
+					newElement: detachedInstanceElementData,
+					withHistory: false,
+				} );
+
+				return {
+					...doReturn,
+					detachedElement,
+					editedComponentOnDetach,
+					overridablePropsBeforeDetach,
+				};
+			},
+		},
+		{
+			title: __( 'Detach from Component', 'elementor' ),
+			subtitle: __( 'Instance detached', 'elementor' ),
+		}
+	);
+
+	return undoableDetach();
+}
+
+function extractInstanceOverrides( instanceContainer: NonNullable< ReturnType< typeof getContainer > > ) {
+	const settings = instanceContainer.model.toJSON().settings;
+	const componentInstance = componentInstancePropTypeUtil.extract(
+		settings?.component_instance as ComponentInstanceProp
+	);
+
+	const overrides = componentInstanceOverridesPropTypeUtil.extract( componentInstance?.overrides );
+
+	return overrides ?? [];
+}

package/src/utils/detach-component-instance/index.ts

@@ -0,0 +1 @@
+export { detachComponentInstance } from './detach-component-instance';