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

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

@@ -511,6 +511,7 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
     mediaTypes,
     multiple: false,
     selected: id?.value || null,
+    allowUrlImport: true,
     onSelect: (selectedAttachment) => {
       setValue({
         id: {
@@ -519,6 +520,12 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
         },
         url: null
       });
+    },
+    onSelectUrl: (selectedUrl) => {
+      setValue({
+        id: null,
+        url: import_editor_props.urlPropTypeUtil.create(selectedUrl)
+      });
     }
   });
   return /* @__PURE__ */ React11.createElement(ControlActions, null, /* @__PURE__ */ React11.createElement(import_ui4.Card, { variant: "outlined" }, /* @__PURE__ */ React11.createElement(import_ui4.CardMedia, { image: src, sx: { height: propType.meta.isDynamic ? 134 : 150 } }, isFetching ? /* @__PURE__ */ React11.createElement(import_ui4.Stack, { justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }, /* @__PURE__ */ React11.createElement(import_ui4.CircularProgress, null)) : /* @__PURE__ */ React11.createElement(React11.Fragment, null)), /* @__PURE__ */ React11.createElement(import_ui4.CardOverlay, null, /* @__PURE__ */ React11.createElement(import_ui4.Stack, { gap: 1 }, /* @__PURE__ */ React11.createElement(
@@ -540,7 +547,7 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
       onClick: () => open({ mode: "upload" })
     },
     (0, import_i18n.__)("Upload", "elementor")
-  )))));
+  ), /* @__PURE__ */ React11.createElement(import_ui4.Button, { size: "tiny", variant: "text", color: "inherit", onClick: () => open({ mode: "url" }) }, (0, import_i18n.__)("Insert from URL", "elementor"))))));
 });
 
 // src/controls/select-control.tsx
@@ -748,25 +755,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 +790,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 +815,7 @@ var MentionTextAreaControl = createControl(
         onSearch: handleSearch,
         field: "value",
         trigger: "@",
-        rows: 5,
+        rows,
         disabled,
         placeholder,
         itemTemplate: SuggestionItem,
@@ -7606,7 +7626,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 +7650,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 +7714,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(