@elementor/editor-components 3.33.0-234 → 3.33.0-236

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

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import { type CSSProperties, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { __ } from '@wordpress/i18n';
+
+import { useCanvasDocument } from '../../hooks/use-canvas-document';
+import { useElementRect } from '../../hooks/use-element-rect';
+
+type ModalProps = {
+	element: HTMLElement;
+	onClose: () => void;
+};
+export function ComponentModal( { element, 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={ element } onClose={ onClose } />
+		</>,
+		canvasDocument.body
+	);
+}
+
+function Backdrop( { canvas, element, onClose }: { canvas: HTMLDocument; element: HTMLElement; onClose: () => void } ) {
+	const rect = useElementRect( element );
+	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: getRoundedRectPath( rect, canvas.defaultView as Window, 5 ),
+	};
+
+	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 getRoundedRectPath( rect: DOMRect, viewport: Window, borderRadius: number ) {
+	const padding = borderRadius / 2;
+	const { x: originalX, y: originalY, width: originalWidth, height: originalHeight } = rect;
+	const x = originalX - padding;
+	const y = originalY - padding;
+	const width = originalWidth + 2 * padding;
+	const height = originalHeight + 2 * padding;
+	const radius = Math.min( borderRadius, width / 2, height / 2 );
+
+	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 + radius } ${ y }
+		L ${ x + width - radius } ${ y }
+		A ${ radius } ${ radius } 0 0 1 ${ x + width } ${ y + radius }
+		L ${ x + width } ${ y + height - radius }
+		A ${ radius } ${ radius } 0 0 1 ${ x + width - radius } ${ y + height }
+		L ${ x + radius } ${ y + height }
+		A ${ radius } ${ radius } 0 0 1 ${ x } ${ y + height - radius }
+		L ${ x } ${ y + radius }
+		A ${ radius } ${ radius } 0 0 1 ${ x + radius } ${ 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/components/edit-component/edit-component.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { type Dispatch, type SetStateAction, useCallback, useEffect, useState } from 'react';
+import { getV1DocumentsManager, type V1Document } from '@elementor/editor-documents';
+import { type V1Element } from '@elementor/editor-elements';
+import {
+	__privateListenTo as listenTo,
+	__privateRunCommand as runCommand,
+	commandEndEvent,
+} from '@elementor/editor-v1-adapters';
+import { __useSelector as useSelector } from '@elementor/store';
+
+import { apiClient } from '../../api';
+import { selectComponentsObject } from '../../store/store';
+import { ComponentModal } from './component-modal';
+
+type ComponentsPathItem = {
+	instanceId: string | undefined;
+	component: V1Document;
+};
+export function EditComponent() {
+	const [ componentsPath, setComponentsPath ] = useState< ComponentsPathItem[] >( [] );
+
+	useHandleDocumentSwitches( componentsPath, setComponentsPath );
+	const onBack = useNavigateBack( componentsPath );
+
+	const currentItem = componentsPath.at( -1 );
+	const { component: currentComponent } = currentItem ?? {};
+
+	const widget = currentComponent?.container as V1Element;
+	const container = ( widget?.view?.el?.children?.[ 0 ] ?? null ) as HTMLElement | null;
+	const elementDom = container?.children[ 0 ] as HTMLElement | null;
+
+	if ( ! elementDom ) {
+		return null;
+	}
+
+	return <ComponentModal element={ elementDom } onClose={ onBack } />;
+}
+
+function useHandleDocumentSwitches(
+	path: ComponentsPathItem[],
+	setPath: Dispatch< SetStateAction< ComponentsPathItem[] > >
+) {
+	const components = useSelector( selectComponentsObject );
+	const documentsManager = getV1DocumentsManager();
+
+	useEffect(
+		() =>
+			listenTo( commandEndEvent( 'editor/documents/attach-preview' ), () => {
+				const { component: currentComponent } = path.at( -1 ) ?? {};
+				const { id: currentComponentId } = currentComponent ?? {};
+				const nextDocument = documentsManager.getCurrent();
+
+				if ( nextDocument.id === currentComponentId ) {
+					return;
+				}
+
+				if ( currentComponentId ) {
+					apiClient.unlockComponent( currentComponentId );
+				}
+
+				const isComponent = !! components?.[ nextDocument.id ];
+
+				if ( ! isComponent ) {
+					setPath( [] );
+
+					return;
+				}
+
+				setPath( getUpdatedComponentPath( path, nextDocument ) );
+			} ),
+		[ path, setPath, components, documentsManager ]
+	);
+}
+
+function getUpdatedComponentPath( path: ComponentsPathItem[], nextDocument: V1Document ): ComponentsPathItem[] {
+	const componentIndex = path.findIndex( ( { component } ) => component.id === 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 );
+	}
+
+	return [
+		...path,
+		{
+			instanceId: nextDocument?.container.view?.el?.dataset.id,
+			component: nextDocument,
+		},
+	];
+}
+
+function useNavigateBack( path: ComponentsPathItem[] ) {
+	const documentsManager = getV1DocumentsManager();
+
+	return useCallback( () => {
+		const { component: prevComponent, instanceId: prevComponentInstanceId } = path.at( -2 ) ?? {};
+		const { id: prevComponentId } = prevComponent ?? {};
+		const switchToDocument = ( id: number, selector?: string ) => {
+			runCommand( 'editor/documents/switch', {
+				id,
+				selector,
+				mode: 'autosave',
+				setAsInitial: false,
+				shouldScroll: false,
+			} );
+		};
+
+		if ( prevComponentId && prevComponentInstanceId ) {
+			switchToDocument( prevComponentId, `[data-id="${ prevComponentInstanceId }"]` );
+
+			return;
+		}
+
+		switchToDocument( documentsManager.getInitialId() );
+	}, [ path, documentsManager ] );
+}

package/src/create-component-type.ts

@@ -106,15 +106,21 @@ function createComponentView(
 					id: this.getComponentId()?.value as number,
 					mode: 'autosave',
 					selector: `[data-id="${ this.model.get( 'id' ) }"]`,
+					shouldScroll: false,
 				} );
