@ivanholiak/easy-email-extensions 4.16.12 → 4.16.13

package/lib/index2.js

@@ -38333,27 +38333,29 @@ const GOOGLE_FONTS = [
   "Zen Kaku Gothic New",
   "Zilla Slab"
 ];
-const loadedFonts = /* @__PURE__ */ new Set();
+const loadedFullFonts = /* @__PURE__ */ new Set();
+const loadedPreviewFonts = /* @__PURE__ */ new Set();
 function loadGoogleFont(fontFamily) {
-  if (loadedFonts.has(fontFamily))
+  if (loadedFullFonts.has(fontFamily))
     return;
-  loadedFonts.add(fontFamily);
+  loadedFullFonts.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));
+  const unloaded = fontFamilies.filter((f2) => !loadedPreviewFonts.has(f2) && !loadedFullFonts.has(f2));
   if (unloaded.length === 0)
     return;
   for (const font of unloaded) {
-    loadedFonts.add(font);
+    loadedPreviewFonts.add(font);
   }
+  const uniqueChars = [...new Set(unloaded.join(""))].join("");
   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`;
+  link2.href = `https://fonts.googleapis.com/css2?${families}&text=${encodeURIComponent(uniqueChars)}&display=swap`;
   document.head.appendChild(link2);
 }
 function useFontFamily() {
@@ -38701,6 +38703,7 @@ function FontFamily({ name: name2 }) {
   const { fontList: defaultFontList } = useEditorProps();
   const { pageData: pageData2 } = useEditorContext();
   const [searchValue, setSearchValue] = useState("");
+  const allFontsLoadedRef = useRef(false);
   const addFonts = pageData2.data.value.fonts;
   const allOptions = useMemo(() => {
     const options2 = [];
@@ -38729,14 +38732,21 @@ function FontFamily({ name: name2 }) {
     }
     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);
+  const handleDropdownVisibleChange = useCallback((visible) => {
+    if (visible && !allFontsLoadedRef.current) {
+      allFontsLoadedRef.current = true;
+      const batchSize = 40;
+      for (let i2 = 0; i2 < GOOGLE_FONTS.length; i2 += batchSize) {
+        const batch = GOOGLE_FONTS.slice(i2, i2 + batchSize);
+        const delay = Math.floor(i2 / batchSize) * 100;
+        if (delay === 0) {
+          loadGoogleFontsPreview(batch);
+        } else {
+          setTimeout(() => loadGoogleFontsPreview(batch), delay);
+        }
+      }
     }
-  }, [searchValue, allOptions]);
+  }, []);
   const handleSearch = useCallback((val) => {
     setSearchValue(val);
   }, []);
@@ -38752,9 +38762,11 @@ function FontFamily({ name: name2 }) {
   }, /* @__PURE__ */ React__default.createElement(Select$2, {
     showSearch: true,
     allowCreate: true,
+    className: "easy-email-font-family",
     value: value || void 0,
     placeholder: t("Font family"),
     onSearch: handleSearch,
+    onVisibleChange: handleDropdownVisibleChange,
     onChange: (val) => {
       loadGoogleFont(val);
       onChange(val);