@elementor/editor-components 4.0.0-manual → 4.1.0-684

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

@@ -1,135 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { Form, MenuListItem } from '@elementor/editor-ui';
-import { Button, FormLabel, Grid, Select, Stack, type SxProps, TextField, Typography } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { type OverridableProp } from '../../../types';
-import { validatePropLabel } from './utils/validate-prop-label';
-
-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 }[];
-	existingLabels?: string[];
-	sx?: SxProps;
-};
-
-export function OverridablePropForm( { onSubmit, groups, currentValue, existingLabels = [], sx }: Props ) {
-	const selectGroups = groups?.length ? groups : [ DEFAULT_GROUP ];
-
-	const [ propLabel, setPropLabel ] = useState< string | null >( currentValue?.label ?? null );
-	const [ group, setGroup ] = useState< string | null >( currentValue?.groupId ?? selectGroups[ 0 ]?.value ?? null );
-	const [ error, setError ] = useState< string | null >( 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' );
-
-	const handleSubmit = () => {
-		const validationResult = validatePropLabel( propLabel ?? '', existingLabels, currentValue?.label );
-
-		if ( ! validationResult.isValid ) {
-			setError( validationResult.errorMessage );
-			return;
-		}
-
-		onSubmit( { label: propLabel ?? '', group } );
-	};
-
-	return (
-		<Form onSubmit={ handleSubmit } data-testid="overridable-prop-form">
-			<Stack alignItems="start" sx={ { width: '268px', ...sx } }>
-				<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 > ) => {
-								const newValue = e.target.value;
-								setPropLabel( newValue );
-								const validationResult = validatePropLabel(
-									newValue,
-									existingLabels,
-									currentValue?.label
-								);
-								setError( validationResult.errorMessage );
-							} }
-							error={ Boolean( error ) }
-							helperText={ error }
-						/>
-					</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={ ( e: React.ChangeEvent< HTMLSelectElement > ) =>
-								setGroup( e.target.value as string | null )
-							}
-							displayEmpty
-							renderValue={ ( selectedValue: string | null ) => {
-								if ( ! selectedValue ) {
-									return selectGroups[ 0 ].label;
-								}
-
-								return (
-									selectGroups.find( ( { value } ) => value === selectedValue )?.label ??
-									selectedValue
-								);
-							} }
-						>
-							{ selectGroups.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 || Boolean( error ) }
-						variant="contained"
-						color="primary"
-						size="small"
-					>
-						{ ctaLabel }
-					</Button>
-				</Stack>
-			</Stack>
-		</Form>
-	);
-}

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

@@ -1,138 +0,0 @@
-import * as React from 'react';
-import { useBoundProp } from '@elementor/editor-controls';
-import { useElement } from '@elementor/editor-editing-panel';
-import { getWidgetsCache } from '@elementor/editor-elements';
-import { type PropType, type TransformablePropValue } from '@elementor/editor-props';
-import { bindPopover, bindTrigger, Popover, Tooltip, usePopupState } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { useSanitizeOverridableProps } from '../../../hooks/use-sanitize-overridable-props';
-import { componentOverridablePropTypeUtil } from '../../../prop-types/component-overridable-prop-type';
-import { useComponentInstanceElement, useOverridablePropValue } from '../../../provider/overridable-prop-context';
-import { useCurrentComponentId } from '../../../store/store';
-import { type OverridableProps } from '../../../types';
-import { getOverridableProp } from '../../../utils/get-overridable-prop';
-import { resolveOverridePropValue } from '../../../utils/resolve-override-prop-value';
-import { setOverridableProp } from '../../store/actions/set-overridable-prop';
-import { Indicator } from './indicator';
-import { OverridablePropForm } from './overridable-prop-form';
-
-export function OverridablePropIndicator() {
-	const { propType } = useBoundProp();
-	const componentId = useCurrentComponentId();
-	const overridableProps = useSanitizeOverridableProps( componentId );
-
-	if ( ! isPropAllowed( propType ) || ! componentId || ! overridableProps ) {
-		return null;
-	}
-
-	return <Content componentId={ componentId } 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 contextOverridableValue = useOverridablePropValue();
-	const componentInstanceElement = useComponentInstanceElement();
-
-	const { value: boundPropOverridableValue, setValue: setOverridableValue } = useBoundProp(
-		componentOverridablePropTypeUtil
-	);
-
-	/**
-	 * This is intended to handle custom layout controls, such as <LinkControl />, which has <ControlLabel /> nested within it
-	 * i.e. its bound prop value would be the one manipulated by the new <PropProvider /> thus won't be considered overridable
-	 */
-	const overridableValue = boundPropOverridableValue ?? contextOverridableValue;
-
-	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 propTypeDefault = propType.default ?? {};
-
-		const originValue = resolveOverridePropValue( overridableValue?.origin_value ) ?? value ?? propTypeDefault;
-
-		const matchingOverridableProp = overridableValue
-			? overridableProps?.props?.[ overridableValue.override_key ]
-			: undefined;
-
-		const overridablePropConfig = setOverridableProp( {
-			componentId,
-			overrideKey: overridableValue?.override_key ?? null,
-			elementId: componentInstanceElement?.element.id ?? elementId,
-			label,
-			groupId: group,
-			propKey: bind,
-			elType: elType ?? 'widget',
-			widgetType: componentInstanceElement?.elementType.key ?? elementType.key,
-			originValue,
-			originPropFields: matchingOverridableProp?.originPropFields,
-			source: 'user',
-		} );
-
-		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,
-					} ) ) }
-					existingLabels={ Object.values( overridableProps?.props ?? {} ).map( ( prop ) => prop.label ) }
-					currentValue={ overridableConfig }
-				/>
-			</Popover>
-		</>
-	);
-}
-
-function isPropAllowed( propType: PropType ) {
-	return propType.meta.overridable !== false;
-}

