@elementor/editor-controls 4.3.0-998 → 4.3.0-beta1

package/src/controls/select-control.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { stringPropTypeUtil, type StringPropValue } from '@elementor/editor-props';
 import { MenuListItem } from '@elementor/editor-ui';
-import { Select, type SelectChangeEvent, type SelectProps, Typography } from '@elementor/ui';
+import { MenuSubheader, Select, type SelectChangeEvent, type SelectProps, Typography } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
@@ -13,8 +13,14 @@ export type SelectOption = {
 	disabled?: boolean;
 };
 
-type SelectControlProps = {
+export type SelectOptionGroup = {
+	label: string;
 	options: SelectOption[];
+};
+
+type SelectControlProps = {
+	options?: SelectOption[];
+	groups?: SelectOptionGroup[];
 	onChange?: ( newValue: string | null, previousValue: string | null | undefined ) => void;
 	MenuProps?: SelectProps[ 'MenuProps' ];
 	ariaLabel?: string;
@@ -29,7 +35,7 @@ const DEFAULT_MENU_PROPS = {
 };
 
 export const SelectControl = createControl(
-	( { options, onChange, MenuProps = DEFAULT_MENU_PROPS, ariaLabel }: SelectControlProps ) => {
+	( { options = [], groups = [], onChange, MenuProps = DEFAULT_MENU_PROPS, ariaLabel }: SelectControlProps ) => {
 		const { value, setValue, disabled, placeholder } = useBoundProp( stringPropTypeUtil );
 		const handleChange = ( event: SelectChangeEvent< StringPropValue[ 'value' ] > ) => {
 			const newValue = event.target.value || null;
@@ -37,7 +43,8 @@ export const SelectControl = createControl(
 			onChange?.( newValue, value );
 			setValue( newValue );
 		};
-		const isDisabled = disabled || options.length === 0;
+		const flatOptions = flattenGroupedOptions( options, groups );
+		const isDisabled = disabled || flatOptions.length === 0;
 
 		return (
 			<ControlActions>
@@ -48,24 +55,54 @@ export const SelectControl = createControl(
 					MenuProps={ MenuProps }
 					aria-label={ ariaLabel || placeholder }
 					renderValue={ ( selectedValue: string | null ) =>
-						getSelectRenderValue( options, placeholder, selectedValue )
+						getSelectRenderValue( flatOptions, placeholder, selectedValue )
 					}
 					value={ value ?? '' }
 					onChange={ handleChange }
 					disabled={ isDisabled }
 					fullWidth
 				>
-					{ options.map( ( { label, ...props } ) => (
-						<MenuListItem key={ props.value } { ...props } value={ props.value ?? '' }>
-							{ label }
-						</MenuListItem>
-					) ) }
+					{ groups.length
+						? groups.flatMap( ( group ) => renderGroup( group ) )
+						: options.map( ( option ) => renderOption( option ) ) }
 				</Select>
 			</ControlActions>
 		);
 	}
 );
 
+const GROUPED_OPTION_INDENT = 3.5;
+
+function renderGroup( group: SelectOptionGroup ): React.ReactNode[] {
+	return [
+		<MenuSubheader key={ `group-${ group.label }` } sx={ { fontWeight: 400, color: 'text.tertiary' } }>
+			{ group.label }
+		</MenuSubheader>,
+		...group.options.map( ( option ) => renderOption( option, true ) ),
+	];
+}
+
+function renderOption( { label, ...props }: SelectOption, isGrouped = false ): React.ReactNode {
+	return (
+		<MenuListItem
+			key={ props.value }
+			{ ...props }
+			value={ props.value ?? '' }
+			sx={ isGrouped ? { pl: GROUPED_OPTION_INDENT } : undefined }
+		>
+			{ label }
+		</MenuListItem>
+	);
+}
+
+function flattenGroupedOptions( options: SelectOption[], groups: SelectOptionGroup[] ): SelectOption[] {
+	if ( ! groups.length ) {
+		return options;
+	}
+
+	return groups.flatMap( ( group ) => group.options );
+}
+
 export function getSelectRenderValue(
 	options: SelectOption[],
 	placeholder: string | null | undefined,

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

@@ -1,9 +1,19 @@
 import * as React from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useCurrentUserCapabilities } from '@elementor/editor-current-user';
-import { svgSrcPropTypeUtil, urlPropTypeUtil } from '@elementor/editor-props';
+import { iconPropTypeUtil, svgSrcPropTypeUtil, urlPropTypeUtil } from '@elementor/editor-props';
 import { UploadIcon } from '@elementor/icons';
-import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack, styled, ThemeProvider } from '@elementor/ui';
+import {
+	Box,
+	Button,
+	Card,
+	CardMedia,
+	CardOverlay,
+	CircularProgress,
+	Stack,
+	styled,
+	ThemeProvider,
+} from '@elementor/ui';
 import { type OpenOptions, useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
@@ -13,10 +23,18 @@ import { EnableUnfilteredModal } from '../components/enable-unfiltered-modal';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 import { useUnfilteredFilesUpload } from '../hooks/use-unfiltered-files-upload';
+import {
+	createIconPropValue,
+	enqueueIconFonts,
+	type IconLibrarySelection,
+	isSvgLibrarySelection,
+	openIconLibrary,
+} from './open-icon-library';
 
 const TILE_SIZE = 8;
 const TILE_WHITE = 'transparent';
 const TILE_BLACK = '#c1c1c1';
+const ICON_PREVIEW_FONT_SIZE = 50;
 export 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 )`
@@ -42,22 +60,31 @@ const StyledCardMediaContainer = styled( Stack )`
 const MODE_BROWSE: OpenOptions = { mode: 'browse' };
 const MODE_UPLOAD: OpenOptions = { mode: 'upload' };
 
-export const SvgMediaControl = createControl( () => {
-	const { value, setValue } = useBoundProp( svgSrcPropTypeUtil );
-	const id = value?.id;
-	const url = value?.url;
+type SvgMediaControlProps = {
+	showIconLibrary?: boolean;
+};
+
+export const SvgMediaControl = createControl( ( { showIconLibrary = false }: SvgMediaControlProps ) => {
+	const { value: svgValue, setValue: setSvgValue } = useBoundProp( svgSrcPropTypeUtil );
+	const { value: iconValue, setValue: setIconValue } = useBoundProp( iconPropTypeUtil );
+	const id = svgValue?.id;
+	const url = svgValue?.url;
 	const { data: attachment, isFetching } = useWpMediaAttachment( id?.value || null );
 	const src = attachment?.url ?? url?.value ?? null;
 	const { data: allowSvgUpload } = useUnfilteredFilesUpload();
 	const [ unfilteredModalOpenState, setUnfilteredModalOpenState ] = useState( false );
 	const { isAdmin } = useCurrentUserCapabilities();
+	const selectedIconClass =
+		showIconLibrary && typeof iconValue?.value?.value === 'string' ? iconValue.value.value : null;
+	const selectedIconLibrary =
+		showIconLibrary && typeof iconValue?.library?.value === 'string' ? iconValue.library.value : null;
 
 	const { open } = useWpMediaFrame( {
 		mediaTypes: [ 'svg' ],
 		multiple: false,
 		selected: id?.value || null,
 		onSelect: ( selectedAttachment ) => {
-			setValue( {
+			setSvgValue( {
 				id: {
 					$$type: 'image-attachment-id',
 					value: selectedAttachment.id,
@@ -83,6 +110,28 @@ export const SvgMediaControl = createControl( () => {
 		}
 	};
 
+	const handleIconLibrarySelect = ( icon: IconLibrarySelection ) => {
+		if ( ! showIconLibrary ) {
+			return;
+		}
+		if ( isSvgLibrarySelection( icon ) ) {
+			setSvgValue( {
+				id: icon.value.id
+					? {
+							$$type: 'image-attachment-id',
+							value: icon.value.id,
+					  }
+					: null,
+				url: icon.value.url ? urlPropTypeUtil.create( icon.value.url ) : null,
+			} );
+			return;
+		}
+
+		if ( typeof icon.value === 'string' ) {
+			setIconValue( createIconPropValue( icon.value, icon.library ) );
+		}
+	};
+
 	const infotipProps = {
 		title: __( "Sorry, you can't upload that file yet.", 'elementor' ),
 		description: (
@@ -101,16 +150,12 @@ export const SvgMediaControl = createControl( () => {
 			<ControlActions>
 				<StyledCard variant="outlined">
 					<StyledCardMediaContainer>
-						{ isFetching ? (
-							<CircularProgress role="progressbar" />
-						) : (
-							<CardMedia
-								component="img"
-								image={ src }
-								alt={ __( 'Preview SVG', 'elementor' ) }
-								sx={ { maxHeight: '140px', width: '50px' } }
-							/>
-						) }
+						<SvgMediaPreview
+							isFetching={ isFetching }
+							src={ src }
+							iconClassName={ selectedIconClass }
+							iconLibrary={ selectedIconLibrary }
+						/>
 					</StyledCardMediaContainer>
 					<CardOverlay
 						sx={ {
@@ -129,6 +174,25 @@ export const SvgMediaControl = createControl( () => {
 							>
 								{ __( 'Select SVG', 'elementor' ) }
 							</Button>
+							{ showIconLibrary ? (
+								<Button
+									size="tiny"
+									variant="text"
+									color="inherit"
+									onClick={ () =>
+										openIconLibrary( {
+											selected:
+												selectedIconClass && selectedIconLibrary
+													? { value: selectedIconClass, library: selectedIconLibrary }
+													: undefined,
+											onSelect: handleIconLibrarySelect,
+										} )
+									}
+									aria-label={ __( 'Icon library', 'elementor' ) }
+								>
+									{ __( 'Icon library', 'elementor' ) }
+								</Button>
+							) : null }
 							<ConditionalControlInfotip { ...infotipProps }>
 								<span>
 									<ThemeProvider colorScheme={ isAdmin ? 'light' : 'dark' }>
@@ -153,3 +217,45 @@ export const SvgMediaControl = createControl( () => {
 		</Stack>
 	);
 } );
+
+function SvgMediaPreview( {
+	isFetching,
+	src,
+	iconClassName,
+	iconLibrary,
+}: {
+	isFetching: boolean;
+	src: string | null;
+	iconClassName: string | null;
+	iconLibrary: string | null;
+} ) {
+	useEffect( () => {
+		if ( iconLibrary ) {
+			enqueueIconFonts( iconLibrary );
+		}
+	}, [ iconLibrary ] );
+
+	if ( isFetching ) {
+		return <CircularProgress role="progressbar" />;
+	}
+
+	if ( iconClassName ) {
+		return (
+			<Box
+				component="i"
+				className={ iconClassName }
+				aria-label={ __( 'Preview icon', 'elementor' ) }
+				sx={ { fontSize: ICON_PREVIEW_FONT_SIZE } }
+			/>
+		);
+	}
+
+	return (
+		<CardMedia
+			component="img"
+			image={ src }
+			alt={ __( 'Preview SVG', 'elementor' ) }
+			sx={ { maxHeight: '140px', width: `${ ICON_PREVIEW_FONT_SIZE }px` } }
+		/>
+	);
+}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { videoSrcPropTypeUtil } from '@elementor/editor-props';
+import { urlPropTypeUtil, videoSrcPropTypeUtil } from '@elementor/editor-props';
 import { UploadIcon } from '@elementor/icons';
 import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack } from '@elementor/ui';
 import { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
@@ -13,16 +13,20 @@ import { TILES_GRADIENT_FORMULA } from './svg-media-control';
 const PLACEHOLDER_IMAGE = window.elementorCommon?.config?.urls?.assets + '/shapes/play-triangle.svg';
 
 export const VideoMediaControl = createControl( () => {
-	const { value, setValue } = useBoundProp( videoSrcPropTypeUtil );
+	const { value, setValue, propType } = useBoundProp( videoSrcPropTypeUtil );
 	const { id, url } = value ?? {};
 
 	const { data: attachment, isFetching } = useWpMediaAttachment( id?.value || null );
 	const videoUrl = attachment?.url ?? url?.value ?? null;
 
+	const defaultUrl = videoSrcPropTypeUtil.extract( propType.default ?? null )?.url?.value;
+	const currentUrlForModal = url?.value && url.value !== defaultUrl ? url.value : undefined;
+
 	const { open } = useWpMediaFrame( {
 		mediaTypes: [ 'video' ],
 		multiple: false,
 		selected: id?.value || null,
+		allowUrlImport: true,
 		onSelect: ( selectedAttachment ) => {
 			setValue( {
 				id: {
@@ -32,6 +36,12 @@ export const VideoMediaControl = createControl( () => {
 				url: null,
 			} );
 		},
+		onSelectUrl: ( selectedUrl ) => {
+			setValue( {
+				id: null,
+				url: urlPropTypeUtil.create( selectedUrl ),
+			} );
+		},
 	} );
 
 	return (
@@ -71,6 +81,14 @@ export const VideoMediaControl = createControl( () => {
 						>
 							{ __( 'Upload', 'elementor' ) }
 						</Button>
+						<Button
+							size="tiny"
+							variant="text"
+							color="inherit"
+							onClick={ () => open( { mode: 'url', currentUrl: currentUrlForModal } ) }
+						>
+							{ __( 'Insert from URL', 'elementor' ) }
+						</Button>
 					</Stack>
 				</CardOverlay>
 			</Card>
@@ -86,6 +104,7 @@ const VideoPreview = ( { isFetching = false, videoUrl }: { isFetching?: boolean;
 	if ( videoUrl ) {
 		return (
 			<video
+				aria-label={ __( 'Video preview', 'elementor' ) }
 				src={ videoUrl }
 				muted
 				preload="metadata"

package/src/utils/inline-editing.ts

@@ -1,3 +1,5 @@
+import { escapedHtmlPropTypeUtil, htmlV3PropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
+
 export function isEmpty( value: string | null = '' ) {
 	if ( ! value ) {
 		return true;
@@ -20,3 +22,13 @@ export function htmlToPlainText( html: string | null ): string {
 
 	return doc.body.textContent ?? '';
 }
+
+export function extractInlineHtmlContent( propValue: unknown ): string {
+	if ( escapedHtmlPropTypeUtil.isValid( propValue ) ) {
+		return escapedHtmlPropTypeUtil.extract( propValue ) ?? '';
+	}
+
+	const htmlV3 = htmlV3PropTypeUtil.extract( propValue );
+
+	return stringPropTypeUtil.extract( htmlV3?.content ?? null ) ?? '';
+}