@elementor/editor-components 4.0.0-665 → 4.0.0-667

package/src/extended/store/utils/groups-transformers.ts

@@ -1,187 +0,0 @@
-import { generateUniqueId } from '@elementor/utils';
-import { __ } from '@wordpress/i18n';
-
-import { type OverridableProp, type OverridableProps, type OverridablePropsGroup } from '../../../types';
-
-type Groups = OverridableProps[ 'groups' ];
-
-export function removePropFromAllGroups( groups: Groups, propKey: string | string[] ): Groups {
-	const propKeys = Array.isArray( propKey ) ? propKey : [ propKey ];
-
-	return {
-		...groups,
-		items: Object.fromEntries(
-			Object.entries( groups.items ).map( ( [ groupId, group ] ) => [
-				groupId,
-				{
-					...group,
-					props: group.props.filter( ( p ) => ! propKeys.includes( p ) ),
-				},
-			] )
-		),
-	};
-}
-
-export function addPropToGroup( groups: Groups, groupId: string, propKey: string ): Groups {
-	const group = groups.items[ groupId ];
-
-	if ( ! group ) {
-		return groups;
-	}
-
-	if ( group.props.includes( propKey ) ) {
-		return groups;
-	}
-
-	return {
-		...groups,
-		items: {
-			...groups.items,
-			[ groupId ]: {
-				...group,
-				props: [ ...group.props, propKey ],
-			},
-		},
-	};
-}
-
-export function movePropBetweenGroups(
-	groups: Groups,
-	propKey: string,
-	fromGroupId: string,
-	toGroupId: string
-): Groups {
-	if ( fromGroupId === toGroupId ) {
-		return groups;
-	}
-
-	const withoutProp = removePropFromGroup( groups, fromGroupId, propKey );
-	return addPropToGroup( withoutProp, toGroupId, propKey );
-}
-
-export function removePropFromGroup( groups: Groups, groupId: string, propKey: string ): Groups {
-	const group = groups.items[ groupId ];
-
-	if ( ! group ) {
-		return groups;
-	}
-
-	return {
-		...groups,
-		items: {
-			...groups.items,
-			[ groupId ]: {
-				...group,
-				props: group.props.filter( ( p ) => p !== propKey ),
-			},
-		},
-	};
-}
-
-type ResolvedGroup = {
-	groups: Groups;
-	groupId: string;
-};
-
-export function resolveOrCreateGroup( groups: Groups, requestedGroupId?: string ): ResolvedGroup {
-	if ( requestedGroupId && groups.items[ requestedGroupId ] ) {
-		return { groups, groupId: requestedGroupId };
-	}
-
-	if ( ! requestedGroupId && groups.order.length > 0 ) {
-		return { groups, groupId: groups.order[ 0 ] };
-	}
-
-	return createGroup( groups, requestedGroupId );
-}
-
-function createGroup( groups: Groups, groupId?: string, label?: string ): ResolvedGroup {
-	const newGroupId = groupId || generateUniqueId( 'group' );
-	const newLabel = label || __( 'Default', 'elementor' );
-
-	return {
-		groups: {
-			...groups,
-			items: {
-				...groups.items,
-				[ newGroupId ]: {
-					id: newGroupId,
-					label: newLabel,
-					props: [],
-				},
-			},
-			order: [ ...groups.order, newGroupId ],
-		},
-		groupId: newGroupId,
-	};
-}
-
-export function removePropsFromState(
-	overridableProps: OverridableProps,
-	propsToRemove: OverridableProp[]
-): OverridableProps {
-	const overrideKeysToRemove = propsToRemove.map( ( prop ) => prop.overrideKey );
-
-	const remainingProps = Object.fromEntries(
-		Object.entries( overridableProps.props ).filter( ( [ , prop ] ) => ! propsToRemove.includes( prop ) )
-	);
-
-	const updatedGroupItems = Object.fromEntries(
-		Object.entries( overridableProps.groups.items ).map(
-			( [ groupId, group ]: [ string, OverridablePropsGroup ] ) => [
-				groupId,
-				{
-					...group,
-					props: group.props.filter( ( prop ) => ! overrideKeysToRemove.includes( prop ) ),
-				},
-			]
-		)
-	);
-
-	return {
-		props: remainingProps,
-		groups: {
-			items: updatedGroupItems,
-			order: overridableProps.groups.order.filter( ( groupId ) => ! overrideKeysToRemove.includes( groupId ) ),
-		},
-	};
-}
-
-export function ensureGroupInOrder( groups: Groups, groupId: string ): Groups {
-	if ( groups.order.includes( groupId ) ) {
-		return groups;
-	}
-
-	return {
-		...groups,
-		order: [ ...groups.order, groupId ],
-	};
-}
-
-export function deleteGroup( groups: Groups, groupId: string ): Groups {
-	const { [ groupId ]: removed, ...remainingItems } = groups.items;
-
-	return {
-		items: remainingItems,
-		order: groups.order.filter( ( id ) => id !== groupId ),
-	};
-}
-
-export function renameGroup( groups: Groups, groupId: string, newLabel: string ): Groups {
-	const group = groups.items[ groupId ];
-
-	if ( ! group ) {
-		return groups;
-	}
-
-	return {
-		...groups,
-		items: {
-			...groups.items,
-			[ groupId ]: {
-				...group,
-				label: newLabel,
-			},
-		},
-	};
-}

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

