@elementor/editor-controls 4.1.0-797 → 4.1.0-798

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-797",
+  "version": "4.1.0-798",
   "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-797",
-    "@elementor/editor-elements": "4.1.0-797",
-    "@elementor/editor-props": "4.1.0-797",
-    "@elementor/editor-responsive": "4.1.0-797",
-    "@elementor/editor-ui": "4.1.0-797",
-    "@elementor/editor-v1-adapters": "4.1.0-797",
-    "@elementor/env": "4.1.0-797",
-    "@elementor/events": "4.1.0-797",
-    "@elementor/http-client": "4.1.0-797",
+    "@elementor/editor-current-user": "4.1.0-798",
+    "@elementor/editor-elements": "4.1.0-798",
+    "@elementor/editor-props": "4.1.0-798",
+    "@elementor/editor-responsive": "4.1.0-798",
+    "@elementor/editor-ui": "4.1.0-798",
+    "@elementor/editor-v1-adapters": "4.1.0-798",
+    "@elementor/env": "4.1.0-798",
+    "@elementor/events": "4.1.0-798",
+    "@elementor/http-client": "4.1.0-798",
     "@elementor/icons": "^1.68.0",
-    "@elementor/locations": "4.1.0-797",
-    "@elementor/query": "4.1.0-797",
-    "@elementor/session": "4.1.0-797",
+    "@elementor/locations": "4.1.0-798",
+    "@elementor/query": "4.1.0-798",
+    "@elementor/session": "4.1.0-798",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.1.0-797",
-    "@elementor/wp-media": "4.1.0-797",
+    "@elementor/utils": "4.1.0-798",
+    "@elementor/wp-media": "4.1.0-798",
     "@monaco-editor/react": "^4.7.0",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",

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

@@ -99,7 +99,27 @@ const FromNameField = () => (
 	/>
 );
 
-const ReplyToField = () => <EmailField bind="reply-to" label={ __( 'Reply-to', 'elementor' ) } />;
+const ReplyToField = () => {
+	const emailSuggestions = useFormFieldSuggestions( { inputType: 'email' } );
+
+	return (
+		<PropKeyProvider bind="reply-to">
+			<Grid container direction="column" gap={ 0.5 }>
+				<Grid item>
+					<ControlFormLabel>{ __( 'Reply-to', 'elementor' ) }</ControlFormLabel>
+				</Grid>
+				<Grid item>
+					<MentionTextAreaControl
+						suggestions={ emailSuggestions }
+						rows={ 1 }
+						triggerPosition="start"
+						placeholder={ __( 'You can type @ to insert an email field', 'elementor' ) }
+					/>
+				</Grid>
+			</Grid>
+		</PropKeyProvider>
+	);
+};
 
 const CcField = () => <EmailField bind="cc" label={ __( 'Cc', 'elementor' ) } />;
 

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

@@ -76,16 +76,30 @@ const MentionWrapper = styled( 'div' )( ( { theme } ) => ( {
 			backgroundColor: theme.palette.action.selected,
 		},
 	},
+	'&[data-single-line="true"] textarea': {
+		resize: 'none',
+	},
 } ) );
 
