@elementor/editor-editing-panel 0.19.0 → 1.1.0

package/src/controls/control-context.tsx

@@ -1,22 +0,0 @@
-import { createContext, useContext } from 'react';
-import { PropKey, PropValue } from './props/types';
-
-export type ControlContext< T extends PropValue > = {
-	bind: PropKey;
-	setValue: ( value: T | undefined ) => void;
-	value: T | undefined;
-};
-
-export const ControlContext = createContext< ControlContext< PropValue > | null >( null );
-
-export function useControl< T extends PropValue >(): ControlContext< T | undefined >;
-export function useControl< T extends PropValue >( defaultValue: T ): ControlContext< T >;
-export function useControl< T extends PropValue >( defaultValue?: T ) {
-	const controlContext = useContext< ControlContext< T > >( ControlContext as never );
-
-	if ( ! controlContext ) {
-		throw new Error( 'useControl must be used within a ControlContext' );
-	}
-
-	return { ...controlContext, value: controlContext.value ?? defaultValue };
-}

package/src/controls/control-replacement.ts

@@ -1,34 +0,0 @@
-import { ComponentType } from 'react';
-import { PropValue } from './props/types';
-import { useControl } from './control-context';
-
-type ReplaceWhenParams = {
-	value: PropValue;
-};
-
-type ControlReplacement = {
-	component: ComponentType;
-	condition: ( { value }: ReplaceWhenParams ) => boolean;
-};
-
-let controlReplacement: ControlReplacement | undefined;
-
-const getControlReplacement = ( { value }: ReplaceWhenParams ) => {
-	let shouldReplace = false;
-
-	try {
-		shouldReplace = !! controlReplacement?.condition( { value } ) && !! controlReplacement?.component;
-	} catch {}
-
-	return shouldReplace ? controlReplacement?.component : undefined;
-};
-
-export function replaceControl( { component, condition }: ControlReplacement ) {
-	controlReplacement = { component, condition };
-}
-
-export function useControlReplacement() {
-	const { value } = useControl();
-
-	return getControlReplacement( { value } );
-}

package/src/controls/control-types/color-control.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { UnstableColorPicker, UnstableColorPickerProps } from '@elementor/ui';
-import { useControl } from '../control-context';
-import ControlActions from '../control-actions/control-actions';
-import { createControl } from '../create-control';
-import { TransformablePropValue } from '../props/types';
-
-export type ColorPropValue = TransformablePropValue< 'color', string >;
-
-export const ColorControl = createControl(
-	( props: Partial< Omit< UnstableColorPickerProps, 'value' | 'onChange' > > ) => {
-		const { value, setValue } = useControl< ColorPropValue >();
-
-		const handleChange = ( selectedColor: string ) => {
-			setValue( {
-				$$type: 'color',
-				value: selectedColor,
-			} );
-		};
-
-		return (
-			<ControlActions>
-				<UnstableColorPicker size="tiny" { ...props } value={ value?.value } onChange={ handleChange } />
-			</ControlActions>
-		);
-	}
-);

package/src/controls/control-types/image-control.tsx

@@ -1,66 +0,0 @@
-import * as React from 'react';
-import { Grid, Stack } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-import { ControlContext, useControl } from '../control-context';
-import { type ImageSrc, ImageMediaControl } from './image-media-control';
-import { PropValue, TransformablePropValue } from '../props/types';
-import { SettingsControl } from '../settings-control';
-import { SelectControl } from './select-control';
-import { createControl } from '../create-control';
-
-type Image = TransformablePropValue<
-	'image',
-	{
-		src?: ImageSrc;
-		size?: string;
-	}
->;
-
-type SetContextValue = ( v: PropValue ) => void;
-
-export type ImageControlProps = {
-	sizes: { label: string; value: string }[];
-};
-
-export const ImageControl = createControl( ( props: ImageControlProps ) => {
-	const { value, setValue } = useControl< Image >();
-	const { src, size } = value?.value || {};
-
-	const setImageSrc = ( newValue: ImageSrc ) => {
-		setValue( {
-			$$type: 'image',
-			value: {
-				src: newValue,
-				size,
-			},
-		} );
-	};
-
-	const setImageSize = ( newValue: string ) => {
-		setValue( {
-			$$type: 'image',
-			value: {
-				src,
-				size: newValue,
-			},
-		} );
-	};
-
-	return (
-		<Stack gap={ 2 }>
-			<ControlContext.Provider value={ { setValue: setImageSrc as SetContextValue, value: src, bind: 'src' } }>
-				<ImageMediaControl />
-			</ControlContext.Provider>
-			<ControlContext.Provider value={ { setValue: setImageSize as SetContextValue, value: size, bind: 'size' } }>
-				<Grid container spacing={ 1 } alignItems="center">
-					<Grid item xs={ 6 }>
-						<SettingsControl.Label> { __( 'Image Resolution', 'elementor' ) }</SettingsControl.Label>
-					</Grid>
-					<Grid item xs={ 6 }>
-						<SelectControl options={ props.sizes } />
-					</Grid>
-				</Grid>
-			</ControlContext.Provider>
-		</Stack>
-	);
-} );