@@ -1,52 +0,0 @@
-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/extended/sync/cleanup-overridable-props-on-delete.ts

@@ -1,78 +0,0 @@
-import { getAllDescendants, type V1Element } from '@elementor/editor-elements';
-import { type HookOptions, registerDataHook } from '@elementor/editor-v1-adapters';
-
-import { componentsSelectors } from '../../store/selectors';
-import { deleteOverridableProp } from '../store/actions/delete-overridable-prop';
-
-type DeleteCommandArgs = {
-	container?: V1Element;
-	containers?: V1Element[];
-};
-
-export function initCleanupOverridablePropsOnDelete() {
-	// 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 currentComponentId = componentsSelectors.getCurrentComponentId();
-
-		if ( ! currentComponentId ) {
-			return true;
-		}
-
-		const overridableProps = componentsSelectors.getOverridableProps( currentComponentId );
-
-		if ( ! overridableProps || Object.keys( overridableProps.props ).length === 0 ) {
-			return true;
-		}
-
-		const containers = args.containers ?? ( args.container ? [ args.container ] : [] );
-
-		if ( containers.length === 0 ) {
-			return true;
-		}
-
-		const deletedElementIds = collectDeletedElementIds( containers );
-
-		if ( deletedElementIds.length === 0 ) {
-			return true;
-		}
-
-		const propKeysToDelete = Object.entries( overridableProps.props )
-			.filter( ( [ , prop ] ) => deletedElementIds.includes( prop.elementId ) )
-			.map( ( [ propKey ] ) => propKey );
-
-		if ( propKeysToDelete.length === 0 ) {
-			return true;
-		}
-
-		deleteOverridableProp( { componentId: currentComponentId, propKey: propKeysToDelete, source: 'system' } );
-
-		return true;
-	} );
-}
-
-function collectDeletedElementIds( containers: V1Element[] ): string[] {
-	const elementIds = containers
-		.filter( Boolean )
-		.flatMap( ( container ) => [ container, ...getAllDescendants( container ) ] )
-		.map( ( element ) => element.model?.get?.( 'id' ) ?? element.id )
-		.filter( ( id ): id is string => Boolean( id ) );
-
-	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/extended/sync/create-components-before-save.ts

@@ -1,111 +0,0 @@
-import { updateElementSettings, type V1ElementData } from '@elementor/editor-elements';
-
-import { apiClient } from '../../api';
-import { type ComponentInstanceProp } from '../../prop-types/component-instance-prop-type';
-import { componentsActions } from '../../store/dispatchers';
-import { componentsSelectors } from '../../store/selectors';
-import { type DocumentSaveStatus, type UnpublishedComponent } from '../../types';
-
-export async function createComponentsBeforeSave( {
-	elements,
-	status,
-}: {
-	elements: V1ElementData[];
-	status: DocumentSaveStatus;
-} ) {
-	const unpublishedComponents = componentsSelectors.getUnpublishedComponents();
-
-	if ( ! unpublishedComponents.length ) {
-		return;
-	}
-
-	try {
-		const uidToComponentId = await createComponents( unpublishedComponents, status );
-
-		updateComponentInstances( elements, uidToComponentId );
-
-		componentsActions.add(
-			unpublishedComponents.map( ( component ) => ( {
-				id: uidToComponentId.get( component.uid ) as number,
-				name: component.name,
-				uid: component.uid,
-				overridableProps: component.overridableProps ? component.overridableProps : undefined,
-			} ) )
-		);
-		componentsActions.resetUnpublished();
-	} catch ( error ) {
-		const failedUids = unpublishedComponents.map( ( component ) => component.uid );
-		componentsActions.removeUnpublished( failedUids );
-
-		throw new Error( `Failed to publish components: ${ 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,
-			settings: component.overridableProps ? { overridable_props: component.overridableProps } : undefined,
-		} ) ),
-	} );
-
-	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 ComponentInstanceProp )?.value
-			?.component_id.value;
-
-		if ( currentComponentId && uidToComponentId.has( currentComponentId.toString() ) ) {
-			return {
-				shouldUpdate: true,
-				newComponentId: uidToComponentId.get( currentComponentId.toString() ) 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: { $$type: 'number', value: componentId },
-				},
-			},
-		},
-		withHistory: false,
-	} );
-}

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

@@ -1,114 +0,0 @@
-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 '../consts';
-import { isEditingComponent } from '../utils/is-editing-component';
-
-const V4_DEFAULT_CONTAINER_TYPE = 'e-flexbox';
-
-type Container = Omit< V1Element, 'children' | 'parent' > & {
-	document?: V1Document;
-	parent?: Container;
-	children?: Container[];
-};
-
-export function initHandleComponentEditModeContainer() {
-	initRedirectDropIntoComponent();
-	initHandleTopLevelElementDelete();
-}
-
-export type DeleteArgs = {
-	container?: Container;
-	containers?: Container[];
-};
-
-function initHandleTopLevelElementDelete() {
-	registerDataHook( 'after', 'document/elements/delete', ( args: DeleteArgs ) => {
-		if ( ! isEditingComponent() ) {
-			return;
-		}
-
-		const containers = args.containers ?? ( args.container ? [ args.container ] : [] );
-
-		for ( const container of containers ) {
-			if ( ! container.parent || ! isComponent( container.parent ) ) {
-				continue;
-			}
-
-			const component = container.parent;
-			const isComponentEmpty = component.children?.length === 0;
-
-			if ( isComponentEmpty ) {
-				createEmptyTopLevelContainer( container.parent );
-			}
-		}
-	} );
-}
-
-type DropArgs = {
-	container?: Container;
-	containers?: Container[];
-	model?: unknown;
-	options?: unknown;
-};
-
-function initRedirectDropIntoComponent() {
-	registerDataHook( 'dependency', 'preview/drop', ( args: DropArgs ) => {
-		if ( ! isEditingComponent() ) {
-			return true;
-		}
-
-		const containers = args.containers ?? ( args.container ? [ args.container ] : [] );
-
-		for ( const container of containers ) {
-			if ( ! isComponent( container ) ) {
-				continue;
-			}
-
-			const { shouldRedirect, container: redirectedContainer } = getComponentContainer( container );
-
-			if ( ! shouldRedirect ) {
-				continue;
-			}
-
-			if ( args.containers ) {
-				const index = args.containers.indexOf( container );
-				args.containers[ index ] = redirectedContainer;
-			} else {
-				args.container = redirectedContainer;
-			}
-		}
-
-		return true;
-	} );
-}
-
-function createEmptyTopLevelContainer( container: Container ) {
-	const newContainer = createElement( {
-		container,
-		model: { elType: V4_DEFAULT_CONTAINER_TYPE },
-	} );
-
-	selectElement( newContainer.id );
-}
-
-function getComponentContainer( container: Container ): { shouldRedirect: boolean; container: Container } {
-	const topLevelElement = container.children?.[ 0 ];
-
-	if ( topLevelElement ) {
-		return { shouldRedirect: true, container: topLevelElement };
-	}
-
-	return { shouldRedirect: false, container };
-}
-
-function isComponent( container: Container ): boolean {
-	const isDocument = container.id === 'document';
-
-	if ( ! isDocument ) {
-		return false;
-	}
-
-	return container.document?.config.type === COMPONENT_DOCUMENT_TYPE;
-}