+type TriggerPosition = 'start' | 'auto';
+
+function createMentionPattern( value: string, triggerPosition: TriggerPosition ): RegExp {
+	const escaped = value.replace( /[.*+?^${}()|[\]\\]/g, '\\$&' );
+	const prefix = 'start' === triggerPosition ? '^' : '';
+
+	return new RegExp( `${ prefix }@${ escaped }(?=\\s|$|[^a-zA-Z0-9_-])`, 'g' );
+}
+
 type Props = {
 	placeholder?: string;
 	ariaLabel?: string;
 	suggestions: Suggestion[];
+	rows?: number;
+	triggerPosition?: TriggerPosition;
 };
 
 export const MentionTextAreaControl = createControl(
-	( { placeholder, ariaLabel, suggestions: allSuggestions }: Props ) => {
+	( { placeholder, ariaLabel, suggestions: allSuggestions, rows = 5, triggerPosition = 'auto' }: Props ) => {
 		const { value, setValue, disabled } = useBoundProp( stringPropTypeUtil );
 		const [ filteredSuggestions, setFilteredSuggestions ] = useState< Suggestion[] >( [] );
 
@@ -94,16 +108,13 @@ export const MentionTextAreaControl = createControl(
 				let result = text;
 
 				for ( const suggestion of allSuggestions ) {
-					const mentionPattern = new RegExp(
-						`@${ suggestion.value.replace( /[.*+?^${}()|[\]\\]/g, '\\$&' ) }(?=\\s|$|[^a-zA-Z0-9_-])`,
-						'g'
-					);
-					result = result.replace( mentionPattern, `[${ suggestion.value }]` );
+					const pattern = createMentionPattern( suggestion.value, triggerPosition );
+					result = result.replace( pattern, `[${ suggestion.value }]` );
 				}
 
 				return result;
 			},
-			[ allSuggestions ]
+			[ allSuggestions, triggerPosition ]
 		);
 
 		const handleChange = useCallback(
@@ -116,19 +127,29 @@ export const MentionTextAreaControl = createControl(
 		);
 
 		const handleSearch = useCallback(
-			( event: { query: string } ) => {
+			( event: { originalEvent: React.SyntheticEvent; trigger: string; query: string } ) => {
+				if ( 'start' === triggerPosition ) {
+					const target = event.originalEvent.target as HTMLTextAreaElement;
+					const triggerIndex = target.selectionStart - event.query.length - event.trigger.length;
+
+					if ( triggerIndex !== 0 ) {
+						setFilteredSuggestions( [] );
+						return;
+					}
+				}
+
 				const query = event.query.toLowerCase();
 				const filtered = allSuggestions.filter(
 					( item ) => item.label.toLowerCase().includes( query ) || item.value.toLowerCase().includes( query )
 				);
 				setFilteredSuggestions( filtered );
 			},
-			[ allSuggestions ]
+			[ allSuggestions, triggerPosition ]
 		);
 
 		return (
 			<ControlActions>
-				<MentionWrapper>
+				<MentionWrapper data-single-line={ rows === 1 ? 'true' : undefined }>
 					<Mention
 						value={ value ?? '' }
 						onChange={ handleChange }
@@ -136,7 +157,7 @@ export const MentionTextAreaControl = createControl(
 						onSearch={ handleSearch }
 						field="value"
 						trigger="@"
-						rows={ 5 }
+						rows={ rows }
 						disabled={ disabled }
 						placeholder={ placeholder }
 						itemTemplate={ SuggestionItem }

package/src/hooks/use-form-field-suggestions.ts

@@ -9,7 +9,11 @@ export type Suggestion = {
 
 const FORM_FIELD_WIDGET_TYPES = [ 'e-form-input', 'e-form-textarea', 'e-form-checkbox' ];
 
-export function useFormFieldSuggestions(): Suggestion[] {
+type Options = {
+	inputType?: string;
+};
+
+export function useFormFieldSuggestions( options?: Options ): Suggestion[] {
 	return useListenTo(
 		[
 			v1ReadyEvent(),
@@ -40,6 +44,15 @@ export function useFormFieldSuggestions(): Suggestion[] {
 					return;
 				}
 
+				if ( options?.inputType ) {
+					const typeProp = child.settings.get( 'type' );
+					const typeValue = isTransformable( typeProp ) ? typeProp.value : typeProp;
+
+					if ( typeValue !== options.inputType ) {
+						return;
+					}
+				}
+
 				const cssIdProp = child.settings.get( '_cssid' );
 				const fieldId = isTransformable( cssIdProp ) ? cssIdProp.value : cssIdProp;