@elementor/editor-components 4.0.0-564 → 4.0.0-591

package/src/{prevent-non-atomic-nesting.ts → extended/prevent-non-atomic-nesting.ts}

@@ -4,7 +4,7 @@ import { type NotificationData, notify } from '@elementor/editor-notifications';
 import { blockCommand } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
-import { type ExtendedWindow } from './types';
+import { type ExtendedWindow } from '../types';
 import { isEditingComponent } from './utils/is-editing-component';
 
 type CreateArgs = {

package/src/{store → extended/store}/actions/add-overridable-group.ts

@@ -1,8 +1,8 @@
 import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
 
-import { type ComponentId, type OverridablePropsGroup } from '../../types';
-import { type Source, trackComponentEvent } from '../../utils/tracking';
-import { selectCurrentComponent, selectOverridableProps, slice } from '../store';
+import { selectCurrentComponent, selectOverridableProps, slice } from '../../../store/store';
+import { type ComponentId, type OverridablePropsGroup } from '../../../types';
+import { type Source, trackComponentEvent } from '../../../utils/tracking';
 
 type AddGroupParams = {
 	componentId: ComponentId;

package/src/{store → extended/store}/actions/create-unpublished-component.ts

@@ -4,12 +4,12 @@ import { __dispatch as dispatch } from '@elementor/store';
 import { generateUniqueId } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
+import { slice } from '../../../store/store';
+import { type OriginalElementData, type OverridableProps } from '../../../types';
+import { type Source, trackComponentEvent } from '../../../utils/tracking';
 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 { type OriginalElementData, type OverridableProps } from '../../types';
+import { replaceElementWithComponent } from '../../utils/replace-element-with-component';
 import { revertAllOverridablesInElementData } from '../../utils/revert-overridable-settings';
-import { type Source, trackComponentEvent } from '../../utils/tracking';
-import { slice } from '../store';
 
 type CreateUnpublishedComponentParams = {
 	name: string;

package/src/{store → extended/store}/actions/delete-overridable-group.ts

@@ -1,7 +1,7 @@
 import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
 
-import { type ComponentId } from '../../types';
-import { selectOverridableProps, slice } from '../store';
+import { selectOverridableProps, slice } from '../../../store/store';
+import { type ComponentId } from '../../../types';
 import { deleteGroup } from '../utils/groups-transformers';
 
 type DeleteGroupParams = {

package/src/extended/store/actions/delete-overridable-prop.ts

@@ -0,0 +1,70 @@
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+
+import { selectCurrentComponent, selectOverridableProps, slice } from '../../../store/store';
+import { type ComponentId, type OverridableProp } from '../../../types';
+import { type Source, trackComponentEvent } from '../../../utils/tracking';
+import { revertElementOverridableSetting } from '../../utils/revert-overridable-settings';
+import { removePropFromAllGroups } from '../utils/groups-transformers';
+
+type DeletePropParams = {
+	componentId: ComponentId;
+	propKey: string | string[];
+	source: Source;
+};
+
+export function deleteOverridableProp( { componentId, propKey, source }: DeletePropParams ): void {
+	const overridableProps = selectOverridableProps( getState(), componentId );
+
+	if ( ! overridableProps || Object.keys( overridableProps.props ).length === 0 ) {
+		return;
+	}
+
+	const propKeysToDelete = Array.isArray( propKey ) ? propKey : [ propKey ];
+	const deletedProps: OverridableProp[] = [];
+
+	for ( const key of propKeysToDelete ) {
+		const prop = overridableProps.props[ key ];
+
+		if ( ! prop ) {
+			continue;
+		}
+
+		deletedProps.push( prop );
+		revertElementOverridableSetting( prop.elementId, prop.propKey, prop.originValue, key );
+	}
+
+	if ( deletedProps.length === 0 ) {
+		return;
+	}
+
+	const remainingProps = Object.fromEntries(
+		Object.entries( overridableProps.props ).filter( ( [ key ] ) => ! propKeysToDelete.includes( key ) )
+	);
+
+	const updatedGroups = removePropFromAllGroups( overridableProps.groups, propKey );
+
+	dispatch(
+		slice.actions.setOverridableProps( {
+			componentId,
+			overridableProps: {
+				...overridableProps,
+				props: remainingProps,
+				groups: updatedGroups,
+			},
+		} )
+	);
+
+	const currentComponent = selectCurrentComponent( getState() );
+
+	for ( const prop of deletedProps ) {
+		trackComponentEvent( {
+			action: 'propertyRemoved',
+			source,
+			component_uid: currentComponent?.uid,
+			property_id: prop.overrideKey,
+			property_path: prop.propKey,
+			property_name: prop.label,
+			element_type: prop.widgetType ?? prop.elType,
+		} );
+	}
+}

package/src/{store → extended/store}/actions/rename-overridable-group.ts

@@ -1,7 +1,7 @@
 import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
 
-import { type ComponentId } from '../../types';
-import { selectOverridableProps, slice } from '../store';
+import { selectOverridableProps, slice } from '../../../store/store';
+import { type ComponentId } from '../../../types';
 import { renameGroup } from '../utils/groups-transformers';
 
 type RenameGroupParams = {

package/src/{store → extended/store}/actions/reorder-group-props.ts

@@ -1,7 +1,7 @@
 import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
 
-import { type ComponentId } from '../../types';
-import { selectOverridableProps, slice } from '../store';
+import { selectOverridableProps, slice } from '../../../store/store';
+import { type ComponentId } from '../../../types';
 
 type ReorderGroupPropsParams = {
 	componentId: ComponentId;

package/src/{store → extended/store}/actions/reorder-overridable-groups.ts

@@ -1,7 +1,7 @@
 import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
 
-import { type ComponentId } from '../../types';
-import { selectOverridableProps, slice } from '../store';
+import { selectOverridableProps, slice } from '../../../store/store';
+import { type ComponentId } from '../../../types';
 
 type ReorderGroupsParams = {
 	componentId: ComponentId;

package/src/{store → extended/store}/actions/reset-sanitized-components.ts

@@ -1,6 +1,6 @@
 import { __dispatch as dispatch } from '@elementor/store';
 
-import { slice } from '../store';
+import { slice } from '../../../store/store';
 
 export function resetSanitizedComponents() {
 	dispatch( slice.actions.resetSanitizedComponents() );

package/src/{store → extended/store}/actions/set-overridable-prop.ts

@@ -2,9 +2,9 @@ import { type PropValue } from '@elementor/editor-props';
 import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
 import { generateUniqueId } from '@elementor/utils';
 
-import { type OriginPropFields, type OverridableProp } from '../../types';
-import { type Source, trackComponentEvent } from '../../utils/tracking';
-import { selectCurrentComponent, selectOverridableProps, slice } from '../store';
+import { selectCurrentComponent, selectOverridableProps, slice } from '../../../store/store';
+import { type OriginPropFields, type OverridableProp } from '../../../types';
+import { type Source, trackComponentEvent } from '../../../utils/tracking';
 import {
 	addPropToGroup,
 	ensureGroupInOrder,

package/src/{store → extended/store}/actions/update-component-sanitized-attribute.ts

@@ -1,7 +1,7 @@
 import { __dispatch as dispatch } from '@elementor/store';
 
-import { type ComponentId } from '../../types';
-import { type SanitizeAttributes, slice } from '../store';
+import { type SanitizeAttributes, slice } from '../../../store/store';
+import { type ComponentId } from '../../../types';
 
 export function updateComponentSanitizedAttribute( componentId: ComponentId, attribute: SanitizeAttributes ) {
 	dispatch( slice.actions.updateComponentSanitizedAttribute( { componentId, attribute } ) );

package/src/{store → extended/store}/actions/update-current-component.ts

@@ -1,7 +1,7 @@
-import { setDocumentModifiedStatus, type V1Document } from '@elementor/editor-documents';
+import { type V1Document } from '@elementor/editor-documents';
 import { __getStore as getStore } from '@elementor/store';
 
-import { type ComponentsPathItem, slice } from '../store';
+import { type ComponentsPathItem, slice } from '../../../store/store';
 
 export function updateCurrentComponent( {
 	path,
@@ -19,15 +19,3 @@ export function updateCurrentComponent( {
 	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 → extended/store}/actions/update-overridable-prop-params.ts

@@ -1,7 +1,7 @@
 import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
 
-import { type ComponentId, type OverridableProp } from '../../types';
-import { selectOverridableProps, slice } from '../store';
+import { selectOverridableProps, slice } from '../../../store/store';
+import { type ComponentId, type OverridableProp } from '../../../types';
 import { movePropBetweenGroups } from '../utils/groups-transformers';
 
 type UpdatePropParams = {

package/src/{store → extended/store}/utils/groups-transformers.ts

@@ -1,11 +1,13 @@
 import { generateUniqueId } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
-import { type OverridableProp, type OverridableProps, type OverridablePropsGroup } from '../../types';
+import { type OverridableProp, type OverridableProps, type OverridablePropsGroup } from '../../../types';
 
 type Groups = OverridableProps[ 'groups' ];
 
-export function removePropFromAllGroups( groups: Groups, propKey: string ): Groups {
+export function removePropFromAllGroups( groups: Groups, propKey: string | string[] ): Groups {
+	const propKeys = Array.isArray( propKey ) ? propKey : [ propKey ];
+
 	return {
 		...groups,
 		items: Object.fromEntries(
@@ -13,7 +15,7 @@ export function removePropFromAllGroups( groups: Groups, propKey: string ): Grou
 				groupId,
 				{
 					...group,
-					props: group.props.filter( ( p ) => p !== propKey ),
+					props: group.props.filter( ( p ) => ! propKeys.includes( p ) ),
 				},
 			] )
 		),
@@ -93,7 +95,7 @@ export function resolveOrCreateGroup( groups: Groups, requestedGroupId?: string
 	return createGroup( groups, requestedGroupId );
 }
 
-export function createGroup( groups: Groups, groupId?: string, label?: string ): ResolvedGroup {
+function createGroup( groups: Groups, groupId?: string, label?: string ): ResolvedGroup {
 	const newGroupId = groupId || generateUniqueId( 'group' );
 	const newLabel = label || __( 'Default', 'elementor' );
 

package/src/extended/sync/before-save.ts

@@ -0,0 +1,52 @@
+import { type V1Document } from '@elementor/editor-documents';
+import { type V1Element, type V1ElementData } from '@elementor/editor-elements';
+
+import { publishDraftComponentsInPageBeforeSave } from '../../sync/publish-draft-components-in-page-before-save';
+import { type DocumentSaveStatus } from '../../types';
+import { setComponentOverridablePropsSettingsBeforeSave } from '../sync/set-component-overridable-props-settings-before-save';
+import { updateArchivedComponentBeforeSave } from '../sync/update-archived-component-before-save';
+import { updateComponentTitleBeforeSave } from '../sync/update-component-title-before-save';
+import { createComponentsBeforeSave } from './create-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( [
+		syncComponents( { elements, status } ),
+		setComponentOverridablePropsSettingsBeforeSave( { container } ),
+	] );
+};
+
+// These operations run sequentially to prevent race conditions when multiple
+// edits occur on the same component simultaneously.
+// TODO: Consolidate these into a single PUT /components endpoint.
+const syncComponents = async ( { elements, status }: { elements: V1ElementData[]; status: DocumentSaveStatus } ) => {
+	// This order is important - first update existing components, then create new components,
+	// Since new component validation depends on the existing components (preventing duplicate names).
+	await updateExistingComponentsBeforeSave( { elements, status } );
+	await createComponentsBeforeSave( { elements, status } );
+};
+
+const updateExistingComponentsBeforeSave = async ( {
+	elements,
+	status,
+}: {
+	elements: V1ElementData[];
+	status: DocumentSaveStatus;
+} ) => {
+	await updateComponentTitleBeforeSave( status );
+	await updateArchivedComponentBeforeSave( status );
+	await publishDraftComponentsInPageBeforeSave( { elements, status } );
+};

package/src/{sync → extended/sync}/cleanup-overridable-props-on-delete.ts

@@ -1,9 +1,9 @@
 import { getAllDescendants, type V1Element } from '@elementor/editor-elements';
-import { registerDataHook } from '@elementor/editor-v1-adapters';
-import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+import { type HookOptions, registerDataHook } from '@elementor/editor-v1-adapters';
+import { __getState as getState } from '@elementor/store';
 
-import { type ComponentsSlice, selectCurrentComponentId, selectOverridableProps, slice } from '../store/store';
-import { removePropFromAllGroups } from '../store/utils/groups-transformers';
+import { type ComponentsSlice, selectCurrentComponentId, selectOverridableProps } from '../../store/store';
+import { deleteOverridableProp } from '../store/actions/delete-overridable-prop';
 
 type DeleteCommandArgs = {
 	container?: V1Element;
@@ -11,7 +11,14 @@ type DeleteCommandArgs = {
 };
 
 export function initCleanupOverridablePropsOnDelete() {
-	registerDataHook( 'dependency', 'document/elements/delete', ( args: DeleteCommandArgs ) => {
+	// This hook is not a real dependency - it doesn't block the execution of the command in any case, only perform side effect.
+	// We use `dependency` and not `after` hook because the `after` hook doesn't include the children of a deleted container
+	// in the callback parameters (as they already were deleted).
+	registerDataHook( 'dependency', 'document/elements/delete', ( args: DeleteCommandArgs, options?: HookOptions ) => {
+		if ( isPartOfMoveCommand( options ) ) {
+			return true;
+		}
+
 		const state = getState() as ComponentsSlice | undefined;
 
 		if ( ! state ) {
@@ -50,25 +57,7 @@ export function initCleanupOverridablePropsOnDelete() {
 			return true;
 		}
 
-		const remainingProps = Object.fromEntries(
-			Object.entries( overridableProps.props ).filter( ( [ propKey ] ) => ! propKeysToDelete.includes( propKey ) )
-		);
-
-		let updatedGroups = overridableProps.groups;
-		for ( const propKey of propKeysToDelete ) {
-			updatedGroups = removePropFromAllGroups( updatedGroups, propKey );
-		}
-
-		dispatch(
-			slice.actions.setOverridableProps( {
-				componentId: currentComponentId,
-				overridableProps: {
-					...overridableProps,
-					props: remainingProps,
-					groups: updatedGroups,
-				},
-			} )
-		);
+		deleteOverridableProp( { componentId: currentComponentId, propKey: propKeysToDelete, source: 'system' } );
 
 		return true;
 	} );
@@ -83,3 +72,14 @@ function collectDeletedElementIds( containers: V1Element[] ): string[] {
 
 	return elementIds;
 }
+
+function isPartOfMoveCommand( options?: HookOptions ): boolean {
+	// Skip cleanup if this delete is part of a move command
+	// Move = delete + create, and we don't want to delete the overridable prop in this case.
+	// See assets/dev/js/editor/document/elements/commands/move.js
+	const isMoveCommandInTrace =
+		options?.commandsCurrentTrace?.includes( 'document/elements/move' ) ||
+		options?.commandsCurrentTrace?.includes( 'document/repeater/move' );
+
+	return Boolean( isMoveCommandInTrace );
+}

package/src/{sync → extended/sync}/create-components-before-save.ts

@@ -1,10 +1,10 @@
 import { updateElementSettings, type V1ElementData } from '@elementor/editor-elements';
 import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
 
-import { apiClient } from '../api';
-import { type ComponentInstanceProp } from '../prop-types/component-instance-prop-type';
-import { selectUnpublishedComponents, slice } from '../store/store';
-import { type DocumentSaveStatus, type UnpublishedComponent } from '../types';
+import { apiClient } from '../../api';
+import { type ComponentInstanceProp } from '../../prop-types/component-instance-prop-type';
+import { selectUnpublishedComponents, slice } from '../../store/store';
+import { type DocumentSaveStatus, type UnpublishedComponent } from '../../types';
 
 export async function createComponentsBeforeSave( {
 	elements,

package/src/{sync → extended/sync}/handle-component-edit-mode-container.ts

@@ -2,7 +2,7 @@ import { type V1Document } from '@elementor/editor-documents';
 import { createElement, selectElement, type V1Element } from '@elementor/editor-elements';
 import { registerDataHook } from '@elementor/editor-v1-adapters';
 
-import { COMPONENT_DOCUMENT_TYPE } from '../components/consts';
+import { COMPONENT_DOCUMENT_TYPE } from '../consts';
 import { isEditingComponent } from '../utils/is-editing-component';
 
 const V4_DEFAULT_CONTAINER_TYPE = 'e-flexbox';

package/src/{sync → extended/sync}/revert-overridables-on-copy-or-duplicate.ts

@@ -1,7 +1,7 @@
 import { type V1Element, type V1ElementData } from '@elementor/editor-elements';
 import { registerDataHook } from '@elementor/editor-v1-adapters';
 
-import { type ExtendedWindow } from '../types';
+import { type ExtendedWindow } from '../../types';
 import { isEditingComponent } from '../utils/is-editing-component';
 import {
 	revertAllOverridablesInContainer,

package/src/{sync → extended/sync}/set-component-overridable-props-settings-before-save.ts

@@ -2,8 +2,8 @@ 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';
+import { selectOverridableProps } from '../../store/store';
+import { COMPONENT_DOCUMENT_TYPE } from '../consts';
 
 export const setComponentOverridablePropsSettingsBeforeSave = ( {
 	container,

package/src/{sync → extended/sync}/update-archived-component-before-save.ts

@@ -1,9 +1,9 @@
 import { type NotificationData, notify } from '@elementor/editor-notifications';
 import { __getState as getState } from '@elementor/store';
 
-import { apiClient } from '../api';
-import { selectArchivedThisSession } from '../store/store';
-import { type DocumentSaveStatus } from '../types';
+import { apiClient } from '../../api';
+import { selectArchivedThisSession } from '../../store/store';
+import { type DocumentSaveStatus } from '../../types';
 
 const failedNotification = ( message: string ): NotificationData => ( {
 	type: 'error',

package/src/{sync → extended/sync}/update-component-title-before-save.ts

@@ -1,8 +1,8 @@
 import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
 
-import { apiClient } from '../api';
-import { selectUpdatedComponentNames, slice } from '../store/store';
-import { type DocumentSaveStatus } from '../types';
+import { apiClient } from '../../api';
+import { selectUpdatedComponentNames, slice } from '../../store/store';
+import { type DocumentSaveStatus } from '../../types';
 
 export const updateComponentTitleBeforeSave = async ( status: DocumentSaveStatus ) => {
 	const updatedComponentNames = selectUpdatedComponentNames( getState() );

package/src/{utils → extended/utils}/is-editing-component.ts

@@ -1,6 +1,6 @@
 import { __getStore as getStore } from '@elementor/store';
 
-import { type ComponentsSlice, selectCurrentComponentId } from '../store/store';
+import { type ComponentsSlice, selectCurrentComponentId } from '../../store/store';
 
 export function isEditingComponent(): boolean {
 	const state = getStore()?.getState() as ComponentsSlice | undefined;

package/src/extended/utils/replace-element-with-component.ts

@@ -0,0 +1,11 @@
+import { replaceElement, type V1ElementData } from '@elementor/editor-elements';
+
+import { type ComponentInstanceParams, createComponentModel } from '../../utils/create-component-model';
+
+export const replaceElementWithComponent = async ( element: V1ElementData, component: ComponentInstanceParams ) => {
+	return await replaceElement( {
+		currentElement: element,
+		newElement: createComponentModel( component ),
+		withHistory: false,
+	} );
+};

package/src/{utils → extended/utils}/revert-overridable-settings.ts

@@ -8,22 +8,22 @@ import {
 	type V1ElementSettingsProps,
 } from '@elementor/editor-elements';
 
-import { COMPONENT_WIDGET_TYPE } from '../create-component-type';
+import { COMPONENT_WIDGET_TYPE } from '../../create-component-type';
 import {
 	type ComponentInstanceOverrideProp,
 	componentInstanceOverridePropTypeUtil,
-} from '../prop-types/component-instance-override-prop-type';
+} from '../../prop-types/component-instance-override-prop-type';
 import {
 	componentInstanceOverridesPropTypeUtil,
 	type ComponentInstanceOverridesPropValue,
-} from '../prop-types/component-instance-overrides-prop-type';
+} from '../../prop-types/component-instance-overrides-prop-type';
 import {
 	type ComponentInstanceProp,
 	componentInstancePropTypeUtil,
 	type ComponentInstancePropValue,
-} from '../prop-types/component-instance-prop-type';
-import { componentOverridablePropTypeUtil } from '../prop-types/component-overridable-prop-type';
-import { isComponentInstance } from './is-component-instance';
+} from '../../prop-types/component-instance-prop-type';
+import { componentOverridablePropTypeUtil } from '../../prop-types/component-overridable-prop-type';
+import { isComponentInstance } from '../../utils/is-component-instance';
 
 type RevertSettingsResult = {
 	hasChanges: boolean;

package/src/hooks/use-sanitize-overridable-props.ts

@@ -1,10 +1,15 @@
-import { deleteOverridableProp } from '../store/actions/delete-overridable-prop';
-import { updateComponentSanitizedAttribute } from '../store/actions/update-component-sanitized-attribute';
+import { deleteOverridableProp } from '../extended/store/actions/delete-overridable-prop';
+import { updateComponentSanitizedAttribute } from '../extended/store/actions/update-component-sanitized-attribute';
 import { useIsSanitizedComponent, useOverridableProps } from '../store/store';
 import { type ComponentId, type OverridableProps } from '../types';
 import { filterValidOverridableProps } from '../utils/filter-valid-overridable-props';
 
-export function useSanitizeOverridableProps( componentId: ComponentId | null ): OverridableProps | undefined {
+export function useSanitizeOverridableProps(
+	componentId: ComponentId | null,
+	// instanceElementId is used to find the component inner elements,
+	// and should be passed when editing component instance (not in component edit mode)
+	instanceElementId?: string
+): OverridableProps | undefined {
 	const overridableProps = useOverridableProps( componentId );
 	const isSanitized = useIsSanitizedComponent( componentId, 'overridableProps' );
 
@@ -16,7 +21,7 @@ export function useSanitizeOverridableProps( componentId: ComponentId | null ):
 		return overridableProps;
 	}
 
-	const filteredOverridableProps = filterValidOverridableProps( overridableProps );
+	const filteredOverridableProps = filterValidOverridableProps( overridableProps, instanceElementId );
 
 	const originalPropsArray = Object.entries( overridableProps.props ?? {} );
 	const propsToDelete = originalPropsArray.filter( ( [ key ] ) => ! filteredOverridableProps.props[ key ] );