@elementor/editor-controls 4.1.0-769 → 4.1.0-771

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-769",
+  "version": "4.1.0-771",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,40 +40,41 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.1.0-769",
-    "@elementor/editor-elements": "4.1.0-769",
-    "@elementor/editor-props": "4.1.0-769",
-    "@elementor/editor-responsive": "4.1.0-769",
-    "@elementor/editor-ui": "4.1.0-769",
-    "@elementor/editor-v1-adapters": "4.1.0-769",
-    "@elementor/env": "4.1.0-769",
-    "@elementor/http-client": "4.1.0-769",
+    "@elementor/editor-current-user": "4.1.0-771",
+    "@elementor/editor-elements": "4.1.0-771",
+    "@elementor/editor-props": "4.1.0-771",
+    "@elementor/editor-responsive": "4.1.0-771",
+    "@elementor/editor-ui": "4.1.0-771",
+    "@elementor/editor-v1-adapters": "4.1.0-771",
+    "@elementor/env": "4.1.0-771",
+    "@elementor/events": "4.1.0-771",
+    "@elementor/http-client": "4.1.0-771",
     "@elementor/icons": "^1.68.0",
-    "@elementor/locations": "4.1.0-769",
-    "@elementor/events": "4.1.0-769",
-    "@elementor/query": "4.1.0-769",
-    "@elementor/session": "4.1.0-769",
+    "@elementor/locations": "4.1.0-771",
+    "@elementor/query": "4.1.0-771",
+    "@elementor/session": "4.1.0-771",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.1.0-769",
-    "@elementor/wp-media": "4.1.0-769",
-    "@wordpress/i18n": "^5.13.0",
+    "@elementor/utils": "4.1.0-771",
+    "@elementor/wp-media": "4.1.0-771",
     "@monaco-editor/react": "^4.7.0",
-    "dayjs": "^1.11.18",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",
     "@tiptap/extension-hard-break": "^3.11.1",
     "@tiptap/extension-heading": "^3.10.4",
     "@tiptap/extension-italic": "^3.11.1",
+    "@tiptap/extension-link": "^3.11.1",
     "@tiptap/extension-paragraph": "^3.10.4",
     "@tiptap/extension-strike": "^3.11.1",
     "@tiptap/extension-subscript": "^3.11.1",
     "@tiptap/extension-superscript": "^3.11.1",
     "@tiptap/extension-text": "^3.11.1",
     "@tiptap/extension-underline": "^3.11.1",
-    "@tiptap/extension-link": "^3.11.1",
     "@tiptap/pm": "^3.11.1",
     "@tiptap/react": "^3.11.1",
