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

package/dist/index.mjs

@@ -633,25 +633,30 @@ var MentionWrapper = 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(stringPropTypeUtil4);
     const [filteredSuggestions, setFilteredSuggestions] = useState2([]);
     const transformMentionsToShortcodes = 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 = useCallback(
       (e) => {
@@ -663,15 +668,23 @@ var MentionTextAreaControl = createControl(
     );
     const handleSearch = 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(
       Mention,
       {
         value: value ?? "",
@@ -680,7 +693,7 @@ var MentionTextAreaControl = createControl(
         onSearch: handleSearch,
         field: "value",
         trigger: "@",
-        rows: 5,
+        rows,
         disabled,
         placeholder,
         itemTemplate: SuggestionItem,
@@ -7592,7 +7605,7 @@ import { getContainer, getSelectedElements as getSelectedElements3 } from "@elem
 import { isTransformable as isTransformable3 } from "@elementor/editor-props";
 import { __privateUseListenTo as useListenTo, commandEndEvent, v1ReadyEvent } from "@elementor/editor-v1-adapters";
 var FORM_FIELD_WIDGET_TYPES = ["e-form-input", "e-form-textarea", "e-form-checkbox"];
-function useFormFieldSuggestions() {
+function useFormFieldSuggestions(options) {
   return useListenTo(
     [
       v1ReadyEvent(),
@@ -7616,6 +7629,13 @@ function useFormFieldSuggestions() {
         if (!widgetType || !FORM_FIELD_WIDGET_TYPES.includes(widgetType)) {
           return;
         }
+        if (options?.inputType) {
+          const typeProp = child.settings.get("type");
+          const typeValue = isTransformable3(typeProp) ? typeProp.value : typeProp;
+          if (typeValue !== options.inputType) {
+            return;
+          }
+        }
         const cssIdProp = child.settings.get("_cssid");
         const fieldId = isTransformable3(cssIdProp) ? cssIdProp.value : cssIdProp;
         if (fieldId && typeof fieldId === "string") {
@@ -7673,7 +7693,18 @@ var FromNameField = () => /* @__PURE__ */ React109.createElement(
     placeholder: __53("What name should appear as the sender?", "elementor")
   }
 );
-var ReplyToField = () => /* @__PURE__ */ React109.createElement(EmailField, { bind: "reply-to", label: __53("Reply-to", "elementor") });
+var ReplyToField = () => {
+  const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
+  return /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React109.createElement(Grid29, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React109.createElement(Grid29, { item: true }, /* @__PURE__ */ React109.createElement(ControlFormLabel, null, __53("Reply-to", "elementor"))), /* @__PURE__ */ React109.createElement(Grid29, { item: true }, /* @__PURE__ */ React109.createElement(
+    MentionTextAreaControl,
+    {
+      suggestions: emailSuggestions,
+      rows: 1,
+      triggerPosition: "start",
+      placeholder: __53("You can type @ to insert an email field", "elementor")
+    }
+  ))));
+};
 var CcField = () => /* @__PURE__ */ React109.createElement(EmailField, { bind: "cc", label: __53("Cc", "elementor") });
 var BccField = () => /* @__PURE__ */ React109.createElement(EmailField, { bind: "bcc", label: __53("Bcc", "elementor") });
 var MetaDataField = () => /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React109.createElement(Stack17, { gap: 0.5 }, /* @__PURE__ */ React109.createElement(ControlFormLabel, null, __53("Metadata", "elementor")), /* @__PURE__ */ React109.createElement(