easy-email-pro-theme 1.55.1 → 1.56.1

package/lib/index.js

@@ -2913,12 +2913,23 @@ const defaultCategories = [
     ]
   }
 ];
-const BlockList = ({ tab }) => {
+const BlockList = ({
+  tab
+}) => {
   const universalElementEditing = useUniversalElementEditing();
   if (universalElementEditing) {
     return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(DefaultBlockList, null));
   }
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { style: { display: tab === "Default" ? void 0 : "none" } }, /* @__PURE__ */ React__default.createElement(DefaultBlockList, null)), /* @__PURE__ */ React__default.createElement("div", { style: { display: tab === "Universal" ? void 0 : "none" } }, /* @__PURE__ */ React__default.createElement(SharedComponents.UniversalList, null)));
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { style: { display: tab === "Default" ? void 0 : "none" } }, /* @__PURE__ */ React__default.createElement(DefaultBlockList, null)), /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      style: {
+        display: tab === "Prebuilt" ? void 0 : "none",
+        height: "100%"
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(SharedComponents.PrebuiltBlockList, null)
+  ), /* @__PURE__ */ React__default.createElement("div", { style: { display: tab === "Universal" ? void 0 : "none" } }, /* @__PURE__ */ React__default.createElement(SharedComponents.UniversalList, null)));
 };
 const DefaultBlockList = () => {
   const editorProps = useEditorProps();
@@ -3058,33 +3069,41 @@ const DefaultBlockList = () => {
   ]);
 };
 const BlocksPanel = () => {
-  const [tab, setTab] = useState("Default");
+  const [tab, setTab] = useState(
+    "Default"
+  );
   const universalElementEditing = useUniversalElementEditing();
-  const { universalElementSetting } = useEditorProps();
+  const { universalElementSetting, prebuiltBlocks } = useEditorProps();
+  const showPrebuilt = prebuiltBlocks && prebuiltBlocks.length > 0;
+  const width = showPrebuilt ? "33%" : "50%";
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !universalElementEditing && universalElementSetting && /* @__PURE__ */ React__default.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React__default.createElement(Button$2.Group, { style: { width: "100%" } }, /* @__PURE__ */ React__default.createElement(
     Button$2,
     {
-      type: "outline",
+      type: tab === "Default" ? "primary" : "outline",
+      onClick: () => setTab("Default"),
       style: {
-        width: "50%",
-        borderColor: tab === "Default" ? void 0 : "#000",
-        color: tab === "Default" ? void 0 : "#000",
-        borderRightColor: tab === "Default" ? void 0 : "transparent"
-      },
-      onClick: () => setTab("Default")
+        width
+      }
     },
     /* @__PURE__ */ React__default.createElement(Space, null, t("Default"))
+  ), showPrebuilt && /* @__PURE__ */ React__default.createElement(
+    Button$2,
+    {
+      type: tab === "Prebuilt" ? "primary" : "outline",
+      onClick: () => setTab("Prebuilt"),
+      style: {
+        width
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(Space, null, t("Prebuilt"))
   ), /* @__PURE__ */ React__default.createElement(
     Button$2,
     {
-      type: "outline",
+      type: tab === "Universal" ? "primary" : "outline",
+      onClick: () => setTab("Universal"),
       style: {
-        width: "50%",
-        borderColor: tab !== "Default" ? void 0 : "#000",
-        color: tab !== "Default" ? void 0 : "#000",
-        borderLeftColor: tab !== "Default" ? void 0 : "transparent"
-      },
-      onClick: () => setTab("Universal")
+        width
+      }
     },
     /* @__PURE__ */ React__default.createElement(Space, null, t("Universal"))
   ))), /* @__PURE__ */ React__default.createElement(BlockList, { tab }));
@@ -33159,6 +33178,25 @@ const SyncChildrenAttributes$2 = ({
     }
   ));
 };
