@elementor/editor-components 4.0.0-manual → 4.0.1

package/src/extended/components/create-component-form/hooks/use-form.ts

@@ -1,72 +0,0 @@
-import { useMemo, useState } from 'react';
-import { type z } from '@elementor/schema';
-
-export const useForm = < TValues extends Record< string, unknown > >( initialValues: TValues ) => {
-	const [ values, setValues ] = useState< TValues >( initialValues );
-	const [ errors, setErrors ] = useState< Partial< Record< keyof TValues, string > > >( {} );
-
-	const isValid = useMemo( () => {
-		return ! Object.values( errors ).some( ( error ) => error );
-	}, [ errors ] );
-
-	const handleChange = (
-		e: React.ChangeEvent< HTMLInputElement >,
-		field: keyof TValues,
-		validationSchema: z.ZodType< TValues >
-	) => {
-		const updated = { ...values, [ field ]: e.target.value };
-		setValues( updated );
-
-		const { success, errors: validationErrors } = validateForm( updated, validationSchema );
-
-		if ( ! success ) {
-			setErrors( validationErrors );
-		} else {
-			setErrors( {} );
-		}
-	};
-
-	const validate = (
-		validationSchema: z.ZodType< TValues >
-	): { success: true; parsedValues: TValues } | { success: false; parsedValues?: never } => {
-		const { success, errors: validationErrors, parsedValues } = validateForm( values, validationSchema );
-
-		if ( ! success ) {
-			setErrors( validationErrors );
-			return { success };
-		}
-		setErrors( {} );
-		return { success, parsedValues };
-	};
-
-	return {
-		values,
-		errors,
-		isValid,
-		handleChange,
-		validateForm: validate,
-	};
-};
-
-const validateForm = < TValues extends Record< string, unknown > >(
-	values: TValues,
-	schema: z.ZodType< TValues >
-):
-	| { success: false; parsedValues?: never; errors: Partial< Record< keyof TValues, string > > }
-	| { success: true; parsedValues: TValues; errors?: never } => {
-	const result = schema.safeParse( values );
-
-	if ( result.success ) {
-		return { success: true, parsedValues: result.data };
-	}
-
-	const errors = {} as Partial< Record< keyof TValues, string > >;
-
-	( Object.entries( result.error.formErrors.fieldErrors ) as Array< [ keyof TValues, string[] ] > ).forEach(
-		( [ field, error ] ) => {
-			errors[ field ] = error[ 0 ];
-		}
-	);
-
-	return { success: false, errors };
-};

package/src/extended/components/create-component-form/utils/get-component-event-data.ts

@@ -1,54 +0,0 @@
-import { type V1ElementData } from '@elementor/editor-elements';
-
-export type ComponentEventData = {
-	nested_elements_count: number;
-	nested_components_count: number;
-	top_element_type: string;
-	location?: string;
-	secondary_location?: string;
-	trigger?: string;
-};
-
-export type ContextMenuEventOptions = Record< string, unknown > & {
-	location: string;
-	secondaryLocation: string;
-	trigger: string;
-};
-
-export const getComponentEventData = (
-	containerElement: V1ElementData,
-	options?: ContextMenuEventOptions
-): ComponentEventData => {
-	const { elementsCount, componentsCount } = countNestedElements( containerElement );
-
-	return {
-		nested_elements_count: elementsCount,
-		nested_components_count: componentsCount,
-		top_element_type: containerElement.elType,
-		location: options?.location,
-		secondary_location: options?.secondaryLocation,
-		trigger: options?.trigger,
-	};
-};
-
-function countNestedElements( container: V1ElementData ): { elementsCount: number; componentsCount: number } {
-	if ( ! container.elements || container.elements.length === 0 ) {
-		return { elementsCount: 0, componentsCount: 0 };
-	}
-
-	let elementsCount = container.elements.length;
-	let componentsCount = 0;
-
-	for ( const element of container.elements ) {
-		if ( element.widgetType === 'e-component' ) {
-			componentsCount++;
-		}
-
-		const { elementsCount: nestedElementsCount, componentsCount: nestedComponentsCount } =
-			countNestedElements( element );
-		elementsCount += nestedElementsCount;
-		componentsCount += nestedComponentsCount;
-	}
-
-	return { elementsCount, componentsCount };
-}

package/src/extended/components/edit-component/component-modal.tsx

