easy-email-pro-theme 1.51.2 → 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 {
@@ -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 {

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;

package/package.json

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