+const SOCIAL_NETWORK_OPTIONS = [
+  { value: "facebook", label: "Facebook" },
+  { value: "x", label: "X" },
+  { value: "twitter", label: "Twitter" },
+  { value: "google", label: "Google" },
+  { value: "pinterest", label: "Pinterest" },
+  { value: "linkedin", label: "LinkedIn" },
+  { value: "instagram", label: "Instagram" },
+  { value: "web", label: "Web" },
+  { value: "snapchat", label: "Snapchat" },
+  { value: "youtube", label: "YouTube" },
+  { value: "tumblr", label: "Tumblr" },
+  { value: "github", label: "GitHub" },
+  { value: "xing", label: "Xing" },
+  { value: "vimeo", label: "Vimeo" },
+  { value: "medium", label: "Medium" },
+  { value: "soundcloud", label: "SoundCloud" },
+  { value: "dribbble", label: "Dribbble" }
+];
 const Social$1 = ({ nodePath }) => {
   return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(
     ResponsiveTabs,
@@ -33235,8 +33273,14 @@ function AttributesContainer$a({
       tabPosition: "top",
       name: `children`,
       label: "",
-      renderItem: (item2, index2) => /* @__PURE__ */ React__default.createElement(SocialItem$2, { index: index2, path: [...nodePath, index2] }),
-      renderHeader: (item2, index2) => item2.content || "Custom"
+      renderItem: (_item, index2) => /* @__PURE__ */ React__default.createElement(SocialItem$2, { path: [...nodePath, index2], key: index2 }),
+      renderHeader: (item2) => {
+        var _a;
+        if (item2.attributes.mode === "prebuilt") {
+          return ((_a = SOCIAL_NETWORK_OPTIONS.find((option) => option.value === item2.attributes.name)) == null ? void 0 : _a.label) || "Custom";
+        }
+        return item2.content || "Custom";
+      }
     }
   ), /* @__PURE__ */ React__default.createElement(Collapse.Item, { name: "0", header: t("Dimension") }, /* @__PURE__ */ React__default.createElement(
     ResponsiveField,
@@ -33306,15 +33350,130 @@ function AttributesContainer$a({
     }
   )));
 }
-function SocialItem$2({ index: index2, path: path2 }) {
-  return /* @__PURE__ */ React__default.createElement("div", { className: "SocialItem" }, /* @__PURE__ */ React__default.createElement("div", { style: { marginTop: 10 } }), /* @__PURE__ */ React__default.createElement(
+function SocialItem$2({ path: path2 }) {
+  const { getFieldValue } = useEditorContext();
+  const editor = useSlate();
+  const currentModeValue = getFieldValue(path2, "attributes.mode");
+  const currentName = getFieldValue(path2, "attributes.name");
+  const currentMode = useMemo(() => {
+    if (currentModeValue === "prebuilt" || currentModeValue === "custom") {
+      return currentModeValue;
+    }
+    return currentName ? "prebuilt" : "custom";
+  }, [currentModeValue, currentName]);
+  const [selectedMode, setSelectedMode] = useState(currentMode);
+  useEffect(() => {
+    setSelectedMode(currentMode);
+  }, [currentMode]);
+  const handleModeChange = useCallback(
+    (mode) => {
+      setSelectedMode(mode);
+      HistoryEditor.withoutSaving(editor, () => {
+        Editor.withoutNormalizing(editor, () => {
+          const node = Node.get(editor, path2);
+          const newAttributes = __spreadValues(__spreadProps(__spreadValues({}, node.attributes), {
+            mode
+          }), mode === "prebuilt" ? {
+            name: node.attributes.name || "google"
+          } : {});
+          Transforms.setNodes(
+            editor,
+            {
+              attributes: newAttributes
+            },
+            {
+              at: path2
+            }
+          );
+        });
+      });
+    },
+    [editor, path2]
+  );
+  const handleNameChange = useCallback(
+    (name) => {
+      HistoryEditor.withoutSaving(editor, () => {
+        Editor.withoutNormalizing(editor, () => {
+          const node = Node.get(editor, path2);
+          const newAttributes = __spreadProps(__spreadValues({}, node.attributes), {
+            mode: "prebuilt",
+            name: name || void 0,
+            src: void 0
+            // Clear src when using prebuilt
+          });
+          Transforms.setNodes(
+            editor,
+            {
+              attributes: newAttributes
+            },
+            {
+              at: path2
+            }
+          );
+        });
+      });
+    },
+    [editor, path2]
+  );
+  const handleImageChange = useCallback(
+    (src) => {
+      HistoryEditor.withoutSaving(editor, () => {
+        Editor.withoutNormalizing(editor, () => {
+          const node = Node.get(editor, path2);
+          const newAttributes = __spreadProps(__spreadValues({}, node.attributes), {
+            mode: "custom",
+            src: src || void 0,
+            name: void 0
+            // Clear name when using custom
+          });
+          Transforms.setNodes(
+            editor,
+            {
+              attributes: newAttributes
+            },
+            {
+              at: path2
+            }
+          );
+        });
+      });
+    },
+    [editor, path2]
+  );
+  return /* @__PURE__ */ React__default.createElement("div", { className: "SocialItem" }, /* @__PURE__ */ React__default.createElement("div", { style: { marginTop: 10 } }), /* @__PURE__ */ React__default.createElement("div", { style: { marginBottom: 16 } }, /* @__PURE__ */ React__default.createElement("div", { style: { marginBottom: 8, fontSize: 14 } }, t("Icon source")), /* @__PURE__ */ React__default.createElement(Button$2.Group, { style: { width: "100%" } }, /* @__PURE__ */ React__default.createElement(
+    Button$2,
+    {
+      type: selectedMode === "prebuilt" ? "primary" : "default",
+      onClick: () => handleModeChange("prebuilt"),
+      style: { width: "50%" }
+    },
+    t("Prebuilt")
+  ), /* @__PURE__ */ React__default.createElement(
+    Button$2,
+    {
+      type: selectedMode === "custom" ? "primary" : "default",
+      onClick: () => handleModeChange("custom"),
+      style: { width: "50%" }
+    },
+    t("Custom image")
+  ))), /* @__PURE__ */ React__default.createElement(Divider$2, null), currentMode === "prebuilt" ? /* @__PURE__ */ React__default.createElement(
+    AttributeField.SelectField,
+    {
+      path: path2,
+      label: t("Social network"),
+      name: "attributes.name",
+      options: SOCIAL_NETWORK_OPTIONS,
+      onChange: handleNameChange
+    }
+  ) : /* @__PURE__ */ React__default.createElement(
     AttributeField.ImageUrl,
     {
       path: path2,
       label: t("Icon"),
-      name: `attributes.src`
+      name: `attributes.src`,
+      onChange: handleImageChange
     }
-  ), /* @__PURE__ */ React__default.createElement(Divider$2, null), /* @__PURE__ */ React__default.createElement(
+  ), /* @__PURE__ */ React__default.createElement(
     AttributeField.ColorPickerField,
     {
       path: path2,
@@ -39610,36 +39769,36 @@ const BlocksDrawer = () => {
     handleSelectBlock
   ]);
 };
-const blocksModal = "_blocksModal_oes30_1";
-const modalHeader = "_modalHeader_oes30_9";
-const headerActions = "_headerActions_oes30_16";
-const searchInput = "_searchInput_oes30_22";
-const modalTitle = "_modalTitle_oes30_26";
-const contentArea = "_contentArea_oes30_32";
-const category = "_category_oes30_38";
-const categoryHeader = "_categoryHeader_oes30_45";
-const gridContainer = "_gridContainer_oes30_56";
-const gridItem = "_gridItem_oes30_65";
-const selected = "_selected_oes30_84";
-const gridItemIcon = "_gridItemIcon_oes30_88";
-const gridItemLabel = "_gridItemLabel_oes30_118";
-const checkIcon = "_checkIcon_oes30_126";
-const emptyState = "_emptyState_oes30_143";
-const layoutPreview = "_layoutPreview_oes30_153";
-const layoutSelected = "_layoutSelected_oes30_169";
-const layoutRowLabel = "_layoutRowLabel_oes30_175";
-const layoutRow = "_layoutRow_oes30_175";
-const layoutColumn = "_layoutColumn_oes30_200";
+const blocksModal = "_blocksModal_12piq_1";
+const modalHeader = "_modalHeader_12piq_7";
+const headerActions = "_headerActions_12piq_14";
+const searchInput = "_searchInput_12piq_20";
+const modalTitle = "_modalTitle_12piq_24";
+const category = "_category_12piq_30";
+const categoryHeader = "_categoryHeader_12piq_37";
+const gridContainer = "_gridContainer_12piq_48";
+const prebuiltBlockContainer = "_prebuiltBlockContainer_12piq_57";
+const gridItem = "_gridItem_12piq_66";
+const selected = "_selected_12piq_85";
+const gridItemIcon = "_gridItemIcon_12piq_89";
+const gridItemLabel = "_gridItemLabel_12piq_119";
+const checkIcon = "_checkIcon_12piq_127";
+const emptyState = "_emptyState_12piq_144";
+const layoutPreview = "_layoutPreview_12piq_154";
+const layoutSelected = "_layoutSelected_12piq_170";
+const layoutRowLabel = "_layoutRowLabel_12piq_176";
+const layoutRow = "_layoutRow_12piq_176";
+const layoutColumn = "_layoutColumn_12piq_201";
 const styles = {
   blocksModal,
   modalHeader,
   headerActions,
   searchInput,
   modalTitle,
-  contentArea,
   category,
   categoryHeader,
   gridContainer,
+  prebuiltBlockContainer,
   gridItem,
   selected,
   gridItemIcon,
@@ -39689,6 +39848,11 @@ const BlocksModal = () => {
   } = useBlocksDrawer();
   const editorProps = useEditorProps();
   const { categories: propsCategories } = editorProps;
+  const prebuiltBlocks = editorProps.prebuiltBlocks;
+  const [activeTab, setActiveTab] = useState(
+    "default"
+    /* DEFAULT */
+  );
   const categories = useMemo(() => {
     const filtered = (propsCategories || []).map((categoryItem) => {
       if (!parentCategory)
@@ -39750,6 +39914,29 @@ const BlocksModal = () => {
     });
     return filtered;
   }, [propsCategories, parentCategory, searchQuery]);
+  const filteredPrebuiltBlocks = useMemo(() => {
+    if (!prebuiltBlocks || prebuiltBlocks.length === 0) {
+      return [];
+    }
+    let result = prebuiltBlocks;
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase().trim();
+      result = result.map((category2) => {
+        const filteredBlocks = category2.blocks.filter((block) => {
+          const titleMatch = block.title.toLowerCase().includes(query);
+          const categoryMatch = block.category.toLowerCase().includes(query);
+          return titleMatch || categoryMatch;
+        });
+        if (filteredBlocks.length === 0) {
+          return null;
+        }
+        return __spreadProps(__spreadValues({}, category2), {
+          blocks: filteredBlocks
+        });
+      }).filter((category2) => category2 !== null);
+    }
+    return result;
+  }, [prebuiltBlocks, searchQuery]);
   const handleSelectBlock = useCallback(
     (blockType) => {
       if (!insertPath)
@@ -39774,6 +39961,16 @@ const BlocksModal = () => {
     if (!selectedBlock)
       return;
     const { block, categoryIndex } = selectedBlock;
+    if (activeTab === "prebuilt" && prebuiltBlocks) {
+      const category22 = filteredPrebuiltBlocks[categoryIndex];
+      if (category22) {
+        const prebuiltBlock = category22.blocks[selectedBlock.blockIndex];
+        if (prebuiltBlock) {
+          handleSelectBlock(prebuiltBlock.payload);
+          return;
+        }
+      }
+    }
     const category2 = categories[categoryIndex];
     if ((category2 == null ? void 0 : category2.displayType) === "grid") {
       handleSelectBlock(__spreadProps(__spreadValues({}, block.payload), {
@@ -39838,10 +40035,14 @@ const BlocksModal = () => {
         handleSelectBlock(element);
       }
     }
-  }, [selectedBlock, categories, handleSelectBlock]);
+  }, [selectedBlock, categories, handleSelectBlock, activeTab, prebuiltBlocks, filteredPrebuiltBlocks]);
   const handleModalClose = useCallback(() => {
     setSelectedBlock(null);
     setSearchQuery("");
+    setActiveTab(
+      "default"
+      /* DEFAULT */
+    );
     onClose();
   }, [onClose]);
   const handleSearchChange = useCallback((value) => {
@@ -39851,7 +40052,7 @@ const BlocksModal = () => {
   const renderGridContent = useMemo(() => {
     return categories.map((category2, categoryIndex) => {
       if (category2.displayType === "grid") {
-        return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex, className: styles.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles.categoryHeader }, /* @__PURE__ */ React__default.createElement(Text, { bold: true }, category2.label)), /* @__PURE__ */ React__default.createElement("div", { className: styles.gridContainer }, category2.blocks.map((block, blockIndex) => {
+        return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex + category2.label, className: styles.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles.categoryHeader }, /* @__PURE__ */ React__default.createElement(Text, { bold: true }, category2.label)), /* @__PURE__ */ React__default.createElement("div", { className: styles.gridContainer }, category2.blocks.map((block, blockIndex) => {
           const isSelected = (selectedBlock == null ? void 0 : selectedBlock.categoryIndex) === categoryIndex && (selectedBlock == null ? void 0 : selectedBlock.blockIndex) === blockIndex;
           const blockTitle = block.title || BlockManager.getBlockTitle(__spreadProps(__spreadValues({}, block.payload), {
             type: block.type
@@ -39870,7 +40071,7 @@ const BlocksModal = () => {
         })));
       }
       if (category2.displayType === "section") {
-        return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex, className: styles.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles.categoryHeader }, /* @__PURE__ */ React__default.createElement(Text, { bold: true }, category2.label)), /* @__PURE__ */ React__default.createElement("div", { style: { padding: "0 20px" } }, category2.blocks.map((item2, index2) => /* @__PURE__ */ React__default.createElement("div", { key: index2 }, /* @__PURE__ */ React__default.createElement(
+        return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex + category2.label, className: styles.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles.categoryHeader }, /* @__PURE__ */ React__default.createElement(Text, { bold: true }, category2.label)), /* @__PURE__ */ React__default.createElement("div", { style: { padding: "0 20px" } }, category2.blocks.map((item2, index2) => /* @__PURE__ */ React__default.createElement("div", { key: index2 }, /* @__PURE__ */ React__default.createElement(
           "div",
           {
             style: {
@@ -39910,7 +40111,7 @@ const BlocksModal = () => {
         )))));
       }
       if (category2.displayType === "column") {
-        return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex, className: styles.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles.categoryHeader }, /* @__PURE__ */ React__default.createElement(Text, { bold: true }, category2.label)), /* @__PURE__ */ React__default.createElement("div", { style: { padding: "0 20px" } }, category2.blocks.map((item2, index2) => /* @__PURE__ */ React__default.createElement("div", { key: index2 }, /* @__PURE__ */ React__default.createElement(
+        return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex + category2.label, className: styles.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles.categoryHeader }, /* @__PURE__ */ React__default.createElement(Text, { bold: true }, category2.label)), /* @__PURE__ */ React__default.createElement("div", { style: { padding: "0 20px" } }, category2.blocks.map((item2, index2) => /* @__PURE__ */ React__default.createElement("div", { key: index2 }, /* @__PURE__ */ React__default.createElement(
           "div",
           {
             style: {
@@ -39942,7 +40143,7 @@ const BlocksModal = () => {
         })))));
       }
       if (category2.displayType === "custom") {
-        return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex, className: styles.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles.categoryHeader }, /* @__PURE__ */ React__default.createElement(Text, { bold: true }, category2.label)), /* @__PURE__ */ React__default.createElement("div", { style: { padding: "16px 20px" } }, category2.blocks.map((item2, index2) => /* @__PURE__ */ React__default.createElement(
+        return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex + category2.label, className: styles.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles.categoryHeader }, /* @__PURE__ */ React__default.createElement(Text, { bold: true }, category2.label)), /* @__PURE__ */ React__default.createElement("div", { style: { padding: "16px 20px" } }, category2.blocks.map((item2, index2) => /* @__PURE__ */ React__default.createElement(
           "div",
           {
             key: index2,
@@ -39956,6 +40157,34 @@ const BlocksModal = () => {
       return null;
     });
   }, [categories, selectedBlock, handleGridItemClick]);
+  const renderPrebuiltBlocks = useMemo(() => {
+    if (!prebuiltBlocks || prebuiltBlocks.length === 0) {
+      return /* @__PURE__ */ React__default.createElement("div", { className: styles.emptyState }, t("No blocks available"));
+    }
+    if (filteredPrebuiltBlocks.length === 0) {
+      return /* @__PURE__ */ React__default.createElement("div", { className: styles.emptyState }, t("No blocks available"));
+    }
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, filteredPrebuiltBlocks.map((category2, categoryIndex) => /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex, className: styles.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles.categoryHeader }, /* @__PURE__ */ React__default.createElement(Text, { bold: true }, category2.label)), /* @__PURE__ */ React__default.createElement("div", { className: styles.prebuiltBlockContainer }, category2.blocks.map((block, blockIndex) => {
+      const isSelected = (selectedBlock == null ? void 0 : selectedBlock.categoryIndex) === categoryIndex && (selectedBlock == null ? void 0 : selectedBlock.blockIndex) === blockIndex;
+      return /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          key: blockIndex,
+          className: `${styles.gridItem} ${isSelected ? styles.selected : ""}`,
+          style: {
+            backgroundImage: `url(${block.thumbnail})`,
+            aspectRatio: "16 / 9",
+            backgroundSize: "contain",
+            backgroundPosition: "center",
+            backgroundRepeat: "no-repeat"
+          },
+          onClick: () => handleGridItemClick(block, categoryIndex, blockIndex)
+        },
+        isSelected && /* @__PURE__ */ React__default.createElement("div", { className: styles.checkIcon }, /* @__PURE__ */ React__default.createElement(IconCheck, null))
+      );
+    })))));
+  }, [prebuiltBlocks, filteredPrebuiltBlocks, selectedBlock == null ? void 0 : selectedBlock.categoryIndex, selectedBlock == null ? void 0 : selectedBlock.blockIndex, handleGridItemClick]);
+  const hasPrebuiltBlocks = prebuiltBlocks && prebuiltBlocks.length > 0;
   return /* @__PURE__ */ React__default.createElement(
     Modal,
     {
@@ -39973,7 +40202,47 @@ const BlocksModal = () => {
       },
       cancelText: t("Cancel")
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: styles.blocksModal }, /* @__PURE__ */ React__default.createElement("div", { className: styles.headerActions }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("div", { className: styles.blocksModal, key: activeTab }, hasPrebuiltBlocks ? /* @__PURE__ */ React__default.createElement("div", { className: styles.tabsContainer }, /* @__PURE__ */ React__default.createElement(Button$2.Group, { style: { width: "100%", marginBottom: 16 } }, /* @__PURE__ */ React__default.createElement(
+      Button$2,
+      {
+        size: "large",
+        type: activeTab === "default" ? "primary" : "outline",
+        onClick: () => {
+          setActiveTab(
+            "default"
+            /* DEFAULT */
+          );
+          setSelectedBlock(null);
+        },
+        style: { width: "50%" }
+      },
+      t("Default")
+    ), /* @__PURE__ */ React__default.createElement(
+      Button$2,
+      {
+        size: "large",
+        type: activeTab === "prebuilt" ? "primary" : "outline",
+        onClick: () => {
+          setActiveTab(
+            "prebuilt"
+            /* PREBUILT */
+          );
+          setSelectedBlock(null);
+        },
+        style: { width: "50%" }
+      },
+      t("Prebuilt")
+    )), /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: styles.headerActions }, /* @__PURE__ */ React__default.createElement(
+      Input,
+      {
+        className: styles.searchInput,
+        placeholder: t("Search blocks..."),
+        prefix: /* @__PURE__ */ React__default.createElement(IconSearch, null),
+        value: searchQuery,
+        onChange: handleSearchChange,
+        allowClear: true
+      }
+    )), /* @__PURE__ */ React__default.createElement(SharedComponents.FullHeightOverlayScrollbars, { height: "calc(100vh - 350px)", maxHeight: "600px" }, activeTab === "default" ? categories.length > 0 ? renderGridContent : /* @__PURE__ */ React__default.createElement("div", { className: styles.emptyState }, t("No blocks available")) : renderPrebuiltBlocks))) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: styles.headerActions }, /* @__PURE__ */ React__default.createElement(
       Input,
       {
         className: styles.searchInput,
@@ -39983,7 +40252,7 @@ const BlocksModal = () => {
         onChange: handleSearchChange,
         allowClear: true
       }
-    )), /* @__PURE__ */ React__default.createElement("div", { className: styles.contentArea }, categories.length > 0 ? renderGridContent : /* @__PURE__ */ React__default.createElement("div", { className: styles.emptyState }, t("No blocks available"))))
+    )), /* @__PURE__ */ React__default.createElement("div", { className: styles.contentArea }, /* @__PURE__ */ React__default.createElement(SharedComponents.FullHeightOverlayScrollbars, { height: "calc(100vh - 350px)", maxHeight: "600px" }, categories.length > 0 ? renderGridContent : /* @__PURE__ */ React__default.createElement("div", { className: styles.emptyState }, t("No blocks available"))))))
   );
 };
 const styleText$8 = "[data-standard-table2-selected=true] ::selection {\n  background: none !important;\n}\n\n[data-standard-table2-selected=true] [data-standard-table2-td-selected=true] {\n  background-color: rgba(199, 199, 199, 0.4) !important;\n}";
@@ -40649,6 +40918,149 @@ const TableTools = (props) => {
     return null;
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$8), showContextMenu && /* @__PURE__ */ React__default.createElement(ContextMenu, { position }));
 };
+const PrebuiltBlockList$1 = "";
+function PrebuiltBlockItem({
+  block,
+  universalElementEditing,
+  standaloneElementEditing,
+  initialStandaloneElement
+}) {
+  const elementType = block.payload.type;
+  const blockDefinition = BlockManager.getBlockByType(elementType);
+  const element = useMemo(() => {
+    if (!blockDefinition) {
+      return null;
+    }
+    return blockDefinition.create(block.payload);
+  }, [blockDefinition, block.payload]);
+  const { dragHandle } = useDragging({
+    element: element || {},
+    nodeElement: null,
+    action: "copy",
+    cloneGhost: false
+  });
+  if (!blockDefinition || !element) {
+    return null;
+  }
+  if (universalElementEditing && !NodeUtils.isContentElement(element))
+    return null;
+  if (standaloneElementEditing && initialStandaloneElement && !NodeUtils.isParentCategoryType(element.type, initialStandaloneElement.type))
+    return null;
+  return /* @__PURE__ */ React__default.createElement("div", { className: "prebuilt-block-item" }, /* @__PURE__ */ React__default.createElement("div", __spreadValues({ className: "prebuilt-block-item-container" }, dragHandle), /* @__PURE__ */ React__default.createElement("div", { className: "prebuilt-block-thumbnail" }, /* @__PURE__ */ React__default.createElement(
+    "img",
+    {
+      src: block.thumbnail,
+      style: { objectFit: "contain" },
+      alt: block.title,
+      loading: "lazy"
+    }
+  ))));
+}
+const PrebuiltBlockList = () => {
+  const editorProps = useEditorProps();
+  const standaloneElementEditing = useStandaloneElementEditing();
+  const initialStandaloneElement = useStandaloneElement();
+  const universalElementEditing = useUniversalElementEditing();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedCategoryLabel, setSelectedCategoryLabel] = useState(void 0);
+  const categories = useMemo(() => {
+    return editorProps.prebuiltBlocks || [];
+  }, [editorProps.prebuiltBlocks]);
+  const filteredCategories = useMemo(() => {
+    let result = categories;
+    if (selectedCategoryLabel) {
+      result = result.filter(
+        (category2) => category2.label === selectedCategoryLabel
+      );
+    }
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase().trim();
+      result = result.map((category2) => {
+        const filteredBlocks = category2.blocks.filter((block) => {
+          const titleMatch = block.title.toLowerCase().includes(query);
+          const categoryMatch = block.category.toLowerCase().includes(query);
+          return titleMatch || categoryMatch;
+        });
+        if (filteredBlocks.length === 0) {
+          return null;
+        }
+        return __spreadProps(__spreadValues({}, category2), {
+          blocks: filteredBlocks
+        });
+      }).filter((category2) => category2 !== null);
+    }
+    return result;
+  }, [categories, searchQuery, selectedCategoryLabel]);
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        "data-compact": Boolean(editorProps.compact || editorProps.widgetMode),
+        className: "BlockSideBar-PrebuiltBlockList",
+        style: {
+          height: "100%"
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Grid.Row,
+        {
+          style: {
+            borderBottom: "1px solid var(--color-border, #e5e7eb)",
+            paddingBottom: 10,
+            paddingLeft: 25,
+            paddingRight: 25
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 14, offset: 0 }, /* @__PURE__ */ React__default.createElement(
+          Input,
+          {
+            placeholder: "Search blocks...",
+            value: searchQuery,
+            onChange: (value) => setSearchQuery(value),
+            allowClear: true
+          }
+        )),
+        /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 7, offset: 3 }, /* @__PURE__ */ React__default.createElement(
+          Select$1,
+          {
+            placeholder: "Category",
+            value: selectedCategoryLabel,
+            onChange: (value) => setSelectedCategoryLabel(value || void 0),
+            allowClear: true,
+            triggerProps: {
+              autoAlignPopupWidth: false,
+              autoAlignPopupMinWidth: true
+            }
+          },
+          categories.map((category2) => /* @__PURE__ */ React__default.createElement(Select$1.Option, { key: category2.label, value: category2.label }, category2.label))
+        ))
+      ),
+      /* @__PURE__ */ React__default.createElement(SharedComponents.FullHeightOverlayScrollbars, { height: "calc(100% - 115px)" }, /* @__PURE__ */ React__default.createElement("div", { className: "prebuilt-block-content" }, filteredCategories.map((category2, categoryIndex) => {
+        return /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: categoryIndex }, /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex, className: "prebuilt-block-category" }, /* @__PURE__ */ React__default.createElement("div", { className: "prebuilt-block-category-title" }, category2.label), /* @__PURE__ */ React__default.createElement("div", { className: "prebuilt-block-grid" }, category2.blocks.map((block, blockIndex) => {
+          return /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: blockIndex }, /* @__PURE__ */ React__default.createElement(
+            PrebuiltBlockItem,
+            {
+              block,
+              universalElementEditing,
+              standaloneElementEditing,
+              initialStandaloneElement
+            }
+          ));
+        }))));
+      })))
+    );
+  }, [
+    filteredCategories,
+    editorProps.compact,
+    editorProps.widgetMode,
+    initialStandaloneElement,
+    standaloneElementEditing,
+    universalElementEditing,
+    searchQuery,
+    selectedCategoryLabel,
+    categories
+  ]);
+};
 ExternalComponents.ChildrenWithPlaceholderWrapper = DraggingPlaceholderWrapper;
 const SharedComponents = {
   PreviewEmailDrawer,
@@ -40677,6 +41089,7 @@ const SharedComponents = {
   BlockList,
   UniversalListItem,
   UniversalList,
+  PrebuiltBlockList,
   MergeTagComponent,
   ImageAction,
   DesktopEmailPreview,

package/lib/style.css

@@ -1876,51 +1876,43 @@ THEMES:
   opacity: 0;
   visibility: hidden;
   white-space: nowrap;
-}._blocksModal_oes30_1 {
+}._blocksModal_12piq_1 {
   display: flex;
   flex-direction: column;
-  height: 70vh;
-  max-height: 600px;
   background-color: var(--color-bg-1);
 }
 
-._modalHeader_oes30_9 {
+._modalHeader_12piq_7 {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-shrink: 0;
 }
 
-._headerActions_oes30_16 {
+._headerActions_12piq_14 {
   display: flex;
   align-items: center;
   gap: 12px;
 }
 
-._searchInput_oes30_22 {
+._searchInput_12piq_20 {
   width: 240px;
 }
 
-._modalTitle_oes30_26 {
+._modalTitle_12piq_24 {
   font-size: 16px;
   font-weight: 600;
   color: var(--color-text-1);
 }
 
-._contentArea_oes30_32 {
-  overflow-y: auto;
-  overflow-x: hidden;
-  flex: 1;
+._category_12piq_30 {
+  padding-bottom: 32px;
 }
-
-._category_oes30_38 {
-  margin-bottom: 32px;
-}
-._category_oes30_38:first-child {
+._category_12piq_30:first-child {
   margin-top: 0;
 }
 
-._categoryHeader_oes30_45 {
+._categoryHeader_12piq_37 {
   padding: 12px 0;
   margin-bottom: 16px;
   font-size: 14px;
@@ -1931,7 +1923,7 @@ THEMES:
   border-bottom: 1px solid var(--color-border-2);
 }
 
-._gridContainer_oes30_56 {
+._gridContainer_12piq_48 {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
   gap: 16px;
@@ -1940,7 +1932,16 @@ THEMES:
   padding: 0 20px;
 }
 
-._gridItem_oes30_65 {
+._prebuiltBlockContainer_12piq_57 {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 16px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 20px;
+}
+
+._gridItem_12piq_66 {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -1955,15 +1956,15 @@ THEMES:
   box-sizing: border-box;
   min-width: 0;
 }
-._gridItem_oes30_65:hover {
+._gridItem_12piq_66:hover {
   border-color: rgb(var(--primary-3));
   background-color: var(--color-fill-1);
 }
-._gridItem_oes30_65._selected_oes30_84 {
+._gridItem_12piq_66._selected_12piq_85 {
   border: 2px solid rgb(var(--primary-6));
 }
 
-._gridItemIcon_oes30_88 {
+._gridItemIcon_12piq_89 {
   width: 48px;
   height: 48px;
   display: flex;
@@ -1973,27 +1974,27 @@ THEMES:
   flex-shrink: 0;
   position: relative;
 }
-._gridItemIcon_oes30_88 * {
+._gridItemIcon_12piq_89 * {
   max-width: 48px !important;
   max-height: 48px !important;
 }
-._gridItemIcon_oes30_88 img {
+._gridItemIcon_12piq_89 img {
   width: 100% !important;
   height: 100% !important;
   max-width: 48px !important;
   max-height: 48px !important;
   object-fit: contain !important;
 }
-._gridItemIcon_oes30_88 svg {
+._gridItemIcon_12piq_89 svg {
   max-width: 48px !important;
   max-height: 48px !important;
 }
-._gridItemIcon_oes30_88 div {
+._gridItemIcon_12piq_89 div {
   max-width: 48px !important;
   max-height: 48px !important;
 }
 
-._gridItemLabel_oes30_118 {
+._gridItemLabel_12piq_119 {
   font-size: 13px;
   color: var(--color-text-1);
   text-align: center;
@@ -2001,7 +2002,7 @@ THEMES:
   line-height: 1.4;
 }
 
-._checkIcon_oes30_126 {
+._checkIcon_12piq_127 {
   position: absolute;
   bottom: 0px;
   right: 0px;
@@ -2018,7 +2019,7 @@ THEMES:
   z-index: 1;
 }
 
-._emptyState_oes30_143 {
+._emptyState_12piq_144 {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -2028,7 +2029,7 @@ THEMES:
   font-size: 14px;
 }
 
-._layoutPreview_oes30_153 {
+._layoutPreview_12piq_154 {
   border-bottom: 1px solid var(--color-border-2);
   cursor: pointer;
   transition: all 0.2s ease;
@@ -2041,16 +2042,16 @@ THEMES:
   width: 100%;
   max-width: 100%;
 }
-._layoutPreview_oes30_153:hover {
+._layoutPreview_12piq_154:hover {
   background-color: var(--color-fill-3);
 }
-._layoutPreview_oes30_153._layoutSelected_oes30_169 {
+._layoutPreview_12piq_154._layoutSelected_12piq_170 {
   border: 1px solid rgb(var(--primary-6));
   background-color: rgba(var(--primary-1), 0.3);
   box-shadow: 0 2px 4px rgba(var(--primary-6), 0.1);
 }
 
-._layoutRowLabel_oes30_175 {
+._layoutRowLabel_12piq_176 {
   font-size: 11px;
   color: var(--color-text-3);
   margin-top: 8px;
@@ -2058,7 +2059,7 @@ THEMES:
   font-weight: 500;
 }
 
-._layoutRow_oes30_175 {
+._layoutRow_12piq_176 {
   height: 50px;
   display: flex;
   border: 1px solid var(--color-border-2);
@@ -2071,11 +2072,11 @@ THEMES:
   width: 100%;
   min-width: 0;
 }
-._layoutRow_oes30_175:last-child {
+._layoutRow_12piq_176:last-child {
   margin-bottom: 0;
 }
 
-._layoutColumn_oes30_200 {
+._layoutColumn_12piq_201 {
   height: 100%;
   display: flex;
   align-items: center;
@@ -2088,20 +2089,107 @@ THEMES:
   min-width: 0;
   flex-shrink: 1;
 }
-._layoutColumn_oes30_200:not(:last-child) {
+._layoutColumn_12piq_201:not(:last-child) {
   border-right: 1px solid var(--color-border-2);
 }
 
-._layoutPreview_oes30_153._layoutSelected_oes30_169 ._layoutRow_oes30_175 {
+._layoutPreview_12piq_154._layoutSelected_12piq_170 ._layoutRow_12piq_176 {
   border-color: rgba(var(--primary-6), 0.3);
   background-color: rgba(var(--primary-1), 0.1);
 }
-._layoutPreview_oes30_153._layoutSelected_oes30_169 ._layoutColumn_oes30_200 {
+._layoutPreview_12piq_154._layoutSelected_12piq_170 ._layoutColumn_12piq_201 {
   color: rgb(var(--primary-6));
   font-weight: 600;
 }
-._layoutPreview_oes30_153._layoutSelected_oes30_169 ._layoutColumn_oes30_200:not(:last-child) {
+._layoutPreview_12piq_154._layoutSelected_12piq_170 ._layoutColumn_12piq_201:not(:last-child) {
   border-right-color: rgba(var(--primary-6), 0.2);
+}.BlockSideBar-PrebuiltBlockList {
+  --prebuilt-block-item-size: 120px;
+}
+
+@media screen and (max-width: 1600px) {
+  [data-compact=true].BlockSideBar-PrebuiltBlockList {
+    --prebuilt-block-item-size: 100px;
+  }
+}
+.prebuilt-block-filters {
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--color-border, #e5e7eb);
+  display: flex;
+  gap: 12px;
+}
+
+.prebuilt-block-search-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.prebuilt-block-category-select {
+  flex-shrink: 0;
+  width: 160px;
+}
+
+.prebuilt-block-content {
+  padding: 20px;
+}
+
+.prebuilt-block-category {
+  margin-bottom: 24px;
+}
+.prebuilt-block-category:last-child {
+  margin-bottom: 0;
+}
+
+.prebuilt-block-category-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text-1, #1d2129);
+  margin-bottom: 12px;
+  padding: 0 4px;
+}
+
+.prebuilt-block-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.prebuilt-block-item {
+  display: flex;
+  cursor: grab;
+  width: 100%;
+  margin-bottom: 0px;
+  box-shadow: rgba(55, 63, 71, 0.04) 0px 0px 0px 1px, rgba(55, 63, 71, 0.08) 0px 4px 4px 0px, rgba(55, 63, 71, 0.08) 0px 8px 24px 0px;
+  border: 2px solid transparent;
+  border-radius: 4px;
+  box-sizing: border-box;
+  background-color: #fff;
+  position: relative;
+  transition: all 0.2s;
+}
+.prebuilt-block-item:hover {
+  box-shadow: 0px 0px 2px 2px rgb(var(--primary-4, #1890ff)) !important;
+  transform: translateY(-2px);
+}
+.prebuilt-block-item .prebuilt-block-item-container {
+  display: flex;
+  width: 100%;
+  padding: 0;
+}
+.prebuilt-block-item .prebuilt-block-thumbnail {
+  width: 100%;
+  overflow: hidden;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.prebuilt-block-item .prebuilt-block-thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
 }/*---------------------------------------------------------------------------------------------
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the MIT License. See License.txt in the project root for license information.

package/lib/typings/components/BlockSideBar/BlockList/BlockList.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import "./index.scss";
-export declare const BlockList: ({ tab }: {
-    tab: "Default" | "Universal";
+export declare const BlockList: ({ tab, }: {
+    tab: "Default" | "Universal" | "Prebuilt";
 }) => React.JSX.Element;

package/lib/typings/components/BlockSideBar/BlockList/PrebuiltBlockItem.d.ts

@@ -0,0 +1,10 @@
+import { Element } from "easy-email-pro-core";
+import React from "react";
+import "./PrebuiltBlockList.scss";
+import { PrebuiltBlock } from "../../../typings";
+export declare function PrebuiltBlockItem({ block, universalElementEditing, standaloneElementEditing, initialStandaloneElement, }: {
+    block: PrebuiltBlock;
+    universalElementEditing: boolean;
+    standaloneElementEditing: boolean;
+    initialStandaloneElement: Element | null;
+}): React.JSX.Element | null;

package/lib/typings/components/BlockSideBar/BlockList/PrebuiltBlockList.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import "./PrebuiltBlockList.scss";
+export declare const PrebuiltBlockList: () => React.JSX.Element;

package/lib/typings/components/index.d.ts

@@ -90,14 +90,15 @@ export declare const SharedComponents: {
         maxHeight: string | number;
         children: import("react").ReactNode;
     }>;
-    BlockList: ({ tab }: {
-        tab: "Default" | "Universal";
+    BlockList: ({ tab, }: {
+        tab: "Default" | "Universal" | "Prebuilt";
     }) => import("react").JSX.Element;
     UniversalListItem: ({ element, thumbnail, }: {
         element: import("../easy-email-pro-core/lib/typings").Element;
         thumbnail: string;
     }) => import("react").JSX.Element;
     UniversalList: () => import("react").JSX.Element | null;
+    PrebuiltBlockList: () => import("react").JSX.Element;
     MergeTagComponent: import("react").FC<{
         onChange: (v: string) => void;
         value: string;

package/lib/typings/themes/Retro/components/ElementInteract/TableTools/ContextMenu.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-export declare const ContextMenu: ({ position, }: {
+export declare const ContextMenu: React.FC<{
     position: {
         top: number;
         left: number;
     };
-}) => React.ReactPortal;
+}>;

package/lib/typings/typings/custom-types.d.ts

@@ -1,5 +1,5 @@
 import { defaultAttributeFields } from "../components/ConfigurationPanel/components/AttributeField";
-import type { ContentWidgetElement, Element, ElementMap, ExtendedType, PageElement, PickObjectValueByKey, SectionWidgetElement } from "easy-email-pro-core";
+import type { ContentWidgetElement, Element, ElementMap, ExtendedType, PageElement, PickObjectValueByKey, SectionWidgetElement, StandardSectionElement, StandardWrapperElement } from "easy-email-pro-core";
 import type { BasicEditorProps, BasicEmailTemplate, CustomSlateEditor, EmailEditorProps, EmailTemplate } from "easy-email-pro-editor";
 import React from "react";
 import { Path } from "slate";
@@ -92,11 +92,23 @@ export type Categories = Array<CategoryGridItem | CategoryMenuItem | {
     blocks: Array<React.ReactNode>;
     displayType: "custom";
 }>;
+export interface PrebuiltBlock {
+    thumbnail: string;
+    title: string;
+    payload: StandardWrapperElement | StandardSectionElement;
+    category: string;
+}
+export interface PrebuiltBlockCategory {
+    get label(): string;
+    active?: boolean;
+    blocks: PrebuiltBlock[];
+}
 export interface PluginsCustomEditorTypes {
     AttributeFieldsMap?: AttributeFieldsMap;
     EmailEditorProps: BasicEditorProps & {
         instanceRef?: React.MutableRefObject<EditorContextProps | null>;
         categories?: Categories;
+        prebuiltBlocks?: PrebuiltBlockCategory[];
         attributeFields?: AttributeFieldsMap;
         showSourceCode?: boolean;
         sourceCodeEditable?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-email-pro-theme",
-  "version": "1.55.1",
+  "version": "1.56.1",
   "description": "",
   "files": [
     "lib"