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

package/dist/index.mjs

@@ -351,7 +351,7 @@ var formatResponse = (response) => {
 
 // src/controls/image-media-control.tsx
 import * as React11 from "react";
-import { imageSrcPropTypeUtil } from "@elementor/editor-props";
+import { imageSrcPropTypeUtil, urlPropTypeUtil } from "@elementor/editor-props";
 import { UploadIcon } from "@elementor/icons";
 import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack as Stack2 } from "@elementor/ui";
 import { useWpMediaAttachment, useWpMediaFrame } from "@elementor/wp-media";
@@ -396,6 +396,7 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
     mediaTypes,
     multiple: false,
     selected: id?.value || null,
+    allowUrlImport: true,
     onSelect: (selectedAttachment) => {
       setValue({
         id: {
@@ -404,6 +405,12 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
         },
         url: null
       });
+    },
+    onSelectUrl: (selectedUrl) => {
+      setValue({
+        id: null,
+        url: urlPropTypeUtil.create(selectedUrl)
+      });
     }
   });
   return /* @__PURE__ */ React11.createElement(ControlActions, null, /* @__PURE__ */ React11.createElement(Card, { variant: "outlined" }, /* @__PURE__ */ React11.createElement(CardMedia, { image: src, sx: { height: propType.meta.isDynamic ? 134 : 150 } }, isFetching ? /* @__PURE__ */ React11.createElement(Stack2, { justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }, /* @__PURE__ */ React11.createElement(CircularProgress, null)) : /* @__PURE__ */ React11.createElement(React11.Fragment, null)), /* @__PURE__ */ React11.createElement(CardOverlay, null, /* @__PURE__ */ React11.createElement(Stack2, { gap: 1 }, /* @__PURE__ */ React11.createElement(
@@ -425,7 +432,7 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
       onClick: () => open({ mode: "upload" })
     },
     __("Upload", "elementor")
-  )))));
+  ), /* @__PURE__ */ React11.createElement(Button, { size: "tiny", variant: "text", color: "inherit", onClick: () => open({ mode: "url" }) }, __("Insert from URL", "elementor"))))));
 });
 
 // src/controls/select-control.tsx
@@ -633,25 +640,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 +675,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 +700,7 @@ var MentionTextAreaControl = createControl(
         onSearch: handleSearch,
         field: "value",
         trigger: "@",
-        rows: 5,
+        rows,
         disabled,
         placeholder,
         itemTemplate: SuggestionItem,
@@ -4051,11 +4071,11 @@ var FontFamilyControl = createControl(
 
 // src/controls/url-control.tsx
 import * as React67 from "react";
-import { urlPropTypeUtil } from "@elementor/editor-props";
+import { urlPropTypeUtil as urlPropTypeUtil2 } from "@elementor/editor-props";
 import { TextField as TextField7 } from "@elementor/ui";
 var UrlControl = createControl(
   ({ placeholder: propPlaceholder, ariaLabel }) => {
-    const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(urlPropTypeUtil);
+    const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(urlPropTypeUtil2);
     const handleChange = (event) => setValue(event.target.value);
     const placeholder = propPlaceholder ?? boundPlaceholder ?? void 0;
     return /* @__PURE__ */ React67.createElement(ControlActions, null, /* @__PURE__ */ React67.createElement(
@@ -4156,7 +4176,7 @@ import {
   numberPropTypeUtil as numberPropTypeUtil2,
   queryPropTypeUtil,
   stringPropTypeUtil as stringPropTypeUtil8,
-  urlPropTypeUtil as urlPropTypeUtil2
+  urlPropTypeUtil as urlPropTypeUtil3
 } from "@elementor/editor-props";
 import { httpService as httpService2 } from "@elementor/http-client";
 import { SearchIcon } from "@elementor/icons";
@@ -4297,7 +4317,7 @@ function factoryFilter(newValue, options, minInputLength) {
 // src/controls/query-control.tsx
 var QueryControl = createControl((props) => {
   const { value: queryValue, setValue: setQueryValue } = useBoundProp(queryPropTypeUtil);
-  const { value: urlValue, setValue: setUrlValue, placeholder: urlPlaceholder } = useBoundProp(urlPropTypeUtil2);
+  const { value: urlValue, setValue: setUrlValue, placeholder: urlPlaceholder } = useBoundProp(urlPropTypeUtil3);
   const {
     allowCustomValues = true,
     queryOptions: { url, params = {} },
@@ -4330,7 +4350,7 @@ var QueryControl = createControl((props) => {
       return;
     }
     setUrlValue(trimmedValue);
-    onSetValue?.(urlPropTypeUtil2.create(trimmedValue));
+    onSetValue?.(urlPropTypeUtil3.create(trimmedValue));
     updateOptions(newValue);
   };
   const updateOptions = (newValue) => {
@@ -4875,7 +4895,7 @@ var AspectRatioControl = createControl(({ label }) => {
 import * as React78 from "react";
 import { useState as useState16 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
-import { svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil3 } from "@elementor/editor-props";
+import { svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil4 } from "@elementor/editor-props";
 import { UploadIcon as UploadIcon2 } from "@elementor/icons";
 import { Button as Button5, Card as Card2, CardMedia as CardMedia2, CardOverlay as CardOverlay2, CircularProgress as CircularProgress3, Stack as Stack13, styled as styled9, ThemeProvider } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWpMediaFrame2 } from "@elementor/wp-media";
@@ -4985,7 +5005,7 @@ var SvgMediaControl = createControl(() => {
           $$type: "image-attachment-id",
           value: selectedAttachment.id
         },
-        url: urlPropTypeUtil3.create(selectedAttachment.url)
+        url: urlPropTypeUtil4.create(selectedAttachment.url)
       });
     }
   });
@@ -7592,7 +7612,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 +7636,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 +7700,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(