@elementor/editor-components 3.33.0-99 → 3.34.2

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,134 @@
+import * as React from 'react';
+import { useCallback, useEffect } 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 { updateCurrentComponent } from '../../store/actions';
+import { type ComponentsPathItem, selectCurrentComponentId, selectPath } from '../../store/store';
+import { COMPONENT_DOCUMENT_TYPE } from '../consts';
+import { ComponentModal } from './component-modal';
+
+export function EditComponent() {
+	const { path, currentComponentId } = useCurrentComponent();
+
+	useHandleDocumentSwitches();
+
+	const onBack = useNavigateBack( path );
+
+	const elementDom = getComponentDOMElement( currentComponentId ?? undefined );
+
+	if ( ! elementDom ) {
+		return null;
+	}
+
+	return <ComponentModal element={ elementDom } onClose={ onBack } />;
+}
+
+function useHandleDocumentSwitches() {
+	const documentsManager = getV1DocumentsManager();
+	const { path, currentComponentId } = useCurrentComponent();
+
+	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 useNavigateBack( path: ComponentsPathItem[] ) {
+	const documentsManager = getV1DocumentsManager();
+
+	return useCallback( () => {
+		const { componentId: prevComponentId, instanceId: prevComponentInstanceId } = path.at( -2 ) ?? {};
+
+		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 ] );
+}
+
+function useCurrentComponent() {
+	const path = useSelector( selectPath );
+	const currentComponentId = useSelector( selectCurrentComponentId );
+
+	return {
+		path,
+		currentComponentId,
+	};
+}
+
+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 elementDom = widget?.children?.[ 0 ].view?.el;
+
+	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>
+		</>
+	);
+};

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

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { forwardRef } from 'react';
+import { CheckIcon, PlusIcon } from '@elementor/icons';
+import { type bindTrigger, 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;
+	triggerProps: ReturnType< typeof bindTrigger >;
+	isOpen: boolean;
+};
+export const Indicator = forwardRef< HTMLDivElement, Props >( ( { triggerProps, isOpen, isOverridable }, ref ) => (
+	<Content ref={ ref } { ...triggerProps } className={ isOpen || isOverridable ? 'enlarged' : '' }>
+		<IconContainer
+			className="icon"
+			aria-label={
+				isOverridable ? __( 'Overridable property', 'elementor' ) : __( 'Make prop overridable', 'elementor' )
+			}
+		>
+			{ isOverridable ? <CheckIcon fontSize={ SIZE } /> : <PlusIcon fontSize={ SIZE } /> }
+		</IconContainer>
+	</Content>
+) );

package/src/components/overridable-props/overridable-prop-form.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { Form, MenuListItem } from '@elementor/editor-ui';
+import { Button, FormLabel, Grid, Select, Stack, TextField, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { type OverridableProp } from '../../types';
+
+const SIZE = 'tiny';
+
+const DEFAULT_GROUP = { value: null, label: __( 'Default', 'elementor' ) };
+
+type Props = {
+	onSubmit: ( data: { label: string; group: string | null } ) => void;
+	currentValue?: OverridableProp;
+	groups?: { value: string; label: string }[];
+};
+
+export function OverridablePropForm( { onSubmit, groups, currentValue }: Props ) {
+	const [ propLabel, setPropLabel ] = useState< string | null >( currentValue?.label ?? null );
+	const [ group, setGroup ] = useState< string | null >( currentValue?.groupId ?? groups?.[ 0 ]?.value ?? null );
+
+	const name = __( 'Name', 'elementor' );
+	const groupName = __( 'Group Name', 'elementor' );
+
+	const isCreate = currentValue === undefined;
+
+	const title = isCreate ? __( 'Create new property', 'elementor' ) : __( 'Update property', 'elementor' );
+	const ctaLabel = isCreate ? __( 'Create', 'elementor' ) : __( 'Update', 'elementor' );
+
+	return (
+		<Form onSubmit={ () => onSubmit( { label: propLabel ?? '', group } ) }>
+			<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%', mb: 1.5 } }
+				>
+					<Typography variant="caption" sx={ { color: 'text.primary', fontWeight: '500', lineHeight: 1 } }>
+						{ title }
+					</Typography>
+				</Stack>
+				<Grid container gap={ 0.75 } alignItems="start" px={ 1.5 } mb={ 1.5 }>
+					<Grid item xs={ 12 }>
+						<FormLabel size="tiny">{ name }</FormLabel>
+					</Grid>
+					<Grid item xs={ 12 }>
+						<TextField
+							name={ name }
+							size={ SIZE }
+							fullWidth
+							placeholder={ __( 'Enter value', 'elementor' ) }
+							value={ propLabel ?? '' }
+							onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => setPropLabel( e.target.value ) }
+						/>
+					</Grid>
+				</Grid>
+				<Grid container gap={ 0.75 } alignItems="start" px={ 1.5 } mb={ 1.5 }>
+					<Grid item xs={ 12 }>
+						<FormLabel size="tiny">{ groupName }</FormLabel>
+					</Grid>
+					<Grid item xs={ 12 }>
+						<Select
+							name={ groupName }
+							size={ SIZE }
+							fullWidth
+							value={ group ?? null }
+							onChange={ setGroup }
+							displayEmpty
+							renderValue={ ( selectedValue: string | null ) => {
+								if ( ! selectedValue || selectedValue === '' ) {
+									const [ firstGroup = DEFAULT_GROUP ] = groups ?? [];
+
+									return firstGroup.label;
+								}
+
+								return groups?.find( ( { value } ) => value === selectedValue )?.label ?? selectedValue;
+							} }
+						>
+							{ ( groups ?? [ DEFAULT_GROUP ] ).map( ( { label: groupLabel, ...props } ) => (
+								<MenuListItem key={ props.value } { ...props } value={ props.value ?? '' }>
+									{ groupLabel }
+								</MenuListItem>
+							) ) }
+						</Select>
+					</Grid>
+				</Grid>
+				<Stack direction="row" justifyContent="flex-end" alignSelf="end" mt={ 1.5 } py={ 1 } px={ 1.5 }>
+					<Button type="submit" disabled={ ! propLabel } variant="contained" color="primary" size="small">
+						{ ctaLabel }
+					</Button>
+				</Stack>
+			</Stack>
+		</Form>
+	);
+}