package/src/controls/control-types/image-media-control.tsx

@@ -1,73 +0,0 @@
-import * as React from 'react';
-import { Button, Card, CardMedia, CardOverlay, Stack } from '@elementor/ui';
-import { UploadIcon } from '@elementor/icons';
-import { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
-import { __ } from '@wordpress/i18n';
-import { useControl } from '../control-context';
-import ControlActions from '../control-actions/control-actions';
-import { createControl } from '../create-control';
-import { TransformablePropValue } from '../props/types';
-
-type ImageAttachmentID = TransformablePropValue< 'image-attachment-id', number >;
-
-type Url = TransformablePropValue< 'url', string >;
-
-export type ImageSrc = TransformablePropValue<
-	'image-src',
-	{ id: ImageAttachmentID; url: null } | { url: Url; id: null }
->;
-
-export const ImageMediaControl = createControl( () => {
-	const { value, setValue } = useControl< ImageSrc >();
-	const { id, url } = value?.value ?? {};
-
-	const { data: attachment } = useWpMediaAttachment( id?.value || null );
-	const src = attachment?.url ?? url;
-
-	const { open } = useWpMediaFrame( {
-		types: [ 'image' ],
-		multiple: false,
-		selected: id?.value || null,
-		onSelect: ( selectedAttachment ) => {
-			setValue( {
-				$$type: 'image-src',
-				value: {
-					id: {
-						$$type: 'image-attachment-id',
-						value: selectedAttachment.id,
-					},
-					url: null,
-				},
-			} );
-		},
-	} );
-
-	return (
-		<Card variant="outlined">
-			<CardMedia image={ src } sx={ { height: 150 } } />
-			<CardOverlay>
-				<ControlActions>
-					<Stack gap={ 0.5 }>
-						<Button
-							size="tiny"
-							color="inherit"
-							variant="outlined"
-							onClick={ () => open( { mode: 'browse' } ) }
-						>
-							{ __( 'Select Image', 'elementor' ) }
-						</Button>
-						<Button
-							size="tiny"
-							variant="text"
-							color="inherit"
-							startIcon={ <UploadIcon /> }
-							onClick={ () => open( { mode: 'upload' } ) }
-						>
-							{ __( 'Upload Image', 'elementor' ) }
-						</Button>
-					</Stack>
-				</ControlActions>
-			</CardOverlay>
-		</Card>
-	);
-} );

package/src/controls/control-types/number-control.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import { TextField } from '@elementor/ui';
-import { useControl } from '../control-context';
-import ControlActions from '../control-actions/control-actions';
-import { createControl } from '../create-control';
-
-const isEmptyOrNaN = ( value?: string | number ) =>
-	value === undefined || value === '' || Number.isNaN( Number( value ) );
-
-export const NumberControl = createControl( ( { placeholder }: { placeholder?: string } ) => {
-	const { value, setValue } = useControl< number | undefined >();
-
-	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-		const eventValue: string = event.target.value;
-		setValue( isEmptyOrNaN( eventValue ) ? undefined : Number( eventValue ) );
-	};
-
-	return (
-		<ControlActions>
-			<TextField
-				size="tiny"
-				type="number"
-				value={ isEmptyOrNaN( value ) ? '' : value }
-				onChange={ handleChange }
-				placeholder={ placeholder }
-			/>
-		</ControlActions>
-	);
-} );