-				apiClient.lockComponent( this.getComponentId()?.value as number );
 			}
 		}
 
+		handleDblClick( e: MouseEvent ) {
+			e.stopPropagation();
+
+			this.switchDocument();
+		}
+
 		events() {
 			return {
 				...super.events(),
-				dblclick: this.switchDocument,
+				dblclick: this.handleDblClick,
 			};
 		}
 

package/src/hooks/use-canvas-document.ts

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

package/src/hooks/use-element-rect.ts

@@ -0,0 +1,81 @@
+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/init.ts

@@ -5,6 +5,7 @@ import {
 	settingsTransformersRegistry,
 } from '@elementor/editor-canvas';
 import { getV1CurrentDocument } from '@elementor/editor-documents';
+import { type V1ElementData } from '@elementor/editor-elements';
 import { injectTab } from '@elementor/editor-elements-panel';
 import { stylesRepository } from '@elementor/editor-styles-repository';
 import { __privateListenTo as listenTo, commandStartEvent, registerDataHook } from '@elementor/editor-v1-adapters';
@@ -14,6 +15,7 @@ import { __ } from '@wordpress/i18n';
 import { componentIdTransformer } from './component-id-transformer';
 import { Components } from './components/components-tab/components';
 import { CreateComponentForm } from './components/create-component-form/create-component-form';
+import { EditComponent } from './components/edit-component/edit-component';
 import { openEditModeDialog } from './components/in-edit-mode';
 import { createComponentType, TYPE } from './create-component-type';
 import { PopulateStore } from './populate-store';
