@elementor/editor-controls 0.7.0 → 0.9.0

package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx

@@ -6,39 +6,78 @@ import {
 	backgroundOverlayPropTypeUtil,
 	type PropKey,
 } from '@elementor/editor-props';
-import { Box, Grid, Stack, Tab, TabPanel, Tabs, UnstableColorIndicator, useTabs } from '@elementor/ui';
+import { Box, CardMedia, Grid, Stack, Tab, TabPanel, Tabs, UnstableColorIndicator, useTabs } from '@elementor/ui';
 import { useWpMediaAttachment } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
 import { Repeater } from '../../../components/repeater';
 import { createControl } from '../../../create-control';
+import { env } from '../../../env';
 import { ColorControl } from '../../color-control';
-import { ImageMediaControl } from '../../image-media-control';
+import { ImageControl } from '../../image-control';
 import { BackgroundImageOverlayAttachment } from './background-image-overlay/background-image-overlay-attachment';
 import { BackgroundImageOverlayPosition } from './background-image-overlay/background-image-overlay-position';
 import { BackgroundImageOverlayRepeat } from './background-image-overlay/background-image-overlay-repeat';
-import { BackgroundImageOverlayResolution } from './background-image-overlay/background-image-overlay-resolution';
 import { BackgroundImageOverlaySize } from './background-image-overlay/background-image-overlay-size';
 
-const defaultImagePlaceholderId = 1;
-const initialBackgroundOverlay: BackgroundOverlayItemPropValue = {
+const initialBackgroundOverlay = ( backgroundPlaceholderImage: string ): BackgroundOverlayItemPropValue => ( {
 	$$type: 'background-image-overlay',
 	value: {
-		'image-src': {
-			$$type: 'image-src',
+		image: {
+			$$type: 'image',
 			value: {
-				id: {
-					$$type: 'image-attachment-id',
-					value: defaultImagePlaceholderId,
+				src: {
+					$$type: 'image-src',
+					value: {
+						url: {
+							$$type: 'url',
+							value: backgroundPlaceholderImage,
+						},
+						id: null,
+					},
+				},
+				size: {
+					$$type: 'string',
+					value: 'large',
 				},
 			},
 		},
 	},
-};
+} );
+
+const backgroundResolutionOptions = [
+	{ label: __( 'Thumbnail - 150 x 150', 'elementor' ), value: 'thumbnail' },
+	{ label: __( 'Medium - 300 x 300', 'elementor' ), value: 'medium' },
+	{ label: __( 'Large 1024 x 1024', 'elementor' ), value: 'large' },
+	{ label: __( 'Full', 'elementor' ), value: 'full' },
+];
 
 type OverlayType = 'image' | 'color';
 
+type ImageSrcAttachment = { id: { $$type: 'image-attachment-id'; value: number }; url: null };
+
+type ImageSrcUrl = { url: { $$type: 'url'; value: string }; id: null };
+
+type BackgroundImageOverlay = {
+	$$type: 'background-image-overlay';
+	value: {
+		image: {
+			$$type: 'image';
+			value: {
+				src: {
+					$$type: 'image-src';
+					value: ImageSrcAttachment | ImageSrcUrl;
+				};
+				size: {
+					$$type: 'string';
+					value: 'thumbnail' | 'medium' | 'large' | 'full';
+				};
+			};
+		};
+	};
+};
+
 export const BackgroundOverlayRepeaterControl = createControl( () => {
 	const { propType, value: overlayValues, setValue } = useBoundProp( backgroundOverlayPropTypeUtil );
 
@@ -52,17 +91,13 @@ export const BackgroundOverlayRepeaterControl = createControl( () => {
 					Icon: ItemIcon,
 					Label: ItemLabel,
 					Content: ItemContent,
-					initialValues: initialBackgroundOverlay,
+					initialValues: initialBackgroundOverlay( env.background_placeholder_image ),
 				} }
 			/>
 		</PropProvider>
 	);
 } );
 
-const ItemIcon = ( { value }: { value: BackgroundOverlayItemPropValue } ) => (
-	<UnstableColorIndicator size="inherit" component="span" value={ value.value } />
-);
-
 const ItemContent = ( { bind, value }: { bind: PropKey; value: BackgroundOverlayItemPropValue } ) => {
 	return (
 		<PropKeyProvider bind={ bind }>
@@ -83,12 +118,12 @@ const Content = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
 					<Tab label={ __( 'Color', 'elementor' ) } { ...getTabProps( 'color' ) } />
 				</Tabs>
 			</Box>
-			<TabPanel { ...getTabPanelProps( 'image' ) }>
+			<TabPanel sx={ { p: 1.5 } } { ...getTabPanelProps( 'image' ) }>
 				<Stack gap={ 1.5 }>
 					<ImageOverlayContent />
 				</Stack>
 			</TabPanel>
-			<TabPanel { ...getTabPanelProps( 'color' ) }>
+			<TabPanel { ...getTabPanelProps( 'color' ) } sx={ { p: 1.5 } }>
 				<Grid container spacing={ 1 } alignItems="center">
 					<Grid item xs={ 12 }>
 						<ColorControl propTypeUtil={ backgroundColorOverlayPropTypeUtil } />
@@ -99,14 +134,35 @@ const Content = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
 	);
 };
 
-const ItemLabel = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
-	const type = value.$$type;
-
-	if ( type === 'background-color-overlay' ) {
-		return <ItemLabelColor value={ value } />;
+const ItemIcon = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
+	switch ( value.$$type ) {
+		case 'background-image-overlay':
+			return <ItemIconImage value={ value as BackgroundImageOverlay } />;
+		case 'background-color-overlay':
+			return <ItemIconColor value={ value } />;
+		default:
+			return null;
 	}
-	if ( type === 'background-image-overlay' ) {
-		return <ItemLabelImage value={ value } />;
+};
+
+const ItemIconColor = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
+	return <UnstableColorIndicator size="inherit" component="span" value={ value.value } />;
+};
+
+const ItemIconImage = ( { value }: { value: BackgroundImageOverlay } ) => {
+	const { imageUrl } = useImage( value );
+
+	return <CardMedia image={ imageUrl } sx={ { height: 13, width: 13, borderRadius: '4px' } } />;
+};
+
+const ItemLabel = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
+	switch ( value.$$type ) {
+		case 'background-image-overlay':
+			return <ItemLabelImage value={ value as BackgroundImageOverlay } />;
+		case 'background-color-overlay':
+			return <ItemLabelColor value={ value } />;
+		default:
+			return null;
 	}
 };
 
