@elementor/editor-controls 4.3.0-1007 → 4.3.0-1009

package/dist/index.mjs

@@ -8275,7 +8275,7 @@ function useFormFieldSuggestions(options) {
 
 // src/controls/email-form-action-control/email-chips-field.tsx
 import * as React116 from "react";
-import { useState as useState19 } from "react";
+import { useMemo as useMemo18, useState as useState19 } from "react";
 import { stringArrayPropTypeUtil as stringArrayPropTypeUtil3, stringPropTypeUtil as stringPropTypeUtil22 } from "@elementor/editor-props";
 import { Autocomplete as Autocomplete4, Grid as Grid32, TextField as TextField11 } from "@elementor/ui";
 
@@ -8287,6 +8287,10 @@ var CHIP_TRIGGER_KEYS = /* @__PURE__ */ new Set([" ", ","]);
 function isValidEmail(email) {
   return z.string().email().safeParse(email).success;
 }
+var FORM_FIELD_SHORTCODE_PATTERN = /^\[[^[\]]+]$/;
+function isFormFieldShortcode(value) {
+  return FORM_FIELD_SHORTCODE_PATTERN.test(value);
+}
 var shouldShowMentionsInfo = () => {
   if (!hasProInstalled3()) {
     return true;
@@ -8299,14 +8303,26 @@ var shouldShowMentionsInfo = () => {
 };
 
 // src/controls/email-form-action-control/email-chips-field.tsx
-var EmailChipsControl = createControl(({ placeholder }) => {
+var isValidRecipient = (address) => isValidEmail(address) || isFormFieldShortcode(address);
+function resolveMention(raw, suggestions) {
+  if (!raw.startsWith("@")) {
+    return raw;
+  }
+  const match = suggestions.find((suggestion) => createMentionPattern(suggestion.value, "start").test(raw));
+  return match ? `[${match.value}]` : raw;
+}
+var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
   const { value, setValue, disabled } = useBoundProp(stringArrayPropTypeUtil3);
   const [inputValue, setInputValue] = useState19("");
   const items2 = value || [];
   const selectedValues = items2.map((item) => stringPropTypeUtil22.extract(item)).filter((val) => val !== null);
+  const suggestionOptions = useMemo18(
+    () => suggestions.map((suggestion) => `[${suggestion.value}]`),
+    [suggestions]
+  );
   const tryAddChip = (raw) => {
-    const address = raw.trim();
-    if (!address || selectedValues.includes(address) || !isValidEmail(address)) {
+    const address = resolveMention(raw.trim(), suggestions);
+    if (!address || selectedValues.includes(address) || !isValidRecipient(address)) {
       return;
     }
     setValue([...items2, stringPropTypeUtil22.create(address)]);
@@ -8315,8 +8331,8 @@ var EmailChipsControl = createControl(({ placeholder }) => {
   const handleChange = (_, newValue) => {
     const updated = [];
     for (const entry of newValue) {
-      const address = entry.trim();
-      if (!address || !isValidEmail(address)) {
+      const address = resolveMention(entry.trim(), suggestions);
+      if (!address || !isValidRecipient(address)) {
         continue;
       }
       updated.push(stringPropTypeUtil22.create(address));
@@ -8351,7 +8367,12 @@ var EmailChipsControl = createControl(({ placeholder }) => {
       },
       value: selectedValues,
       onChange: handleChange,
-      options: [],
+      options: suggestionOptions,
+      filterOptions: (options, state) => {
+        const query = state.inputValue.trim().replace(/^@/, "").toLowerCase();
+        return query ? options.filter((option) => option.toLowerCase().includes(query)) : options;
+      },
+      filterSelectedOptions: true,
       onBlur: handleBlur,
       getOptionLabel: (option) => option,
       isOptionEqualToValue: (option, val) => option === val,
@@ -8360,7 +8381,7 @@ var EmailChipsControl = createControl(({ placeholder }) => {
     }
   ));
 });
-var EmailChipsField = ({ fieldLabel, placeholder }) => /* @__PURE__ */ React116.createElement(Grid32, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React116.createElement(Grid32, { item: true }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React116.createElement(Grid32, { item: true }, /* @__PURE__ */ React116.createElement(EmailChipsControl, { placeholder })));
+var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React116.createElement(Grid32, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React116.createElement(Grid32, { item: true }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React116.createElement(Grid32, { item: true }, /* @__PURE__ */ React116.createElement(EmailChipsControl, { placeholder, suggestions })));
 
 // src/controls/email-form-action-control/email-field.tsx
 import * as React117 from "react";
@@ -8368,7 +8389,17 @@ import { Grid as Grid33 } from "@elementor/ui";
 var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React117.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React117.createElement(Grid33, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React117.createElement(Grid33, { item: true }, /* @__PURE__ */ React117.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React117.createElement(Grid33, { item: true }, /* @__PURE__ */ React117.createElement(TextControl, { placeholder }))));
 
 // src/controls/email-form-action-control/fields.tsx
-var SendToField = ({ placeholder }) => /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: __57("Send to", "elementor"), placeholder }));
+var SendToField = ({ placeholder }) => {
+  const suggestions = useFormFieldSuggestions({ inputType: "email" });
+  return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React118.createElement(Stack19, { gap: 0.5 }, /* @__PURE__ */ React118.createElement(
+    EmailChipsField,
+    {
+      fieldLabel: __57("Send to", "elementor"),
+      placeholder,
+      suggestions
+    }
+  ), shouldShowMentionsInfo() && /* @__PURE__ */ React118.createElement(InfoAlert2, null, __57("Type @ or an email field name to insert its submitted value.", "elementor"))));
+};
 var SubjectField = () => /* @__PURE__ */ React118.createElement(
   EmailField,
   {
@@ -8412,8 +8443,14 @@ var ReplyToField = () => {
     }
   ))));
 };
-var CcField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: __57("Cc", "elementor") }));
-var BccField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: __57("Bcc", "elementor") }));
+var CcField = () => {
+  const suggestions = useFormFieldSuggestions({ inputType: "email" });
+  return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: __57("Cc", "elementor"), suggestions }));
+};
+var BccField = () => {
+  const suggestions = useFormFieldSuggestions({ inputType: "email" });
+  return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: __57("Bcc", "elementor"), suggestions }));
+};
 var MetaDataField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React118.createElement(Stack19, { gap: 0.5 }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, __57("Metadata", "elementor")), /* @__PURE__ */ React118.createElement(
   ChipsControl,
   {
@@ -8863,7 +8900,7 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
 
 // src/components/inline-editor-toolbar.tsx
 import * as React128 from "react";
-import { useEffect as useEffect21, useMemo as useMemo18, useRef as useRef32, useState as useState22 } from "react";
+import { useEffect as useEffect21, useMemo as useMemo19, useRef as useRef32, useState as useState22 } from "react";
 import { getContainer as getContainer3, getElementSetting } from "@elementor/editor-elements";
 import {
   BoldIcon,
@@ -8962,7 +8999,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = useMemo18(() => {
+  const formatButtonsList = useMemo19(() => {
     const buttons = Object.values(formatButtons);
     if (isElementClickable) {
       return buttons.filter((button) => button.action !== "link");
@@ -9309,7 +9346,7 @@ var hasValue = (value) => {
 };
 
 // src/hooks/use-font-families.ts
-import { useMemo as useMemo19 } from "react";
+import { useMemo as useMemo20 } from "react";
 import { getElementorConfig } from "@elementor/editor-v1-adapters";
 var getFontControlConfig = () => {
   const { controls } = getElementorConfig();
@@ -9317,7 +9354,7 @@ var getFontControlConfig = () => {
 };
 var useFontFamilies = () => {
   const { groups, options } = getFontControlConfig();
-  return useMemo19(() => {
+  return useMemo20(() => {
     if (!groups || !options) {
       return [];
     }