@ivanholiak/easy-email-extensions 4.16.9 → 4.16.11

package/lib/constants/googleFonts.d.ts

@@ -0,0 +1,3 @@
+export declare const GOOGLE_FONTS: string[];
+export declare function loadGoogleFont(fontFamily: string): void;
+export declare function loadGoogleFontsPreview(fontFamilies: string[]): void;

package/lib/index2.js

@@ -52,7 +52,7 @@ var __async = (__this, __arguments, generator) => {
 };
 import * as React$1 from "react";
 import React__default, { createContext, useContext, isValidElement, Children, cloneElement, Component, useRef, useMemo, memo, forwardRef, createRef, useState, useImperativeHandle, useEffect, useLayoutEffect, useCallback, PureComponent, useReducer, Fragment, Suspense } from "react";
-import { IconFont, useEditorProps, Stack as Stack$4, useRefState, getShadowRoot, DATA_CONTENT_EDITABLE_TYPE, ContentEditableType, TextStyle, useEditorContext, useBlock, useFocusIdx, DATA_CONTENT_EDITABLE_IDX, useFocusBlockLayout, MergeTagBadge, AvailableTools, FIXED_CONTAINER_ID, getPluginElement, RICH_TEXT_BAR_ID, CONTENT_EDITABLE_CLASS_NAME, getEditorRoot, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, isTextBlock, getBlockNodeByIdx, useLazyState, useActiveTab, ActiveTabKeys } from "@ivanholiak/easy-email-editor";
+import { IconFont, useEditorProps, Stack as Stack$4, useRefState, getShadowRoot, DATA_CONTENT_EDITABLE_TYPE, ContentEditableType, MergeTagBadge, TextStyle, useEditorContext, useBlock, useFocusIdx, DATA_CONTENT_EDITABLE_IDX, useFocusBlockLayout, AvailableTools, FIXED_CONTAINER_ID, getPluginElement, RICH_TEXT_BAR_ID, CONTENT_EDITABLE_CLASS_NAME, getEditorRoot, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, isTextBlock, getBlockNodeByIdx, useLazyState, useActiveTab, ActiveTabKeys } from "@ivanholiak/easy-email-editor";
 import { BasicType, ImageManager, EMAIL_BLOCK_CLASS_NAME, BlockManager, createBlockDataByType, AdvancedType, Operator, OperatorSymbol, isAdvancedBlock, getParentByIdx, getParentIdx, getIndexByIdx, getSiblingIdx, getNodeIdxFromClassName, getNodeIdxClassName, getPageIdx, getChildIdx, JsonToMjml, getNodeTypeFromClassName } from "@ivanholiak/easy-email-core";
 import ReactDOM$1, { createPortal } from "react-dom";
 import { Field, useForm as useForm$1, useField, Form as Form$3, version as version$2, useFormState as useFormState$2 } from "react-final-form";
@@ -35980,6 +35980,7 @@ function InlineText({ idx, onChange, children }) {
   const {
     mutators: { setFieldTouched }
   } = useForm$1();
+  const { enabledMergeTagsBadge, mergeTagGenerate } = useEditorProps();
   useField(idx);
   useEffect(() => {
     const shadowRoot = getShadowRoot();
@@ -36008,13 +36009,57 @@ function InlineText({ idx, onChange, children }) {
         }
       }
     };
+    const onDrop = (e2) => {
+      var _a2, _b2, _c;
+      const target2 = e2.target;
+      if (!target2 || !target2.getAttribute("contenteditable"))
+        return;
+      const mergeTagText = ((_a2 = e2.dataTransfer) == null ? void 0 : _a2.getData("text/merge-tag")) || ((_b2 = e2.dataTransfer) == null ? void 0 : _b2.getData("text/plain"));
+      if (mergeTagText && (mergeTagText.startsWith("{{") || mergeTagText.includes("{{"))) {
+        e2.preventDefault();
+        e2.stopPropagation();
+        const contentEditableType = target2.getAttribute(DATA_CONTENT_EDITABLE_TYPE);
+        let insertText = mergeTagText;
+        if (enabledMergeTagsBadge && mergeTagGenerate) {
+          const match = mergeTagText.match(/{{([^}]+)}}/);
+          if (match && match[1]) {
+            const mergeTagKey = match[1].trim();
+            const generatedTag = mergeTagGenerate(mergeTagKey);
+            insertText = MergeTagBadge.transform(generatedTag);
+          } else {
+            insertText = MergeTagBadge.transform(mergeTagText);
+          }
+        }
+        document.execCommand("insertHTML", false, insertText);
+        if (contentEditableType === ContentEditableType.RichText) {
+          onChange(target2.innerHTML || "");
+        } else if (contentEditableType === ContentEditableType.Text) {
+          onChange(((_c = target2.textContent) == null ? void 0 : _c.trim()) || "");
+        }
+      }
+    };
+    const onDragOver = (e2) => {
+      var _a2, _b2;
+      const target2 = e2.target;
+      if (target2 && target2.getAttribute("contenteditable")) {
+        const mergeTagText = ((_a2 = e2.dataTransfer) == null ? void 0 : _a2.getData("text/merge-tag")) || ((_b2 = e2.dataTransfer) == null ? void 0 : _b2.getData("text/plain"));
+        if (mergeTagText && (mergeTagText.startsWith("{{") || mergeTagText.includes("{{"))) {
+          e2.preventDefault();
+          e2.dataTransfer.dropEffect = "copy";
+        }
+      }
+    };
     shadowRoot.addEventListener("paste", onPaste, true);
     shadowRoot.addEventListener("input", onInput);