@@ -114,9 +170,8 @@ const ItemLabelColor = ( { value }: { value: BackgroundOverlayItemPropValue } )
 	return <span>{ value.value }</span>;
 };
 
-const ItemLabelImage = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
-	const { data: attachment } = useWpMediaAttachment( value?.value[ 'image-src' ]?.value.id.value || null );
-	const imageTitle = attachment?.title || null;
+const ItemLabelImage = ( { value }: { value: BackgroundImageOverlay } ) => {
+	const { imageTitle } = useImage( value );
 
 	return <span>{ imageTitle }</span>;
 };
@@ -126,16 +181,16 @@ const ImageOverlayContent = () => {
 
 	return (
 		<PropProvider { ...propContext }>
-			<PropKeyProvider bind={ 'image-src' }>
+			<PropKeyProvider bind={ 'image' }>
 				<Grid container spacing={ 1 } alignItems="center">
 					<Grid item xs={ 12 }>
-						<ImageMediaControl />
+						<ImageControl
+							resolutionLabel={ __( 'Resolution', 'elementor' ) }
+							sizes={ backgroundResolutionOptions }
+						/>
 					</Grid>
 				</Grid>
 			</PropKeyProvider>
-			<PropKeyProvider bind={ 'resolution' }>
-				<BackgroundImageOverlayResolution />
-			</PropKeyProvider>
 			<PropKeyProvider bind={ 'position' }>
 				<BackgroundImageOverlayPosition />
 			</PropKeyProvider>
@@ -163,3 +218,22 @@ const deriveOverlayType = ( type: string ): OverlayType => {
 
 	throw new Error( `Invalid overlay type: ${ type }` );
 };
+
+const useImage = ( image: BackgroundImageOverlay ) => {
+	let imageTitle,
+		imageUrl: string | null = null;
+
+	const imageSrc = image?.value.image.value?.src.value;
+	const { data: attachment } = useWpMediaAttachment( imageSrc.id?.value || null );
+
+	if ( imageSrc.id ) {
+		const imageFileTypeExtension = attachment?.subtype ? `.${ attachment.subtype }` : '';
+		imageTitle = `${ attachment?.title }${ imageFileTypeExtension }` || null;
+		imageUrl = attachment?.url || null;
+	} else if ( imageSrc.url ) {
+		imageUrl = imageSrc.url.value;
+		imageTitle = imageUrl?.substring( imageUrl.lastIndexOf( '/' ) + 1 ) || null;
+	}
+
+	return { imageTitle, imageUrl };
+};

package/src/controls/box-shadow-repeater-control.tsx

@@ -47,7 +47,7 @@ const Content = ( { anchorEl }: { anchorEl: HTMLElement | null } ) => {
 
 	return (
 		<PropProvider propType={ propType } value={ value } setValue={ setValue }>
-			<Stack gap={ 1.5 }>
+			<Stack gap={ 1.5 } sx={ { p: 1.5 } }>
 				<Grid container gap={ 2 } flexWrap="nowrap">
 					<Control bind="color" label={ __( 'Color', 'elementor' ) }>
 						<ColorControl

package/src/controls/image-control.tsx

@@ -9,30 +9,34 @@ import { createControl } from '../create-control';
 import { ImageMediaControl } from './image-media-control';
 import { SelectControl } from './select-control';
 
-export type ImageControlProps = {
+type ImageControlProps = {
 	sizes: { label: string; value: string }[];
+	resolutionLabel?: string;
 };
 
-export const ImageControl = createControl( ( props: ImageControlProps ) => {
-	const propContext = useBoundProp( imagePropTypeUtil );
+export const ImageControl = createControl(
+	( { sizes, resolutionLabel = __( 'Image resolution', 'elementor' ) }: ImageControlProps ) => {
+		const propContext = useBoundProp( imagePropTypeUtil );
 
-	return (
-		<PropProvider { ...propContext }>
-			<Stack gap={ 1.5 }>
-				<PropKeyProvider bind={ 'src' }>
-					<ImageMediaControl />
-				</PropKeyProvider>
-				<PropKeyProvider bind={ 'size' }>
-					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-						<Grid item xs={ 6 }>
-							<ControlLabel> { __( 'Image Resolution', 'elementor' ) }</ControlLabel>
+		return (
+			<PropProvider { ...propContext }>
+				<Stack gap={ 1.5 }>
+					<PropKeyProvider bind={ 'src' }>
+						<ControlLabel> { __( 'Choose image', 'elementor' ) } </ControlLabel>
+						<ImageMediaControl />
+					</PropKeyProvider>
+					<PropKeyProvider bind={ 'size' }>
+						<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+							<Grid item xs={ 6 }>
+								<ControlLabel> { resolutionLabel } </ControlLabel>
+							</Grid>
+							<Grid item xs={ 6 }>
+								<SelectControl options={ sizes } />
+							</Grid>
 						</Grid>
-						<Grid item xs={ 6 }>
-							<SelectControl options={ props.sizes } />
-						</Grid>
-					</Grid>
-				</PropKeyProvider>
-			</Stack>
-		</PropProvider>
-	);
-} );
+					</PropKeyProvider>
+				</Stack>
+			</PropProvider>
+		);
+	}
+);

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

@@ -10,7 +10,7 @@ import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
-export type ImageMediaControlProps = {
+type ImageMediaControlProps = {
 	allowedExtensions?: ImageExtension[];
 };
 

package/src/controls/link-control.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
-import { booleanPropTypeUtil, linkPropTypeUtil, type LinkPropValue, urlPropTypeUtil } from '@elementor/editor-props';
+import { useState } from 'react';
+import { booleanPropTypeUtil, linkPropTypeUtil, type LinkPropValue, numberPropTypeUtil } from '@elementor/editor-props';
+import { type HttpResponse, httpService } from '@elementor/http';
 import { MinusIcon, PlusIcon } from '@elementor/icons';
 import { useSessionStorage } from '@elementor/session';
 import { Collapse, Divider, Grid, IconButton, Stack, Switch } from '@elementor/ui';
@@ -8,11 +10,21 @@ import { __ } from '@wordpress/i18n';
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { ControlLabel } from '../components/control-label';
 import { createControl } from '../create-control';
-import { AutocompleteControl, type GroupedOption, type Option } from './autocomplete-control';
+import {
+	AutocompleteControl,
+	type CategorizedOption,
+	findMatchingOption,
+	type FlatOption,
+	isCategorizedOptionPool,
+} from './autocomplete-control';
 
 type Props = {
-	options?: Record< string, Option > | Record< string, GroupedOption >;
+	queryOptions: {
+		requestParams: object;
+		endpoint: string;
+	};
 	allowCustomValues?: boolean;
+	minInputLength?: number;
 	placeholder?: string;
 };
 
@@ -23,28 +35,81 @@ type LinkSessionValue = {
 	};
 };
 
+type Response = HttpResponse< { value: FlatOption[] | CategorizedOption[] } >;
+
 const SIZE = 'tiny';
 
-export const LinkControl = createControl( ( props?: Props ) => {
+export const LinkControl = createControl( ( props: Props ) => {
 	const { value, path, setValue, ...propContext } = useBoundProp( linkPropTypeUtil );
-
 	const [ linkSessionValue, setLinkSessionValue ] = useSessionStorage< LinkSessionValue >( path.join( '/' ) );
 
-	const { allowCustomValues = false, options = {}, placeholder } = props || {};
+	const {
+		allowCustomValues,
+		queryOptions: { endpoint = '', requestParams = {} },
+		placeholder,
+		minInputLength = 2,
+	} = props || {};
+
+	const [ options, setOptions ] = useState< FlatOption[] | CategorizedOption[] >(
+		generateFirstLoadedOption( value )
+	);
 
 	const onEnabledChange = () => {
 		const { meta } = linkSessionValue ?? {};
 		const { isEnabled } = meta ?? {};
 
-		if ( isEnabled && value ) {
-			setValue( null );
-		} else if ( linkSessionValue?.value ) {
-			setValue( linkSessionValue?.value ?? null );
+		setValue( isEnabled ? null : linkSessionValue?.value ?? { destination: null } );
+		setLinkSessionValue( { value, meta: { isEnabled: ! isEnabled } } );
+	};
+
+	const onOptionChange = ( newValue: number | null ) => {
+		const valueToSave = {
+			...value,
+			destination: { $$type: 'number', value: newValue },
+			label: {
+				$$type: 'string',
+				value: findMatchingOption( options, newValue?.toString() )?.label || '',
+			},
+		};
+
+		onSaveNewValue( valueToSave );
+	};
+
+	const onTextChange = ( newValue: string | null ) => {
+		const valueToSave = {
+			...value,
+			destination: { $$type: 'url', value: newValue },
+			label: null,
+		};
+
+		onSaveNewValue( valueToSave );
+		updateOptions( newValue );
+	};
+
+	const onSaveNewValue = ( newValue: typeof value ) => {
+		setValue( newValue );
+		setLinkSessionValue( { ...linkSessionValue, value: newValue } );
+	};
+
+	const updateOptions = ( newValue: string | null ) => {
+		setOptions( [] );
+
+		if ( ! newValue || ! endpoint || newValue.length < minInputLength ) {
+			return;
 		}
 
-		setLinkSessionValue( { value, meta: { isEnabled: ! isEnabled } } );
+		debounceFetch( newValue )();
 	};
 
+	const debounceFetch = ( newValue: string ) =>
+		debounce(
+			() =>
+				fetchOptions( endpoint, { ...requestParams, term: newValue } ).then( ( newOptions ) => {
+					setOptions( formatOptions( newOptions ) );
+				} ),
+			400
+		);
+
 	return (
 		<PropProvider { ...propContext } value={ value } setValue={ setValue }>
 			<Stack gap={ 1.5 }>
@@ -65,15 +130,18 @@ export const LinkControl = createControl( ( props?: Props ) => {
 				</Stack>
 				<Collapse in={ linkSessionValue?.meta?.isEnabled } timeout="auto" unmountOnExit>
 					<Stack gap={ 1.5 }>
-						<PropKeyProvider bind={ 'href' }>
+						<PropKeyProvider bind={ 'destination' }>
 							<AutocompleteControl
-								allowCustomValues={ Object.keys( options ).length ? allowCustomValues : true }
 								options={ options }
-								propType={ urlPropTypeUtil }
+								allowCustomValues={ allowCustomValues }
 								placeholder={ placeholder }
+								optionRestrictedPropTypeUtil={ numberPropTypeUtil }
+								onOptionChangeCallback={ onOptionChange }
+								onTextChangeCallback={ onTextChange }
+								minInputLength={ minInputLength }
+								customValue={ value?.destination?.value?.toString() }
 							/>
 						</PropKeyProvider>
-
 						<PropKeyProvider bind={ 'isTargetBlank' }>
 							<SwitchControl />
 						</PropKeyProvider>
@@ -102,7 +170,7 @@ const ToggleIconControl = ( { enabled, onIconClick, label }: ToggleIconControlPr
 const SwitchControl = () => {
 	const { value = false, setValue } = useBoundProp( booleanPropTypeUtil );
 
-	const onChange = () => {
+	const onClick = () => {
 		setValue( ! value );
 	};
 
@@ -112,8 +180,57 @@ const SwitchControl = () => {
 				<ControlLabel>{ __( 'Open in new tab', 'elementor' ) }</ControlLabel>
 			</Grid>
 			<Grid item>
-				<Switch checked={ value } onChange={ onChange } />
+				<Switch checked={ value } onClick={ onClick } />
 			</Grid>
 		</Grid>
 	);
 };
+
+async function fetchOptions( ajaxUrl: string, params: object ) {
+	if ( ! params || ! ajaxUrl ) {
+		return [];
+	}
+
+	try {
+		const { data: response } = await httpService().get< Response >( ajaxUrl, { params } );
+
+		return response.data.value;
+	} catch {
+		return [];
+	}
+}
+
+function formatOptions( options: FlatOption[] | CategorizedOption[] ): FlatOption[] | CategorizedOption[] {
+	const compareKey = isCategorizedOptionPool( options ) ? 'groupLabel' : 'label';
+
+	return options.sort( ( a, b ) =>
+		a[ compareKey ] && b[ compareKey ] ? a[ compareKey ].localeCompare( b[ compareKey ] ) : 0
+	);
+}
+
+function generateFirstLoadedOption( unionValue: LinkPropValue[ 'value' ] | null ): FlatOption[] {
+	const value = unionValue?.destination?.value;
+	const label = unionValue?.label?.value;
+	const type = unionValue?.destination?.$$type || 'url';
+
+	return value && label && type === 'number'
+		? [
+				{
+					id: value.toString(),
+					label,
+				},
+		  ]
+		: [];
+}
+
+function debounce< TArgs extends unknown[] >( fn: ( ...args: TArgs ) => unknown, timeout: number ) {
+	let timer: ReturnType< typeof setTimeout >;
+
+	return ( ...args: TArgs ) => {
+		clearTimeout( timer );
+
+		timer = setTimeout( () => {
+			fn( ...args );
+		}, timeout );
+	};
+}

package/src/controls/size-control.tsx

@@ -15,7 +15,7 @@ const defaultUnits: Unit[] = [ 'px', '%', 'em', 'rem', 'vw', 'vh' ];
 const defaultUnit = 'px';
 const defaultSize = NaN;
 
-export type SizeControlProps = {
+type SizeControlProps = {
 	placeholder?: string;
 	startIcon?: React.ReactNode;
 	units?: Unit[];

package/src/controls/stroke-control.tsx

@@ -9,7 +9,7 @@ import { createControl } from '../create-control';
 import { ColorControl } from './color-control';
 import { SizeControl, type Unit } from './size-control';
 
-export type StrokeProps = {
+type StrokeProps = {
 	bind: string;
 	label: string;
 	children: React.ReactNode;

package/src/controls/svg-media-control.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { imageSrcPropTypeUtil } from '@elementor/editor-props';
+import { UploadIcon } from '@elementor/icons';
+import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack, styled } from '@elementor/ui';
+import { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
+import { __ } from '@wordpress/i18n';
+
+import { useBoundProp } from '../bound-prop-context';
+import { ControlLabel } from '../components/control-label';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+
+const TILE_SIZE = 8;
+const TILE_WHITE = 'transparent';
+const TILE_BLACK = '#c1c1c1';
+const TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${ TILE_BLACK } 25%, ${ TILE_WHITE } 0, ${ TILE_WHITE } 75%, ${ TILE_BLACK } 0, ${ TILE_BLACK })`;
+
+const StyledCard = styled( Card )`
+	background-color: white;
+	background-image: ${ TILES_GRADIENT_FORMULA }, ${ TILES_GRADIENT_FORMULA };
+	background-size: ${ TILE_SIZE }px ${ TILE_SIZE }px;
+	background-position:
+		0 0,
+		${ TILE_SIZE / 2 }px ${ TILE_SIZE / 2 }px;
+	border: none;
+`;
+
+const StyledCardMediaContainer = styled( Stack )`
+	position: relative;
+	height: 140px;
+	object-fit: contain;
+	padding: 5px;
+	justify-content: center;
+	align-items: center;
+	background-color: rgba( 255, 255, 255, 0.37 );
+`;
+
+export const SvgMediaControl = createControl( () => {
+	const { value, setValue } = useBoundProp( imageSrcPropTypeUtil );
+	const { id, url } = value ?? {};
+	const { data: attachment, isFetching } = useWpMediaAttachment( id?.value || null );
+	const src = attachment?.url ?? url?.value ?? null;
+	const { open } = useWpMediaFrame( {
+		types: [ 'image/svg+xml' ],
+		allowedExtensions: [ 'svg' ],
+		multiple: false,
+		selected: id?.value || null,
+		onSelect: ( selectedAttachment ) => {
+			setValue( {
+				id: {
+					$$type: 'image-attachment-id',
+					value: selectedAttachment.id,
+				},
+				url: null,
+			} );
+		},
+	} );
+
+	return (
+		<Stack gap={ 1 }>
+			<ControlLabel> { __( 'Choose SVG', 'elementor' ) } </ControlLabel>
+			<ControlActions>
+				<StyledCard variant="outlined">
+					<StyledCardMediaContainer>
+						{ isFetching ? (
+							<CircularProgress role="progressbar" />
+						) : (
+							<CardMedia
+								component="img"
+								image={ src }
+								alt={ __( 'Preview SVG', 'elementor' ) }
+								sx={ { maxHeight: '140px', width: '50px' } }
+							/>
+						) }
+					</StyledCardMediaContainer>
+					<CardOverlay
+						sx={ {
+							'&:hover': {
+								backgroundColor: 'rgba( 0, 0, 0, 0.75 )',
+							},
+						} }
+					>
+						<Stack gap={ 1 }>
+							<Button
+								size="tiny"
+								color="inherit"
+								variant="outlined"
+								onClick={ () => open( { mode: 'browse' } ) }
+							>
+								{ __( 'Select SVG', 'elementor' ) }
+							</Button>
+							<Button
+								size="tiny"
+								variant="text"
+								color="inherit"
+								startIcon={ <UploadIcon /> }
+								onClick={ () => open( { mode: 'upload' } ) }
+							>
+								{ __( 'Upload SVG', 'elementor' ) }
+							</Button>
+						</Stack>
+					</CardOverlay>
+				</StyledCard>
+			</ControlActions>
+		</Stack>
+	);
+} );

package/src/create-control-replacement.tsx

@@ -4,11 +4,11 @@ import { type PropValue } from '@elementor/editor-props';
 
 import { useBoundProp } from './bound-prop-context';
 
-export type ReplaceWhenParams = {
+type ReplaceWhenParams = {
 	value: PropValue;
 };
 
-export type CreateControlReplacement = {
+type CreateControlReplacement = {
 	component: ComponentType;
 	condition: ( { value }: ReplaceWhenParams ) => boolean;
 };

package/src/env.ts

@@ -0,0 +1,5 @@
+import { parseEnv } from '@elementor/env';
+
+export const { env } = parseEnv< {
+	background_placeholder_image: string;
+} >( '@elementor/editor-controls' );

package/src/index.ts

@@ -1,6 +1,6 @@
 // control types
-export { ImageControl } from './controls/image-control';
 export { AutocompleteControl } from './controls/autocomplete-control';
+export { ImageControl } from './controls/image-control';
 export { TextControl } from './controls/text-control';
 export { TextAreaControl } from './controls/text-area-control';
 export { SizeControl } from './controls/size-control';
@@ -16,6 +16,7 @@ export { FontFamilyControl } from './controls/font-family-control';
 export { UrlControl } from './controls/url-control';
 export { LinkControl } from './controls/link-control';
 export { GapControl } from './controls/gap-control';
+export { SvgMediaControl } from './controls/svg-media-control';
 export { BackgroundControl } from './controls/background-control/background-control';
 
 // components