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

package/dist/index.d.mts

@@ -40,12 +40,15 @@ type Suggestion = {
     value: string;
 };
 
+type TriggerPosition = 'start' | 'auto';
 type Props$b = {
     placeholder?: string;
     ariaLabel?: string;
     suggestions: Suggestion[];
+    rows?: number;
+    triggerPosition?: TriggerPosition;
 };
-declare const MentionTextAreaControl: ControlComponent$1<({ placeholder, ariaLabel, suggestions: allSuggestions }: Props$b) => React$1.JSX.Element>;
+declare const MentionTextAreaControl: ControlComponent$1<({ placeholder, ariaLabel, suggestions: allSuggestions, rows, triggerPosition }: Props$b) => React$1.JSX.Element>;
 
 declare const lengthUnits: readonly ["px", "%", "em", "rem", "vw", "vh", "ch"];
 declare const angleUnits: readonly ["deg", "rad", "grad", "turn"];

package/dist/index.d.ts

@@ -40,12 +40,15 @@ type Suggestion = {
     value: string;
 };
 
+type TriggerPosition = 'start' | 'auto';
 type Props$b = {
     placeholder?: string;
     ariaLabel?: string;
     suggestions: Suggestion[];
+    rows?: number;
+    triggerPosition?: TriggerPosition;
 };
-declare const MentionTextAreaControl: ControlComponent$1<({ placeholder, ariaLabel, suggestions: allSuggestions }: Props$b) => React$1.JSX.Element>;
+declare const MentionTextAreaControl: ControlComponent$1<({ placeholder, ariaLabel, suggestions: allSuggestions, rows, triggerPosition }: Props$b) => React$1.JSX.Element>;
 
 declare const lengthUnits: readonly ["px", "%", "em", "rem", "vw", "vh", "ch"];
 declare const angleUnits: readonly ["deg", "rad", "grad", "turn"];

package/dist/index.js

@@ -748,25 +748,30 @@ var MentionWrapper = (0, import_ui9.styled)("div")(({ theme }) => ({
     "&.p-highlight": {
       backgroundColor: theme.palette.action.selected
     }
+  },
+  '&[data-single-line="true"] textarea': {
+    resize: "none"
   }
 }));
+function createMentionPattern(value, triggerPosition) {
+  const escaped = value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const prefix = "start" === triggerPosition ? "^" : "";
+  return new RegExp(`${prefix}@${escaped}(?=\\s|$|[^a-zA-Z0-9_-])`, "g");
+}
 var MentionTextAreaControl = createControl(
-  ({ placeholder, ariaLabel, suggestions: allSuggestions }) => {
+  ({ placeholder, ariaLabel, suggestions: allSuggestions, rows = 5, triggerPosition = "auto" }) => {
     const { value, setValue, disabled } = useBoundProp(import_editor_props6.stringPropTypeUtil);
     const [filteredSuggestions, setFilteredSuggestions] = (0, import_react7.useState)([]);
     const transformMentionsToShortcodes = (0, import_react7.useCallback)(
       (text) => {
         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 = (0, import_react7.useCallback)(
       (e) => {
@@ -778,15 +783,23 @@ var MentionTextAreaControl = createControl(
     );
     const handleSearch = (0, import_react7.useCallback)(
       (event) => {
+        if ("start" === triggerPosition) {
+          const target = event.originalEvent.target;
+          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 /* @__PURE__ */ React16.createElement(ControlActions, null, /* @__PURE__ */ React16.createElement(MentionWrapper, null, /* @__PURE__ */ React16.createElement(
+    return /* @__PURE__ */ React16.createElement(ControlActions, null, /* @__PURE__ */ React16.createElement(MentionWrapper, { "data-single-line": rows === 1 ? "true" : void 0 }, /* @__PURE__ */ React16.createElement(
       import_mention.Mention,
       {
         value: value ?? "",
@@ -795,7 +808,7 @@ var MentionTextAreaControl = createControl(
         onSearch: handleSearch,
         field: "value",
         trigger: "@",
-        rows: 5,
+        rows,
         disabled,
         placeholder,
         itemTemplate: SuggestionItem,
@@ -7606,7 +7619,7 @@ var import_editor_elements6 = require("@elementor/editor-elements");
 var import_editor_props57 = require("@elementor/editor-props");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var FORM_FIELD_WIDGET_TYPES = ["e-form-input", "e-form-textarea", "e-form-checkbox"];
-function useFormFieldSuggestions() {
+function useFormFieldSuggestions(options) {
   return (0, import_editor_v1_adapters.__privateUseListenTo)(
     [
       (0, import_editor_v1_adapters.v1ReadyEvent)(),
@@ -7630,6 +7643,13 @@ function useFormFieldSuggestions() {
         if (!widgetType || !FORM_FIELD_WIDGET_TYPES.includes(widgetType)) {
           return;
         }
+        if (options?.inputType) {
+          const typeProp = child.settings.get("type");
+          const typeValue = (0, import_editor_props57.isTransformable)(typeProp) ? typeProp.value : typeProp;
+          if (typeValue !== options.inputType) {
+            return;
+          }
+        }
         const cssIdProp = child.settings.get("_cssid");
         const fieldId = (0, import_editor_props57.isTransformable)(cssIdProp) ? cssIdProp.value : cssIdProp;
         if (fieldId && typeof fieldId === "string") {
@@ -7687,7 +7707,18 @@ var FromNameField = () => /* @__PURE__ */ React109.createElement(
     placeholder: (0, import_i18n53.__)("What name should appear as the sender?", "elementor")
   }
 );
-var ReplyToField = () => /* @__PURE__ */ React109.createElement(EmailField, { bind: "reply-to", label: (0, import_i18n53.__)("Reply-to", "elementor") });
+var ReplyToField = () => {
+  const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
+  return /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React109.createElement(import_ui93.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React109.createElement(import_ui93.Grid, { item: true }, /* @__PURE__ */ React109.createElement(ControlFormLabel, null, (0, import_i18n53.__)("Reply-to", "elementor"))), /* @__PURE__ */ React109.createElement(import_ui93.Grid, { item: true }, /* @__PURE__ */ React109.createElement(
+    MentionTextAreaControl,
+    {
+      suggestions: emailSuggestions,
+      rows: 1,
+      triggerPosition: "start",
+      placeholder: (0, import_i18n53.__)("You can type @ to insert an email field", "elementor")
+    }
+  ))));
+};
 var CcField = () => /* @__PURE__ */ React109.createElement(EmailField, { bind: "cc", label: (0, import_i18n53.__)("Cc", "elementor") });
 var BccField = () => /* @__PURE__ */ React109.createElement(EmailField, { bind: "bcc", label: (0, import_i18n53.__)("Bcc", "elementor") });
 var MetaDataField = () => /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React109.createElement(import_ui93.Stack, { gap: 0.5 }, /* @__PURE__ */ React109.createElement(ControlFormLabel, null, (0, import_i18n53.__)("Metadata", "elementor")), /* @__PURE__ */ React109.createElement(