package/src/controls/control-types/select-control.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { MenuItem, Select, SelectChangeEvent } from '@elementor/ui';
-import { useControl } from '../control-context';
-import { PropValue } from '../props/types';
-import ControlActions from '../control-actions/control-actions';
-import { createControl } from '../create-control';
-
-type Props< T > = {
-	options: Array< { label: string; value: T; disabled?: boolean } >;
-};
-
-export const SelectControl = createControl( < T extends PropValue >( { options }: Props< T > ) => {
-	const { value, setValue } = useControl< T >();
-
-	const handleChange = ( event: SelectChangeEvent< T > ) => {
-		setValue( event.target.value as T );
-	};
-
-	return (
-		<ControlActions>
-			<Select size="tiny" value={ value ?? '' } onChange={ handleChange }>
-				{ options.map( ( { label, ...props } ) => (
-					<MenuItem key={ props.value } { ...props }>
-						{ label }
-					</MenuItem>
-				) ) }
-			</Select>
-		</ControlActions>
-	);
-} );

package/src/controls/control-types/size-control.tsx

@@ -1,71 +0,0 @@
-import * as React from 'react';
-import { InputAdornment } from '@elementor/ui';
-import { TransformablePropValue } from '../props/types';
-import { useControl } from '../control-context';
-import { useSyncExternalState } from '../hooks/use-sync-external-state';
-import { SelectionEndAdornment, TextFieldInnerSelection } from '../components/text-field-inner-selection';
-import ControlActions from '../control-actions/control-actions';
-import { createControl } from '../create-control';
-
-export type Unit = 'px' | '%' | 'em' | 'rem' | 'vw';
-
-const defaultUnits: Unit[] = [ 'px', '%', 'em', 'rem', 'vw' ];
-
-export type SizeControlValue = TransformablePropValue< 'size', { unit: Unit; size: number } >;
-
-export type SizeControlProps = {
-	placeholder?: string;
-	startIcon?: React.ReactNode;
-	units?: Unit[];
-};
-
-export const SizeControl = createControl( ( { units = defaultUnits, placeholder, startIcon }: SizeControlProps ) => {
-	const { value, setValue } = useControl< SizeControlValue >();
-
-	const [ state, setState ] = useSyncExternalState< SizeControlValue >( {
-		external: value,
-		setExternal: setValue,
-		persistWhen: ( controlValue ) => !! controlValue?.value.size || controlValue?.value.size === 0,
-		fallback: ( controlValue ) => ( {
-			$$type: 'size',
-			value: { unit: controlValue?.value.unit || 'px', size: NaN },
-		} ),
-	} );
-
-	const handleUnitChange = ( unit: Unit ) => {
-		setState( ( prev ) => ( {
-			...prev,
-			value: {
-				...prev.value,
-				unit,
-			},
-		} ) );
-	};
-
-	const handleSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-		const { value: size } = event.target;
-
-		setState( ( prev ) => ( {
-			...prev,
-			value: {
-				...prev.value,
-				size: size || size === '0' ? parseFloat( size ) : NaN,
-			},
-		} ) );
-	};
-
-	return (
-		<ControlActions>
-			<TextFieldInnerSelection
-				endAdornment={
-					<SelectionEndAdornment options={ units } onClick={ handleUnitChange } value={ state.value.unit } />
-				}
-				placeholder={ placeholder }
-				startAdornment={ startIcon ?? <InputAdornment position="start">{ startIcon }</InputAdornment> }
-				type="number"
-				value={ Number.isNaN( state.value.size ) ? '' : state.value.size }
-				onChange={ handleSizeChange }
-			/>
-		</ControlActions>
-	);
-} );

package/src/controls/control-types/text-area-control.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import { TextField } from '@elementor/ui';
-import { useControl } from '../control-context';
-import ControlActions from '../control-actions/control-actions';
-import { createControl } from '../create-control';
-
-type Props = {
-	placeholder?: string;
-};
-
-export const TextAreaControl = createControl( ( { placeholder }: Props ) => {
-	const { value, setValue } = useControl< string >();
-
-	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-		setValue( event.target.value );
-	};
-
-	return (
-		<ControlActions fullWidth>
-			<TextField
-				size="tiny"
-				multiline
-				fullWidth
-				rows={ 5 }
-				value={ value }
-				onChange={ handleChange }
-				placeholder={ placeholder }
-			/>
-		</ControlActions>
-	);
-} );

