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

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,22 +0,0 @@
-import { type V1Document } from '@elementor/editor-documents';
-import { type V1Element } from '@elementor/editor-elements';
-
-import { componentsSelectors } from '../../store/selectors';
-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 = componentsSelectors.getOverridableProps( currentDocument.id );
-	if ( overridableProps ) {
-		container.settings.set( 'overridable_props', overridableProps );
-	}
-};

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

@@ -1,31 +0,0 @@
-import { type NotificationData, notify } from '@elementor/editor-notifications';
-
-import { apiClient } from '../../api';
-import { componentsSelectors } from '../../store/selectors';
-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 = componentsSelectors.getArchivedThisSession();
-
-		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,18 +0,0 @@
-import { apiClient } from '../../api';
-import { componentsActions } from '../../store/dispatchers';
-import { componentsSelectors } from '../../store/selectors';
-import { type DocumentSaveStatus } from '../../types';
-
-export const updateComponentTitleBeforeSave = async ( status: DocumentSaveStatus ) => {
-	const updatedComponentNames = componentsSelectors.getUpdatedComponentNames();
-
-	if ( ! updatedComponentNames.length ) {
-		return;
-	}
-
-	const result = await apiClient.updateComponentTitle( updatedComponentNames, status );
-
-	if ( result.failedIds.length === 0 ) {
-		componentsActions.cleanUpdatedComponentNames();
-	}
-};

package/src/extended/utils/component-form-schema.ts

@@ -1,32 +0,0 @@
-import { z } from '@elementor/schema';
-import { __ } from '@wordpress/i18n';
-
-export const MIN_NAME_LENGTH = 2;
-const MAX_NAME_LENGTH = 50;
-
-const baseComponentSchema = z
-	.string()
-	.trim()
-	.max( MAX_NAME_LENGTH, __( 'Component name is too long. Please keep it under 50 characters.', 'elementor' ) );
-
-export const createBaseComponentSchema = ( existingNames: string[] ) => {
-	return z.object( {
-		componentName: baseComponentSchema.refine( ( value ) => ! existingNames.includes( value ), {
-			message: __( 'Component name already exists', 'elementor' ),
-		} ),
-	} );
-};
-
-export const createSubmitComponentSchema = ( existingNames: string[] ) => {
-	const baseSchema = createBaseComponentSchema( existingNames );
-
-	return baseSchema.extend( {
-		componentName: baseSchema.shape.componentName
-			.refine( ( value ) => value.length > 0, {
-				message: __( 'Component name is required.', 'elementor' ),
-			} )
-			.refine( ( value ) => value.length >= MIN_NAME_LENGTH, {
-				message: __( 'Component name is too short. Please enter at least 2 characters.', 'elementor' ),
-			} ),
-	} );
-};

package/src/extended/utils/component-name-validation.ts

@@ -1,25 +0,0 @@
-import { componentsSelectors } from '../../store/selectors';
-import { createSubmitComponentSchema } from './component-form-schema';
-
-type ValidationResult = { isValid: true; errorMessage: null } | { isValid: false; errorMessage: string };
-
-export function validateComponentName( label: string ): ValidationResult {
-	const existingComponentTitles = componentsSelectors.getComponents()?.map( ( { name } ) => name ) ?? [];
-	const schema = createSubmitComponentSchema( existingComponentTitles );
-	const result = schema.safeParse( { componentName: label.toLowerCase() } );
-
-	if ( result.success ) {
-		return {
-			isValid: true,
-			errorMessage: null,
-		};
-	}
-
-	const formattedErrors = result.error.format();
-	const errorMessage = formattedErrors.componentName?._errors[ 0 ] ?? formattedErrors._errors[ 0 ];
-
-	return {
-		isValid: false,
-		errorMessage,
-	};
-}

package/src/extended/utils/create-component-model.ts

@@ -1,28 +0,0 @@
-import { type V1ElementModelProps } from '@elementor/editor-elements';
-
-export type ComponentInstanceParams = {
-	id?: number;
-	name: string;
-	uid: string;
-};
-
-export const createComponentModel = ( component: ComponentInstanceParams ): Omit< V1ElementModelProps, 'id' > => {
-	return {
-		elType: 'widget',
-		widgetType: 'e-component',
-		settings: {
-			component_instance: {
-				$$type: 'component-instance',
-				value: {
-					component_id: {
-						$$type: 'number',
-						value: component.id ?? component.uid,
-					},
-				},
-			},
-		},
-		editor_settings: {
-			component_uid: component.uid,
-		},
-	};
-};

package/src/extended/utils/get-container-for-new-element.ts

@@ -1,49 +0,0 @@
-import {
-	getContainer,
-	getCurrentDocumentContainer,
-	getSelectedElements,
-	type V1Element,
-} from '@elementor/editor-elements';
-
-export const getContainerForNewElement = (): { container: V1Element | null; options?: { at: number } } => {
-	const currentDocumentContainer = getCurrentDocumentContainer();
-	const selectedElement = getSelectedElementContainer();
-
-	let container, options;
-
-	if ( selectedElement ) {
-		switch ( selectedElement.model.get( 'elType' ) ) {
-			case 'widget': {
-				container = selectedElement?.parent;
-
-				const selectedElIndex = selectedElement.view?._index ?? -1;
-
-				if ( selectedElIndex > -1 ) {
-					options = { at: selectedElIndex + 1 };
-				}
-
-				break;
-			}
-			case 'section': {
-				container = selectedElement?.children?.[ 0 ];
-				break;
-			}
-			default: {
-				container = selectedElement;
-				break;
-			}
-		}
-	}
-
-	return { container: container ?? currentDocumentContainer, options };
-};
-
-function getSelectedElementContainer() {
-	const selectedElements = getSelectedElements();
-
-	if ( selectedElements.length !== 1 ) {
-		return undefined;
-	}
-
-	return getContainer( selectedElements[ 0 ].id );
-}

package/src/extended/utils/is-editing-component.ts

@@ -1,5 +0,0 @@
-import { componentsSelectors } from '../../store/selectors';
-
-export function isEditingComponent(): boolean {
-	return componentsSelectors.getCurrentComponentId() !== null;
-}

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

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