@elementor/editor-editing-panel 0.9.1 → 0.11.0

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

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { Button, Card, CardMedia, CardOverlay } from '@elementor/ui';
+import { useControl } from '../control-context';
+import { UploadIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+import { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
+
+type ImageAttachment = {
+	$$type: 'image-attachment';
+	value: {
+		id: number;
+	};
+};
+
+type ImageURL = {
+	$$type: 'image-url';
+	value: {
+		url: string;
+	};
+};
+
+type Props = {
+	mediaTypes: Array< 'image' >;
+};
+
+const isImageAttachment = ( value: ImageAttachment | ImageURL | undefined ): value is ImageAttachment => {
+	return value?.$$type === 'image-attachment';
+};
+
+const isImageUrl = ( value: ImageAttachment | ImageURL | undefined ): value is ImageURL => {
+	return value?.$$type === 'image-url';
+};
+
+// TODO: Use schema to get default image.
+const defaultState: ImageURL = {
+	$$type: 'image-url',
+	value: {
+		url: '/wp-content/plugins/elementor/assets/images/placeholder.png',
+	},
+};
+
+export const AttachmentControl = ( props: Props ) => {
+	const { value, setValue } = useControl< ImageAttachment | ImageURL >( defaultState );
+	const { data: attachment } = useWpMediaAttachment( isImageAttachment( value ) ? value.value.id : undefined );
+
+	const getImageSrc = () => {
+		if ( attachment?.url ) {
+			return attachment.url;
+		}
+
+		if ( isImageUrl( value ) ) {
+			return value.value.url;
+		}
+
+		return defaultState.value.url;
+	};
+
+	const { open } = useWpMediaFrame( {
+		types: props.mediaTypes,
+		multiple: false,
+		selected: isImageAttachment( value ) ? value.value?.id : undefined,
+		onSelect: ( val ) => {
+			setValue( {
+				$$type: 'image-attachment',
+				value: {
+					id: val.id,
+				},
+			} );
+		},
+	} );
+
+	return (
+		<Card variant="outlined">
+			<CardMedia image={ getImageSrc() } sx={ { height: 150 } } />
+			<CardOverlay>
+				<Button
+					color="inherit"
+					size="small"
+					variant="outlined"
+					onClick={ () => {
+						open( { mode: 'browse' } );
+					} }
+				>
+					{ __( 'Select Image', 'elementor' ) }
+				</Button>
+
+				<Button
+					color="inherit"
+					size="small"
+					variant="text"
+					startIcon={ <UploadIcon /> }
+					onClick={ () => {
+						open( { mode: 'upload' } );
+					} }
+				>
+					{ __( 'Upload Image', 'elementor' ) }
+				</Button>
+			</CardOverlay>
+		</Card>
+	);
+};

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { MenuItem, Select, SelectChangeEvent, Stack, TextField } from '@elementor/ui';
-import { useControl } from '../control-context';
 import { TransformablePropValue } from '../../types';
+import { useControl } from '../control-context';
+import { useSyncExternalState } from '../hooks/use-sync-external-state';
 
 export type SizeControlProps = {
 	units: Unit[];
@@ -13,23 +14,40 @@ export type Unit = 'px' | '%' | 'em' | 'rem' | 'vw';
 export type SizeControlValue = TransformablePropValue< { unit: Unit; size: number } >;
 
 export const SizeControl = ( { units, placeholder }: SizeControlProps ) => {
-	const { value, setValue } = useControl< SizeControlValue >( defaultState );
-	const propValue = value.value;
+	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 = ( event: SelectChangeEvent< Unit > ) => {
 		const unit = event.target.value as Unit;
 
-		setValue( { $$type: 'size', value: { ...propValue, unit } } );
+		setState( ( prev ) => ( {
+			...prev,
+			value: {
+				...prev.value,
+				unit,
+			},
+		} ) );
 	};
 
 	const handleSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-		const { valueAsNumber: size } = event.target;
+		const { value: size } = event.target;
 
-		if ( Number.isNaN( size ) ) {
-			return;
-		}
-
-		setValue( { $$type: 'size', value: { ...propValue, size } } );
+		setState( ( prev ) => ( {
+			...prev,
+			value: {
+				...prev.value,
+				size: size || size === '0' ? parseFloat( size ) : NaN,
+			},
+		} ) );
 	};
 
 	return (
@@ -37,13 +55,13 @@ export const SizeControl = ( { units, placeholder }: SizeControlProps ) => {
 			<TextField
 				size="tiny"
 				type="number"
-				value={ propValue.size }
+				value={ Number.isNaN( state.value.size ) ? '' : state.value.size }
 				onChange={ handleSizeChange }
 				placeholder={ placeholder }
 			/>
 			<Select
 				size="tiny"
-				value={ propValue.unit }
+				value={ state.value.unit }
 				onChange={ handleUnitChange }
 				MenuProps={ {
 					anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
@@ -59,8 +77,3 @@ export const SizeControl = ( { units, placeholder }: SizeControlProps ) => {
 		</Stack>
 	);
 };
-
-const defaultState: SizeControlValue = {
-	$$type: 'size',
-	value: { unit: 'px', size: 0 },
-};

package/src/controls/get-control-by-type.ts

@@ -1,8 +1,10 @@
 import { SelectControl } from './control-types/select-control';
 import { TextAreaControl } from './control-types/text-area-control';
 import { TextControl } from './control-types/text-control';
+import { AttachmentControl } from './control-types/attachment-control';
 
 const controlTypes = {
+	attachment: AttachmentControl,
 	select: SelectControl,
 	text: TextControl,
 	textarea: TextAreaControl,

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

@@ -0,0 +1,49 @@
+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( toInternal( external, internal ) );
+	}, [ 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/types.ts

@@ -24,7 +24,7 @@ export type Control = {
 	type: 'control';
 	value: {
 		bind: string;
-		label: string;
+		label?: string;
 		description?: string;
 		type: string;
 		props: Record< string, unknown >;