@ivanholiak/easy-email-extensions 4.16.23 → 4.16.25

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/AttributePanel/components/blocks/Code/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function Code(): React.JSX.Element;

package/lib/AttributePanel/components/blocks/index.d.ts

@@ -18,6 +18,7 @@ import { Hero } from './Hero';
 import { Navbar } from './Navbar';
 import { Social } from './Social';
 import { Table } from './Table';
+import { Code } from './Code';
 import { AdvancedTable } from './AdvancedTable';
 export declare const blocks: {
     page: typeof Page;
@@ -40,6 +41,7 @@ export declare const blocks: {
     navbar: typeof Navbar;
     social: typeof Social;
     table: typeof Table;
+    code: typeof Code;
     advanced_text: typeof Text;
     advanced_image: typeof Image;
     advanced_button: typeof Button;
@@ -50,6 +52,7 @@ export declare const blocks: {
     advanced_navbar: typeof Navbar;
     advanced_social: typeof Social;
     advanced_table: typeof AdvancedTable;
+    advanced_code: typeof Code;
     advanced_hero: typeof Hero;
     advanced_wrapper: typeof Wrapper;
     advanced_section: typeof Section;

package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/CodeBlockItem/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function CodeBlockItem(): 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
@@ -40185,8 +40212,8 @@ const ShadowDom = (props) => {
     ref: setRef
   }), root2 && ReactDOM$1.createPortal(props.children, root2)));
 };
-const CodeMirrorEditorPromise = import("./index3.js");
-const CodeMirrorEditor = React__default.lazy(() => CodeMirrorEditorPromise);
+const CodeMirrorEditorPromise$1 = import("./index3.js");
+const CodeMirrorEditor$1 = React__default.lazy(() => CodeMirrorEditorPromise$1);
 const HtmlEditor = (props) => {
   const { visible, setVisible } = props;
   const { focusBlock: focusBlock2, setValueByIdx: setValueByIdx2 } = useBlock();
@@ -40255,7 +40282,7 @@ const HtmlEditor = (props) => {
         color: "#fff"
       }
     }, t("Editor Loading..."))
-  }, /* @__PURE__ */ React__default.createElement(CodeMirrorEditor, {
+  }, /* @__PURE__ */ React__default.createElement(CodeMirrorEditor$1, {
     value: content,
     onChange: setContent
   }))), /* @__PURE__ */ React__default.createElement("div", {
@@ -41370,6 +41397,47 @@ function Table() {
     setVisible
   }));
 }
+const CodeMirrorEditorPromise = import("./index3.js");
+const CodeMirrorEditor = React__default.lazy(() => CodeMirrorEditorPromise);
+function Code() {
+  const { focusBlock: focusBlock2, setValueByIdx: setValueByIdx2 } = useBlock();
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  const content = (focusBlock2 == null ? void 0 : focusBlock2.data.value.content) || "";
+  const onChangeContent = (val) => {
+    if (!focusBlock2)
+      return;
+    focusBlock2.data.value.content = val;
+    setValueByIdx2(focusIdx2, __spreadValues({}, focusBlock2));
+  };
+  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(CollapseWrapper, {
+    defaultActiveKey: ["0", "1", "2"]
+  }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "0",
+    header: t("Code content")
+  }, /* @__PURE__ */ React__default.createElement(Suspense, {
+    fallback: /* @__PURE__ */ React__default.createElement("div", null, t("Loading..."))
+  }, /* @__PURE__ */ React__default.createElement(CodeMirrorEditor, {
+    value: content,
+    onChange: onChangeContent
+  }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "1",
+    header: t("Dimension")
+  }, /* @__PURE__ */ React__default.createElement(Space$1, {
+    direction: "vertical"
+  }, /* @__PURE__ */ React__default.createElement(Padding, {
+    showResetAll: true
+  }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "2",
+    header: t("Color")
+  }, /* @__PURE__ */ React__default.createElement(Grid$1.Row, null, /* @__PURE__ */ React__default.createElement(Grid$1.Col, {
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(Color, null)), /* @__PURE__ */ React__default.createElement(Grid$1.Col, {
+    offset: 1,
+    span: 11
+  }, /* @__PURE__ */ React__default.createElement(ContainerBackgroundColor, {
+    title: t("Background color")
+  }))))));
+}
 function AdvancedTable() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(CollapseWrapper, {
@@ -41425,6 +41493,7 @@ const blocks = {
   [BasicType.NAVBAR]: Navbar,
   [BasicType.SOCIAL]: Social,
   [BasicType.TABLE]: Table,
+  [BasicType.CODE]: Code,
   [AdvancedType.TEXT]: Text,
   [AdvancedType.IMAGE]: Image$1,
   [AdvancedType.BUTTON]: Button,
@@ -41435,6 +41504,7 @@ const blocks = {
   [AdvancedType.NAVBAR]: Navbar,
   [AdvancedType.SOCIAL]: Social,
   [AdvancedType.TABLE]: AdvancedTable,
+  [AdvancedType.CODE]: Code,
   [AdvancedType.HERO]: Hero,
   [AdvancedType.WRAPPER]: Wrapper,
   [AdvancedType.SECTION]: Section,
@@ -55046,7 +55116,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
@@ -57158,6 +57228,36 @@ function SocialBlockItem() {
     })));
   })));
 }
+function CodeBlockItem() {
+  return /* @__PURE__ */ React__default.createElement(Stack$4.Item, {
+    fill: true
+  }, /* @__PURE__ */ React__default.createElement(Stack$4, {
+    vertical: true
+  }, /* @__PURE__ */ React__default.createElement(Stack$4.Item, {
+    fill: true
+  }, /* @__PURE__ */ React__default.createElement(BlockMaskWrapper, {
+    type: AdvancedType.CODE,
+    payload: {
+      data: {
+        value: {
+          content: "const greet = (name) => {\n  console.log(`Hello, ${name}!`);\n};\ngreet('World');"
+        }
+      }
+    }
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    style: {
+      backgroundColor: "#f4f4f4",
+      borderRadius: 4,
+      padding: "12px 16px",
+      fontFamily: "'Courier New', Courier, monospace",
+      fontSize: 12,
+      lineHeight: 1.5,
+      whiteSpace: "pre-wrap",
+      wordWrap: "break-word",
+      color: "#333"
+    }
+  }, "const greet = (name) => {\n  console.log(`Hello, ${name}!`);\n};")))));
+}
 function WrapperBlockItem() {
   return /* @__PURE__ */ React__default.createElement(Stack$4.Item, {
     fill: true
@@ -58050,6 +58150,16 @@ const defaultCategories$1 = [
           );
         },
         component: SocialBlockItem
+      },
+      {
+        type: AdvancedType.CODE,
+        get title() {
+          return t("Code");
+        },
+        get description() {
+          return t("Displays a formatted code snippet in your email.");
+        },
+        component: CodeBlockItem
       }
     ]
   },