easy-email-pro-theme 1.51.1 → 1.51.3

package/lib/index.js

@@ -62,8 +62,8 @@ import { NodeUtils, BlockManager, ElementType, EditorCore, t, ElementCategory, c
 import { cloneDeep, get, isEqual, set, omit as omit$2, merge as merge$1, debounce as debounce$2, isUndefined as isUndefined$1, uniqueId, isString as isString$1, isFunction as isFunction$4, isNumber as isNumber$1, upperFirst, sum, flatMap } from "lodash";
 import { Editor, Range, Node, Transforms, Path, Text as Text$2, createEditor } from "slate";
 import { nanoid } from "nanoid";
-import { Form, Input, Modal, Collapse, Space, Empty, Card, Grid, Button as Button$2, Drawer, Switch, Typography as Typography$1, Tabs, Radio, Divider as Divider$2, Alert, Popconfirm, Tooltip, Message, PageHeader, Spin, Layout as Layout$2, Popover, Select as Select$1, Slider, InputNumber, Tag, Link as Link$3, List as List$1, Skeleton, Trigger } from "@arco-design/web-react";
-import { IconPlus, IconDelete, IconEdit, IconLeft, IconCopy, IconUndo, IconRedo, IconMinus, IconEye, IconSubscribeAdd, IconClose, IconCheckCircleFill, IconDragArrow, IconPalette, IconLock, IconUnlock, IconImage, IconQuestionCircle, IconLink, IconCloud, IconDragDotVertical, IconSend, IconDown } from "@arco-design/web-react/icon";
+import { Form, Input, Modal, Collapse, Space, Empty, Card, Grid, Button as Button$2, Drawer, Switch, Typography as Typography$1, Tabs, Radio, Tooltip, Divider as Divider$2, Alert, Popconfirm, Message, PageHeader, Spin, Layout as Layout$2, Popover, Select as Select$1, Slider, InputNumber, Tag, Link as Link$3, List as List$1, Skeleton, Trigger } from "@arco-design/web-react";
+import { IconPlus, IconDelete, IconEdit, IconLeft, IconDownload, IconCopy, IconUndo, IconRedo, IconMinus, IconEye, IconSubscribeAdd, IconClose, IconCheckCircleFill, IconDragArrow, IconPalette, IconLock, IconUnlock, IconImage, IconQuestionCircle, IconLink, IconCloud, IconDragDotVertical, IconSend, IconDown } from "@arco-design/web-react/icon";
 import { unstable_batchedUpdates, createPortal } from "react-dom";
 import mjml from "mjml-browser";
 import { HistoryEditor } from "slate-history";
@@ -7807,7 +7807,8 @@ const ConfigurationPanel = ({
   const universalElementPath = useUniversalElementPath();
   const standaloneElementPath = useStandaloneElementPath();
   const lock = useLockState();
-  const { quantityLimitCheck, compact } = useEditorProps();
+  const [generateImageLoading, setGenerateImageLoading] = useState(false);
+  const { quantityLimitCheck, compact, onUpload, showGenerateBlockImage } = useEditorProps();
   const { copyBlock, deleteBlock, isChanged, resetSelectedNode } = useElementInteract();
   const onCopy = useEventCallback((path2) => {
     try {
@@ -7822,6 +7823,31 @@ const ConfigurationPanel = ({
       console.error(error2);
     }
   });
+  const generateImage = useEventCallback(() => __async(void 0, null, function* () {
+    if (!selectedNodePath)
+      return;
+    try {
+      setGenerateImageLoading(true);
+      const element2 = Node.get(editor, selectedNodePath);
+      const html2canvas = (yield import("./html2canvas.esm-858519c4.js")).default;
+      const container2 = ReactEditor.toDOMNode(editor, element2);
+      const blob = yield new Promise((resolve) => {
+        html2canvas(container2, { useCORS: true }).then((canvas) => {
+          return canvas.toBlob(resolve, "png", 0.1);
+        });
+      });
+      if (blob) {
+        const blobUrl = yield onUpload == null ? void 0 : onUpload(blob);
+        if (blobUrl) {
+          window.open(blobUrl, "_blank");
+        }
+      }
+    } catch (error2) {
+      console.error(error2);
+    } finally {
+      setGenerateImageLoading(false);
+    }
+  }));
   let element = null;
   if (selectedNodePath) {
     try {
@@ -7878,7 +7904,27 @@ const ConfigurationPanel = ({
         },
         BlockManager.getBlockTitle(element)
       ),
-      !isSelectedUniversalElement && !isSelectedStandaloneElement && /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React__default.createElement(Space, null, showGenerateBlockImage && /* @__PURE__ */ React__default.createElement(
+        Tooltip,
+        {
+          content: t("Export block image"),
+          getPopupContainer: () => document.body,
+          triggerProps: {
+            style: {
+              zIndex: 9999
+            }
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(
+          Button$2,
+          {
+            loading: generateImageLoading,
+            size: "small",
+            icon: /* @__PURE__ */ React__default.createElement(IconDownload, null),
+            onClick: generateImage
+          }
+        )
+      ), !isSelectedUniversalElement && !isSelectedStandaloneElement && /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(
         Button$2,
         {
           onClick: () => onCopy(selectedNodePath),
@@ -7892,7 +7938,7 @@ const ConfigurationPanel = ({
           size: "small",
           icon: /* @__PURE__ */ React__default.createElement(IconDelete, null)
         }
-      )),
+      ))),
       /* @__PURE__ */ React__default.createElement("div", { style: { marginRight: 10 } })
     ), /* @__PURE__ */ React__default.createElement(Divider$2, { style: { margin: 0 } }), /* @__PURE__ */ React__default.createElement(
       SharedComponents.FullHeightOverlayScrollbars,
@@ -7938,17 +7984,20 @@ const ConfigurationPanel = ({
     element,
     selectedNodePath,
     universalElementPath,
+    standaloneElementPath,
     universalElementEditing,
+    standaloneElementEditing,
     compact,
     lock,
     onClose,
+    showGenerateBlockImage,
+    generateImageLoading,
+    generateImage,
     height,
     isChanged,
     resetSelectedNode,
     onCopy,
-    deleteBlock,
-    standaloneElementEditing,
-    standaloneElementPath
+    deleteBlock
   ]);
 };
 const index$9 = "";
@@ -14776,7 +14825,8 @@ const BgColor = () => {
         {
           match: Text$2.isText,
           split: true,
-          at: mergeNodeEntry ? mergeNodeEntry[1] : void 0
+          at: mergeNodeEntry ? mergeNodeEntry[1] : void 0,
+          voids: true
         }
       );
     } else {
@@ -14889,7 +14939,8 @@ const FontColor = () => {
         {
           match: Text$2.isText,
           split: true,
-          at: mergeNodeEntry ? mergeNodeEntry[1] : void 0
+          at: mergeNodeEntry ? mergeNodeEntry[1] : void 0,
+          voids: true
         }
       );
     } else {
@@ -15771,7 +15822,7 @@ const paragraphIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAACKCAY
 const heading1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAACKCAYAAAB1h9JkAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMASURBVHgB7dwtU9xQAEDR/kM8Ho/H4/F4PB6PwOFBYxn8dl5nakp2ext2m81yzswzfLwym7vJ2zTJjw0EPzYQCIVEKCRCIREKiVBIhEIiFBKhkAiFRCgkQiERColQSIRCIhQSoZAIhUQoJEIhEQqJUEiEQiIUEqGQCIVEKCRCIREKiVBIhEIiFJLFQ3l5edk8PDzMGh8fH1vnfX5+nj0vny0eyt3d3ebs7GzWeHt72zrvzc3N7Hn5bPFQxjt/bNSLi4u0EcfPjZ8fge3aozw+Ps6el8+Oao0yDkPbNuz5+fmvqOYYv7dt3vH1ufN+J0e3mB2Hk6kNOt7tXzFimJr39vZ2w98d5aeeqXf/Pg4JY6/057wWr823CmVqXqE0QhFKIpQ9hjLWV+Pv/NsnsjUSyp5C+fMT265zPGsklC+GMgKZOrlnj/IfHGMoY8P/PsV/f3//62P15eXltzm7K5QYyrbzO0JZ0LGGcnV1NTmEspC1LWaFspC1hzL+nVOzmlDGLv73OYq541Cn8IWykHppwD6GUJrVhDK+tm0xWYc9ynzWKEJJhCKURChCSYQilEQoQkmEIpREKEJJhCKURChCSYQilEQoQkmEIpTEnYIuXEpWc+/x+N/fNc17aje+H1Uo40W/vr6efOHHGN+bswHGLRW7rpgft1v867zjbx2P1tj19IVxpf6pBLN4KGPXP17sqcPCrjE2/K6brMahau6824zvzb2oavzemp+c4IlLE2ObufPt6zC3JA/7IxEKiVBIhEIiFBKhkAiFRCgkQiERColQSIRCIhQSoZAIhWSxUJ6enowDjUMQygmOQxDKCY5DsEYhEQqJUEiEQiIUEqGQCIVEKCRCIXFm9ojH6+vr5lgIRSiJUISSWKOQCIVEKCRCIREKiVBIhEIiFBKhkDgz+8Xx/v6++Q6EIpREKEJJrFFIhEIiFBKhkAiFRCgkQiERColQSIRCIhQSoZAIhUQoJEIhEQqJUEiEQiIUEqGQCIVEKCRCIREKiVBIhEIiFJKffNuO46yGVJYAAAAASUVORK5CYII=";
 const heading2 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAACKCAYAAAB1h9JkAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAPJSURBVHgB7dwxT+NKGIZR/iE9PT09PT09PT09PQUdPdS0iD6rbyVLlrHDGzsmmeQcaYqLcmfZ9YM9HidcbCBwsYGAUIgIhYhQiAiFiFCICIWIUIgIhYhQiAiFiFCICIWIUIgIhYhQiAiFiFCICIWIUIgIhYhQiAiFiFCICIWIUIgIhYhQiAiFiFCICIWIUIgcPJT39/fN8/PzrPH9/T0579vb2+x5+engoTw+Pm4uLy9njc/Pz8l57+/vZ8/LTwcPpX7y66BeX19HB7FeV6+vwLadUV5eXmbPy09HtUapy9DUgb26uvof1Rz1/03NW1+fO+85ObrFbF1Oxg5o/bQvUTGMzfvw8LDhd0d51zP207+PS0KdlYbzWrxmziqUsXmFkhGKUCJC2UModffV7dvU99mN+u/6+ra7s1YIZUEoFcHt7e3o2mc46nUtn72EMuPg1Z1ZHfjh7Xu3D1N3Und3d6MB1fewbaPwWAllx1DqIPfn2bYPU5ecsZ3nCqj2jFoilB1CGYskOTs8PT2NxtLSmUUoO4QyfH5Ul5/U8FK1j03EvySUMJSxHeM6K6Smziqt3BEJJQylHjKO3c2ka42pRwitPGdqJpQ6dff3KOaMJVv49bqxA10BJaZCaeWWuZlQ1hrpgaozx5IzglBWMBZKfa3OKkvG0oeCw8XsLk+eXXpWcMz7KN1W/a77IGOL2RoWswuc4kNBt8crOLVQpu6YbLgtdEqhDHdz9/n3+UtCWTGUsfcA14K6xafIQlnhoE09DKx1SotPjotQ9hxKzTf8cyqQ1t/pL5Q9hdK9iak/d70n5VQ+CiKUhaEM38RUa5DfPpzWIqEsCKX//OhUA+kIZeZbIW9ubjb9rfxTDaQjlB1Dqdd3Z5GK5Vw+juqTgjuE0r/lre+xnt/M/dUa/dFCbM189niXtx2uMe/UQ719jBae+RxVKHUw65Zy6h907u1m7ZD21xRjB+q3eZf8vhWh7EG3QZV8iKo/6sBv2+Wsy8TceccI5cBa+Y1LQoGAUIgIhYhQiAiFiFCICIWIUIgIhYhQiAiFiFCICIWIUIgIhcjBQnl9fTVWGmsQygmONQjlBMcarFGICIWIUIgIhYhQiAiFiFCICIWIUIjYmT3i8fHxsTkWQhFKRChCiVijEBEKEaEQEQoRoRARChGhEBEKEaEQsTO7cHx9fW3OgVCEEhGKUCLWKESEQkQoRIRCRChEhEJEKESEQkQoRIRCRChEhEJEKESEQkQoRIRCRChEhEJEKESEQkQoRIRCRChEhEJEKESEQkQoRP4Bc7zC5nyOk6IAAAAASUVORK5CYII=";
 const heading3 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAACKCAYAAAB1h9JkAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAUpSURBVHgB7dwtTCNBGMbxucs5giJBg0HhEHg8Hk+CxJMgSZAkSBIkCR6PR+DweDz67p4mkyzDbPvstGVn2v8vaS4c7ZKwD/Px7rv76+9/AZjhdwAMBAUWggILQYGFoMBCUGAhKLAQFFgICiwEBRaCAgtBgYWgwEJQYCEosBAUWAgKLAQFFoICC0GBhaDAQlBgISiwEBRYCAosBAUWggILQYGFoMBCUGAhKLAQFFj+hJG9v79PXiUODw/DxsZG9ntvb2/h4+MjlDg6Ogr4avSgvLy8hMfHx1Di7u6uNyjPz8+TVwmC8t3oQdnf35+cGHcE2N7ennxG//aFRDTaSMlx8d2vmp7hpino+vo6e2IViouLi8nJHEphub29zR5XwTg/Py867jqpajG7u7sbrq6ust/TCFF6MvU5hWHRx10n1e169BeeG/7nnRIUhtxUpXBitrXaHk9b02A66iiwjL7rWQWfn5+ThbgWy90Fs0YwTW2rsAYiKHPQbko1IIVEYZlGJYCTk5Nmt98EpYBGDW23FZQo1mD0iiNM9/uxAKiw6NUagjJQWuvR1HJ6epqdXvSey8vLL9ORRiB93bddrxWL2QF0gtOQ3Nzc9K5BNLqoLpTutjSyPD09hZYQlAHu7++/jA7OIlVhyU01GllmrWtqQlBMmnJ0AbOruwaZJneRUSFJj1czgmLKhcJtY9DUk9vtlLZXjKGZxWzcis5jnqE+91n9n8JSuuUt7ZcZQ1NBcYf6ZegLwzyXBVq6pNBMUPouFg7hFMb66Cqzfn53FNAi1T3ZuZ/bUvGtmaDEyuY8zs7OioOiQKijTgtQHWNIk5Pen/u5LZX2KbgNFDvnhshNmbGjrhXsen5ArrjW16BVK0aUJVNIuiOKpjCV/Fu7OEhQlkRrEoWku6VXONT322JXHUFZAC1wu1XW2JsSF7DxToOWbwMhKAugYPTdQ3R8fDxZALfem0tQlkzTT1zMtjyyEJQF0IlPt7qaemI1ORbp4tdat2jXQ8FtzfRVjePIoWB0F7WxoamlsFBH+QGqKGut0hWboFpBUH5I7rrQtEVwbdYqKGN2lMVbN1IEpVB6b0w0b4tBt67R9ZMnKheUMVsnhqgqKDqZ6kvN0S9Uc3rJLzZ2zvcdN731Yln6aiktNDCNvuvRX3RsNJ41NXQroPqlqxzet2vQMXVs57jdh+7EzvpU7GaL71k3owelb6qZZVa/6SKPm96fE2/DGLq17QtsC51uVT1Ip1aamtK1jLa7ugo8hKbVtOVAIXl4eAi1Y3tsyI1MJR30uc+UNEKNgaAYclPG0OkilvRTrVz3ISiGXMvi0DbG3K0muWtEtSIohrT8LkN2PlqXpGucvltNa0VQDDqp6cI1duPPooCktaHSXdOY2PUMkF4F1onW9JE2JsX7ihWSdF2i9+qRF609T46gDJR7iI5DaxFNNa0+pougFFJgtPaIz/JPpyGNNhpl4jPcWn+OG0FZoG7ldtUQFFjY9cBCUGAhKLAQFFhG60d5fX0NWI6Dg4OwaIwosBAUWKijwMKIAgtBgYWgwEJQYCEosBAUWAgKLAQFFq71VGxrayvs7OyEGjCiwEJQYOFaDyyMKLAQFFgICiwEBRaCAgtBgYWgwEJQYOFaz5z29vbC5uZmWHWMKLAQFFi41gMLIwosBAUWggILQYGFoMBCUGAhKLAQFFgICiwEBRaCAgtBgYWgwEJQYCEosBAUWAgKLAQFFoICC0GBhaDAQlBgISiwEBRYCAosBAWWf5H+W8ILZAmzAAAAAElFTkSuQmCC";
-const options$8 = [
+const options$9 = [
   {
     icon: paragraphIcon,
     get content() {
@@ -15844,7 +15895,7 @@ const TurnInto = () => {
       style: { minWidth: 95 },
       onChange,
       renderFormat: (option) => {
-        const matchItem = options$8.find((o) => o.value === (option == null ? void 0 : option.value));
+        const matchItem = options$9.find((o) => o.value === (option == null ? void 0 : option.value));
         return /* @__PURE__ */ React__default.createElement("span", { className: "TurnInto-content" }, matchItem ? matchItem.content : "");
       },
       triggerProps: {
@@ -15852,7 +15903,7 @@ const TurnInto = () => {
         autoAlignPopupMinWidth: true
       }
     },
-    options$8.map((option, index2) => {
+    options$9.map((option, index2) => {
       return /* @__PURE__ */ React__default.createElement(Select$1.Option, { key: index2, value: option.value }, /* @__PURE__ */ React__default.createElement("div", { className: "TurnInto-item" }, /* @__PURE__ */ React__default.createElement("img", { src: option.icon, alt: "", className: "TurnInto-icon" }), /* @__PURE__ */ React__default.createElement("span", { className: "TurnInto-content" }, option.content)));
     })
   ), /* @__PURE__ */ React__default.createElement("style", null, `.easy-email-pro-turnInto .arco-select-view { border-width: 0px !important; }`));
@@ -16028,7 +16079,7 @@ const TextAlign$1 = () => {
     }
   ));
 };
-const options$7 = ["12px", "14px", "16px", "18px", "24px", "32px", "48px"];
+const options$8 = ["12px", "14px", "16px", "18px", "24px", "32px", "48px"];
 const FontSize$2 = () => {
   const [selectRef, setSelectRef] = useState(null);
   const { fontSizeList } = useEditorProps();
@@ -16054,7 +16105,7 @@ const FontSize$2 = () => {
     setFontSizeValue(fontSizeValue2);
   }, [editor, textNode, textNode == null ? void 0 : textNode.fontSize]);
   const optionsList = useMemo(() => {
-    const list = [...fontSizeList || options$7];
+    const list = [...fontSizeList || options$8];
     if (fontSizeValue) {
       list.push(fontSizeValue);
     }
@@ -16089,7 +16140,8 @@ const FontSize$2 = () => {
         {
           match: Text$2.isText,
           split: true,
-          at: mergeNodeEntry ? mergeNodeEntry[1] : void 0
+          at: mergeNodeEntry ? mergeNodeEntry[1] : void 0,
+          voids: true
         }
       );
     } else {
@@ -16178,7 +16230,8 @@ const FontFamily$2 = () => {
         {
           match: Text$2.isText,
           split: true,
-          at: mergeNodeEntry ? mergeNodeEntry[1] : void 0
+          at: mergeNodeEntry ? mergeNodeEntry[1] : void 0,
+          voids: true
         }
       );
     } else {
@@ -27010,7 +27063,7 @@ function EditPanelList(props) {
   const [activeId, setActiveId] = useState(null);
   const [activeItem, setActiveItem] = useState(null);
   const getItemId = useCallback((item2) => {
-    let id = idMap.get(item2);
+    let id = get(item2, "id") || idMap.get(item2);
     if (!id) {
       id = +(/* @__PURE__ */ new Date()).getTime().toString() + "-" + uniqueId();
       idMap.set(item2, id);
@@ -27579,7 +27632,11 @@ function ImageUploader(props) {
           position: "relative",
           minHeight: 100,
           height: props.size === "small" ? 100 : void 0,
-          boxSizing: "border-box"
+          boxSizing: "border-box",
+          backgroundColor: "#fafafa",
+          backgroundImage: image2 ? "linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0), linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0)" : void 0,
+          backgroundSize: "20px 20px",
+          backgroundPosition: "0 0, 10px 10px"
         }
       },
       content
@@ -28889,7 +28946,7 @@ function TextAndHeadingStyle(props) {
     [props.name, props.path]
   );
 }
-const options$6 = [
+const options$7 = [
   {
     value: "normal",
     get label() {
@@ -28945,7 +29002,7 @@ function FontWeight(props) {
       SelectField,
       __spreadProps(__spreadValues({
         label: t("Font weight"),
-        options: options$6
+        options: options$7
       }, props), {
         formItem: __spreadValues(__spreadValues({}, fontWeightAdapter), props.formItem)
       })
@@ -29223,7 +29280,7 @@ function LineHeight(props) {
     )));
   }, [label, onChangeUnit, props, unit]);
 }
-const options$5 = [
+const options$6 = [
   {
     value: "left",
     label: /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-align-left" })
@@ -29243,7 +29300,7 @@ function TextAlign(props) {
     return /* @__PURE__ */ React__default.createElement(
       AttributeField.ButtonGroupField,
       __spreadProps(__spreadValues({}, props), {
-        options: options$5,
+        options: options$6,
         label
       })
     );
@@ -30207,7 +30264,7 @@ const ConditionModal = ({
     /* @__PURE__ */ React__default.createElement(Form.Item, { field: "condition.enabled", noStyle: true }, /* @__PURE__ */ React__default.createElement(Input, { hidden: true }))
   );
 };
-const options$4 = [
+const options$5 = [
   {
     tootip: "Truthy",
     label: "Truthy",
@@ -30333,7 +30390,7 @@ function ConditionItem({
       layout: "vertical",
       style: {}
     },
-    /* @__PURE__ */ React__default.createElement(Select$1, { options: options$4 }, options$4.map((item2) => {
+    /* @__PURE__ */ React__default.createElement(Select$1, { options: options$5 }, options$5.map((item2) => {
       return /* @__PURE__ */ React__default.createElement(Select$1.Option, { key: item2.value, value: item2.value }, /* @__PURE__ */ React__default.createElement("div", null, item2.label));
     }))
   )), !hideRight && /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 8, style: { paddingLeft: 5 } }, /* @__PURE__ */ React__default.createElement(
@@ -30694,7 +30751,7 @@ function Heading(props) {
     return /* @__PURE__ */ React__default.createElement(Form.Item, __spreadValues({ label }, props.formItem), /* @__PURE__ */ React__default.createElement(Select$1, { options: options2, value: node.type, onChange }));
   }, [label, node.type, onChange, options2, props.formItem]);
 }
-const options$3 = [
+const options$4 = [
   {
     value: "top",
     get label() {
@@ -30720,7 +30777,7 @@ function VerticalAlign(props) {
     return /* @__PURE__ */ React__default.createElement(
       AttributeField.ButtonGroupField,
       __spreadProps(__spreadValues({
-        options: options$3
+        options: options$4
       }, props), {
         label
       })
@@ -31037,7 +31094,7 @@ function RTLDirection(props) {
     )));
   }, [name, path2, rest]);
 }
-const options$2 = [
+const options$3 = [
   {
     value: "auto",
     get label() {
@@ -31057,7 +31114,7 @@ function TableLayout(props) {
     return /* @__PURE__ */ React__default.createElement(
       AttributeField.ButtonGroupField,
       __spreadProps(__spreadValues({}, props), {
-        options: options$2,
+        options: options$3,
         label
       })
     );
@@ -31208,6 +31265,116 @@ function BackgroundGradient(props) {
     t("Create gradient")
   )));
 }
+const options$2 = [
+  {
+    value: "left",
+    label: t("Left")
+  },
+  {
+    value: "right",
+    label: t("Right")
+  }
+];
+const verticalAlignOptions = [
+  {
+    value: "middle",
+    get label() {
+      return t("Middle");
+    }
+  },
+  {
+    value: "baseline",
+    get label() {
+      return t("Baseline");
+    }
+  }
+];
+function ButtonIcon(props) {
+  const { label = t("Icon"), path: path2, name } = props;
+  const { getFieldValue, setFieldValue } = useEditorContext();
+  const editor = useSlateStatic();
+  const isEnabledBorder = getFieldValue(path2, `${name}.icon-enabled`);
+  const handleChangeEnabled = useCallback(
+    (value) => {
+      console.log(value);
+      if (isUndefined$1(isEnabledBorder)) {
+        editor.withoutNormalizing(() => {
+          setFieldValue(
+            path2,
+            `${name}.icon-src`,
+            "https://cdn.shopify.com/s/files/1/0863/8971/9346/files/xmxnt4qg5xuogsoasxrfy_image.png"
+          );
+          setFieldValue(path2, `${name}.icon-position`, "right");
+          setFieldValue(path2, `${name}.icon-vertical-align`, "middle");
+          setFieldValue(path2, `${name}.icon-width`, "12px");
+          setFieldValue(path2, `${name}.icon-height`, "12px");
+        });
+      }
+    },
+    [setFieldValue, path2, name, isEnabledBorder, editor]
+  );
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
+      AttributeField.SwitchField,
+      {
+        label,
+        name: `${name}.icon-enabled`,
+        path: path2,
+        onChange: handleChangeEnabled
+      }
+    ), /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, isEnabledBorder && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+      AttributeField.ImageUrl,
+      {
+        path: path2,
+        name: props.name + ".icon-src",
+        formItem: { layout: "vertical" }
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      AttributeField.Width,
+      {
+        label: t("Width"),
+        path: path2,
+        suffix: t("px"),
+        name: `${name}.icon-width`,
+        min: 1,
+        required: true,
+        fallbackValue: "12px"
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      AttributeField.Height,
+      {
+        label: t("Height"),
+        path: path2,
+        suffix: t("px"),
+        name: `${name}.icon-height`,
+        min: 1,
+        required: true,
+        fallbackValue: "12px"
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      AttributeField.ButtonGroupField,
+      {
+        path: path2,
+        name: `${name}.icon-position`,
+        options: options$2,
+        label: t("Position")
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      AttributeField.ButtonGroupField,
+      {
+        path: path2,
+        name: `${name}.icon-vertical-align`,
+        options: verticalAlignOptions,
+        label: /* @__PURE__ */ React__default.createElement(Space, null, t("Vertical Align"), " "),
+        formItem: {
+          help: t(
+            "This option is not available in classic Outlook and is always baseline."
+          )
+        }
+      }
+    ))));
+  }, [handleChangeEnabled, isEnabledBorder, label, name, path2, props.name]);
+}
 const defaultAttributeFields = {
   // Basic Form Field
   WatchField,
@@ -31265,7 +31432,8 @@ const defaultAttributeFields = {
   WebFonts,
   RichTextField,
   FieldItem,
-  GradientGeneratorField
+  GradientGeneratorField,
+  ButtonIcon
 };
 const AttributeField = __spreadValues({}, defaultAttributeFields);
 const index$5 = "";
@@ -31681,12 +31849,13 @@ function AttributesContainer$d({
   mode
 }) {
   const { selectedNode } = useSelectedNode();
+  const { enabledButtonIcon } = useEditorProps();
   const textPath = useMemo(() => {
     return [...nodePath, 0];
   }, [nodePath]);
   if (!selectedNode)
     return null;
-  return /* @__PURE__ */ React__default.createElement(CollapseWrapper$1, { defaultActiveKey: ["0", "1", "2", "3", "4"] }, /* @__PURE__ */ React__default.createElement(Collapse.Item, { name: "3", header: t("Content") }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(CollapseWrapper$1, { defaultActiveKey: ["0", "1", "2", "3", "4", "5"] }, /* @__PURE__ */ React__default.createElement(Collapse.Item, { name: "3", header: t("Content") }, /* @__PURE__ */ React__default.createElement(
     AttributeField.ButtonContent,
     {
       path: textPath,
@@ -31753,6 +31922,13 @@ function AttributesContainer$d({
       path: nodePath,
       name: "border-radius"
     }
+  )), enabledButtonIcon && /* @__PURE__ */ React__default.createElement(Collapse.Item, { name: "5", header: t("Icon") }, /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      component: AttributeField.ButtonIcon,
+      path: nodePath,
+      name: ""
+    }
   )), /* @__PURE__ */ React__default.createElement(Collapse.Item, { name: "4", header: t("Block") }, /* @__PURE__ */ React__default.createElement(
     ResponsiveField,
     {
@@ -32092,6 +32268,13 @@ function AttributesContainer$9({
       type: selectedNode.type
     }
   )), /* @__PURE__ */ React__default.createElement(Collapse.Item, { name: "2", header: t("Block") }, /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      component: AttributeField.BackgroundColor,
+      path: nodePath,
+      name: "container-background-color"
+    }
+  ), /* @__PURE__ */ React__default.createElement(
     ResponsiveField,
     {
       component: AttributeField.TextAlign,
@@ -32334,6 +32517,13 @@ function AttributesContainer$8({
       type: selectedNode.type
     }
   )), /* @__PURE__ */ React__default.createElement(Collapse.Item, { name: "2", header: t("Block") }, /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      component: AttributeField.BackgroundColor,
+      path: nodePath,
+      name: "container-background-color"
+    }
+  ), /* @__PURE__ */ React__default.createElement(
     ResponsiveField,
     {
       component: AttributeField.ButtonGroupField,

package/lib/typings/components/ConfigurationPanel/components/AttributeField/ButtonIcon.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { Path } from "slate";
+export declare function ButtonIcon(props: {
+    label?: React.ReactNode;
+    path: Path;
+    name: string;
+}): React.JSX.Element;

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

@@ -37,6 +37,7 @@ import { ButtonContent } from "./ButtonContent";
 import { RTLDirection } from "./RTLDirection";
 import { TableLayout } from "./TableLayout";
 import { BackgroundGradient } from "./BackgroundGradient";
+import { ButtonIcon } from "./ButtonIcon";
 export declare const defaultAttributeFields: {
     WatchField: (props: import("../../../Form/WatchField").WatchFieldProps) => import("react").JSX.Element;
     SyncChildrenField: (props: import("../../../Form/SyncChildrenField").SyncChildrenFieldProps) => import("react").JSX.Element;
@@ -127,5 +128,6 @@ export declare const defaultAttributeFields: {
     }, "onChange" | "value">) => import("react").JSX.Element;
     FieldItem: typeof FieldItem;
     GradientGeneratorField: (props: import("../../../Form/enhancer").EnhancerProps & Omit<import("../../../Form/GradientGenerator").GradientGeneratorProps, "onChange" | "value">) => import("react").JSX.Element;
+    ButtonIcon: typeof ButtonIcon;
 };
 export declare const AttributeField: AttributeFieldsMap;

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

@@ -147,6 +147,7 @@ export interface PluginsCustomEditorTypes {
         showSidebar?: boolean;
         showLogic?: boolean;
         showLayer?: boolean;
+        showGenerateBlockImage?: boolean;
         showTextHTMLMode?: boolean;
         showTextDirectionMode?: boolean;
         showDragMoveIcon?: boolean;
@@ -154,6 +155,7 @@ export interface PluginsCustomEditorTypes {
         enabledHtmlBlockNodeAlign?: boolean;
         enabledPreviewEmailSubjectEdit?: boolean;
         enabledGradientImage?: boolean;
+        enabledButtonIcon?: boolean;
         hideSectionBackgroundImage?: boolean;
         layerConfig?: {
             scrollWhenSelect?: boolean;

package/package.json

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