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

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

@@ -0,0 +1,80 @@
+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 ref={ ref } { ...props } 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-control.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { type ComponentType } from 'react';
+import { ControlReplacementsProvider, PropKeyProvider, PropProvider, useBoundProp } from '@elementor/editor-controls';
+import { createTopLevelObjectType, useElement } from '@elementor/editor-editing-panel';
+import { type PropValue } from '@elementor/editor-props';
+import { __getState as getState } from '@elementor/store';
+
+import {
+	componentOverridablePropTypeUtil,
+	type ComponentOverridablePropValue,
+} from '../../prop-types/component-overridable-prop-type';
+import { updateOverridablePropOriginValue } from '../../store/actions/update-overridable-prop-origin-value';
+import { selectCurrentComponentId } from '../../store/store';
+
+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 = selectCurrentComponentId( getState() );
+
+	if ( ! componentId ) {
+		throw new Error( 'Component ID is required' );
+	}
+
+	if ( ! value?.override_key ) {
+		throw new Error( 'Override key is required' );
+	}
+
+	const setOverridableValue = ( newValue: Record< typeof bind, PropValue | null > ) => {
+		const propValue = {
+			...value,
+			origin_value: newValue[ bind ],
+		} as ComponentOverridablePropValue;
+
+		setValue( propValue );
+		updateOverridablePropOriginValue( componentId, propValue );
+	};
+
+	const propType = createTopLevelObjectType( {
+		schema: {
+			[ bind ]: elementType.propsSchema[ bind ],
+		},
+	} );
+
+	const objectPlaceholder: Record< string, PropValue > | undefined = placeholder
+		? { [ bind ]: placeholder }
+		: undefined;
+
+	return (
+		<PropProvider
+			{ ...propContext }
+			propType={ propType }
+			setValue={ setOverridableValue }
+			value={ { [ bind ]: value.origin_value } }
+			placeholder={ objectPlaceholder }
+		>
+			<PropKeyProvider bind={ bind }>
+				<ControlReplacementsProvider replacements={ [] }>
+					<OriginalControl { ...( props as T ) } />
+				</ControlReplacementsProvider>
+			</PropKeyProvider>
+		</PropProvider>
+	);
+}

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

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

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import { useBoundProp } from '@elementor/editor-controls';
+import { getV1CurrentDocument } from '@elementor/editor-documents';
+import { useElement } from '@elementor/editor-editing-panel';
+import { getWidgetsCache } from '@elementor/editor-elements';
+import { type TransformablePropValue } from '@elementor/editor-props';
+import { __getState as getState } from '@elementor/store';
+import { bindPopover, bindTrigger, Popover, Tooltip, usePopupState } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { componentOverridablePropTypeUtil } from '../../prop-types/component-overridable-prop-type';
+import { setOverridableProp } from '../../store/actions/set-overridable-prop';
+import { selectOverridableProps } from '../../store/store';
+import { type OverridableProps } from '../../types';
+import { COMPONENT_DOCUMENT_TYPE } from '../consts';
+import { Indicator } from './indicator';
+import { OverridablePropForm } from './overridable-prop-form';
+import { getOverridableProp } from './utils/get-overridable-prop';
+
+const FORBIDDEN_KEYS = [ '_cssid', 'attributes' ];
+
+export function OverridablePropIndicator() {
+	const { bind } = useBoundProp();
+	const currentDocument = getV1CurrentDocument();
+
+	if ( currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE || ! currentDocument.id ) {
+		return null;
+	}
+
+	if ( ! isPropAllowed( bind ) ) {
+		return null;
+	}
+
+	const overridableProps = selectOverridableProps( getState(), currentDocument.id );
+
+	return <Content componentId={ currentDocument.id } overridableProps={ overridableProps } />;
+}
+
+type Props = {
+	componentId: number;
+	overridableProps?: OverridableProps;
+};
+export function Content( { componentId, overridableProps }: Props ) {
+	const {
+		element: { id: elementId },
+		elementType,
+	} = useElement();
+	const { value, bind, propType } = useBoundProp();
+	const { value: overridableValue, setValue: setOverridableValue } = useBoundProp( componentOverridablePropTypeUtil );
+
+	const popupState = usePopupState( {
+		variant: 'popover',
+	} );
+
+	const triggerProps = bindTrigger( popupState );
+	const popoverProps = bindPopover( popupState );
+
+	const { elType } = getWidgetsCache()?.[ elementType.key ] ?? { elType: 'widget' };
+
+	const handleSubmit = ( { label, group }: { label: string; group: string | null } ) => {
+		const originValue = ! overridableValue ? value ?? propType.default : overridableValue?.origin_value ?? {};
+
+		const overridablePropConfig = setOverridableProp( {
+			componentId,
+			overrideKey: overridableValue?.override_key ?? null,
+			elementId,
+			label,
+			groupId: group,
+			propKey: bind,
+			elType: elType ?? 'widget',
+			widgetType: elementType.key,
+			originValue,
+		} );
+
+		if ( ! overridableValue && overridablePropConfig ) {
+			setOverridableValue( {
+				override_key: overridablePropConfig.overrideKey,
+				origin_value: originValue as TransformablePropValue< string, unknown >,
+			} );
+		}
+
+		popupState.close();
+	};
+
+	const overridableConfig = overridableValue
+		? getOverridableProp( { componentId, overrideKey: overridableValue.override_key } )
+		: undefined;
+
+	return (
+		<>
+			<Tooltip placement="top" title={ __( 'Override Property', 'elementor' ) }>
+				<Indicator { ...triggerProps } isOpen={ !! popoverProps.open } isOverridable={ !! overridableValue } />
+			</Tooltip>
+			<Popover
+				disableScrollLock
+				anchorOrigin={ {
+					vertical: 'bottom',
+					horizontal: 'right',
+				} }
+				transformOrigin={ {
+					vertical: 'top',
+					horizontal: 'right',
+				} }
+				PaperProps={ {
+					sx: { my: 2.5 },
+				} }
+				{ ...popoverProps }
+			>
+				<OverridablePropForm
+					onSubmit={ handleSubmit }
+					groups={ overridableProps?.groups.order.map( ( groupId ) => ( {
+						value: groupId,
+						label: overridableProps.groups.items[ groupId ].label,
+					} ) ) }
+					currentValue={ overridableConfig }
+				/>
+			</Popover>
+		</>
+	);
+}
+
+function isPropAllowed( bind: string ) {
+	return ! FORBIDDEN_KEYS.includes( bind );
+}

