@elementor/editor-controls 4.1.0-744 → 4.1.0-746

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.1.0-744",
+  "version": "4.1.0-746",
   "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.1.0-744",
-    "@elementor/editor-elements": "4.1.0-744",
-    "@elementor/editor-props": "4.1.0-744",
-    "@elementor/editor-responsive": "4.1.0-744",
-    "@elementor/editor-ui": "4.1.0-744",
-    "@elementor/editor-v1-adapters": "4.1.0-744",
-    "@elementor/env": "4.1.0-744",
-    "@elementor/http-client": "4.1.0-744",
+    "@elementor/editor-current-user": "4.1.0-746",
+    "@elementor/editor-elements": "4.1.0-746",
+    "@elementor/editor-props": "4.1.0-746",
+    "@elementor/editor-responsive": "4.1.0-746",
+    "@elementor/editor-ui": "4.1.0-746",
+    "@elementor/editor-v1-adapters": "4.1.0-746",
+    "@elementor/env": "4.1.0-746",
+    "@elementor/http-client": "4.1.0-746",
     "@elementor/icons": "^1.68.0",
-    "@elementor/locations": "4.1.0-744",
-    "@elementor/events": "4.1.0-744",
-    "@elementor/query": "4.1.0-744",
-    "@elementor/session": "4.1.0-744",
+    "@elementor/locations": "4.1.0-746",
+    "@elementor/events": "4.1.0-746",
+    "@elementor/query": "4.1.0-746",
+    "@elementor/session": "4.1.0-746",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.1.0-744",
-    "@elementor/wp-media": "4.1.0-744",
+    "@elementor/utils": "4.1.0-746",
+    "@elementor/wp-media": "4.1.0-746",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",

package/src/bound-prop-context/prop-key-context.tsx

@@ -89,12 +89,21 @@ const ArrayPropKeyProvider = ( { children, bind }: PropKeyProviderProps ) => {
 	};
 
 	const value = context.value?.[ Number( bind ) ];