+    shadowRoot.addEventListener("drop", onDrop, true);
+    shadowRoot.addEventListener("dragover", onDragOver, true);
     return () => {
       shadowRoot.removeEventListener("paste", onPaste, true);
       shadowRoot.removeEventListener("input", onInput);
+      shadowRoot.removeEventListener("drop", onDrop, true);
+      shadowRoot.removeEventListener("dragover", onDragOver, true);
     };
-  }, [onChange, setFieldTouched]);
+  }, [onChange, setFieldTouched, enabledMergeTagsBadge, mergeTagGenerate]);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
 }
 function AutoComplete(props) {
@@ -38056,18 +38101,289 @@ function Link$1(props) {
     }));
   });
 }
+const GOOGLE_FONTS = [
+  "ABeeZee",
+  "Abel",
+  "Abril Fatface",
+  "Acme",
+  "Alata",
+  "Alegreya",
+  "Alegreya Sans",
+  "Alfa Slab One",
+  "Alice",
+  "Alike",
+  "Allan",
+  "Amiri",
+  "Anek Latin",
+  "Anton",
+  "Architects Daughter",
+  "Archivo",
+  "Archivo Black",
+  "Archivo Narrow",
+  "Arimo",
+  "Arsenal",
+  "Arvo",
+  "Asap",
+  "Asap Condensed",
+  "Assistant",
+  "Babylonica",
+  "Balsamiq Sans",
+  "Bangers",
+  "Barlow",
+  "Barlow Condensed",
+  "Barlow Semi Condensed",
+  "Be Vietnam Pro",
+  "Bebas Neue",
+  "Bitter",
+  "Black Ops One",
+  "Bodoni Moda",
+  "Bree Serif",
+  "Cabin",
+  "Cairo",
+  "Cantarell",
+  "Cardo",
+  "Catamaran",
+  "Caveat",
+  "Chakra Petch",
+  "Chivo",
+  "Cinzel",
+  "Comfortaa",
+  "Commissioner",
+  "Concert One",
+  "Cormorant",
+  "Cormorant Garamond",
+  "Courgette",
+  "Crete Round",
+  "Crimson Pro",
+  "Crimson Text",
+  "Cuprum",
+  "DM Mono",
+  "DM Sans",
+  "DM Serif Display",
+  "DM Serif Text",
+  "Dancing Script",
+  "Darker Grotesque",
+  "Didact Gothic",
+  "Domine",
+  "Dosis",
+  "EB Garamond",
+  "Eczar",
+  "El Messiri",
+  "Encode Sans",
+  "Encode Sans Condensed",
+  "Exo",
+  "Exo 2",
+  "Fira Code",
+  "Fira Sans",
+  "Fira Sans Condensed",
+  "Fjalla One",
+  "Francois One",
+  "Frank Ruhl Libre",
+  "Fraunces",
+  "Fredoka",
+  "Gelasio",
+  "Gloria Hallelujah",
+  "Gothic A1",
+  "Great Vibes",
+  "Gruppo",
+  "Heebo",
+  "Hind",
+  "Hind Madurai",
+  "Hind Siliguri",
+  "IBM Plex Mono",
+  "IBM Plex Sans",
+  "IBM Plex Sans Arabic",
+  "IBM Plex Sans Condensed",
+  "IBM Plex Serif",
+  "Inconsolata",
+  "Indie Flower",
+  "Inter",
+  "Inter Tight",
+  "Italiana",
+  "Jost",
+  "Josefin Sans",
+  "Josefin Slab",
+  "Kalam",
+  "Kanit",
+  "Karla",
+  "Kaushan Script",
+  "Khand",
+  "Lato",
+  "League Spartan",
+  "Lexend",
+  "Lexend Deca",
+  "Libre Baskerville",
+  "Libre Caslon Text",
+  "Libre Franklin",
+  "Lilita One",
+  "Lobster",
+  "Lobster Two",
+  "Lora",
+  "Lusitana",
+  "Macondo",
+  "Manrope",
+  "Marcellus",
+  "Martel",
+  "Maven Pro",
+  "Merienda",
+  "Merriweather",
+  "Merriweather Sans",
+  "Mitr",
+  "Montserrat",
+  "Montserrat Alternates",
+  "Mukta",
+  "Mulish",
+  "Nanum Gothic",
+  "Nanum Myeongjo",
+  "Neuton",
+  "Noto Sans",
+  "Noto Sans Arabic",
+  "Noto Sans Display",
+  "Noto Sans HK",
+  "Noto Sans JP",
+  "Noto Sans KR",
+  "Noto Sans SC",
+  "Noto Sans TC",
+  "Noto Serif",
+  "Noto Serif JP",
+  "Nunito",
+  "Nunito Sans",
+  "Old Standard TT",
+  "Oleo Script",
+  "Open Sans",
+  "Orbitron",
+  "Oswald",
+  "Outfit",
+  "Overpass",
+  "Oxygen",
+  "PT Mono",
+  "PT Sans",
+  "PT Sans Caption",
+  "PT Sans Narrow",
+  "PT Serif",
+  "Pacifico",
+  "Passion One",
+  "Pathway Gothic One",
+  "Patrick Hand",
+  "Patua One",
+  "Permanent Marker",
+  "Philosopher",
+  "Play",
+  "Playfair Display",
+  "Plus Jakarta Sans",
+  "Poppins",
+  "Prata",
+  "Prompt",
+  "Public Sans",
+  "Quattrocento",
+  "Quattrocento Sans",
+  "Questrial",
+  "Quicksand",
+  "Rajdhani",
+  "Raleway",
+  "Readex Pro",
+  "Red Hat Display",
+  "Righteous",
+  "Roboto",
+  "Roboto Condensed",
+  "Roboto Flex",
+  "Roboto Mono",
+  "Roboto Serif",
+  "Roboto Slab",
+  "Rokkitt",
+  "Rowdies",
+  "Rubik",
+  "Rufina",
+  "Russo One",
+  "Sacramento",
+  "Saira",
+  "Saira Condensed",
+  "Sarabun",
+  "Satisfy",
+  "Sawarabi Gothic",
+  "Secular One",
+  "Sen",
+  "Shadows Into Light",
+  "Signika",
+  "Signika Negative",
+  "Silkscreen",
+  "Slabo 27px",
+  "Sora",
+  "Source Code Pro",
+  "Source Sans 3",
+  "Source Serif 4",
+  "Space Grotesk",
+  "Space Mono",
+  "Spectral",
+  "Tajawal",
+  "Tangerine",
+  "Teko",
+  "Tinos",
+  "Titillium Web",
+  "Ubuntu",
+  "Ubuntu Condensed",
+  "Ubuntu Mono",
+  "Unbounded",
+  "Urbanist",
+  "Varela Round",
+  "Vollkorn",
+  "Work Sans",
+  "Yanone Kaffeesatz",
+  "Yellowtail",
+  "Zen Kaku Gothic New",
+  "Zilla Slab"
+];
+const loadedFonts = /* @__PURE__ */ new Set();
+function loadGoogleFont(fontFamily) {
+  if (loadedFonts.has(fontFamily))
+    return;
+  loadedFonts.add(fontFamily);
+  const link2 = document.createElement("link");
+  link2.rel = "stylesheet";
+  link2.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontFamily)}:wght@400;700&display=swap`;
+  document.head.appendChild(link2);
+}
+function loadGoogleFontsPreview(fontFamilies) {
+  const unloaded = fontFamilies.filter((f2) => !loadedFonts.has(f2));
+  if (unloaded.length === 0)
+    return;
+  for (const font of unloaded) {
+    loadedFonts.add(font);
+  }
+  const families = unloaded.map((f2) => `family=${encodeURIComponent(f2)}`).join("&");
+  const link2 = document.createElement("link");
+  link2.rel = "stylesheet";
+  link2.href = `https://fonts.googleapis.com/css2?${families}&display=swap`;
+  document.head.appendChild(link2);
+}
 function useFontFamily() {
   const { fontList: defaultFontList } = useEditorProps();
   const { pageData: pageData2 } = useEditorContext();
   const addFonts = pageData2.data.value.fonts;
   const fontList2 = useMemo(() => {
     const fonts = [];
+    const seen = /* @__PURE__ */ new Set();
+    if (addFonts) {
+      for (const item2 of addFonts) {
+        if (!seen.has(item2.name)) {
+          seen.add(item2.name);
+          fonts.push({ value: item2.name, label: item2.name });
+        }
+      }
+    }
     if (defaultFontList) {
-      fonts.push(...defaultFontList);
+      for (const item2 of defaultFontList) {
+        if (!seen.has(item2.value)) {
+          seen.add(item2.value);
+          fonts.push({ value: item2.value, label: item2.label });
+        }
+      }
     }
-    if (addFonts) {
-      const options2 = addFonts.map((item2) => ({ value: item2.name, label: item2.name }));
-      fonts.unshift(...options2);
+    for (const font of GOOGLE_FONTS) {
+      if (!seen.has(font)) {
+        seen.add(font);
+        fonts.push({ value: font, label: font });
+      }
     }
     return fonts.map((item2) => ({ value: item2.value, label: /* @__PURE__ */ React__default.createElement("span", {
       style: { fontFamily: item2.value }
@@ -38382,16 +38698,84 @@ function EyeIcon() {
 }
 function FontFamily({ name: name2 }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
-  const { fontList: fontList2 } = useFontFamily();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(AutoCompleteField, {
-      style: { minWidth: 100, flex: 1 },
-      showSearch: true,
-      label: t("Font family"),
-      name: name2 || `${focusIdx2}.attributes.font-family`,
-      options: fontList2
-    });
-  }, [focusIdx2, fontList2, name2]);
+  const { fontList: defaultFontList } = useEditorProps();
+  const { pageData: pageData2 } = useEditorContext();
+  const [searchValue, setSearchValue] = useState("");
+  const addFonts = pageData2.data.value.fonts;
+  const allOptions = useMemo(() => {
+    const options2 = [];
+    const seen = /* @__PURE__ */ new Set();
+    if (addFonts) {
+      for (const font of addFonts) {
+        if (!seen.has(font.name)) {
+          seen.add(font.name);
+          options2.push({ value: font.name, label: font.name });
+        }
+      }
+    }
+    if (defaultFontList) {
+      for (const font of defaultFontList) {
+        if (!seen.has(font.value)) {
+          seen.add(font.value);
+          options2.push({ value: font.value, label: font.label });
+        }
+      }
+    }
+    for (const font of GOOGLE_FONTS) {
+      if (!seen.has(font)) {
+        seen.add(font);
+        options2.push({ value: font, label: font });
+      }
+    }
+    return options2;
+  }, [addFonts, defaultFontList]);
+  useEffect(() => {
+    const search = searchValue.toLowerCase();
+    const visible = search ? allOptions.filter((opt2) => opt2.value.toLowerCase().includes(search)) : allOptions;
+    const fontsToLoad = visible.slice(0, 15).map((opt2) => opt2.value).filter((f2) => GOOGLE_FONTS.includes(f2));
+    if (fontsToLoad.length > 0) {
+      loadGoogleFontsPreview(fontsToLoad);
+    }
+  }, [searchValue, allOptions]);
+  const handleSearch = useCallback((val) => {
+    setSearchValue(val);
+  }, []);
+  const fieldName = name2 || `${focusIdx2}.attributes.font-family`;
+  return /* @__PURE__ */ React__default.createElement(Field, {
+    name: fieldName
+  }, ({ input: { onChange, onBlur: onBlur3, value } }) => /* @__PURE__ */ React__default.createElement(Form.Item, {
+    label: t("Font family"),
+    labelCol: { span: 24, style: { paddingRight: 0 } },
+    wrapperCol: { span: 24 },
+    labelAlign: "left",
+    style: { margin: 0 }
+  }, /* @__PURE__ */ React__default.createElement(Select$2, {
+    showSearch: true,
+    allowCreate: true,
+    value: value || void 0,
+    placeholder: t("Font family"),
+    onSearch: handleSearch,
+    onChange: (val) => {
+      loadGoogleFont(val);
+      onChange(val);
+      onBlur3();
+      setSearchValue("");
+    },
+    filterOption: (inputValue, option) => {
+      var _a2;
+      const optValue = (((_a2 = option.props) == null ? void 0 : _a2.value) || "").toLowerCase();
+      return optValue.includes(inputValue.toLowerCase());
+    },
+    virtualListProps: { height: 256 },
+    style: { width: "100%" },
+    dropdownMenuClassName: "easy-email-overlay",
+    allowClear: true
+  }, allOptions.map((font) => /* @__PURE__ */ React__default.createElement(Select$2.Option, {
+    key: font.value,
+    value: font.value
+  }, /* @__PURE__ */ React__default.createElement("span", {
+    style: { fontFamily: font.value }
+  }, font.label))))));
 }
 function Page({ hideSubTitle, hideSubject }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();