@elementor/editor-controls 4.0.0-607 → 4.0.0-619

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "4.0.0-607",
+  "version": "4.0.0-619",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,22 +40,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.0.0-607",
-    "@elementor/editor-elements": "4.0.0-607",
-    "@elementor/editor-props": "4.0.0-607",
-    "@elementor/editor-responsive": "4.0.0-607",
-    "@elementor/editor-ui": "4.0.0-607",
-    "@elementor/editor-v1-adapters": "4.0.0-607",
-    "@elementor/env": "4.0.0-607",
-    "@elementor/http-client": "4.0.0-607",
+    "@elementor/editor-current-user": "4.0.0-619",
+    "@elementor/editor-elements": "4.0.0-619",
+    "@elementor/editor-props": "4.0.0-619",
+    "@elementor/editor-responsive": "4.0.0-619",
+    "@elementor/editor-ui": "4.0.0-619",
+    "@elementor/editor-v1-adapters": "4.0.0-619",
+    "@elementor/env": "4.0.0-619",
+    "@elementor/http-client": "4.0.0-619",
     "@elementor/icons": "^1.68.0",
-    "@elementor/locations": "4.0.0-607",
-    "@elementor/events": "4.0.0-607",
-    "@elementor/query": "4.0.0-607",
-    "@elementor/session": "4.0.0-607",
+    "@elementor/locations": "4.0.0-619",
+    "@elementor/events": "4.0.0-619",
+    "@elementor/query": "4.0.0-619",
+    "@elementor/session": "4.0.0-619",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-607",
-    "@elementor/wp-media": "4.0.0-607",
+    "@elementor/utils": "4.0.0-619",
+    "@elementor/wp-media": "4.0.0-619",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",

package/src/components/size-control/size-input.tsx

@@ -1,14 +1,12 @@
 import * as React from 'react';
-import { useRef } from 'react';
 import { MathFunctionIcon } from '@elementor/icons';
 import { Box, InputAdornment, type PopupState } from '@elementor/ui';
 
 import ControlActions from '../../control-actions/control-actions';
+import { useTypingBuffer } from '../../hooks/use-typing-buffer';
 import { type ExtendedOption, isUnitExtendedOption, type Unit } from '../../utils/size-control';
 import { SelectionEndAdornment, TextFieldInnerSelection } from '../size-control/text-field-inner-selection';
 