package/src/controls/control-types/text-control.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { TextField } from '@elementor/ui';
-import { useControl } from '../control-context';
-import ControlActions from '../control-actions/control-actions';
-import { createControl } from '../create-control';
-
-export const TextControl = createControl( ( { placeholder }: { placeholder?: string } ) => {
-	const { value, setValue } = useControl< string >( '' );
-
-	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
-
-	return (
-		<ControlActions fullWidth>
-			<TextField type="text" size="tiny" value={ value } onChange={ handleChange } placeholder={ placeholder } />
-		</ControlActions>
-	);
-} );

package/src/controls/control-types/toggle-control.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { useControl } from '../control-context';
-import { ControlToggleButtonGroup, ToggleButtonGroupItem } from '../components/control-toggle-button-group';
-import { PropValue } from '../props/types';
-import { createControl } from '../create-control';
-
-type ToggleControlProps< T extends PropValue > = {
-	options: ToggleButtonGroupItem< T >[];
-};
-
-export const ToggleControl = createControl( < T extends PropValue >( { options }: ToggleControlProps< T > ) => {
-	const { value, setValue } = useControl< T >();
-
-	const handleToggle = ( option: T | null ) => {
-		setValue( option || undefined );
-	};
-
-	return (
-		<ControlToggleButtonGroup
-			items={ options }
-			value={ value || null }
-			onChange={ handleToggle }
-			exclusive={ true }
-		/>
-	);
-} );

package/src/controls/create-control-replacement.tsx

@@ -1,53 +0,0 @@
-import * as React from 'react';
-import { PropValue } from './props/types';
-import { ComponentType, createContext, useContext } from 'react';
-import { useControl } from './control-context';
-
-export type ReplaceWhenParams = {
-	value: PropValue;
-};
-
-export type CreateControlReplacement = {
-	component: ComponentType;
-	condition: ( { value }: ReplaceWhenParams ) => boolean;
-};
-
-const ControlReplacementContext = createContext< CreateControlReplacement | undefined >( undefined );
-
-export const ControlReplacementProvider = ( {
-	component,
-	condition,
-	children,
-}: React.PropsWithChildren< CreateControlReplacement > ) => {
-	return (
-		<ControlReplacementContext.Provider value={ { component, condition } }>
-			{ children }
-		</ControlReplacementContext.Provider>
-	);
-};
-export const useControlReplacement = () => {
-	const { value } = useControl();
-	const controlReplacement = useContext( ControlReplacementContext );
-
-	let shouldReplace = false;
-
-	try {
-		shouldReplace = !! controlReplacement?.condition( { value } ) && !! controlReplacement.component;
-	} catch {}
-
-	return shouldReplace ? controlReplacement?.component : undefined;
-};
-
-export const createControlReplacement = () => {
-	let controlReplacement: CreateControlReplacement;
-
-	function replaceControl( { component, condition }: CreateControlReplacement ) {
-		controlReplacement = { component, condition };
-	}
-
-	function getControlReplacement() {
-		return controlReplacement;
-	}
-
-	return { replaceControl, getControlReplacement };
-};

package/src/controls/create-control.tsx

@@ -1,40 +0,0 @@
-import * as React from 'react';
-import { ComponentProps, ComponentType } from 'react';
-import { useControlReplacement } from './create-control-replacement';
-import { ErrorBoundary } from '@elementor/ui';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type AnyComponentType = ComponentType< any >;
-
-type Options = {
-	supportsReplacements?: boolean;
-};
-
-const brandSymbol = Symbol( 'control' );
-
-export type ControlComponent< TComponent extends AnyComponentType = AnyComponentType > = TComponent & {
-	[ brandSymbol ]: true;
-};
-
-export function createControl< T extends AnyComponentType >(
-	Component: T,
-	{ supportsReplacements = true }: Options = {}
-) {
-	return ( ( props: ComponentProps< T > ) => {
-		const ControlReplacement = useControlReplacement();
-
-		if ( ControlReplacement && supportsReplacements ) {
-			return (
-				<ErrorBoundary fallback={ null }>
-					<ControlReplacement { ...props } />
-				</ErrorBoundary>
-			);
-		}
-
-		return (
-			<ErrorBoundary fallback={ null }>
-				<Component { ...props } />
-			</ErrorBoundary>
-		);
-	} ) as ControlComponent< T >;
-}

