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

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.3.0-999",
+  "version": "4.3.0-beta1",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,23 +40,23 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.3.0-999",
-    "@elementor/editor-elements": "4.3.0-999",
-    "@elementor/editor-props": "4.3.0-999",
-    "@elementor/editor-responsive": "4.3.0-999",
-    "@elementor/editor-ui": "4.3.0-999",
-    "@elementor/editor-v1-adapters": "4.3.0-999",
-    "@elementor/env": "4.3.0-999",
-    "@elementor/events": "4.3.0-999",
-    "@elementor/http-client": "4.3.0-999",
+    "@elementor/editor-current-user": "4.3.0-beta1",
+    "@elementor/editor-elements": "4.3.0-beta1",
+    "@elementor/editor-props": "4.3.0-beta1",
+    "@elementor/editor-responsive": "4.3.0-beta1",
+    "@elementor/editor-ui": "4.3.0-beta1",
+    "@elementor/editor-v1-adapters": "4.3.0-beta1",
+    "@elementor/env": "4.3.0-beta1",
+    "@elementor/events": "4.3.0-beta1",
+    "@elementor/http-client": "4.3.0-beta1",
     "@elementor/icons": "~1.75.1",
-    "@elementor/locations": "4.3.0-999",
-    "@elementor/query": "4.3.0-999",
-    "@elementor/schema": "4.3.0-999",
-    "@elementor/session": "4.3.0-999",
+    "@elementor/locations": "4.3.0-beta1",
+    "@elementor/query": "4.3.0-beta1",
+    "@elementor/schema": "4.3.0-beta1",
+    "@elementor/session": "4.3.0-beta1",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.3.0-999",
-    "@elementor/wp-media": "4.3.0-999",
+    "@elementor/utils": "4.3.0-beta1",
+    "@elementor/wp-media": "4.3.0-beta1",
     "@monaco-editor/react": "^4.7.0",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",

package/src/components/inline-editor-toolbar.tsx

@@ -32,13 +32,19 @@ export type InlineEditorToolbarProps = {
 	editor: Editor;
 	elementId?: ElementID;
 	sx?: SxProps< Theme >;
+	inControlPanel?: boolean;
 };
 
 type ToolbarButtonKeys = keyof typeof toolbarButtons;
 
 type FormatAction = Omit< ToolbarButtonKeys, 'clear' >;
 
-export const InlineEditorToolbar = ( { editor, elementId, sx = {} }: InlineEditorToolbarProps ) => {
+export const InlineEditorToolbar = ( {
+	editor,
+	elementId,
+	sx = {},
+	inControlPanel = false,
+}: InlineEditorToolbarProps ) => {
 	const [ urlValue, setUrlValue ] = useState( '' );
 	const [ openInNewTab, setOpenInNewTab ] = useState( false );
 	const toolbarRef = useRef< HTMLDivElement >( null );
@@ -101,8 +107,10 @@ export const InlineEditorToolbar = ( { editor, elementId, sx = {} }: InlineEdito
 	};
 
 	useEffect( () => {
-		editor?.commands?.focus();
-	}, [ editor ] );
+		if ( ! inControlPanel ) {
+			editor?.commands?.focus();
+		}
+	}, [ editor, inControlPanel ] );
 
 	return (
 		<Box
@@ -118,6 +126,23 @@ export const InlineEditorToolbar = ( { editor, elementId, sx = {} }: InlineEdito
 				visibility: linkPopupState.isOpen ? 'hidden' : 'visible',
 				pointerEvents: linkPopupState.isOpen ? 'none' : 'all',
 				...sx,
+				...( inControlPanel && {
+					width: '100%',
+					justifyContent: 'center',
+					flexDirection: 'row',
+					backgroundColor: 'transparent',
+					boxShadow: 'none',
+					borderWidth: '0',
+					borderBottom: '1px solid',
+					borderBottomColor: ( theme: Theme ) => theme.palette.text.secondary,
+					borderRadius: '0',
+					position: 'absolute',
+					top: '0',
+					left: '0',
+					'&, & .MuiIconButton-root, & .MuiToggleButton-root': {
+						color: ( theme: Theme ) => theme.palette.text.primary,
+					},
+				} ),
 			} }
 		>
 			<Tooltip title={ clearButton.label } placement="top" sx={ { borderRadius: '8px' } }>