package/src/extended/components/overridable-props/utils/validate-prop-label.ts

@@ -1,38 +0,0 @@
-import { __ } from '@wordpress/i18n';
-
-export const ERROR_MESSAGES = {
-	EMPTY_NAME: __( 'Property name is required', 'elementor' ),
-	DUPLICATE_NAME: __( 'Property name already exists', 'elementor' ),
-} as const;
-
-type ValidationResult = {
-	isValid: boolean;
-	errorMessage: string | null;
-};
-
-export function validatePropLabel( label: string, existingLabels: string[], currentLabel?: string ): ValidationResult {
-	const trimmedLabel = label.trim();
-
-	if ( ! trimmedLabel ) {
-		return { isValid: false, errorMessage: ERROR_MESSAGES.EMPTY_NAME };
-	}
-
-	const normalizedLabel = trimmedLabel.toLowerCase();
-	const normalizedCurrentLabel = currentLabel?.trim().toLowerCase();
-
-	const isDuplicate = existingLabels.some( ( existingLabel ) => {
-		const normalizedExisting = existingLabel.trim().toLowerCase();
-
-		if ( normalizedCurrentLabel && normalizedExisting === normalizedCurrentLabel ) {
-			return false;
-		}
-
-		return normalizedExisting === normalizedLabel;
-	} );
-
-	if ( isDuplicate ) {
-		return { isValid: false, errorMessage: ERROR_MESSAGES.DUPLICATE_NAME };
-	}
-
-	return { isValid: true, errorMessage: null };
-}

package/src/extended/consts.ts

@@ -1,3 +0,0 @@
-export const OVERRIDABLE_PROP_REPLACEMENT_ID = 'overridable-prop';
-
-export const COMPONENT_DOCUMENT_TYPE = 'elementor_component';

package/src/extended/hooks/use-navigate-back.ts

@@ -1,24 +0,0 @@
-import { useCallback } from 'react';
-import { getV1DocumentsManager } from '@elementor/editor-documents';
-import { __useSelector as useSelector } from '@elementor/store';
-
-import { selectPath } from '../../store/store';
-import { switchToComponent } from '../../utils/switch-to-component';
-
-export function useNavigateBack() {
-	const path = useSelector( selectPath );
-
-	const documentsManager = getV1DocumentsManager();
-
-	return useCallback( () => {
-		const { componentId: prevComponentId, instanceId: prevComponentInstanceId } = path.at( -2 ) ?? {};
-
-		if ( prevComponentId && prevComponentInstanceId ) {
-			switchToComponent( prevComponentId, prevComponentInstanceId );
-
-			return;
-		}
-
-		switchToComponent( documentsManager.getInitialId() );
-	}, [ path, documentsManager ] );
-}

package/src/extended/init.ts