package/src/controls/hooks/use-style-control.ts

@@ -1,29 +0,0 @@
-import { useElement } from '../providers/element-provider';
-import { useStyleContext } from '../../contexts/style-context';
-import { useElementStyleProp } from '../../hooks/use-element-style-prop';
-import { updateStyle } from '../../sync/update-style';
-import { PropKey, PropValue } from '../props/types';
-
-export const useStyleControl = < T extends PropValue >( propName: PropKey ) => {
-	const { element } = useElement();
-	const { selectedStyleDef, selectedMeta, selectedClassesProp } = useStyleContext();
-
-	const value = useElementStyleProp< T >( {
-		elementID: element.id,
-		styleDefID: selectedStyleDef?.id,
-		meta: selectedMeta,
-		propName,
-	} );
-
-	const setValue = ( newValue: T ) => {
-		updateStyle( {
-			elementID: element.id,
-			styleDefID: selectedStyleDef?.id,
-			props: { [ propName ]: newValue },
-			meta: selectedMeta,
-			bind: selectedClassesProp,
-		} );
-	};
-
-	return [ value, setValue ] as const;
-};

package/src/controls/hooks/use-sync-external-state.tsx

@@ -1,51 +0,0 @@
-import { useEffect, useState } from 'react';
-
-type UseInternalStateOptions< TValue > = {
-	external: TValue | undefined;
-	setExternal: ( value: TValue | undefined ) => void;
-	persistWhen: ( value: TValue | undefined ) => boolean;
-	fallback: ( value: TValue | undefined ) => TValue;
-};
-
-export const useSyncExternalState = < TValue, >( {
-	external,
-	setExternal,
-	persistWhen,
-	fallback,
-}: UseInternalStateOptions< TValue > ) => {
-	function toExternal( internalValue: TValue | undefined ) {
-		if ( persistWhen( internalValue ) ) {
-			return internalValue;
-		}
-
-		return undefined;
-	}
-
-	function toInternal( externalValue: TValue | undefined, internalValue: TValue | undefined ) {
-		if ( ! externalValue ) {
-			return fallback( internalValue );
-		}
-
-		return externalValue;
-	}
-
-	const [ internal, setInternal ] = useState< TValue >( toInternal( external, undefined ) );
-
-	useEffect( () => {
-		setInternal( ( prevInternal ) => toInternal( external, prevInternal ) );
-
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ external ] );
-
-	type SetterFunc = ( value: TValue ) => TValue;
-
-	const setInternalValue = ( setter: SetterFunc | TValue ) => {
-		const setterFn = ( typeof setter === 'function' ? setter : () => setter ) as SetterFunc;
-		const updated = setterFn( internal );
-
-		setInternal( updated );
-		setExternal( toExternal( updated ) );
-	};
-
-	return [ internal, setInternalValue ] as const;
-};

package/src/controls/hooks/use-widget-settings.ts

@@ -1,16 +0,0 @@
-import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';
-import getContainer from '../sync/get-container';
-import { PropValue } from '../props/types';
-
-export const useWidgetSettings = ( { id, bind }: { id: string; bind: string } ): PropValue => {
-	return useListenTo(
-		commandEndEvent( 'document/elements/settings' ),
-		() => {
-			const container = getContainer( id );
-			const value = container?.settings?.get( bind ) ?? null;
-
-			return value;
-		},
-		[ id, bind ]
-	);
-};

package/src/controls/props/is-transformable.ts

@@ -1,13 +0,0 @@
-import { z } from '@elementor/schema';
-
-// TODO: Move this file content a shared package.
-const transformableSchema = z.object( {
-	$$type: z.string(),
-	value: z.any(),
-} );
-
-export type TransformablePropValue = z.infer< typeof transformableSchema >;
-
-export const isTransformable = ( value: unknown ): value is TransformablePropValue => {
-	return transformableSchema.safeParse( value ).success;
-};