@@ -1,133 +0,0 @@
-import * as React from 'react';
-import { type CSSProperties, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { __ } from '@wordpress/i18n';
-
-import { useCanvasDocument } from './use-canvas-document';
-import { useElementRect } from './use-element-rect';
-
-type ModalProps = {
-	topLevelElementDom: HTMLElement | null;
-	onClose: () => void;
-};
-
-export function ComponentModal( { topLevelElementDom, onClose }: ModalProps ) {
-	const canvasDocument = useCanvasDocument();
-
-	useEffect( () => {
-		const handleEsc = ( event: KeyboardEvent ) => {
-			if ( event.key === 'Escape' ) {
-				onClose();
-			}
-		};
-
-		canvasDocument?.body.addEventListener( 'keydown', handleEsc );
-
-		return () => {
-			canvasDocument?.body.removeEventListener( 'keydown', handleEsc );
-		};
-	}, [ canvasDocument, onClose ] );
-
-	if ( ! canvasDocument?.body ) {
-		return null;
-	}
-
-	return createPortal(
-		<>
-			<BlockEditPage />
-			<Backdrop canvas={ canvasDocument } element={ topLevelElementDom } onClose={ onClose } />
-		</>,
-		canvasDocument.body
-	);
-}
-
-function Backdrop( {
-	canvas,
-	element,
-	onClose,
-}: {
-	canvas: HTMLDocument;
-	element: HTMLElement | null;
-	onClose: () => void;
-} ) {
-	const rect = useElementRect( element );
-	const clipPath = element ? getRectPath( rect, canvas.defaultView as Window ) : undefined;
-	const backdropStyle: CSSProperties = {
-		position: 'fixed',
-		top: 0,
-		left: 0,
-		width: '100vw',
-		height: '100vh',
-		backgroundColor: 'rgba(0, 0, 0, 0.5)',
-		zIndex: 999,
-		pointerEvents: 'painted',
-		cursor: 'pointer',
-		clipPath,
-	};
-
-	const handleKeyDown = ( event: React.KeyboardEvent ) => {
-		if ( event.key === 'Enter' || event.key === ' ' ) {
-			event.preventDefault();
-			onClose();
-		}
-	};
-
-	return (
-		<div
-			style={ backdropStyle }
-			onClick={ onClose }
-			onKeyDown={ handleKeyDown }
-			role="button"
-			tabIndex={ 0 }
-			aria-label={ __( 'Exit component editing mode', 'elementor' ) }
-		/>
-	);
-}
-
-function getRectPath( rect: DOMRect, viewport: Window ) {
-	const { x, y, width, height } = rect;
-	const { innerWidth: vw, innerHeight: vh } = viewport;
-
-	const path = `path(evenodd, 'M 0 0 
-		L ${ vw } 0
-		L ${ vw } ${ vh }
-		L 0 ${ vh }
-		Z
-		M ${ x } ${ y }
-		L ${ x + width } ${ y }
-		L ${ x + width } ${ y + height }
-		L ${ x } ${ y + height }
-		L ${ x } ${ y }
-    	Z'
-	)`;
-
-	return path.replace( /\s{2,}/g, ' ' );
-}
-
-/**
- * when switching to another document id, we get a document handler when hovering
- * this functionality originates in Pro, and is intended for editing templates, e.g. header/footer
- * in components we don't want that, so the easy way out is to prevent it of being displayed via a CSS rule
- */
-function BlockEditPage() {
-	const blockV3DocumentHandlesStyles = `
-	.elementor-editor-active {
-		& .elementor-section-wrap.ui-sortable {
-			display: contents;
-		}
-
-		& *[data-editable-elementor-document]:not(.elementor-edit-mode):hover {
-			& .elementor-document-handle:not(.elementor-document-save-back-handle) {
-				display: none;
-
-				&::before,
-				& .elementor-document-handle__inner {
-					display: none;
-				}
-			}
-		}
-	}
-	`;
-
-	return <style data-e-style-id="e-block-v3-document-handles-styles">{ blockV3DocumentHandlesStyles }</style>;
-}

package/src/extended/components/edit-component/edit-component.tsx

@@ -1,166 +0,0 @@
-import * as React from 'react';
-import { useEffect, useState } from 'react';
-import { getV1DocumentsManager, type V1Document } from '@elementor/editor-documents';
-import { type V1Element } from '@elementor/editor-elements';
-import { __privateListenTo as listenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
-import { __useSelector as useSelector } from '@elementor/store';
-import { throttle } from '@elementor/utils';
-
-import { apiClient } from '../../../api';
-import { type ComponentsPathItem, selectPath, useCurrentComponentId } from '../../../store/store';
-import { COMPONENT_DOCUMENT_TYPE } from '../../consts';
-import { useNavigateBack } from '../../hooks/use-navigate-back';
-import { resetSanitizedComponents } from '../../store/actions/reset-sanitized-components';
-import { updateCurrentComponent } from '../../store/actions/update-current-component';
-import { ComponentModal } from './component-modal';
-
-export function EditComponent() {
-	const currentComponentId = useCurrentComponentId();
-
-	useHandleDocumentSwitches();
-
-	const navigateBack = useNavigateBack();
-
-	const onClose = throttle( navigateBack, 100 );
-
-	const topLevelElementDom = useComponentDOMElement( currentComponentId ?? undefined );
-
-	if ( ! currentComponentId ) {
-		return null;
-	}
-
-	return <ComponentModal topLevelElementDom={ topLevelElementDom } onClose={ onClose } />;
-}
-
-function useHandleDocumentSwitches() {
-	const documentsManager = getV1DocumentsManager();
-	const currentComponentId = useCurrentComponentId();
-	const path = useSelector( selectPath );
-
-	useEffect( () => {
-		return listenTo( commandEndEvent( 'editor/documents/open' ), () => {
-			const nextDocument = documentsManager.getCurrent();
-
-			if ( nextDocument.id === currentComponentId ) {
-				return;
-			}
-
-			if ( currentComponentId ) {
-				apiClient.unlockComponent( currentComponentId );
-			}
-
-			resetSanitizedComponents();
-
-			const isComponent = nextDocument.config.type === COMPONENT_DOCUMENT_TYPE;
-
-			if ( ! isComponent ) {
-				updateCurrentComponent( { path: [], currentComponentId: null } );
-				return;
-			}
-
-			updateCurrentComponent( {
-				path: getUpdatedComponentPath( path, nextDocument ),
-				currentComponentId: nextDocument.id,
-			} );
-		} );
-	}, [ path, documentsManager, currentComponentId ] );
-}
-
-function getUpdatedComponentPath( path: ComponentsPathItem[], nextDocument: V1Document ): ComponentsPathItem[] {
-	const componentIndex = path.findIndex( ( { componentId } ) => componentId === nextDocument.id );
-
-	if ( componentIndex >= 0 ) {
-		// When exiting the editing of a nested component - we in fact go back a step
-		// so we need to make sure the path is cleaned up of any newer items
-		// By doing it with the slice and not a simple pop() - we could jump to any component in the path and make sure it becomes the current one
-		return path.slice( 0, componentIndex + 1 );
-	}
-
-	const instanceId = nextDocument?.container.view?.el?.dataset.id;
-	const instanceTitle = getInstanceTitle( instanceId, path );
-
-	return [
-		...path,
-		{
-			instanceId,
-			instanceTitle,
-			componentId: nextDocument.id,
-		},
-	];
-}
-
-function getInstanceTitle( instanceId: string | undefined, path: ComponentsPathItem[] ): string | undefined {
-	if ( ! instanceId ) {
-		return undefined;
-	}
-
-	const documentsManager = getV1DocumentsManager();
-	const parentDocId = path.at( -1 )?.componentId ?? documentsManager.getInitialId();
-	const parentDoc = documentsManager.get( parentDocId );
-
-	type EditorSettings = { title?: string };
-	type ContainerWithChildren = V1Element & {
-		children?: {
-			findRecursive?: ( predicate: ( child: V1Element ) => boolean ) => V1Element | undefined;
-		};
-	};
-
-	const parentContainer = parentDoc?.container as unknown as ContainerWithChildren | undefined;
-	const widget = parentContainer?.children?.findRecursive?.(
-		( container: V1Element ) => container.id === instanceId
-	);
-
-	const editorSettings = widget?.model?.get?.( 'editor_settings' ) as EditorSettings | undefined;
-
-	return editorSettings?.title;
-}
-
-function useComponentDOMElement( id: V1Document[ 'id' ] | undefined ) {
-	const { componentContainerDomElement, topLevelElementDom } = getComponentDOMElements( id );
-
-	const [ currentElementDom, setCurrentElementDom ] = useState< HTMLElement | null >( topLevelElementDom );
-
-	useEffect( () => {
-		setCurrentElementDom( topLevelElementDom );
-	}, [ topLevelElementDom ] );
-
-	useEffect( () => {
-		if ( ! componentContainerDomElement ) {
-			return;
-		}
-
-		const mutationObserver = new MutationObserver( () => {
-			const newElementDom = componentContainerDomElement.children[ 0 ] as HTMLElement | null;
-			setCurrentElementDom( newElementDom );
-		} );
-
-		mutationObserver.observe( componentContainerDomElement, { childList: true } );
-
-		return () => {
-			mutationObserver.disconnect();
-		};
-	}, [ componentContainerDomElement ] );
-
-	return currentElementDom;
-}
-
-type ComponentDOMElements = {
-	componentContainerDomElement: HTMLElement | null;
-	topLevelElementDom: HTMLElement | null;
-};
-
-function getComponentDOMElements( id: V1Document[ 'id' ] | undefined ): ComponentDOMElements {
-	if ( ! id ) {
-		return { componentContainerDomElement: null, topLevelElementDom: null };
-	}
-
-	const documentsManager = getV1DocumentsManager();
-
-	const currentComponent = documentsManager.get( id );
-
-	const componentContainer = currentComponent?.container as V1Element;
-	const componentContainerDomElement = ( componentContainer?.view?.el?.children?.[ 0 ] as HTMLElement ) ?? null;
-	const topLevelElementDom = ( componentContainerDomElement?.children[ 0 ] as HTMLElement ) ?? null;
-
-	return { componentContainerDomElement, topLevelElementDom };
-}

package/src/extended/components/edit-component/use-canvas-document.ts

@@ -1,9 +0,0 @@
-import {
-	__privateUseListenTo as useListenTo,
-	commandEndEvent,
-	getCanvasIframeDocument,
-} from '@elementor/editor-v1-adapters';
-
-export function useCanvasDocument() {
-	return useListenTo( commandEndEvent( 'editor/documents/attach-preview' ), () => getCanvasIframeDocument() );
-}

package/src/extended/components/edit-component/use-element-rect.ts

@@ -1,81 +0,0 @@
-import { useEffect, useState } from 'react';
-import { throttle } from '@elementor/utils';
-
-export function useElementRect( element: HTMLElement | null ) {
-	const [ rect, setRect ] = useState< DOMRect >( new DOMRect( 0, 0, 0, 0 ) );
-
-	const onChange = throttle(
-		() => {
-			setRect( element?.getBoundingClientRect() ?? new DOMRect( 0, 0, 0, 0 ) );
-		},
-		20,
-		true
-	);
-
-	useScrollListener( { element, onChange } );
-	useResizeListener( { element, onChange } );
-	useMutationsListener( { element, onChange } );
-
-	useEffect(
-		() => () => {
-			onChange.cancel();
-		},
-		[ onChange ]
-	);
-
-	return rect;
-}
-
-type ListenerProps = {
-	element: HTMLElement | null;
-	onChange: () => void;
-};
-
-function useScrollListener( { element, onChange }: ListenerProps ) {
-	useEffect( () => {
-		if ( ! element ) {
-			return;
-		}
-
-		const win = element.ownerDocument?.defaultView;
-		win?.addEventListener( 'scroll', onChange, { passive: true } );
-
-		return () => {
-			win?.removeEventListener( 'scroll', onChange );
-		};
-	}, [ element, onChange ] );
-}
-
-function useResizeListener( { element, onChange }: ListenerProps ) {
-	useEffect( () => {
-		if ( ! element ) {
-			return;
-		}
-
-		const resizeObserver = new ResizeObserver( onChange );
-		resizeObserver.observe( element );
-
-		const win = element.ownerDocument?.defaultView;
-		win?.addEventListener( 'resize', onChange, { passive: true } );
-
-		return () => {
-			resizeObserver.disconnect();
-			win?.removeEventListener( 'resize', onChange );
-		};
-	}, [ element, onChange ] );
-}
-
-function useMutationsListener( { element, onChange }: ListenerProps ) {
-	useEffect( () => {
-		if ( ! element ) {
-			return;
-		}
-
-		const mutationObserver = new MutationObserver( onChange );
-		mutationObserver.observe( element, { childList: true, subtree: true } );
-
-		return () => {
-			mutationObserver.disconnect();
-		};
-	}, [ element, onChange ] );
-}

package/src/extended/components/instance-editing-panel/instance-editing-panel.tsx

@@ -1,60 +0,0 @@
-import * as React from 'react';
-import { PencilIcon } from '@elementor/icons';
-import { Box } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { EmptyState } from '../../../components/instance-editing-panel/empty-state';
-import { InstancePanelBody } from '../../../components/instance-editing-panel/instance-panel-body';
-import {
-	EditComponentAction,
-	InstancePanelHeader,
-} from '../../../components/instance-editing-panel/instance-panel-header';
-import { useInstancePanelData } from '../../../components/instance-editing-panel/use-instance-panel-data';
-import { useComponentsPermissions } from '../../../hooks/use-components-permissions';
-import { ComponentInstanceProvider } from '../../../provider/component-instance-context';
-import { switchToComponent } from '../../../utils/switch-to-component';
-
-export function ExtendedInstanceEditingPanel() {
-	const { canEdit } = useComponentsPermissions();
-	const data = useInstancePanelData();
-
-	if ( ! data ) {
-		return null;
-	}
-
-	const { componentId, component, overrides, overridableProps, groups, isEmpty, componentInstanceId } = data;
-
-	/* translators: %s: component name. */
-	const panelTitle = __( 'Edit %s', 'elementor' ).replace( '%s', component.name );
-
-	const handleEditComponent = () => switchToComponent( componentId, componentInstanceId );
-
-	return (
-		<Box data-testid="instance-editing-panel">
-			<ComponentInstanceProvider
-				componentId={ componentId }
-				overrides={ overrides }
-				overridableProps={ overridableProps }
-			>
-				<InstancePanelHeader
-					componentName={ component.name }
-					actions={
-						canEdit ? (
-							<EditComponentAction
-								label={ panelTitle }
-								onClick={ handleEditComponent }
-								icon={ PencilIcon }
-							/>
-						) : undefined
-					}
-				/>
-				<InstancePanelBody
-					groups={ groups }
-					isEmpty={ isEmpty }
-					emptyState={ <EmptyState onEditComponent={ canEdit ? handleEditComponent : undefined } /> }
-					componentInstanceId={ componentInstanceId }
-				/>
-			</ComponentInstanceProvider>
-		</Box>
-	);
-}

package/src/extended/components/overridable-props/indicator.tsx

@@ -1,83 +0,0 @@
-import * as React from 'react';
-import { forwardRef } from 'react';
-import { CheckIcon, PlusIcon } from '@elementor/icons';
-import { Box, styled } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-const SIZE = 'tiny';
-
-const IconContainer = styled( Box )`
-	pointer-events: none;
-	opacity: 0;
-	transition: opacity 0.2s ease-in-out;
-
-	& > svg {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate( -50%, -50% );
-		width: 10px;
-		height: 10px;
-		fill: ${ ( { theme } ) => theme.palette.primary.contrastText };
-		stroke: ${ ( { theme } ) => theme.palette.primary.contrastText };
-		stroke-width: 2px;
-	}
-`;
-
-const Content = styled( Box )`
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-	width: 16px;
-	height: 16px;
-	margin-inline: ${ ( { theme } ) => theme.spacing( 0.5 ) };
-
-	&:before {
-		content: '';
-		display: block;
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate( -50%, -50% ) rotate( 45deg );
-		width: 5px;
-		height: 5px;
-		border-radius: 1px;
-		background-color: ${ ( { theme } ) => theme.palette.primary.main };
-		transition: all 0.1s ease-in-out;
-	}
-
-	&:hover,
-	&.enlarged {
-		&:before {
-			width: 12px;
-			height: 12px;
-			border-radius: 2px;
-		}
-
-		.icon {
-			opacity: 1;
-		}
-	}
-`;
-
-type Props = {
-	isOverridable: boolean;
-	isOpen: boolean;
-};
-export const Indicator = forwardRef< HTMLDivElement, Props >( ( { isOpen, isOverridable, ...props }, ref ) => (
-	<Content
-		role="button"
-		ref={ ref }
-		{ ...props }
-		className={ isOpen || isOverridable ? 'enlarged' : '' }
-		aria-label={
-			isOverridable ? __( 'Overridable property', 'elementor' ) : __( 'Make prop overridable', 'elementor' )
-		}
-	>
-		<IconContainer className="icon">
-			{ isOverridable ? <CheckIcon fontSize={ SIZE } /> : <PlusIcon fontSize={ SIZE } /> }
-		</IconContainer>
-	</Content>
-) );