@@ -144,6 +169,14 @@ export const InlineEditorToolbar = ( { editor, elementId, sx = {} }: InlineEdito
 								marginLeft: 0,
 							},
 						},
+					...( inControlPanel && {
+						justifyContent: 'space-between',
+						width: '100%',
+						'& svg': {
+							width: '0.7rem',
+							height: '0.7rem',
+						},
+					} ),
 				} }
 			>
 				{ formatButtonsList.map( ( button ) => (

package/src/components/inline-editor.tsx

@@ -33,6 +33,7 @@ type InlineEditorProps = {
 	autofocus?: boolean;
 	expectedTag?: string | null;
 	onEditorCreate?: Dispatch< SetStateAction< Editor | null > >;
+	onEditorDestroy?: () => void;
 	wrapperClassName?: string;
 	onSelectionEnd?: ( view: EditorView ) => void;
 	mountElement?: HTMLElement | null;
@@ -50,6 +51,7 @@ export const InlineEditor = React.forwardRef( ( props: InlineEditorProps, ref )
 		onBlur = undefined,
 		expectedTag = null,
 		onEditorCreate,
+		onEditorDestroy,
 		wrapperClassName,
 		onSelectionEnd,
 		mountElement = null,
@@ -146,6 +148,7 @@ export const InlineEditor = React.forwardRef( ( props: InlineEditorProps, ref )
 			},
 		},
 		onCreate: onEditorCreate ? ( { editor: mountedEditor } ) => onEditorCreate( mountedEditor ) : undefined,
+		onDestroy: onEditorDestroy ? () => onEditorDestroy() : undefined,
 		onBlur: mountElement ? undefined : () => onBlurRef.current?.(),
 		onSelectionUpdate: onSelectionEnd
 			? ( { editor: updatedEditor } ) => onSelectionEnd( updatedEditor.view )

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

@@ -51,8 +51,8 @@ export const AspectRatioControl = createControl( ( { label }: { label: string }
 
 		if ( isCustomValue ) {
 			const [ width, height ] = aspectRatioValue.split( '/' );
-			setCustomWidth( width || '' );
-			setCustomHeight( height || '' );
+			setCustomWidth( width.trim() || '' );
+			setCustomHeight( height.trim() || '' );
 			setSelectedValue( CUSTOM_RATIO );
 			setIsCustom( true );
 		} else {

package/src/controls/background-control/background-gradient-color-control.tsx

@@ -64,9 +64,9 @@ export const BackgroundGradientColorControl = createControl( () => {
 		return {
 			type: type.value,
 			angle: angle?.value || 0,
-			stops: stops.value.map( ( { value: { color, offset } }: ColorStop ) => ( {
+			stops: stops.value.map( ( { value: { color, offset } }: ColorStop, index: number, arr: ColorStop[] ) => ( {
 				color: color.value,
-				offset: offset.value,
+				offset: offset?.value ?? ( arr.length > 1 ? ( index / ( arr.length - 1 ) ) * 100 : 0 ),
 			} ) ),
 			positions: positions?.value.split( ' ' ),
 		};

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

@@ -305,7 +305,9 @@ const getGradientValue = ( value: BackgroundOverlayItemPropValue ) => {
 	const gradient = value.value;
 
 	const stops = gradient.stops.value
-		?.map( ( { value: { color, offset } }: ColorStop ) => `${ color.value } ${ offset.value ?? 0 }%` )
+		?.map( ( { value: { color, offset } }: ColorStop ) =>
+			offset ? `${ color.value } ${ offset.value ?? 0 }%` : `${ color.value }`
+		)
 		?.join( ',' );
 
 	if ( gradient.type.value === 'linear' ) {

package/src/controls/email-form-action-control/email-chips-field.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type KeyboardEvent, type SyntheticEvent, useState } from 'react';
+import { type KeyboardEvent, type SyntheticEvent, useMemo, useState } from 'react';
 import { stringArrayPropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
 import { Autocomplete, Grid, TextField } from '@elementor/ui';
 
@@ -8,13 +8,28 @@ import { ChipsList } from '../../components/chips-list';
 import { ControlFormLabel } from '../../components/control-form-label';
 import ControlActions from '../../control-actions/control-actions';
 import { createControl } from '../../create-control';
-import { CHIP_TRIGGER_KEYS, isValidEmail } from './utils';
+import { type Suggestion } from '../../hooks/use-form-field-suggestions';
+import { createMentionPattern } from '../mention-text-area-control';
+import { CHIP_TRIGGER_KEYS, isFormFieldShortcode, isValidEmail } from './utils';
+
+const isValidRecipient = ( address: string ) => isValidEmail( address ) || isFormFieldShortcode( address );
+
+function resolveMention( raw: string, suggestions: Suggestion[] ): string {
+	if ( ! raw.startsWith( '@' ) ) {
+		return raw;
+	}
+
+	const match = suggestions.find( ( suggestion ) => createMentionPattern( suggestion.value, 'start' ).test( raw ) );
+
+	return match ? `[${ match.value }]` : raw;
+}
 
 type EmailChipsControlProps = {
 	placeholder?: string;
+	suggestions?: Suggestion[];
 };
 
-export const EmailChipsControl = createControl( ( { placeholder }: EmailChipsControlProps ) => {
+export const EmailChipsControl = createControl( ( { placeholder, suggestions = [] }: EmailChipsControlProps ) => {
 	const { value, setValue, disabled } = useBoundProp( stringArrayPropTypeUtil );
 	const [ inputValue, setInputValue ] = useState( '' );
 
@@ -24,10 +39,15 @@ export const EmailChipsControl = createControl( ( { placeholder }: EmailChipsCon
 		.map( ( item ) => stringPropTypeUtil.extract( item ) )
 		.filter( ( val ): val is string => val !== null );
 
+	const suggestionOptions = useMemo(
+		() => suggestions.map( ( suggestion ) => `[${ suggestion.value }]` ),
+		[ suggestions ]
+	);
+
 	const tryAddChip = ( raw: string ) => {
-		const address = raw.trim();
+		const address = resolveMention( raw.trim(), suggestions );
 
-		if ( ! address || selectedValues.includes( address ) || ! isValidEmail( address ) ) {
+		if ( ! address || selectedValues.includes( address ) || ! isValidRecipient( address ) ) {
 			return;
 		}
 
@@ -39,9 +59,9 @@ export const EmailChipsControl = createControl( ( { placeholder }: EmailChipsCon
 		const updated = [];
 
 		for ( const entry of newValue ) {
-			const address = entry.trim();
+			const address = resolveMention( entry.trim(), suggestions );
 
-			if ( ! address || ! isValidEmail( address ) ) {
+			if ( ! address || ! isValidRecipient( address ) ) {
 				continue;
 			}
 
@@ -82,7 +102,13 @@ export const EmailChipsControl = createControl( ( { placeholder }: EmailChipsCon
 				} }
 				value={ selectedValues }
 				onChange={ handleChange }
-				options={ [] }
+				options={ suggestionOptions }
+				filterOptions={ ( options, state ) => {
+					const query = state.inputValue.trim().replace( /^@/, '' ).toLowerCase();
+
+					return query ? options.filter( ( option ) => option.toLowerCase().includes( query ) ) : options;
+				} }
+				filterSelectedOptions
 				onBlur={ handleBlur }
 				getOptionLabel={ ( option ) => option }
 				isOptionEqualToValue={ ( option, val ) => option === val }
@@ -100,15 +126,16 @@ export const EmailChipsControl = createControl( ( { placeholder }: EmailChipsCon
 type EmailChipsFieldProps = {
 	fieldLabel: string;
 	placeholder?: string;
+	suggestions?: Suggestion[];
 };
 
-export const EmailChipsField = ( { fieldLabel, placeholder }: EmailChipsFieldProps ) => (
+export const EmailChipsField = ( { fieldLabel, placeholder, suggestions }: EmailChipsFieldProps ) => (
 	<Grid container direction="column" gap={ 0.5 }>
 		<Grid item>
 			<ControlFormLabel>{ fieldLabel }</ControlFormLabel>
 		</Grid>
 		<Grid item>
-			<EmailChipsControl placeholder={ placeholder } />
+			<EmailChipsControl placeholder={ placeholder } suggestions={ suggestions } />
 		</Grid>
 	</Grid>
 );

package/src/controls/email-form-action-control/fields.tsx

@@ -13,11 +13,26 @@ import { EmailChipsField } from './email-chips-field';
 import { EmailField } from './email-field';
 import { shouldShowMentionsInfo } from './utils';
 
-export const SendToField = ( { placeholder }: { placeholder?: string } ) => (
-	<PropKeyProvider bind="to">
-		<EmailChipsField fieldLabel={ __( 'Send to', 'elementor' ) } placeholder={ placeholder } />
-	</PropKeyProvider>
-);
+export const SendToField = ( { placeholder }: { placeholder?: string } ) => {
+	const suggestions = useFormFieldSuggestions( { inputType: 'email' } );
+
+	return (
+		<PropKeyProvider bind="to">
+			<Stack gap={ 0.5 }>
+				<EmailChipsField
+					fieldLabel={ __( 'Send to', 'elementor' ) }
+					placeholder={ placeholder }
+					suggestions={ suggestions }
+				/>
+				{ shouldShowMentionsInfo() && (
+					<InfoAlert>
+						{ __( 'Type @ or an email field name to insert its submitted value.', 'elementor' ) }
+					</InfoAlert>
+				) }
+			</Stack>
+		</PropKeyProvider>
+	);
+};
 
 export const SubjectField = () => (
 	<EmailField
@@ -92,17 +107,25 @@ export const ReplyToField = () => {
 	);
 };
 
-export const CcField = () => (
-	<PropKeyProvider bind="cc">
-		<EmailChipsField fieldLabel={ __( 'Cc', 'elementor' ) } />
-	</PropKeyProvider>
-);
+export const CcField = () => {
+	const suggestions = useFormFieldSuggestions( { inputType: 'email' } );
 
-export const BccField = () => (
-	<PropKeyProvider bind="bcc">
-		<EmailChipsField fieldLabel={ __( 'Bcc', 'elementor' ) } />
-	</PropKeyProvider>
-);
+	return (
+		<PropKeyProvider bind="cc">
+			<EmailChipsField fieldLabel={ __( 'Cc', 'elementor' ) } suggestions={ suggestions } />
+		</PropKeyProvider>
+	);
+};
+
+export const BccField = () => {
+	const suggestions = useFormFieldSuggestions( { inputType: 'email' } );
+
+	return (
+		<PropKeyProvider bind="bcc">
+			<EmailChipsField fieldLabel={ __( 'Bcc', 'elementor' ) } suggestions={ suggestions } />
+		</PropKeyProvider>
+	);
+};
 
 export const MetaDataField = () => (
 	<PropKeyProvider bind="meta-data">

package/src/controls/email-form-action-control/utils.ts

@@ -9,6 +9,12 @@ export function isValidEmail( email: string ): boolean {
 	return z.string().email().safeParse( email ).success;
 }
 
+const FORM_FIELD_SHORTCODE_PATTERN = /^\[[^[\]]+]$/;
+
+export function isFormFieldShortcode( value: string ): boolean {
+	return FORM_FIELD_SHORTCODE_PATTERN.test( value );
+}
+
 export const shouldShowMentionsInfo = (): boolean => {
 	if ( ! hasProInstalled() ) {
 		return true;

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

@@ -1,79 +1,73 @@
 import * as React from 'react';
-import { type ComponentProps, useCallback, useEffect, useMemo } from 'react';
-import { htmlV3PropTypeUtil, parseHtmlChildren, stringPropTypeUtil } from '@elementor/editor-props';
+import { type ComponentProps, useCallback, useState } from 'react';
+import { escapedHtmlPropTypeUtil } from '@elementor/editor-props';
 import { Box, type SxProps, type Theme } from '@elementor/ui';
-import { debounce } from '@elementor/utils';
+import { type Editor } from '@tiptap/react';
 
-import { useBoundProp } from '../bound-prop-context';
+import { useBoundProp, usePropKeyContext } from '../bound-prop-context';
 import { InlineEditor } from '../components/inline-editor';
+import { InlineEditorToolbar } from '../components/inline-editor-toolbar';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
+import { extractInlineHtmlContent } from '../utils/inline-editing';
+import { type ControlProps } from '../utils/types';
 
-const CHILDREN_PARSE_DEBOUNCE_MS = 300;
+type Props = ControlProps< {
+	sx?: SxProps< Theme >;
+	attributes?: Record< string, string >;
+	props?: ComponentProps< 'div' >;
+} >;
 
-export const InlineEditingControl = createControl(
-	( {
-		sx,
-		attributes,
-		props,
-	}: {
-		sx?: SxProps< Theme >;
-		attributes?: Record< string, string >;
-		props?: ComponentProps< 'div' >;
-	} ) => {
-		const { value, setValue, placeholder } = useBoundProp( htmlV3PropTypeUtil );
-		const content = stringPropTypeUtil.extract( value?.content ?? null ) ?? '';
+export const InlineEditingControl = createControl( ( { sx, attributes, props, context: { elementId } }: Props ) => {
+	const { setValue, placeholder, value } = useBoundProp( escapedHtmlPropTypeUtil );
+	const { value: rawValue } = usePropKeyContext();
+	const content = value ?? extractInlineHtmlContent( rawValue );
+	const [ editor, setEditor ] = useState< Editor | null >( null );
 
-		const debouncedParse = useMemo(
-			() =>
-				debounce( ( html: string ) => {
-					const parsed = parseHtmlChildren( html );
+	const handleChange = useCallback(
+		( newValue: unknown ) => {
+			const html = ( newValue ?? '' ) as string;
 
-					setValue( {
-						content: parsed.content ? stringPropTypeUtil.create( parsed.content ) : null,
-						children: parsed.children,
-					} );
-				}, CHILDREN_PARSE_DEBOUNCE_MS ),
-			[ setValue ]
-		);
+			setValue( html );
+		},
+		[ setValue ]
+	);
 
-		const handleChange = useCallback(
-			( newValue: unknown ) => {
-				const html = ( newValue ?? '' ) as string;
-
-				setValue( {
-					content: html ? stringPropTypeUtil.create( html ) : null,
-					children: value?.children ?? [],
-				} );
-
-				debouncedParse( html );
-			},
-			[ setValue, value?.children, debouncedParse ]
-		);
-
-		useEffect( () => () => debouncedParse.cancel(), [ debouncedParse ] );
-
-		return (
-			<ControlActions>
+	return (
+		<ControlActions>
+			<Box sx={ { position: 'relative' } }>
+				{ editor && editor.isEditable && (
+					<InlineEditorToolbar
+						editor={ editor }
+						elementId={ elementId }
+						sx={ ( theme: Theme ) => ( {
+							boxShadow: 'none',
+							border: '1px solid',
+							borderColor: theme.palette.text.secondary,
+							mb: 0.5,
+						} ) }
+						inControlPanel={ true }
+					/>
+				) }
 				<Box
-					sx={ {
+					sx={ ( theme: Theme ) => ( {
 						p: 0.8,
 						border: '1px solid',
-						borderColor: 'grey.200',
+						borderColor: theme.palette.text.secondary,
 						borderRadius: '8px',
 						transition: 'border-color .2s ease, box-shadow .2s ease',
 						'&:hover': {
-							borderColor: 'black',
+							borderColor: theme.palette.text.primary,
 						},
 						'&:focus-within': {
-							borderColor: 'black',
-							boxShadow: '0 0 0 1px black',
+							borderColor: theme.palette.text.primary,
+							boxShadow: `0 0 0 1px ${ theme.palette.text.primary }`,
 						},
 						'& .ProseMirror:focus': {
 							outline: 'none',
 						},
 						'& .ProseMirror': {
-							minHeight: '70px',
+							minHeight: '100px',
 							fontSize: '12px',
 							'& a': {
 								color: 'inherit',
@@ -94,17 +88,22 @@ export const InlineEditingControl = createControl(
 							all: 'unset',
 						},
 						...sx,
-					} }
+					} ) }
 					{ ...attributes }
 					{ ...props }
 				>
 					<InlineEditor
 						value={ content }
 						setValue={ handleChange }
-						placeholder={ placeholder?.content?.value ?? null }
+						placeholder={ placeholder ?? null }
+						onEditorCreate={ setEditor }
+						onEditorDestroy={ () => setEditor( null ) }
+						sx={ {
+							paddingBlockStart: 5,
+						} }
 					/>
 				</Box>
-			</ControlActions>
-		);
-	}
-);
+			</Box>
+		</ControlActions>
+	);
+} );

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

@@ -81,9 +81,9 @@ const MentionWrapper = styled( 'div' )( ( { theme } ) => ( {
 	},
 } ) );
 
-type TriggerPosition = 'start' | 'auto';
+export type TriggerPosition = 'start' | 'auto';
 
-function createMentionPattern( value: string, triggerPosition: TriggerPosition ): RegExp {
+export function createMentionPattern( value: string, triggerPosition: TriggerPosition ): RegExp {
 	const escaped = value.replace( /[.*+?^${}()|[\]\\]/g, '\\$&' );
 	const prefix = 'start' === triggerPosition ? '^' : '';
 

package/src/controls/open-icon-library.ts

@@ -0,0 +1,82 @@
+import { stringPropTypeUtil } from '@elementor/editor-props';
+
+export const SVG_ICON_LIBRARY = 'svg';
+
+export type IconLibraryMediaValue = {
+	id?: number;
+	url?: string;
+};
+
+export type IconLibrarySelection = {
+	value: string | IconLibraryMediaValue;
+	library: string;
+};
+
+type IconManagerControlView = {
+	model: {
+		get: ( key: string ) => unknown;
+	};
+	getControlValue: () => IconLibrarySelection;
+	setValue: ( icon: IconLibrarySelection ) => void;
+	applySavedValue: () => void;
+};
+
+type IconManager = {
+	loadIconLibraries: () => void;
+	show: ( options: { view: IconManagerControlView } ) => void;
+};
+
+type ElementorWithIconManager = {
+	iconManager?: IconManager;
+};
+
+type OpenIconLibraryOptions = {
+	selected?: IconLibrarySelection;
+	onSelect?: ( icon: IconLibrarySelection ) => void;
+};
+
+export function isSvgLibrarySelection(
+	icon: IconLibrarySelection
+): icon is IconLibrarySelection & { value: IconLibraryMediaValue } {
+	return icon.library === SVG_ICON_LIBRARY && typeof icon.value === 'object' && icon.value !== null;
+}
+
+export function openIconLibrary( { selected, onSelect }: OpenIconLibraryOptions = {} ) {
+	const iconManager = ( window.elementor as ElementorWithIconManager | undefined )?.iconManager;
+
+	if ( ! iconManager ) {
+		return;
+	}
+
+	iconManager.loadIconLibraries();
+	iconManager.show( {
+		view: createIconManagerControlView( selected, onSelect ),
+	} );
+}
+
+export function enqueueIconFonts( library: string ) {
+	window.elementor?.helpers?.enqueueIconFonts?.( library );
+}
+
+function createIconManagerControlView(
+	selected?: IconLibrarySelection,
+	onSelect?: ( icon: IconLibrarySelection ) => void
+): IconManagerControlView {
+	return {
+		model: {
+			get: () => false,
+		},
+		getControlValue: () => selected ?? { value: '', library: '' },
+		setValue: ( icon ) => {
+			onSelect?.( icon );
+		},
+		applySavedValue: () => undefined,
+	};
+}
+
+export function createIconPropValue( icon: Extract< IconLibrarySelection[ 'value' ], string >, library: string ) {
+	return {
+		value: stringPropTypeUtil.create( icon ),
+		library: stringPropTypeUtil.create( library ),
+	};
+}