@ivanholiak/easy-email-extensions 4.16.23 → 4.16.24

package/lib/AttributePanel/components/attributes/FontFamily.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import './FontFamily.scss';
 export declare function FontFamily({ name }: {
     name?: string;
 }): React.JSX.Element;

package/lib/index2.js

@@ -38394,7 +38394,7 @@ function useFontFamily() {
   };
 }
 var styleText$2 = ".easy-email-extensions-Tools-Popover .ee-popover-content{padding:0}.easy-email-extensions-Tools-Popover .ee-popover-content-inner *::-webkit-scrollbar{-webkit-appearance:none;width:5px}.easy-email-extensions-Tools-Popover .ee-popover-content-inner *::-webkit-scrollbar-thumb{border-radius:5px;background-color:#00000080;box-shadow:0 0 1px #ffffff80;-webkit-box-shadow:0 0 1px rgba(255,255,255,.5)}\n";
-function FontFamily$1(props) {
+function FontFamily$2(props) {
   const { fontList: fontList2 } = useFontFamily();
   const { execCommand } = props;
   const [visible, setVisible] = React__default.useState(false);
@@ -38696,11 +38696,13 @@ function EyeIcon() {
     onClick: onToggleVisible
   });
 }
+var FontFamily$1 = "";
 function FontFamily({ name: name2 }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   const { fontList: defaultFontList } = useEditorProps();
   const { pageData: pageData2 } = useEditorContext();
   const [searchValue, setSearchValue] = useState("");
+  const loadedRef = useRef(/* @__PURE__ */ new Set());
   const addFonts = pageData2.data.value.fonts;
   const allOptions = useMemo(() => {
     const options2 = [];
@@ -38729,21 +38731,38 @@ function FontFamily({ name: name2 }) {
     }
     return options2;
   }, [addFonts, defaultFontList]);
-  useEffect(() => {
+  const filteredOptions = useMemo(() => {
+    if (!searchValue)
+      return allOptions;
     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);
-    }
+    return allOptions.filter((opt2) => opt2.value.toLowerCase().includes(search));
   }, [searchValue, allOptions]);
+  const loadFontsBatch = useCallback((fonts) => {
+    const toLoad = fonts.map((f2) => f2.value).filter((f2) => GOOGLE_FONTS.includes(f2) && !loadedRef.current.has(f2));
+    if (toLoad.length > 0) {
+      toLoad.forEach((f2) => loadedRef.current.add(f2));
+      loadGoogleFontsPreview(toLoad);
+    }
+  }, []);
+  useEffect(() => {
+    loadFontsBatch(filteredOptions.slice(0, 20));
+  }, [filteredOptions, loadFontsBatch]);
   const handleSearch = useCallback((val) => {
     setSearchValue(val);
   }, []);
+  const handlePopupScroll = useCallback((e2) => {
+    const target2 = e2.target;
+    const scrollRatio = (target2.scrollTop + target2.clientHeight) / target2.scrollHeight;
+    if (scrollRatio > 0.7) {
+      const approxIndex = Math.floor(target2.scrollTop / target2.scrollHeight * filteredOptions.length);
+      loadFontsBatch(filteredOptions.slice(approxIndex, approxIndex + 20));
+    }
+  }, [filteredOptions, loadFontsBatch]);
   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, {
+    className: "easy-email-font-family-field",
     label: t("Font family"),
     labelCol: { span: 24, style: { paddingRight: 0 } },
     wrapperCol: { span: 24 },
@@ -38761,12 +38780,20 @@ function FontFamily({ name: name2 }) {
       onBlur3();
       setSearchValue("");
     },
+    onVisibleChange: (visible) => {
+      if (visible) {
+        loadFontsBatch(filteredOptions.slice(0, 20));
+      }
+    },
     filterOption: (inputValue, option) => {
       var _a2;
       const optValue = (((_a2 = option.props) == null ? void 0 : _a2.value) || "").toLowerCase();
       return optValue.includes(inputValue.toLowerCase());
     },
-    virtualListProps: { height: 256 },
+    virtualListProps: {
+      height: 256,
+      onScroll: handlePopupScroll
+    },
     style: { width: "100%" },
     dropdownMenuClassName: "easy-email-overlay",
     allowClear: true
@@ -55046,7 +55073,7 @@ function Tools(props) {
         ];
       case AvailableTools.FontFamily:
         return [
-          /* @__PURE__ */ React__default.createElement(FontFamily$1, {
+          /* @__PURE__ */ React__default.createElement(FontFamily$2, {
             key: tool,
             execCommand,
             getPopupContainer: getPopoverMountNode