@elementor/editor-components 3.33.0-99 → 3.35.0-324

package/src/components/create-component-form/create-component-form.tsx

@@ -1,22 +1,27 @@
 import * as React from 'react';
-import { useEffect, useMemo, useState } from 'react';
-import { getElementLabel, type V1Element } from '@elementor/editor-elements';
-import { ThemeProvider } from '@elementor/editor-ui';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { getElementLabel, type V1ElementData } from '@elementor/editor-elements';
+import { Form as FormElement, ThemeProvider } from '@elementor/editor-ui';
 import { StarIcon } from '@elementor/icons';
 import { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack, TextField, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { type CreateComponentResponse } from '../../api';
 import { useComponents } from '../../hooks/use-components';
-import { useCreateComponentMutation } from '../../hooks/use-create-component';
+import { createUnpublishedComponent } from '../../store/actions/create-unpublished-component';
 import { type ComponentFormValues } from '../../types';
+import { trackComponentEvent } from '../../utils/tracking';
 import { useForm } from './hooks/use-form';
 import { createBaseComponentSchema, createSubmitComponentSchema } from './utils/component-form-schema';
-import { replaceElementWithComponent } from './utils/replace-element-with-component';
+import {
+	type ComponentEventData,
+	type ContextMenuEventOptions,
+	getComponentEventData,
+} from './utils/get-component-event-data';
 
 type SaveAsComponentEventData = {
-	element: V1Element;
+	element: V1ElementData;
 	anchorPosition: { top: number; left: number };
+	options?: ContextMenuEventOptions;
 };
 
 type ResultNotification = {
@@ -27,7 +32,7 @@ type ResultNotification = {
 
 export function CreateComponentForm() {
 	const [ element, setElement ] = useState< {
-		element: V1Element;
+		element: V1ElementData;
 		elementLabel: string;
 	} | null >( null );
 
@@ -35,7 +40,7 @@ export function CreateComponentForm() {
 
 	const [ resultNotification, setResultNotification ] = useState< ResultNotification | null >( null );
 
-	const { mutate: createComponent, isPending } = useCreateComponentMutation();
+	const eventData = useRef< ComponentEventData | null >( null );
 
 	useEffect( () => {
 		const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = 'elementor/editor/open-save-as-component-form';
@@ -43,6 +48,12 @@ export function CreateComponentForm() {
 		const openPopup = ( event: CustomEvent< SaveAsComponentEventData > ) => {
 			setElement( { element: event.detail.element, elementLabel: getElementLabel( event.detail.element.id ) } );
 			setAnchorPosition( event.detail.anchorPosition );
+
+			eventData.current = getComponentEventData( event.detail.element, event.detail.options );
+			trackComponentEvent( {
+				action: 'createClicked',
+				...eventData.current,
+			} );
 		};
 
 		window.addEventListener( OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup as EventListener );
@@ -52,45 +63,32 @@ export function CreateComponentForm() {
 		};
 	}, [] );
 
-	const handleSave = async ( values: ComponentFormValues ) => {
-		if ( ! element ) {
-			throw new Error( `Can't save element as component: element not found` );
-		}
-
-		createComponent(
-			{
-				name: values.componentName,
-				content: [ element.element.model.toJSON( { remove: [ 'default' ] } ) ],
-			},
-			{
-				onSuccess: ( result: CreateComponentResponse ) => {
-					if ( ! element ) {
-						throw new Error( `Can't replace element with component: element not found` );
-					}
-
-					replaceElementWithComponent( element.element, result.component_id );
-
-					setResultNotification( {
-						show: true,
-						// Translators: %1$s: Component name, %2$s: Component ID
-						message: __( 'Component saved successfully as: %1$s (ID: %2$s)', 'elementor' )
-							.replace( '%1$s', values.componentName )
-							.replace( '%2$s', result.component_id.toString() ),
-						type: 'success',
-					} );
-
-					resetAndClosePopup();
-				},
-				onError: () => {
-					const errorMessage = __( 'Failed to save component. Please try again.', 'elementor' );
-					setResultNotification( {
-						show: true,
-						message: errorMessage,
-						type: 'error',
-					} );
-				},
+	const handleSave = ( values: ComponentFormValues ) => {
+		try {
+			if ( ! element ) {
+				throw new Error( `Can't save element as component: element not found` );
 			}
-		);
+
+			const uid = createUnpublishedComponent( values.componentName, element.element, eventData.current );
+
+			setResultNotification( {
+				show: true,
+				// Translators: %1$s: Component name, %2$s: Component UID
+				message: __( 'Component saved successfully as: %1$s (UID: %2$s)', 'elementor' )
+					.replace( '%1$s', values.componentName )
+					.replace( '%2$s', uid ),
+				type: 'success',
+			} );
+
+			resetAndClosePopup();
+		} catch {
+			const errorMessage = __( 'Failed to save component. Please try again.', 'elementor' );
+			setResultNotification( {
+				show: true,
+				message: errorMessage,
+				type: 'error',
+			} );
+		}
 	};
 
 	const resetAndClosePopup = () => {
@@ -98,11 +96,20 @@ export function CreateComponentForm() {
 		setAnchorPosition( undefined );
 	};
 
+	const cancelSave = () => {
+		resetAndClosePopup();
+
+		trackComponentEvent( {
+			action: 'createCancelled',
+			...eventData.current,
+		} );
+	};
+
 	return (
 		<ThemeProvider>
 			<Popover
 				open={ element !== null }
-				onClose={ resetAndClosePopup }
+				onClose={ cancelSave }
 				anchorReference="anchorPosition"
 				anchorPosition={ anchorPosition }
 			>
@@ -110,8 +117,7 @@ export function CreateComponentForm() {
 					<Form
 						initialValues={ { componentName: element.elementLabel } }
 						handleSave={ handleSave }
-						isSubmitting={ isPending }
-						closePopup={ resetAndClosePopup }
+						closePopup={ cancelSave }
 					/>
 				) }
 			</Popover>
@@ -133,17 +139,15 @@ const FONT_SIZE = 'tiny';
 const Form = ( {
 	initialValues,
 	handleSave,
-	isSubmitting,
 	closePopup,
 }: {
 	initialValues: ComponentFormValues;
 	handleSave: ( values: ComponentFormValues ) => void;
-	isSubmitting: boolean;
 	closePopup: () => void;
 } ) => {
 	const { values, errors, isValid, handleChange, validateForm } = useForm< ComponentFormValues >( initialValues );
 
-	const { data: components } = useComponents();
+	const { components } = useComponents();
 
 	const existingComponentNames = useMemo( () => {
 		return components?.map( ( component ) => component.name ) ?? [];
@@ -166,55 +170,60 @@ const Form = ( {
 		}
 	};
 
+	const texts = {
+		heading: __( 'Save as a component', 'elementor' ),
+		name: __( 'Name', 'elementor' ),
+		cancel: __( 'Cancel', 'elementor' ),
+		create: __( 'Create', 'elementor' ),
+	};
+
+	const nameInputId = 'component-name';
+
 	return (
-		<Stack alignItems="start" width="268px">
-			<Stack
-				direction="row"
-				alignItems="center"
-				py={ 1 }
-				px={ 1.5 }
-				sx={ { columnGap: 0.5, borderBottom: '1px solid', borderColor: 'divider', width: '100%' } }
-			>
-				<StarIcon fontSize={ FONT_SIZE } />
-				<Typography variant="caption" sx={ { color: 'text.primary', fontWeight: '500', lineHeight: 1 } }>
-					{ __( 'Save as a component', 'elementor' ) }
-				</Typography>
-			</Stack>
-			<Grid container gap={ 0.75 } alignItems="start" p={ 1.5 }>
-				<Grid item xs={ 12 }>
-					<FormLabel htmlFor={ 'component-name' } size="tiny">
-						{ __( 'Name', 'elementor' ) }
-					</FormLabel>
-				</Grid>
-				<Grid item xs={ 12 }>
-					<TextField
-						id={ 'component-name' }
-						size={ FONT_SIZE }
-						fullWidth
-						value={ values.componentName }
-						onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) =>
-							handleChange( e, 'componentName', changeValidationSchema )
-						}
-						inputProps={ { style: { color: 'text.primary', fontWeight: '600' } } }
-						error={ Boolean( errors.componentName ) }
-						helperText={ errors.componentName }
-					/>
-				</Grid>
-			</Grid>
-			<Stack direction="row" justifyContent="flex-end" alignSelf="end" py={ 1 } px={ 1.5 }>
-				<Button onClick={ closePopup } disabled={ isSubmitting } color="secondary" variant="text" size="small">
-					{ __( 'Cancel', 'elementor' ) }
-				</Button>
-				<Button
-					onClick={ handleSubmit }
-					disabled={ isSubmitting || ! isValid }
-					variant="contained"
-					color="primary"
-					size="small"
+		<FormElement onSubmit={ handleSubmit }>
+			<Stack alignItems="start" width="268px">
+				<Stack
+					direction="row"
+					alignItems="center"
+					py={ 1 }
+					px={ 1.5 }
+					sx={ { columnGap: 0.5, borderBottom: '1px solid', borderColor: 'divider', width: '100%' } }
 				>
-					{ isSubmitting ? __( 'Creating…', 'elementor' ) : __( 'Create', 'elementor' ) }
-				</Button>
+					<StarIcon fontSize={ FONT_SIZE } />
+					<Typography variant="caption" sx={ { color: 'text.primary', fontWeight: '500', lineHeight: 1 } }>
+						{ texts.heading }
+					</Typography>
+				</Stack>
+				<Grid container gap={ 0.75 } alignItems="start" p={ 1.5 }>
+					<Grid item xs={ 12 }>
+						<FormLabel htmlFor={ nameInputId } size="tiny">
+							{ texts.name }
+						</FormLabel>
+					</Grid>
+					<Grid item xs={ 12 }>
+						<TextField
+							id={ nameInputId }
+							size={ FONT_SIZE }
+							fullWidth
+							value={ values.componentName }
+							onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) =>
+								handleChange( e, 'componentName', changeValidationSchema )
+							}
+							inputProps={ { style: { color: 'text.primary', fontWeight: '600' } } }
+							error={ Boolean( errors.componentName ) }
+							helperText={ errors.componentName }
+						/>
+					</Grid>
+				</Grid>
+				<Stack direction="row" justifyContent="flex-end" alignSelf="end" py={ 1 } px={ 1.5 }>
+					<Button onClick={ closePopup } color="secondary" variant="text" size="small">
+						{ texts.cancel }
+					</Button>
+					<Button type="submit" disabled={ ! isValid } variant="contained" color="primary" size="small">
+						{ texts.create }
+					</Button>
+				</Stack>
 			</Stack>
-		</Stack>
+		</FormElement>
 	);
 };

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

@@ -0,0 +1,54 @@
+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/components/create-component-form/utils/replace-element-with-component.ts

@@ -1,16 +1,34 @@
-import { replaceElement, type V1Element } from '@elementor/editor-elements';
-import { numberPropTypeUtil } from '@elementor/editor-props';
+import { replaceElement, type V1ElementData, type V1ElementModelProps } from '@elementor/editor-elements';
 
-export const replaceElementWithComponent = async ( element: V1Element, componentId: number ) => {
+type ComponentInstanceParams = {
+	id?: number;
+	name: string;
+	uid: string;
+};
+
+export const replaceElementWithComponent = ( element: V1ElementData, component: ComponentInstanceParams ) => {
 	replaceElement( {
 		currentElement: element,
-		newElement: {
-			elType: 'widget',
-			widgetType: 'e-component',
-			settings: {
-				component_id: numberPropTypeUtil.create( componentId ),
-			},
-		},
+		newElement: createComponentModel( component ),
 		withHistory: false,
 	} );
 };
+
+export const createComponentModel = ( component: ComponentInstanceParams ): Omit< V1ElementModelProps, 'id' > => {
+	return {
+		elType: 'widget',
+		widgetType: 'e-component',
+		settings: {
+			component_instance: {
+				$$type: 'component-instance',
+				value: {
+					component_id: component.id ?? component.uid,
+				},
+			},
+		},
+		editor_settings: {
+			title: component.name,
+			component_uid: component.uid,
+		},
+	};
+};

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,96 @@
+import * as React from 'react';
+import { useEffect } 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 { apiClient } from '../../api';
+import { useNavigateBack } from '../../hooks/use-navigate-back';
+import { updateCurrentComponent } from '../../store/actions/update-current-component';
+import { type ComponentsPathItem, selectCurrentComponentId, selectPath } from '../../store/store';
+import { COMPONENT_DOCUMENT_TYPE } from '../consts';
+import { ComponentModal } from './component-modal';
+
+export function EditComponent() {
+	const currentComponentId = useSelector( selectCurrentComponentId );
+
+	useHandleDocumentSwitches();
+
+	const onBack = useNavigateBack();
+
+	const elementDom = getComponentDOMElement( currentComponentId ?? undefined );
+
+	if ( ! elementDom ) {
+		return null;
+	}
+
+	return <ComponentModal element={ elementDom } onClose={ onBack } />;
+}
+
+function useHandleDocumentSwitches() {
+	const documentsManager = getV1DocumentsManager();
+	const currentComponentId = useSelector( selectCurrentComponentId );
+	const path = useSelector( selectPath );
+
+	useEffect( () => {
+		return listenTo( commandEndEvent( 'editor/documents/attach-preview' ), () => {
+			const nextDocument = documentsManager.getCurrent();
+
+			if ( nextDocument.id === currentComponentId ) {
+				return;
+			}
+
+			if ( currentComponentId ) {
+				apiClient.unlockComponent( currentComponentId );
+			}
+
+			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 );
+	}
+
+	return [
+		...path,
+		{
+			instanceId: nextDocument?.container.view?.el?.dataset.id,
+			componentId: nextDocument.id,
+		},
+	];
+}
+
+function getComponentDOMElement( id: V1Document[ 'id' ] | undefined ) {
+	if ( ! id ) {
+		return null;
+	}
+
+	const documentsManager = getV1DocumentsManager();
+
+	const currentComponent = documentsManager.get( id );
+
+	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;
+
+	return elementDom ?? null;
+}

package/src/components/in-edit-mode.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { closeDialog, openDialog } from '@elementor/editor-ui';
+import { InfoCircleFilledIcon } from '@elementor/icons';
+import { Box, Button, DialogActions, DialogContent, DialogHeader, Icon, Stack, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+export const openEditModeDialog = ( lockedBy: string ) => {
+	openDialog( {
+		component: <EditModeDialog lockedBy={ lockedBy } />,
+	} );
+};
+
+const EditModeDialog = ( { lockedBy }: { lockedBy: string } ) => {
+	/* translators: %s is the name of the user who is currently editing the document */
+	const content = __( '%s is currently editing this document', 'elementor' ).replace( '%s', lockedBy );
+	return (
+		<>
+			<DialogHeader logo={ false }>
+				<Box display="flex" alignItems="center" gap={ 1 }>
+					<Icon color="secondary">
+						<InfoCircleFilledIcon fontSize="medium" />
+					</Icon>
+					<Typography variant="subtitle1">{ content }</Typography>
+				</Box>
+			</DialogHeader>
+			<DialogContent>
+				<Stack spacing={ 2 } direction="column">
+					<Typography variant="body2">
+						{ __(
+							'You can wait for them to finish or reach out to coordinate your changes together.',
+							'elementor'
+						) }
+					</Typography>
+					<DialogActions>
+						<Button color="secondary" variant="contained" onClick={ closeDialog }>
+							{ __( 'Close', 'elementor' ) }
+						</Button>
+					</DialogActions>
+				</Stack>
+			</DialogContent>
+		</>
+	);
+};