-    "@tiptap/starter-kit": "^3.11.1"
+    "@tiptap/starter-kit": "^3.11.1",
+    "@wordpress/i18n": "^5.13.0",
+    "dayjs": "^1.11.18",
+    "primereact": "^10.9.7"
   },
   "devDependencies": {
     "monaco-types": "^0.1.0",

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

@@ -1,16 +1,18 @@
 import * as React from 'react';
 import { emailPropTypeUtil } from '@elementor/editor-props';
-import { CollapsibleContent } from '@elementor/editor-ui';
+import { CollapsibleContent, InfoAlert } from '@elementor/editor-ui';
 import { Box, Divider, Grid, Stack } from '@elementor/ui';
+import { hasProInstalled, isVersionGreaterOrEqual } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { ControlFormLabel } from '../components/control-form-label';
 import { ControlLabel } from '../components/control-label';
 import { createControl } from '../create-control';
+import { useFormFieldSuggestions } from '../hooks/use-form-field-suggestions';
 import { ChipsControl } from './chips-control';
+import { MentionTextAreaControl } from './mention-text-area-control';
 import { SelectControl } from './select-control';
-import { TextAreaControl } from './text-area-control';
 import { TextControl } from './text-control';
 
 const EmailField = ( { bind, label, placeholder }: { bind: string; label: string; placeholder?: string } ) => (
@@ -38,23 +40,48 @@ const SubjectField = () => (
 	/>
 );
 
-const MessageField = () => (
-	<PropKeyProvider bind="message">
-		<Grid container direction="column" gap={ 0.5 }>
-			<Grid item>
-				<ControlFormLabel>{ __( 'Message', 'elementor' ) }</ControlFormLabel>
-			</Grid>
-			<Grid item>
-				<TextAreaControl
-					placeholder={ __(
-						'By default, all form fields are sent via [all-fields] shortcode.',
-						'elementor'
-					) }
-				/>
+const MIN_PRO_VERSION_FOR_MENTIONS = '4.1.0';
+
+const shouldShowMentionsInfo = (): boolean => {
+	if ( ! hasProInstalled() ) {
+		return true;
+	}
+
+	const proVersion = window.elementorPro?.config?.version;
+
+	if ( ! proVersion ) {
+		return false;
+	}
+
+	return isVersionGreaterOrEqual( proVersion, MIN_PRO_VERSION_FOR_MENTIONS );
+};
+
+const MessageField = () => {
+	const suggestions = useFormFieldSuggestions();
+
+	return (
+		<PropKeyProvider bind="message">
+			<Grid container direction="column" gap={ 0.5 }>
+				<Grid item>
+					<ControlFormLabel>{ __( 'Message', 'elementor' ) }</ControlFormLabel>
+				</Grid>
+				<Grid item>
+					<MentionTextAreaControl suggestions={ suggestions } />
+				</Grid>
+				<Grid item>
+					<InfoAlert>
+						{ shouldShowMentionsInfo()
+							? __(
+									'[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.',
+									'elementor'
+							  )
+							: __( '[all-fields] shortcode sends all fields.', 'elementor' ) }
+					</InfoAlert>
+				</Grid>
 			</Grid>
-		</Grid>
-	</PropKeyProvider>
-);
+		</PropKeyProvider>
+	);
+};
 
 const FromEmailField = () => (
 	<EmailField

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

@@ -0,0 +1,151 @@
+import * as React from 'react';
+import { useCallback, useState } from 'react';
+import { Mention } from 'primereact/mention';
+import { stringPropTypeUtil } from '@elementor/editor-props';
+import { styled } from '@elementor/ui';
+
+import { useBoundProp } from '../bound-prop-context';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+import { type Suggestion } from '../hooks/use-form-field-suggestions';
+
+const MentionWrapper = styled( 'div' )( ( { theme } ) => ( {
+	position: 'relative',
+	'& .p-mention': {
+		width: '100%',
+		position: 'relative',
+	},
+	'& textarea': {
+		width: '100%',
+		boxSizing: 'border-box',
+		fontFamily: 'inherit',
+		fontSize: theme.typography.pxToRem( 12 ),
+		lineHeight: 1.4375,
+		padding: '4px 8px',
+		borderRadius: theme.shape.borderRadius,
+		border: `1px solid ${ theme.palette.divider }`,
+		backgroundColor: 'transparent',
+		color: 'inherit',
+		resize: 'vertical',
+		outline: 'none',
+		transition: 'border-color 150ms ease-in-out',
+		'&:hover': {
+			borderColor: theme.palette.action.active,
+		},
+		'&:focus': {
+			borderColor: theme.palette.primary.main,
+			borderWidth: 2,
+			padding: '3px 7px',
+		},
+		'&:disabled': {
+			opacity: 0.38,
+			cursor: 'default',
+		},
+		'&::placeholder': {
+			color: 'inherit',
+			opacity: 0.5,
+		},
+	},
+	'& .p-mention-panel': {
+		fontFamily: 'inherit',
+		fontSize: theme.typography.pxToRem( 12 ),
+		backgroundColor: theme.palette.background.paper,
+		border: `1px solid ${ theme.palette.divider }`,
+		borderRadius: theme.shape.borderRadius,
+		boxShadow: theme.shadows[ 4 ],
+		maxHeight: '200px',
+		overflow: 'auto',
+		zIndex: theme.zIndex.modal,
+		maxWidth: '100%',
+		right: 0,
+		left: 'auto !important',
+	},
+	'& .p-mention-items': {
+		listStyle: 'none',
+		margin: 0,
+		padding: '4px 0',
+	},
+	'& .p-mention-item': {
+		padding: '6px 12px',
+		cursor: 'pointer',
+		color: theme.palette.text.primary,
+		'&:hover': {
+			backgroundColor: theme.palette.action.hover,
+		},
+		'&.p-highlight': {
+			backgroundColor: theme.palette.action.selected,
+		},
+	},
+} ) );
+
+type Props = {
+	placeholder?: string;
+	ariaLabel?: string;
+	suggestions: Suggestion[];
+};
+
+export const MentionTextAreaControl = createControl(
+	( { placeholder, ariaLabel, suggestions: allSuggestions }: Props ) => {
+		const { value, setValue, disabled } = useBoundProp( stringPropTypeUtil );
+		const [ filteredSuggestions, setFilteredSuggestions ] = useState< Suggestion[] >( [] );
+
+		const transformMentionsToShortcodes = useCallback(
+			( text: string ): string => {
+				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 }]` );
+				}
+
+				return result;
+			},
+			[ allSuggestions ]
+		);
+
+		const handleChange = useCallback(
+			( e: React.FormEvent< HTMLInputElement > ) => {
+				const rawValue = ( e.target as HTMLTextAreaElement ).value;
+				const transformed = transformMentionsToShortcodes( rawValue );
+				setValue( transformed );
+			},
+			[ setValue, transformMentionsToShortcodes ]
+		);
+
+		const handleSearch = useCallback(
+			( event: { query: string } ) => {
+				const query = event.query.toLowerCase();
+				const filtered = allSuggestions.filter(
+					( item ) => item.label.toLowerCase().includes( query ) || item.value.toLowerCase().includes( query )
+				);
+				setFilteredSuggestions( filtered );
+			},
+			[ allSuggestions ]
+		);
+
+		return (
+			<ControlActions>
+				<MentionWrapper>
+					<Mention
+						value={ value ?? '' }
+						onChange={ handleChange }
+						suggestions={ filteredSuggestions }
+						onSearch={ handleSearch }
+						field="value"
+						trigger="@"
+						rows={ 5 }
+						disabled={ disabled }
+						placeholder={ placeholder }
+						itemTemplate={ SuggestionItem }
+						{ ...( ariaLabel ? { 'aria-label': ariaLabel } : {} ) }
+					/>
+				</MentionWrapper>
+			</ControlActions>
+		);
+	}
+);
+
+const SuggestionItem = ( suggestion: Suggestion ) => <span>{ suggestion.label }</span>;

package/src/controls/stroke-control.tsx

@@ -26,7 +26,7 @@ export const StrokeControl = createControl( () => {
 
 	return (
 		<PropProvider { ...propContext }>
-			<SectionContent>
+			<SectionContent gap={ 2 }>
 				<Control bind="width" label={ __( 'Stroke width', 'elementor' ) } ref={ rowRef }>
 					<SizeControl units={ units } anchorRef={ rowRef } />
 				</Control>

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

@@ -0,0 +1,55 @@
+import { getContainer, getSelectedElements } from '@elementor/editor-elements';
+import { isTransformable } from '@elementor/editor-props';
+import { __privateUseListenTo as useListenTo, commandEndEvent, v1ReadyEvent } from '@elementor/editor-v1-adapters';
+
+export type Suggestion = {
+	label: string;
+	value: string;
+};
+
+const FORM_FIELD_WIDGET_TYPES = [ 'e-form-input', 'e-form-textarea', 'e-form-checkbox' ];
+
+export function useFormFieldSuggestions(): Suggestion[] {
+	return useListenTo(
+		[
+			v1ReadyEvent(),
+			commandEndEvent( 'document/elements/create' ),
+			commandEndEvent( 'document/elements/delete' ),
+			commandEndEvent( 'document/elements/set-settings' ),
+		],
+		() => {
+			const selectedElements = getSelectedElements();
+			const formElement = selectedElements[ 0 ];
+
+			if ( ! formElement ) {
+				return [];
+			}
+
+			const container = getContainer( formElement.id );
+
+			if ( ! container?.children ) {
+				return [];
+			}
+
+			const suggestions: Suggestion[] = [];
+
+			container.children.forEachRecursive?.( ( child ) => {
+				const widgetType = child.model.get( 'widgetType' ) as string | undefined;
+
+				if ( ! widgetType || ! FORM_FIELD_WIDGET_TYPES.includes( widgetType ) ) {
+					return;
+				}
+
+				const cssIdProp = child.settings.get( '_cssid' );
+				const fieldId = isTransformable( cssIdProp ) ? cssIdProp.value : cssIdProp;
+
+				if ( fieldId && typeof fieldId === 'string' ) {
+					suggestions.push( { label: fieldId, value: fieldId } );
+				}
+			} );
+
+			return suggestions;
+		},
+		[]
+	);
+}

package/src/index.ts

@@ -2,6 +2,7 @@
 export { ImageControl } from './controls/image-control';
 export { TextControl } from './controls/text-control';
 export { TextAreaControl } from './controls/text-area-control';
+export { MentionTextAreaControl } from './controls/mention-text-area-control';
 export { SizeControl } from './controls/size-control';
 export { StrokeControl } from './controls/stroke-control';
 export { BoxShadowRepeaterControl } from './controls/box-shadow-repeater-control';