package/src/components/overridable-props/utils/get-overridable-prop.ts

@@ -0,0 +1,20 @@
+import { __getState as getState } from '@elementor/store';
+
+import { selectOverridableProps } from '../../../store/store';
+import { type OverridableProp } from '../../../types';
+
+export function getOverridableProp( {
+	componentId,
+	overrideKey,
+}: {
+	componentId: number;
+	overrideKey: string;
+} ): OverridableProp | undefined {
+	const overridableProps = selectOverridableProps( getState(), componentId );
+
+	if ( ! overridableProps ) {
+		return undefined;
+	}
+
+	return overridableProps.props[ overrideKey ];
+}

package/src/create-component-type.ts

@@ -0,0 +1,194 @@
+import {
+	type BackboneModel,
+	type CreateTemplatedElementTypeOptions,
+	createTemplatedElementView,
+	type ElementModel,
+	type ElementType,
+	type ElementView,
+	type LegacyWindow,
+} from '@elementor/editor-canvas';
+import { getCurrentDocument } from '@elementor/editor-documents';
+import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
+import { __ } from '@wordpress/i18n';
+
+import { apiClient } from './api';
+import { type ComponentInstancePropValue, type ExtendedWindow } from './types';
+import { trackComponentEvent } from './utils/tracking';
+
+type ContextMenuEventData = { location: string; secondaryLocation: string; trigger: string };
+
+export const TYPE = 'e-component';
+
+export function createComponentType(
+	options: CreateTemplatedElementTypeOptions & { showLockedByModal?: ( lockedBy: string ) => void }
+): typeof ElementType {
+	const legacyWindow = window as unknown as LegacyWindow;
+
+	return class extends legacyWindow.elementor.modules.elements.types.Widget {
+		getType() {
+			return options.type;
+		}
+
+		getView() {
+			return createComponentView( options );
+		}
+	};
+}
+
+function createComponentView(
+	options: CreateTemplatedElementTypeOptions & { showLockedByModal?: ( lockedBy: string ) => void }
+): typeof ElementView {
+	return class extends createTemplatedElementView( options ) {
+		legacyWindow = window as unknown as LegacyWindow & ExtendedWindow;
+		eventsManagerConfig = this.legacyWindow.elementorCommon.eventsManager.config;
+
+		isComponentCurrentlyEdited() {
+			const currentDocument = getCurrentDocument();
+
+			return currentDocument?.id === this.getComponentId();
+		}
+
+		afterSettingsResolve( settings: { [ key: string ]: unknown } ) {
+			if ( settings.component_instance ) {
+				this.collection = this.legacyWindow.elementor.createBackboneElementsCollection(
+					settings.component_instance
+				);
+
+				this.collection.models.forEach( setInactiveRecursively );
+
+				settings.component_instance = '<template data-children-placeholder></template>';
+			}
+
+			return settings;
+		}
+
+		getDomElement() {
+			// Component does not have a DOM element, so we return the first child's DOM element.
+			return this.children.findByIndex( 0 )?.getDomElement() ?? this.$el;
+		}
+
+		attachBuffer( collectionView: this, buffer: DocumentFragment ): void {
+			const childrenPlaceholder = collectionView.$el.find( '[data-children-placeholder]' ).get( 0 );
+
+			if ( ! childrenPlaceholder ) {
+				super.attachBuffer( collectionView, buffer );
+
+				return;
+			}
+
+			childrenPlaceholder.replaceWith( buffer );
+		}
+
+		getComponentId() {
+			const componentInstance = (
+				this.options?.model?.get( 'settings' )?.get( 'component_instance' ) as ComponentInstancePropValue
+			 )?.value;
+
+			return componentInstance.component_id;
+		}
+
+		getContextMenuGroups() {
+			const filteredGroups = super.getContextMenuGroups().filter( ( group ) => group.name !== 'save' );
+			const componentId = this.getComponentId();
+			if ( ! componentId ) {
+				return filteredGroups;
+			}
+
+			const newGroup = [
+				{
+					name: 'edit component',
+					actions: [
+						{
+							name: 'edit component',
+							icon: 'eicon-edit',
+							title: () => __( 'Edit Component', 'elementor' ),
+							isEnabled: () => true,
+							callback: ( _: unknown, eventData: ContextMenuEventData ) =>
+								this.editComponent( eventData ),
+						},
+					],
+				},
+			];
+			return [ ...filteredGroups, ...newGroup ];
+		}
+
+		async switchDocument() {
+			//todo: handle unpublished
+			const { isAllowedToSwitchDocument, lockedBy } = await apiClient.getComponentLockStatus(
+				this.getComponentId() as number
+			);
+
+			if ( ! isAllowedToSwitchDocument ) {
+				options.showLockedByModal?.( lockedBy || '' );
+			} else {
+				runCommand( 'editor/documents/switch', {
+					id: this.getComponentId(),
+					mode: 'autosave',
+					selector: `[data-id="${ this.model.get( 'id' ) }"]`,
+					shouldScroll: false,
+				} );
+			}
+		}
+
+		editComponent( { trigger, location, secondaryLocation }: ContextMenuEventData ) {
+			if ( this.isComponentCurrentlyEdited() ) {
+				return;
+			}
+
+			this.switchDocument();
+
+			const editorSettings = this.model.get( 'editor_settings' );
+
+			trackComponentEvent( {
+				action: 'edited',
+				component_uid: editorSettings?.component_uid,
+				component_name: editorSettings?.title,
+				location,
+				secondary_location: secondaryLocation,
+				trigger,
+			} );
+		}
+
+		handleDblClick( e: MouseEvent ) {
+			e.stopPropagation();
+
+			const { triggers, locations, secondaryLocations } = this.eventsManagerConfig;
+
+			this.editComponent( {
+				trigger: triggers.doubleClick,
+				location: locations.canvas,
+				secondaryLocation: secondaryLocations.canvasElement,
+			} );
+		}
+
+		events() {
+			return {
+				...super.events(),
+				dblclick: this.handleDblClick,
+			};
+		}
+
+		attributes() {
+			return {
+				...super.attributes(),
+				'data-elementor-id': this.getComponentId(),
+			};
+		}
+	};
+}
+
+function setInactiveRecursively( model: BackboneModel< ElementModel > ) {
+	const editSettings = model.get( 'editSettings' );
+
+	if ( editSettings ) {
+		editSettings.set( 'inactive', true );
+	}
+
+	const elements = model.get( 'elements' );
+
+	if ( elements ) {
+		elements.forEach( ( childModel ) => {
+			setInactiveRecursively( childModel );
+		} );
+	}
+}

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-components.ts

@@ -1,13 +1,10 @@
-import { useQuery } from '@elementor/query';
+import { __useSelector as useSelector } from '@elementor/store';
 
-import { apiClient } from '../api';
-
-export const COMPONENTS_QUERY_KEY = 'components';
+import { selectComponents, selectLoadIsPending } from '../store/store';
 
 export const useComponents = () => {
-	return useQuery( {
-		queryKey: [ COMPONENTS_QUERY_KEY ],
-		queryFn: apiClient.get,
-		staleTime: Infinity,
-	} );
+	const components = useSelector( selectComponents );
+	const isLoading = useSelector( selectLoadIsPending );
+
+	return { components, isLoading };
 };

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 ] );
+}