@elementor/editor-components 4.0.0-manual → 4.0.1

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

@@ -1,85 +0,0 @@
-import { getAllDescendants, type V1Element } from '@elementor/editor-elements';
-import { type HookOptions, registerDataHook } from '@elementor/editor-v1-adapters';
-import { __getState as getState } from '@elementor/store';
-
-import { type ComponentsSlice, selectCurrentComponentId, selectOverridableProps } from '../../store/store';
-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 state = getState() as ComponentsSlice | undefined;
-
-		if ( ! state ) {
-			return true;
-		}
-
-		const currentComponentId = selectCurrentComponentId( state );
-
-		if ( ! currentComponentId ) {
-			return true;
-		}
-
-		const overridableProps = selectOverridableProps( state, 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,113 +0,0 @@
-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';
-
-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,
-					overridableProps: component.overridableProps ? component.overridableProps : undefined,
-				} ) )
-			)
-		);
-		dispatch( slice.actions.resetUnpublished() );
-	} catch ( error ) {
-		const failedUids = unpublishedComponents.map( ( component ) => component.uid );
-		dispatch( slice.actions.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;
-}

package/src/extended/sync/prevent-non-atomic-nesting.ts

@@ -1,198 +0,0 @@
-import { isAtomicWidget } from '@elementor/editor-canvas';
-import { getAllDescendants, getElementType, type V1Element } from '@elementor/editor-elements';
-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 { isEditingComponent } from '../utils/is-editing-component';
-
-type CreateArgs = {
-	container?: V1Element;
-	model?: {
-		elType?: string;
-		widgetType?: string;
-	};
-};
-
-type MoveArgs = {
-	containers?: V1Element[];
-	container?: V1Element;
-	target?: V1Element;
-};
-
-type PasteArgs = {
-	containers?: V1Element[];
-	container?: V1Element;
-	storageType?: string;
-};
-
-export type ClipboardElement = {
-	elType?: string;
-	widgetType?: string;
-	elements?: ClipboardElement[];
-};
-
-type StorageContent = {
-	clipboard?: {
-		elements?: ClipboardElement[];
-	};
-};
-
-const NON_ATOMIC_ELEMENT_ALERT: NotificationData = {
-	type: 'default',
-	message: __( "This widget isn't compatible with components. Use atomic elements instead.", 'elementor' ),
-	id: 'non-atomic-element-blocked',
-};
-
-export function initNonAtomicNestingPrevention() {
-	blockCommand( {
-		command: 'document/elements/create',
-		condition: blockNonAtomicCreate,
-	} );
-
-	blockCommand( {
-		command: 'document/elements/move',
-		condition: blockNonAtomicMove,
-	} );
-
-	blockCommand( {
-		command: 'document/elements/paste',
-		condition: blockNonAtomicPaste,
-	} );
-}
-
-export function isElementAtomic( elementType: string ): boolean {
-	return getElementType( elementType ) !== null;
-}
-
-function blockNonAtomicCreate( args: CreateArgs ): boolean {
-	if ( ! isEditingComponent() ) {
-		return false;
-	}
-
-	const { model } = args;
-	const elementType = model?.widgetType || model?.elType;
-
-	if ( ! elementType ) {
-		return false;
-	}
-
-	if ( isElementAtomic( elementType ) ) {
-		return false;
-	}
-
-	notify( NON_ATOMIC_ELEMENT_ALERT );
-	return true;
-}
-
-function blockNonAtomicMove( args: MoveArgs ): boolean {
-	if ( ! isEditingComponent() ) {
-		return false;
-	}
-
-	const { containers = [ args.container ] } = args;
-
-	const hasNonAtomicElement = containers.some( ( container ) => {
-		if ( ! container ) {
-			return false;
-		}
-
-		const allElements = getAllDescendants( container );
-
-		return allElements.some( ( element ) => ! isAtomicWidget( element ) );
-	} );
-
-	if ( hasNonAtomicElement ) {
-		notify( NON_ATOMIC_ELEMENT_ALERT );
-	}
-
-	return hasNonAtomicElement;
-}
-
-function blockNonAtomicPaste( args: PasteArgs ): boolean {
-	if ( ! isEditingComponent() ) {
-		return false;
-	}
-
-	const { storageType } = args;
-
-	if ( storageType !== 'localstorage' ) {
-		return false;
-	}
-
-	const data = (
-		window as unknown as ExtendedWindow & { elementorCommon?: { storage?: { get: () => StorageContent } } }
-	 )?.elementorCommon?.storage?.get();
-
-	if ( ! data?.clipboard?.elements ) {
-		return false;
-	}
-
-	const hasNonAtomicElement = hasNonAtomicElementsInTree( data.clipboard.elements );
-
-	if ( hasNonAtomicElement ) {
-		notify( NON_ATOMIC_ELEMENT_ALERT );
-	}
-
-	return hasNonAtomicElement;
-}
-
-export function hasNonAtomicElementsInTree( elements: ClipboardElement[] ): boolean {
-	for ( const element of elements ) {
-		const elementType = element.widgetType || element.elType;
-
-		if ( elementType && ! isElementAtomic( elementType ) ) {
-			return true;
-		}
-
-		if ( element.elements?.length ) {
-			if ( hasNonAtomicElementsInTree( element.elements ) ) {
-				return true;
-			}
-		}
-	}
-
-	return false;
-}
-
-export function findNonAtomicElements( elements: ClipboardElement[] ): string[] {
-	const nonAtomicElements: string[] = [];
-
-	for ( const element of elements ) {
-		const elementType = element.widgetType || element.elType;
-
-		if ( elementType && ! isElementAtomic( elementType ) ) {
-			nonAtomicElements.push( elementType );
-		}
-
-		if ( element.elements?.length ) {
-			nonAtomicElements.push( ...findNonAtomicElements( element.elements ) );
-		}
-	}
-
-	return [ ...new Set( nonAtomicElements ) ];
-}
-
-type V1ElementLike = {
-	elType?: string;
-	widgetType?: string;
-	elements?: V1ElementLike[];
-};
-
-export function findNonAtomicElementsInElement( element: V1ElementLike ): string[] {
-	const nonAtomicElements: string[] = [];
-	const elementType = element.widgetType || element.elType;
-
-	if ( elementType && ! isElementAtomic( elementType ) ) {
-		nonAtomicElements.push( elementType );
-	}
-
-	if ( element.elements?.length ) {
-		for ( const child of element.elements ) {
-			nonAtomicElements.push( ...findNonAtomicElementsInElement( child ) );
-		}
-	}
-
-	return [ ...new Set( nonAtomicElements ) ];
-}

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

@@ -1,66 +0,0 @@
-import { type V1Element, type V1ElementData } from '@elementor/editor-elements';
-import { registerDataHook } from '@elementor/editor-v1-adapters';
-
-import { type ExtendedWindow } from '../../types';
-import { isEditingComponent } from '../utils/is-editing-component';
-import {
-	revertAllOverridablesInContainer,
-	revertAllOverridablesInElementData,
-} from '../utils/revert-overridable-settings';
-
-type CopyArgs = {
-	storageKey?: string;
-};
-
-type ClipboardData = {
-	type: string;
-	siteurl: string;
-	elements: V1ElementData[];
-};
-
-export function initRevertOverridablesOnCopyOrDuplicate() {
-	registerDataHook( 'after', 'document/elements/duplicate', ( _args, result: V1Element | V1Element[] ) => {
-		if ( ! isEditingComponent() ) {
-			return;
-		}
-
-		revertOverridablesForDuplicatedElements( result );
-	} );
-
-	registerDataHook( 'after', 'document/elements/copy', ( args: CopyArgs ) => {
-		if ( ! isEditingComponent() ) {
-			return;
-		}
-
-		revertOverridablesInStorage( args.storageKey ?? 'clipboard' );
-	} );
-}
-
-function revertOverridablesForDuplicatedElements( duplicatedElements: V1Element | V1Element[] ) {
-	const containers = Array.isArray( duplicatedElements ) ? duplicatedElements : [ duplicatedElements ];
-
-	containers.forEach( ( container ) => {
-		revertAllOverridablesInContainer( container );
-	} );
-}
-
-function revertOverridablesInStorage( storageKey: string ) {
-	const storage = ( window as unknown as ExtendedWindow ).elementorCommon?.storage;
-
-	if ( ! storage ) {
-		return;
-	}
-
-	const storageData = storage.get< ClipboardData >( storageKey );
-
-	if ( ! storageData?.elements?.length ) {
-		return;
-	}
-
-	const elementsDataWithOverridablesReverted = storageData.elements.map( revertAllOverridablesInElementData );
-
-	storage.set( storageKey, {
-		...storageData,
-		elements: elementsDataWithOverridablesReverted,
-	} );
-}

package/src/extended/sync/sanitize-overridable-props.ts

@@ -1,32 +0,0 @@
-import { useEffect } from 'react';
-
-import { useCurrentComponentId, useIsSanitizedComponent, useOverridableProps } from '../../store/store';
-import { filterValidOverridableProps } from '../../utils/filter-valid-overridable-props';
-import { deleteOverridableProp } from '../store/actions/delete-overridable-prop';
-import { updateComponentSanitizedAttribute } from '../store/actions/update-component-sanitized-attribute';
-
-export function SanitizeOverridableProps() {
-	const currentComponentId = useCurrentComponentId();
-	const overridableProps = useOverridableProps( currentComponentId );
-	const isSanitized = useIsSanitizedComponent( currentComponentId, 'overridableProps' );
-
-	useEffect( () => {
-		if ( isSanitized || ! overridableProps || ! currentComponentId ) {
-			return;
-		}
-
-		const filtered = filterValidOverridableProps( overridableProps );
-
-		const propsToDelete = Object.keys( overridableProps.props ?? {} ).filter( ( key ) => ! filtered.props[ key ] );
-
-		if ( propsToDelete.length > 0 ) {
-			propsToDelete.forEach( ( key ) => {
-				deleteOverridableProp( { componentId: currentComponentId, propKey: key, source: 'system' } );
-			} );
-		}
-
-		updateComponentSanitizedAttribute( currentComponentId, 'overridableProps' );
-	}, [ currentComponentId, isSanitized, overridableProps ] );
-
-	return null;
-}

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

@@ -1,23 +0,0 @@
-import { type V1Document } from '@elementor/editor-documents';
-import { type V1Element } from '@elementor/editor-elements';
-import { __getState as getState } from '@elementor/store';
-
-import { selectOverridableProps } from '../../store/store';
-import { COMPONENT_DOCUMENT_TYPE } from '../consts';
-
-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/extended/sync/update-archived-component-before-save.ts

@@ -1,32 +0,0 @@
-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';
-
-const failedNotification = ( message: string ): NotificationData => ( {
-	type: 'error',
-	message: `Failed to archive components: ${ message }`,
-	id: 'failed-archived-components-notification',
-} );
-
-export const updateArchivedComponentBeforeSave = async ( status: DocumentSaveStatus ) => {
-	try {
-		const archivedComponents = selectArchivedThisSession( getState() );
-
-		if ( ! archivedComponents.length ) {
-			return;
-		}
-
-		const result = await apiClient.updateArchivedComponents( archivedComponents, status );
-
-		const failedIds = result.failedIds.join( ', ' );
-
-		if ( failedIds ) {
-			notify( failedNotification( failedIds ) );
-		}
-	} catch ( error ) {
-		throw new Error( `Failed to update archived components: ${ error }` );
-	}
-};

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

@@ -1,19 +0,0 @@
-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';
-
-export const updateComponentTitleBeforeSave = async ( status: DocumentSaveStatus ) => {
-	const updatedComponentNames = selectUpdatedComponentNames( getState() );
-
-	if ( ! updatedComponentNames.length ) {
-		return;
-	}
-
-	const result = await apiClient.updateComponentTitle( updatedComponentNames, status );
-
-	if ( result.failedIds.length === 0 ) {
-		dispatch( slice.actions.cleanUpdatedComponentNames() );
-	}
-};