-const RESTRICTED_KEYBOARD_SHORTCUT_UNITS = [ 'auto' ];
-
 type SizeInputProps = {
 	unit: Unit | ExtendedOption;
 	size: number | string;
@@ -44,12 +42,25 @@ export const SizeInput = ( {
 	id,
 	ariaLabel,
 }: SizeInputProps ) => {
-	const unitInputBufferRef = useRef( '' );
+	const { appendKey, startsWith } = useTypingBuffer();
+
 	const inputType = isUnitExtendedOption( unit ) ? 'text' : 'number';
 	const inputValue = ! isUnitExtendedOption( unit ) && Number.isNaN( size ) ? '' : size ?? '';
 
-	const handleKeyUp = ( event: React.KeyboardEvent< HTMLInputElement > ) => {
-		const { key } = event;
+	const handleKeyDown = ( event: React.KeyboardEvent< HTMLInputElement > ) => {
+		const { key, altKey, ctrlKey, metaKey } = event;
+
+		if ( altKey || ctrlKey || metaKey ) {
+			return;
+		}
+
+		if ( isUnitExtendedOption( unit ) && ! isNaN( Number( key ) ) ) {
+			const defaultUnit = units?.[ 0 ];
+			if ( defaultUnit ) {
+				handleUnitChange( defaultUnit );
+			}
+			return;
+		}
 
 		if ( ! /^[a-zA-Z%]$/.test( key ) ) {
 			return;
@@ -58,13 +69,9 @@ export const SizeInput = ( {
 		event.preventDefault();
 
 		const newChar = key.toLowerCase();
-		const updatedBuffer = ( unitInputBufferRef.current + newChar ).slice( -3 );
-		unitInputBufferRef.current = updatedBuffer;
+		const updatedBuffer = appendKey( newChar );
 
-		const matchedUnit =
-			units.find( ( u ) => ! RESTRICTED_KEYBOARD_SHORTCUT_UNITS.includes( u ) && u.includes( updatedBuffer ) ) ||
-			units.find( ( u ) => ! RESTRICTED_KEYBOARD_SHORTCUT_UNITS.includes( u ) && u.startsWith( newChar ) ) ||
-			units.find( ( u ) => ! RESTRICTED_KEYBOARD_SHORTCUT_UNITS.includes( u ) && u.includes( newChar ) );
+		const matchedUnit = units.find( ( u ) => startsWith( u, updatedBuffer ) );
 
 		if ( matchedUnit ) {
 			handleUnitChange( matchedUnit );
@@ -118,7 +125,7 @@ export const SizeInput = ( {
 					type={ inputType }
 					value={ inputValue }
 					onChange={ handleSizeChange }
-					onKeyUp={ handleKeyUp }
+					onKeyDown={ handleKeyDown }
 					onBlur={ onBlur }
 					InputProps={ InputProps }
 					inputProps={ { min, step: 'any', 'aria-label': ariaLabel } }

package/src/components/text-field-popover.tsx

@@ -29,6 +29,12 @@ export const TextFieldPopover = ( props: Props ) => {
 		}
 	}, [ popupState.isOpen ] );
 
+	const handleKeyPress = ( event: React.KeyboardEvent< HTMLInputElement > ) => {
+		if ( event.key.toLowerCase() === 'enter' ) {
+			handleClose();
+		}
+	};
+
 	const handleClose = () => {
 		restoreValue();
 		popupState.close();
@@ -58,6 +64,7 @@ export const TextFieldPopover = ( props: Props ) => {
 			<TextField
 				value={ value }
 				onChange={ onChange }
+				onKeyPress={ handleKeyPress }
 				size="tiny"
 				type="text"
 				fullWidth

package/src/controls/aspect-ratio-control.tsx

@@ -25,7 +25,14 @@ const RATIO_OPTIONS = [
 const CUSTOM_RATIO = 'custom';
 
 export const AspectRatioControl = createControl( ( { label }: { label: string } ) => {
-	const { value: aspectRatioValue, setValue: setAspectRatioValue, disabled } = useBoundProp( stringPropTypeUtil );
+	const {
+		value: currentPropValue,
+		setValue: setAspectRatioValue,
+		disabled,
+		placeholder: externalPlaceholder,
+	} = useBoundProp( stringPropTypeUtil );
+
+	const aspectRatioValue = currentPropValue ?? externalPlaceholder;
 
 	const isCustomSelected =
 		aspectRatioValue && ! RATIO_OPTIONS.some( ( option ) => option.value === aspectRatioValue );
@@ -87,6 +94,9 @@ export const AspectRatioControl = createControl( ( { label }: { label: string }
 		}
 	};
 
+	const lookup = currentPropValue ?? externalPlaceholder;
+	const selectedOption = RATIO_OPTIONS.find( ( option ) => option.value === lookup );
+
 	return (
 		<ControlActions>
 			<Stack direction="column" gap={ 2 }>
@@ -102,6 +112,7 @@ export const AspectRatioControl = createControl( ( { label }: { label: string }
 							disabled={ disabled }
 							value={ selectedValue }
 							onChange={ handleSelectChange }
+							renderValue={ isCustomSelected ? undefined : () => selectedOption?.label }
 							fullWidth
 						>
 							{ [ ...RATIO_OPTIONS, { label: __( 'Custom', 'elementor' ), value: CUSTOM_RATIO } ].map(

package/src/controls/number-control.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { numberPropTypeUtil } from '@elementor/editor-props';
+import { numberPropTypeUtil, type PropType } from '@elementor/editor-props';
 import { InputAdornment } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
@@ -10,6 +10,13 @@ import { createControl } from '../create-control';
 const isEmptyOrNaN = ( value?: string | number | null ) =>
 	value === null || value === undefined || value === '' || Number.isNaN( Number( value ) );
 
+const renderSuffix = ( propType: PropType ) => {
+	if ( propType.meta?.suffix ) {
+		return <InputAdornment position="end">{ propType.meta.suffix }</InputAdornment>;
+	}
+	return <></>;
+};
+
 export const NumberControl = createControl(
 	( {
 		placeholder: labelPlaceholder,
@@ -26,7 +33,7 @@ export const NumberControl = createControl(
 		shouldForceInt?: boolean;
 		startIcon?: React.ReactNode;
 	} ) => {
-		const { value, setValue, placeholder, disabled, restoreValue } = useBoundProp( numberPropTypeUtil );
+		const { value, setValue, placeholder, disabled, restoreValue, propType } = useBoundProp( numberPropTypeUtil );
 
 		const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
 			const {
@@ -68,6 +75,7 @@ export const NumberControl = createControl(
 								{ startIcon }
 							</InputAdornment>
 						) : undefined,
+						endAdornment: renderSuffix( propType ),
 					} }
 				/>
 			</ControlActions>

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

@@ -17,7 +17,7 @@ import { useUnfilteredFilesUpload } from '../hooks/use-unfiltered-files-upload';
 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 })`;
+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 )`
 	background-color: white;

package/src/controls/transform-control/transform-repeater-control.tsx

@@ -13,7 +13,6 @@ import { EditItemPopover } from '../../components/control-repeater/items/edit-it
 import { RepeaterHeader } from '../../components/repeater/repeater-header';
 import { ControlAdornments } from '../../control-adornments/control-adornments';
 import { createControl } from '../../create-control';
-import { useElementCanHaveChildren } from '../../hooks/use-element-can-have-children';
 import { initialRotateValue, initialScaleValue, initialSkewValue, initialTransformValue } from './initial-values';
 import { TransformContent } from './transform-content';
 import { TransformIcon } from './transform-icon';
@@ -22,25 +21,26 @@ import { TransformSettingsControl } from './transform-settings-control';
 
 const SIZE = 'tiny';
 
-export const TransformRepeaterControl = createControl( () => {
-	const context = useBoundProp( transformPropTypeUtil );
-	const headerRef = useRef< HTMLDivElement >( null );
-	const popupState = usePopupState( { variant: 'popover' } );
-	const showChildrenPerspective = useElementCanHaveChildren();
+export const TransformRepeaterControl = createControl(
+	( { showChildrenPerspective }: { showChildrenPerspective: boolean } ) => {
+		const context = useBoundProp( transformPropTypeUtil );
+		const headerRef = useRef< HTMLDivElement >( null );
+		const popupState = usePopupState( { variant: 'popover' } );
 
-	return (
-		<PropProvider { ...context }>
-			<TransformSettingsControl
-				popupState={ popupState }
-				anchorRef={ headerRef }
-				showChildrenPerspective={ showChildrenPerspective }
-			/>
-			<PropKeyProvider bind={ 'transform-functions' }>
-				<Repeater headerRef={ headerRef } propType={ context.propType } popupState={ popupState } />
-			</PropKeyProvider>
-		</PropProvider>
-	);
-} );
+		return (
+			<PropProvider { ...context }>
+				<TransformSettingsControl
+					popupState={ popupState }
+					anchorRef={ headerRef }
+					showChildrenPerspective={ showChildrenPerspective }
+				/>
+				<PropKeyProvider bind={ 'transform-functions' }>
+					<Repeater headerRef={ headerRef } propType={ context.propType } popupState={ popupState } />
+				</PropKeyProvider>
+			</PropProvider>
+		);
+	}
+);
 
 const ToolTip = (
 	<Box

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

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { 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';
+import { __ } from '@wordpress/i18n';
+
+import { useBoundProp } from '../bound-prop-context';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+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 { id, url } = value ?? {};
+
+	const { data: attachment, isFetching } = useWpMediaAttachment( id?.value || null );
+	const videoUrl = attachment?.url ?? url?.value ?? null;
+
+	const { open } = useWpMediaFrame( {
+		mediaTypes: [ 'video' ],
+		multiple: false,
+		selected: id?.value || null,
+		onSelect: ( selectedAttachment ) => {
+			setValue( {
+				id: {
+					$$type: 'video-attachment-id',
+					value: selectedAttachment.id,
+				},
+				url: null,
+			} );
+		},
+	} );
+
+	return (
+		<ControlActions>
+			<Card variant="outlined">
+				<CardMedia
+					sx={ {
+						height: 140,
+						backgroundColor: 'white',
+						backgroundSize: '8px 8px',
+						backgroundPosition: '0 0, 4px 4px',
+						backgroundRepeat: 'repeat',
+						backgroundImage: `${ TILES_GRADIENT_FORMULA }, ${ TILES_GRADIENT_FORMULA }`,
+						display: 'flex',
+						justifyContent: 'center',
+						alignItems: 'center',
+					} }
+				>
+					<VideoPreview isFetching={ isFetching } videoUrl={ videoUrl } />
+				</CardMedia>
+				<CardOverlay>
+					<Stack gap={ 1 }>
+						<Button
+							size="tiny"
+							color="inherit"
+							variant="outlined"
+							onClick={ () => open( { mode: 'browse' } ) }
+						>
+							{ __( 'Select video', 'elementor' ) }
+						</Button>
+						<Button
+							size="tiny"
+							variant="text"
+							color="inherit"
+							startIcon={ <UploadIcon /> }
+							onClick={ () => open( { mode: 'upload' } ) }
+						>
+							{ __( 'Upload', 'elementor' ) }
+						</Button>
+					</Stack>
+				</CardOverlay>
+			</Card>
+		</ControlActions>
+	);
+} );
+
+const VideoPreview = ( { isFetching = false, videoUrl }: { isFetching?: boolean; videoUrl?: string } ) => {
+	if ( isFetching ) {
+		return <CircularProgress />;
+	}
+
+	if ( videoUrl ) {
+		return (
+			<video
+				src={ videoUrl }
+				muted
+				preload="metadata"
+				style={ {
+					width: '100%',
+					height: '100%',
+					objectFit: 'cover',
+					pointerEvents: 'none',
+				} }
+			/>
+		);
+	}
+	return <img src={ PLACEHOLDER_IMAGE } alt="No video selected" />;
+};

package/src/hooks/use-typing-buffer.ts

@@ -0,0 +1,52 @@
+import { useEffect, useRef } from 'react';
+
+export type UseTypingBufferOptions = {
+	limit?: number;
+	timeout?: number;
+};
+
+export function useTypingBuffer( options: UseTypingBufferOptions = {} ) {
+	const { limit = 3, timeout = 600 } = options;
+
+	const inputBufferRef = useRef( '' );
+	const timeoutRef = useRef< ReturnType< typeof setTimeout > | null >( null );
+
+	const appendKey = ( key: string ) => {
+		inputBufferRef.current = ( inputBufferRef.current + key ).slice( -limit );
+
+		if ( timeoutRef.current ) {
+			clearTimeout( timeoutRef.current );
+		}
+
+		timeoutRef.current = setTimeout( () => {
+			inputBufferRef.current = '';
+			timeoutRef.current = null;
+		}, timeout );
+
+		return inputBufferRef.current;
+	};
+
+	const startsWith = ( haystack: string, needle: string ) => {
+		// At least 2 characters in needle for longer haystack.
+		if ( 3 < haystack.length && 2 > needle.length ) {
+			return false;
+		}
+		return haystack.startsWith( needle );
+	};
+
+	useEffect( () => {
+		return () => {
+			inputBufferRef.current = '';
+			if ( timeoutRef.current ) {
+				clearTimeout( timeoutRef.current );
+				timeoutRef.current = null;
+			}
+		};
+	}, [] );
+
+	return {
+		buffer: inputBufferRef.current,
+		appendKey,
+		startsWith,
+	};
+}

package/src/index.ts

@@ -23,6 +23,7 @@ export { QueryControl } from './controls/query-control';
 export { GapControl } from './controls/gap-control';
 export { AspectRatioControl } from './controls/aspect-ratio-control';
 export { SvgMediaControl } from './controls/svg-media-control';
+export { VideoMediaControl } from './controls/video-media-control';
 export { BackgroundControl } from './controls/background-control/background-control';
 export { SwitchControl } from './controls/switch-control';
 export { RepeatableControl } from './controls/repeatable-control';
@@ -66,7 +67,14 @@ export type { ControlActionsItems } from './control-actions/control-actions-cont
 export type { AdornmentComponent } from './control-adornments/control-adornments-context';
 export type { PropProviderProps } from './bound-prop-context';
 export type { SetValue, SetValueMeta } from './bound-prop-context/prop-context';
-export type { ExtendedOption, Unit, LengthUnit, AngleUnit, TimeUnit } from './utils/size-control';
+export {
+	isUnitExtendedOption,
+	type ExtendedOption,
+	type Unit,
+	type LengthUnit,
+	type AngleUnit,
+	type TimeUnit,
+} from './utils/size-control';
 export type { ToggleControlProps } from './controls/toggle-control';
 export type { FontCategory } from './controls/font-family-control/font-family-control';
 export type { InlineEditorToolbarProps } from './components/inline-editor-toolbar';
@@ -96,5 +104,5 @@ export {
 
 // hooks
 export { useSyncExternalState } from './hooks/use-sync-external-state';
-export { useElementCanHaveChildren } from './hooks/use-element-can-have-children';
 export { useFontFamilies } from './hooks/use-font-families';
+export { useTypingBuffer, type UseTypingBufferOptions } from './hooks/use-typing-buffer';

package/src/hooks/use-element-can-have-children.ts

@@ -1,17 +0,0 @@
-import { useMemo } from 'react';
-import { getContainer, useSelectedElement } from '@elementor/editor-elements';
-
-export const useElementCanHaveChildren = (): boolean => {
-	const { element } = useSelectedElement();
-	const elementId = element?.id || '';
-
-	return useMemo( () => {
-		const container = getContainer( elementId );
-
-		if ( ! container ) {
-			return false;
-		}
-
-		return container.model.get( 'elType' ) !== 'widget';
-	}, [ elementId ] );
-};