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

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>
-) );

package/src/extended/components/overridable-props/overridable-prop-control.tsx

@@ -1,127 +0,0 @@
-import * as React from 'react';
-import { type ComponentType } from 'react';
-import {
-	ControlReplacementsProvider,
-	getControlReplacements,
-	PropKeyProvider,
-	PropProvider,
-	useBoundProp,
-	useControlReplacement,
-} from '@elementor/editor-controls';
-import { createTopLevelObjectType, useElement } from '@elementor/editor-editing-panel';
-import { type PropValue } from '@elementor/editor-props';
-
-import { type ComponentInstanceOverridePropValue } from '../../../prop-types/component-instance-override-prop-type';
-import {
-	componentOverridablePropTypeUtil,
-	type ComponentOverridablePropValue,
-} from '../../../prop-types/component-overridable-prop-type';
-import { OverridablePropProvider } from '../../../provider/overridable-prop-context';
-import { updateOverridableProp } from '../../../store/actions/update-overridable-prop';
-import { useCurrentComponentId, useOverridableProps } from '../../../store/store';
-import { getPropTypeForComponentOverride } from '../../../utils/get-prop-type-for-component-override';
-import { OVERRIDABLE_PROP_REPLACEMENT_ID } from '../../consts';
-
-export function OverridablePropControl< T extends object >( {
-	OriginalControl,
-	...props
-}: T & { OriginalControl: ComponentType< T > } ) {
-	const { elementType } = useElement();
-
-	const { value, bind, setValue, placeholder, ...propContext } = useBoundProp( componentOverridablePropTypeUtil );
-	const componentId = useCurrentComponentId();
-	const overridableProps = useOverridableProps( componentId );
-	const filteredReplacements = getControlReplacements().filter(
-		( r ) => ! r.id || r.id !== OVERRIDABLE_PROP_REPLACEMENT_ID
-	);
-
-	if ( ! componentId ) {
-		return null;
-	}
-
-	if ( ! value?.override_key ) {
-		throw new Error( 'Override key is required' );
-	}
-
-	const isComponentInstance = elementType.key === 'e-component';
-	const overridablePropData = overridableProps?.props?.[ value.override_key ];
-
-	const setOverridableValue = ( newValue: Record< typeof bind, PropValue | null > ) => {
-		const propValue = {
-			...value,
-			origin_value: newValue[ bind ],
-		} as ComponentOverridablePropValue;
-
-		setValue( propValue );
-
-		if ( ! isComponentInstance ) {
-			updateOverridableProp( componentId, propValue, overridablePropData?.originPropFields );
-		}
-	};
-
-	const defaultPropType = elementType.propsSchema[ bind ];
-	const overridePropType = overridablePropData ? getPropTypeForComponentOverride( overridablePropData ) : undefined;
-
-	const resolvedPropType = overridePropType ?? defaultPropType;
-
-	if ( ! resolvedPropType ) {
-		return null;
-	}
-
-	const propType = createTopLevelObjectType( {
-		schema: {
-			[ bind ]: resolvedPropType,
-		},
-	} );
-
-	const propValue = (
-		isComponentInstance
-			? ( value.origin_value?.value as ComponentInstanceOverridePropValue ).override_value
-			: value.origin_value
-	) as PropValue;
-
-	const objectPlaceholder: Record< string, PropValue > | undefined = placeholder
-		? { [ bind ]: placeholder }
-		: undefined;
-
-	return (
-		<OverridablePropProvider value={ value }>
-			<PropProvider
-				{ ...propContext }
-				propType={ propType }
-				setValue={ setOverridableValue }
-				value={ {
-					[ bind ]: propValue,
-				} }
-				placeholder={ objectPlaceholder }
-			>
-				<PropKeyProvider bind={ bind }>
-					<ControlReplacementsProvider replacements={ filteredReplacements }>
-						<ControlWithReplacements OriginalControl={ OriginalControl } props={ props as T } />
-					</ControlReplacementsProvider>
-				</PropKeyProvider>
-			</PropProvider>
-		</OverridablePropProvider>
-	);
-}
-
-type ControlComponentType = ComponentType< object & { OriginalControl: ComponentType } >;
-
-function ControlWithReplacements< T extends object >( {
-	OriginalControl,
-	props,
-}: {
-	OriginalControl: ComponentType< T >;
-	props: T;
-} ) {
-	const { ControlToRender, isReplaced } = useControlReplacement( OriginalControl as ControlComponentType );
-
-	if ( isReplaced ) {
-		const ReplacementControl = ControlToRender as unknown as ComponentType<
-			T & { OriginalControl: ComponentType< T > }
-		>;
-		return <ReplacementControl { ...props } OriginalControl={ OriginalControl } />;
-	}
-
-	return <OriginalControl { ...props } />;
-}