@@ -1,104 +0,0 @@
-import { injectIntoLogic, injectIntoTop } from '@elementor/editor';
-import { registerControlReplacement } from '@elementor/editor-controls';
-import { getV1CurrentDocument } from '@elementor/editor-documents';
-import {
-	FIELD_TYPE,
-	injectIntoPanelHeaderTop,
-	registerEditingPanelReplacement,
-	registerFieldIndicator,
-} from '@elementor/editor-editing-panel';
-import { registerTab } from '@elementor/editor-elements-panel';
-import { __registerPanel as registerPanel } from '@elementor/editor-panels';
-import { registerDataHook } from '@elementor/editor-v1-adapters';
-import { __ } from '@wordpress/i18n';
-
-import { componentOverridablePropTypeUtil } from '../prop-types/component-overridable-prop-type';
-import { type ExtendedWindow } from '../types';
-import { onElementDrop } from '../utils/tracking';
-import { ComponentPanelHeader } from './components/component-panel-header/component-panel-header';
-import { panel as componentPropertiesPanel } from './components/component-properties-panel/component-properties-panel';
-import { ExtendedComponents } from './components/components-tab/components';
-import { CreateComponentForm } from './components/create-component-form/create-component-form';
-import { EditComponent } from './components/edit-component/edit-component';
-import { ExtendedInstanceEditingPanel } from './components/instance-editing-panel/instance-editing-panel';
-import { OverridablePropControl } from './components/overridable-props/overridable-prop-control';
-import { OverridablePropIndicator } from './components/overridable-props/overridable-prop-indicator';
-import { COMPONENT_DOCUMENT_TYPE, OVERRIDABLE_PROP_REPLACEMENT_ID } from './consts';
-import { initMcp } from './mcp';
-import { beforeSave } from './sync/before-save';
-import { initCleanupOverridablePropsOnDelete } from './sync/cleanup-overridable-props-on-delete';
-import { initHandleComponentEditModeContainer } from './sync/handle-component-edit-mode-container';
-import { initNonAtomicNestingPrevention } from './sync/prevent-non-atomic-nesting';
-import { initRevertOverridablesOnCopyOrDuplicate } from './sync/revert-overridables-on-copy-or-duplicate';
-import { SanitizeOverridableProps } from './sync/sanitize-overridable-props';
-
-export function initExtended() {
-	registerEditingPanelReplacement( {
-		id: 'component-instance-edit-panel',
-		condition: ( _, elementType ) => elementType.key === 'e-component',
-		component: ExtendedInstanceEditingPanel,
-	} );
-
-	registerTab( {
-		id: 'components',
-		label: __( 'Components', 'elementor' ),
-		component: ExtendedComponents,
-	} );
-
-	registerPanel( componentPropertiesPanel );
-
-	registerDataHook( 'dependency', 'editor/documents/close', ( args ) => {
-		const document = getV1CurrentDocument();
-		if ( document.config.type === COMPONENT_DOCUMENT_TYPE ) {
-			args.mode = 'autosave';
-		}
-		return true;
-	} );
-
-	registerDataHook( 'after', 'preview/drop', onElementDrop );
-
-	( window as unknown as ExtendedWindow ).elementorCommon.__beforeSave = beforeSave;
-
-	injectIntoTop( {
-		id: 'create-component-popup',
-		component: CreateComponentForm,
-	} );
-
-	injectIntoTop( {
-		id: 'edit-component',
-		component: EditComponent,
-	} );
-
-	injectIntoPanelHeaderTop( {
-		id: 'component-panel-header',
-		component: ComponentPanelHeader,
-	} );
-
-	registerFieldIndicator( {
-		fieldType: FIELD_TYPE.SETTINGS,
-		id: 'component-overridable-prop',
-		priority: 1,
-		indicator: OverridablePropIndicator,
-	} );
-
-	registerControlReplacement( {
-		id: OVERRIDABLE_PROP_REPLACEMENT_ID,
-		component: OverridablePropControl,
-		condition: ( { value } ) => componentOverridablePropTypeUtil.isValid( value ),
-	} );
-
-	initCleanupOverridablePropsOnDelete();
-
-	initMcp();
-
-	initNonAtomicNestingPrevention();
-
-	initHandleComponentEditModeContainer();
-
-	initRevertOverridablesOnCopyOrDuplicate();
-
-	injectIntoLogic( {
-		id: 'sanitize-overridable-props',
-		component: SanitizeOverridableProps,
-	} );
-}

package/src/extended/mcp/index.ts

@@ -1,14 +0,0 @@
-import { getMCPByDomain } from '@elementor/editor-mcp';
-
-import { initSaveAsComponentTool } from './save-as-component-tool';
-
-export function initMcp() {
-	const { setMCPDescription } = getMCPByDomain( 'components' );
-
-	setMCPDescription(
-		`Elementor Editor Components MCP - Tools for creating and managing reusable components. 
-        Components are reusable blocks of content that can be used multiple times across the pages, its a widget which contains a set of elements and styles.`
-	);
-
-	initSaveAsComponentTool();
-}