@@ -21,7 +23,7 @@ import { componentsStylesProvider } from './store/components-styles-provider';
 import { loadComponentsStyles } from './store/load-components-styles';
 import { removeComponentStyles } from './store/remove-component-styles';
 import { slice } from './store/store';
-import { type Element, type ExtendedWindow } from './types';
+import { type ExtendedWindow } from './types';
 import { beforeSave } from './utils/before-save';
 
 const COMPONENT_DOCUMENT_TYPE = 'elementor_component';
@@ -58,6 +60,11 @@ export function init() {
 		component: PopulateStore,
 	} );
 
+	injectIntoTop( {
+		id: 'edit-component',
+		component: EditComponent,
+	} );
+
 	listenTo( commandStartEvent( 'editor/documents/attach-preview' ), () => {
 		const { id, config } = getV1CurrentDocument();
 
@@ -65,7 +72,7 @@ export function init() {
 			removeComponentStyles( id );
 		}
 
-		loadComponentsStyles( ( config?.elements as Element[] ) ?? [] );
+		loadComponentsStyles( ( config?.elements as V1ElementData[] ) ?? [] );
 	} );
 
 	settingsTransformersRegistry.register( 'component-id', componentIdTransformer );

package/src/store/load-components-styles.ts

@@ -3,11 +3,11 @@ import { type StyleDefinition } from '@elementor/editor-styles';
 import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
 
 import { apiClient } from '../api';
-import { type ComponentId, type Element } from '../types';
+import { type ComponentId } from '../types';
 import { getComponentIds } from '../utils/get-component-ids';
 import { selectStyles, slice } from './store';
 
-export async function loadComponentsStyles( elements: Element[] ) {
+export async function loadComponentsStyles( elements: V1ElementData[] ) {
 	const componentIds = Array.from( new Set( getComponentIds( elements ) ) );
 
 	if ( ! componentIds.length ) {
@@ -30,7 +30,7 @@ async function addComponentStyles( ids: ComponentId[] ) {
 	addStyles( newComponents );
 
 	Object.values( newComponents ).forEach( ( [ , data ] ) => {
-		loadComponentsStyles( data.elements as Element[] );
+		loadComponentsStyles( data.elements ?? ( [] as V1ElementData[] ) );
 	} );
 }
 

package/src/store/store.ts

@@ -94,6 +94,15 @@ export const selectUnpublishedComponents = createSelector(
 	selectUnpublishedData,
 	( unpublishedData: UnpublishedComponent[] ) => unpublishedData
 );
+export const selectComponentsObject = createSelector(
+	selectData,
+	selectUnpublishedData,
+	( data: Component[], unpublishedData: UnpublishedComponent[] ) =>
+		data.concat( unpublishedData ).reduce< Record< ComponentId, Component > >( ( acc, component ) => {
+			acc[ component.id ] = component;
+			return acc;
+		}, {} )
+);
 export const selectLoadIsPending = createSelector( selectLoadStatus, ( status ) => status === 'pending' );
 export const selectLoadIsError = createSelector( selectLoadStatus, ( status ) => status === 'error' );
 export const selectStyles = ( state: ComponentsSlice ) => state[ SLICE_NAME ].styles ?? {};

package/src/types.ts

@@ -1,4 +1,3 @@
-import { type V1ElementModelProps, type V1ElementSettingsProps } from '@elementor/editor-elements';
 import type { StyleDefinition } from '@elementor/editor-styles';
 
 export type ComponentFormValues = {
@@ -16,16 +15,6 @@ export type Component = {
 
 export type DocumentStatus = 'publish' | 'draft' | 'autosave';
 
-export type Element = V1ElementModelProps & {
-	elements?: Element[];
-	settings?: V1ElementSettingsProps & {
-		component?: {
-			$$type: 'component-id';
-			value: number;
-		};
-	};
-};
-
 export type ExtendedWindow = Window & {
 	elementorCommon: Record< string, unknown >;
 };