+	const placeholder = context.placeholder?.[ Number( bind ) ];
 
 	const propType = context.propType.item_prop_type;
 
 	return (
 		<PropKeyContext.Provider
-			value={ { ...context, value, setValue, bind, propType, path: [ ...( path ?? [] ), bind ] } }
+			value={ {
+				...context,
+				value,
+				setValue,
+				bind,
+				propType,
+				path: [ ...( path ?? [] ), bind ],
+				placeholder: placeholder ?? undefined,
+			} }
 		>
 			{ children }
 		</PropKeyContext.Provider>

package/src/bound-prop-context/use-bound-prop.ts

@@ -73,7 +73,10 @@ export function useBoundProp< TKey extends string, TValue extends PropValue >(
 
 	const propType = resolveUnionPropType( propKeyContext.propType, propTypeUtil.key );
 
-	const value = propTypeUtil.extract( propKeyContext.value ?? propType.default ?? null );
+	const hasPlaceholder = propKeyContext.placeholder !== undefined && propKeyContext.placeholder !== null;
+	const fallbackValue = hasPlaceholder ? null : propType.default;
+
+	const value = propTypeUtil.extract( propKeyContext.value ?? fallbackValue ?? null );
 	const placeholder = propTypeUtil.extract( propKeyContext.placeholder ?? null );
 
 	return {

package/src/components/inline-editor.tsx

@@ -25,6 +25,7 @@ const UNDERLINE_KEYBOARD_SHORTCUT = 'u';
 type InlineEditorProps = {
 	value: string | null;
 	setValue: ( value: string | null ) => void;
+	placeholder?: string | null;
 	editorProps?: EditorProps;
 	elementClasses?: string;
 	sx?: SxProps< Theme >;
@@ -41,6 +42,7 @@ export const InlineEditor = React.forwardRef( ( props: InlineEditorProps, ref )
 	const {
 		value,
 		setValue,
+		placeholder = null,
 		editorProps = {},
 		elementClasses = '',
 		autofocus = false,
@@ -139,6 +141,8 @@ export const InlineEditor = React.forwardRef( ( props: InlineEditorProps, ref )
 			attributes: {
 				...( editorProps.attributes ?? {} ),
 				role: 'textbox',
+				...( placeholder ? { 'data-placeholder': placeholder } : {} ),
+				...( value === null || value === '' ? { class: 'is-empty' } : {} ),
 			},
 		},
 		onCreate: onEditorCreate ? ( { editor: mountedEditor } ) => onEditorCreate( mountedEditor ) : undefined,

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

@@ -14,11 +14,12 @@ type ImageMediaControlProps = {
 };
 
 export const ImageMediaControl = createControl( ( { mediaTypes = [ 'image' ] }: ImageMediaControlProps ) => {
-	const { value, setValue, propType } = useBoundProp( imageSrcPropTypeUtil );
+	const { value, setValue, propType, placeholder } = useBoundProp( imageSrcPropTypeUtil );
 	const { id, url } = value ?? {};
 
 	const { data: attachment, isFetching } = useWpMediaAttachment( id?.value || null );
-	const src = attachment?.url ?? url?.value ?? null;
+	const { data: placeholderAttachment } = useWpMediaAttachment( placeholder?.id?.value || null );
+	const src = attachment?.url ?? url?.value ?? placeholderAttachment?.url ?? null;
 
 	const { open } = useWpMediaFrame( {
 		mediaTypes,

package/src/controls/inline-editing-control.tsx

@@ -21,7 +21,7 @@ export const InlineEditingControl = createControl(
 		attributes?: Record< string, string >;
 		props?: ComponentProps< 'div' >;
 	} ) => {
-		const { value, setValue } = useBoundProp( htmlV3PropTypeUtil );
+		const { value, setValue, placeholder } = useBoundProp( htmlV3PropTypeUtil );
 		const content = stringPropTypeUtil.extract( value?.content ?? null ) ?? '';
 
 		const debouncedParse = useMemo(
@@ -82,6 +82,13 @@ export const InlineEditingControl = createControl(
 								margin: 0,
 								padding: 0,
 							},
+							'&.is-empty::before': {
+								content: 'attr(data-placeholder)',
+								color: 'text.tertiary',
+								pointerEvents: 'none',
+								position: 'absolute',
+								opacity: 0.6,
+							},
 						},
 						'.strip-styles *': {
 							all: 'unset',
@@ -91,7 +98,11 @@ export const InlineEditingControl = createControl(
 					{ ...attributes }
 					{ ...props }
 				>
-					<InlineEditor value={ content } setValue={ handleChange } />
+					<InlineEditor
+						value={ content }
+						setValue={ handleChange }
+						placeholder={ placeholder?.content?.value ?? null }
+					/>
 				</Box>
 			</ControlActions>
 		);

package/src/controls/link-control.tsx

@@ -42,8 +42,9 @@ const SIZE = 'tiny';
 
 export const LinkControl = createControl( ( props: Props ) => {
 	const { value, path, setValue, ...propContext } = useBoundProp( linkPropTypeUtil );
+	const linkPlaceholder = propContext.placeholder;
 	const [ linkSessionValue, setLinkSessionValue ] = useSessionStorage< LinkSessionValue >( path.join( '/' ) );
-	const [ isActive, setIsActive ] = useState( !! value );
+	const [ isActive, setIsActive ] = useState( !! value || !! linkPlaceholder );
 
 	const {
 		allowCustomValues = true,
@@ -56,22 +57,23 @@ export const LinkControl = createControl( ( props: Props ) => {
 	} = props || {};
 
 	const [ linkInLinkRestriction, setLinkInLinkRestriction ] = useState(
-		getLinkInLinkRestriction( elementId, value )
+		getLinkInLinkRestriction( elementId, value ?? linkPlaceholder )
 	);
+
 	const shouldDisableAddingLink = ! isActive && linkInLinkRestriction.shouldRestrict;
 
 	const debouncedCheckRestriction = useMemo(
 		() =>
 			debounce( () => {
-				const newRestriction = getLinkInLinkRestriction( elementId, value );
+				const newRestriction = getLinkInLinkRestriction( elementId, value ?? linkPlaceholder );
 
-				if ( newRestriction.shouldRestrict && isActive ) {
+				if ( newRestriction.shouldRestrict && isActive && ! linkPlaceholder ) {
 					setIsActive( false );
 				}
 
 				setLinkInLinkRestriction( newRestriction );
 			}, 300 ),
-		[ elementId, isActive, value ]
+		[ elementId, isActive, value, linkPlaceholder ]
 	);
 
 	useEffect( () => {
@@ -94,7 +96,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 	}, [ elementId, debouncedCheckRestriction ] );
 
 	const onEnabledChange = () => {
-		setLinkInLinkRestriction( getLinkInLinkRestriction( elementId, value ) );
+		setLinkInLinkRestriction( getLinkInLinkRestriction( elementId, value ?? linkPlaceholder ) );
 
 		if ( linkInLinkRestriction.shouldRestrict && ! isActive ) {
 			return;
@@ -141,12 +143,14 @@ export const LinkControl = createControl( ( props: Props ) => {
 				>
 					<ControlLabel>{ label }</ControlLabel>
 					<RestrictedLinkInfotip isVisible={ ! isActive } linkInLinkRestriction={ linkInLinkRestriction }>
-						<ToggleIconControl
+						<IconButton
+							size={ SIZE }
+							onClick={ onEnabledChange }
+							aria-label={ __( 'Toggle link', 'elementor' ) }
 							disabled={ shouldDisableAddingLink }
-							active={ isActive }
-							onIconClick={ onEnabledChange }
-							label={ __( 'Toggle link', 'elementor' ) }
-						/>
+						>
+							{ isActive ? <MinusIcon fontSize={ SIZE } /> : <PlusIcon fontSize={ SIZE } /> }
+						</IconButton>
 					</RestrictedLinkInfotip>
 				</Stack>
 				<Collapse in={ isActive } timeout="auto" unmountOnExit>
@@ -177,18 +181,3 @@ export const LinkControl = createControl( ( props: Props ) => {
 		</PropProvider>
 	);
 } );
-
-type ToggleIconControlProps = {
-	disabled: boolean;
-	active: boolean;
-	onIconClick: () => void;
-	label?: string;
-};
-
-const ToggleIconControl = ( { disabled, active, onIconClick, label }: ToggleIconControlProps ) => {
-	return (
-		<IconButton size={ SIZE } onClick={ onIconClick } aria-label={ label } disabled={ disabled }>
-			{ active ? <MinusIcon fontSize={ SIZE } /> : <PlusIcon fontSize={ SIZE } /> }
-		</IconButton>
-	);
-};

package/src/controls/query-control.tsx

@@ -1,6 +1,12 @@
 import * as React from 'react';
 import { useMemo, useState } from 'react';
-import { numberPropTypeUtil, stringPropTypeUtil, urlPropTypeUtil } from '@elementor/editor-props';
+import {
+	numberPropTypeUtil,
+	queryPropTypeUtil,
+	type QueryPropValue,
+	stringPropTypeUtil,
+	urlPropTypeUtil,
+} from '@elementor/editor-props';
 import { type HttpResponse, httpService } from '@elementor/http-client';
 import { SearchIcon } from '@elementor/icons';
 import { debounce } from '@elementor/utils';
@@ -35,56 +41,51 @@ type Response = HttpResponse< { value: FlatOption[] | CategorizedOption[] } >;
 type FetchOptionsParams = Record< string, unknown > & { term: string };
 
 export const QueryControl = createControl( ( props: Props ) => {
-	const { value, setValue } = useBoundProp< DestinationProp >();
+	const { value: queryValue, setValue: setQueryValue } = useBoundProp( queryPropTypeUtil );
+	const { value: urlValue, setValue: setUrlValue, placeholder: urlPlaceholder } = useBoundProp( urlPropTypeUtil );
 
 	const {
 		allowCustomValues = true,
 		queryOptions: { url, params = {} },
-		placeholder,
+		placeholder = __( 'Search', 'elementor' ),
 		minInputLength = 2,
 		onSetValue,
 		ariaLabel,
 	} = props || {};
 
-	const normalizedPlaceholder = placeholder || __( 'Search', 'elementor' );
-
 	const [ options, setOptions ] = useState< FlatOption[] | CategorizedOption[] >(
-		generateFirstLoadedOption( value?.value )
+		generateFirstLoadedOption( queryValue )
 	);
 
 	const onOptionChange = ( newValue: number | null ) => {
 		if ( newValue === null ) {
-			setValue( null );
+			setQueryValue( null );
 			onSetValue?.( null );
 
 			return;
 		}
 
-		const valueToSave = {
-			$$type: 'query',
-			value: {
-				id: numberPropTypeUtil.create( newValue ),
-				label: stringPropTypeUtil.create( findMatchingOption( options, newValue )?.label || null ),
-			},
+		const newQueryValue = {
+			id: numberPropTypeUtil.create( newValue ),
+			label: stringPropTypeUtil.create( findMatchingOption( options, newValue )?.label || null ),
 		};
 
-		setValue( valueToSave );
-		onSetValue?.( valueToSave );
+		setQueryValue( newQueryValue );
+		onSetValue?.( queryPropTypeUtil.create( newQueryValue ) );
 	};
 
 	const onTextChange = ( newValue: string | null ) => {
-		if ( ! newValue ) {
-			setValue( null );
+		const trimmedValue = newValue?.trim() || '';
+
+		if ( ! trimmedValue ) {
+			setUrlValue( null );
 			onSetValue?.( null );
 
 			return;
 		}
 
-		const newLinkValue = newValue?.trim() || '';
-		const valueToSave = newLinkValue ? urlPropTypeUtil.create( newLinkValue ) : null;
-
-		setValue( valueToSave );
-		onSetValue?.( valueToSave );
+		setUrlValue( trimmedValue );
+		onSetValue?.( urlPropTypeUtil.create( trimmedValue ) );
 		updateOptions( newValue );
 	};
 
@@ -110,14 +111,16 @@ export const QueryControl = createControl( ( props: Props ) => {
 		[ url ]
 	);
 
+	const displayValue = queryValue?.id?.value ?? urlValue;
+
 	return (
 		<ControlActions>
 			<Autocomplete
 				options={ options }
 				allowCustomValues={ allowCustomValues }
-				placeholder={ normalizedPlaceholder }
+				placeholder={ urlPlaceholder ?? placeholder }
 				startAdornment={ <SearchIcon fontSize="tiny" /> }
-				value={ value?.value?.id?.value || value?.value }
+				value={ displayValue }
 				onOptionChange={ onOptionChange }
 				onTextChange={ onTextChange }
 				minInputLength={ minInputLength }
@@ -152,17 +155,15 @@ function formatOptions( options: FlatOption[] | CategorizedOption[] ): FlatOptio
 	);
 }
 
-function generateFirstLoadedOption( unionValue: DestinationProp | null ): FlatOption[] {
-	const value = unionValue?.id?.value;
-	const label = unionValue?.label?.value;
-	const type = unionValue?.id?.$$type || 'url';
-
-	return value && label && type === 'number'
-		? [
-				{
-					id: value.toString(),
-					label,
-				},
-		  ]
-		: [];
+function generateFirstLoadedOption( queryValue: QueryPropValue[ 'value' ] | null ): FlatOption[] {
+	const id = queryValue?.id?.value;
+	const label = queryValue?.label?.value;
+
+	const option = [];
+
+	if ( id && label ) {
+		option.push( { id: id.toString(), label } );
+	}
+
+	return option;
 }

package/src/controls/switch-control.tsx

@@ -6,7 +6,7 @@ import { useBoundProp } from '../bound-prop-context/use-bound-prop';
 import { createControl } from '../create-control';
 
 export const SwitchControl = createControl( () => {
-	const { value, setValue, disabled } = useBoundProp( booleanPropTypeUtil );
+	const { value, setValue, disabled, placeholder } = useBoundProp( booleanPropTypeUtil );
 
 	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
 		setValue( event.target.checked );
@@ -15,7 +15,7 @@ export const SwitchControl = createControl( () => {
 	return (
 		<Box sx={ { display: 'flex', justifyContent: 'flex-end' } }>
 			<Switch
-				checked={ !! value }
+				checked={ !! ( value || placeholder ) }
 				onChange={ handleChange }
 				size="small"
 				disabled={ disabled }

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

@@ -11,13 +11,15 @@ type Props = {
 	ariaLabel?: string;
 };
 
-export const TextAreaControl = createControl( ( { placeholder, ariaLabel }: Props ) => {
-	const { value, setValue, disabled } = useBoundProp( stringPropTypeUtil );
+export const TextAreaControl = createControl( ( { placeholder: propPlaceholder, ariaLabel }: Props ) => {
+	const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp( stringPropTypeUtil );
 
 	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
 		setValue( event.target.value );
 	};
 
+	const placeholder = propPlaceholder ?? boundPlaceholder ?? undefined;
+
 	return (
 		<ControlActions>
 			<TextField

package/src/controls/text-control.tsx

@@ -8,7 +8,7 @@ import { createControl } from '../create-control';
 
 export const TextControl = createControl(
 	( {
-		placeholder,
+		placeholder: propPlaceholder,
 		error,
 		inputValue,
 		inputDisabled,
@@ -24,9 +24,11 @@ export const TextControl = createControl(
 		sx?: SxProps;
 		ariaLabel?: string;
 	} ) => {
-		const { value, setValue, disabled } = useBoundProp( stringPropTypeUtil );
+		const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp( stringPropTypeUtil );
 		const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
 
+		const placeholder = propPlaceholder ?? boundPlaceholder ?? undefined;
+
 		return (
 			<ControlActions>
 				<TextField

package/src/controls/url-control.tsx

@@ -7,10 +7,12 @@ import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
 export const UrlControl = createControl(
-	( { placeholder, ariaLabel }: { placeholder?: string; ariaLabel?: string } ) => {
-		const { value, setValue, disabled } = useBoundProp( urlPropTypeUtil );
+	( { placeholder: propPlaceholder, ariaLabel }: { placeholder?: string; ariaLabel?: string } ) => {
+		const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp( urlPropTypeUtil );
 		const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
 
+		const placeholder = propPlaceholder ?? boundPlaceholder ?? undefined;
+
 		return (
 			<ControlActions>
 				<TextField