easy-email-pro-theme 1.53.0 → 1.53.1

package/lib/index.js

@@ -8127,7 +8127,7 @@ const Controller = () => {
         position: "fixed",
         bottom: offset.bottom,
         left: offset.left,
-        zIndex: 11,
+        zIndex: 1,
         cursor: "grab"
       }
     },
@@ -14481,12 +14481,14 @@ const getElementPageLayout = (params) => {
     relativedElementVisible
   };
 };
+const EDITOR_CONTAINER = "EditorContainer";
 const HoveringToolbar = () => {
   const ref = useRef(null);
   const editor = useSlate();
   const { hoveringToolbar } = useEditorProps();
   const { selectedNode } = useSelectedNode();
   const [isFocus, setIsFocus] = useState(false);
+  const { lock } = useEditorState();
   const { selection } = editor;
   const nodePath = selectedNode && (selection == null ? void 0 : selection.anchor.path) ? selection.anchor.path : null;
   const isTable2 = selectedNode && NodeUtils.isTable2Element(selectedNode);
@@ -14742,23 +14744,46 @@ const HoveringToolbar = () => {
   if (hoveringToolbar == null ? void 0 : hoveringToolbar.fixed) {
     return /* @__PURE__ */ React__default.createElement("div", null, content);
   }
+  const editorContainer = document.getElementById(EDITOR_CONTAINER);
   return createPortal(
-    /* @__PURE__ */ React__default.createElement("div", { style: { position: "fixed", top: 0, left: 0, zIndex: 9999 } }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement(
       "div",
       {
-        ref,
-        key: String(isNotSelect),
-        id: "HoveringToolbar",
-        className: "HoveringToolbar",
-        "data-follow": (hoveringToolbar == null ? void 0 : hoveringToolbar.follow) || "selection"
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          zIndex: 9999
+        },
+        onPointerDownCapture: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }
       },
-      content,
-      /* @__PURE__ */ React__default.createElement("style", null, `#HoveringToolbar {
+      /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          key: String(isNotSelect),
+          id: "HoveringToolbar",
+          ref,
+          "data-follow": (hoveringToolbar == null ? void 0 : hoveringToolbar.follow) || "selection",
+          className: "HoveringToolbar"
+        },
+        /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            className: "HoveringToolbar-list",
+            style: { visibility: lock ? "hidden" : "visible" }
+          },
+          content
+        ),
+        /* @__PURE__ */ React__default.createElement("style", null, `#HoveringToolbar {
           --hovering-bar-icon-size: ${(hoveringToolbar == null ? void 0 : hoveringToolbar.iconSize) || 12}px;
 
         }`)
-    )),
-    document.body
+      )
+    ),
+    editorContainer || document.body
   );
 };
 function ColorPickerContent(props) {
@@ -16454,9 +16479,12 @@ const Image$5 = () => {
   const editor = useSlate();
   const ref = useRef(null);
   const { onUpload } = useEditorProps();
+  const { lock } = useEditorState();
   const [from] = Form.useForm();
   const onSubmit = (values) => {
     var _a;
+    if (lock)
+      return;
     let style = `max-width:100%;display:inline-block;`;
     if (values.width) {
       style += `width:${values.width};`;
@@ -16494,7 +16522,7 @@ const Image$5 = () => {
         popupStyle: { padding: "0px" }
       },
       getPopupContainer: (node) => {
-        return Array.from(document.querySelectorAll(".RichTextBar")).find(
+        return Array.from(document.querySelectorAll("#HoveringToolbar")).find(
           (item2) => item2.contains(node)
         );
       },
@@ -16505,13 +16533,38 @@ const Image$5 = () => {
           bodyStyle: { padding: "0px" },
           title: /* @__PURE__ */ React__default.createElement("div", { style: { textAlign: "left" } }, t(`Insert image`))
         },
-        /* @__PURE__ */ React__default.createElement(Form, { onSubmit, form: from }, /* @__PURE__ */ React__default.createElement("div", { style: { padding: "16px" } }, /* @__PURE__ */ React__default.createElement(
+        lock && /* @__PURE__ */ React__default.createElement(
+          Alert,
+          {
+            type: "warning",
+            content: t(
+              `This component is locked by the image drawer. Please complete your actions there first.`
+            )
+          }
+        ),
+        /* @__PURE__ */ React__default.createElement("div", { style: { position: "relative" } }, lock && /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: "rgba(255, 255, 255, 0.3)",
+              zIndex: 10,
+              cursor: "not-allowed"
+            }
+          }
+        ), /* @__PURE__ */ React__default.createElement(Form, { onSubmit, form: from }, /* @__PURE__ */ React__default.createElement("div", { style: { padding: "16px" } }, /* @__PURE__ */ React__default.createElement(
           AttributeField.ImageUploaderField,
           {
             path: null,
             name: "src",
             label: null,
+            enablePreview: false,
             uploadHandler: onUpload,
+            pinToParent: true,
             formItem: {
               wrapperCol: {
                 span: 24
@@ -16555,10 +16608,10 @@ const Image$5 = () => {
               }
             }
           }
-        )))), /* @__PURE__ */ React__default.createElement(Divider$2, { style: { margin: "0px" } }), /* @__PURE__ */ React__default.createElement(Grid.Row, { justify: "end", style: { padding: "16px" } }, /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(Button$2, { type: "primary", htmlType: "submit" }, t(`Apply`)), /* @__PURE__ */ React__default.createElement(Button$2, { onClick: () => {
+        )))), /* @__PURE__ */ React__default.createElement(Divider$2, { style: { margin: "0px" } }), /* @__PURE__ */ React__default.createElement(Grid.Row, { justify: "end", style: { padding: "16px" } }, /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(Button$2, { type: "primary", htmlType: "submit", disabled: lock }, t(`Apply`)), /* @__PURE__ */ React__default.createElement(Button$2, { onClick: () => {
           var _a;
           return (_a = ref.current) == null ? void 0 : _a.click();
-        } }, t(`Cancel`)))))
+        } }, t(`Cancel`))))))
       )
     },
     /* @__PURE__ */ React__default.createElement("span", { ref, className: classnames$1("formatButton") }, /* @__PURE__ */ React__default.createElement("span", { className: classnames$1(" iconfont icon-img") }))
@@ -27489,7 +27542,9 @@ function ImageUploader(props) {
   const [isUploading, setIsUploading] = useState(false);
   const [preview, setPreview] = useState(false);
   const [unsplashVisible, setUnsplashVisible] = useState(false);
+  const popupContainerRef = useRef(null);
   const [popupVisible, setPopupVisible] = useState(false);
+  const pinToParent = props.pinToParent;
   const onChangeMergeTag = useCallback(
     (mergetag) => {
       props.onChange(PluginManager.generateVariable(mergetag));
@@ -27659,17 +27714,11 @@ function ImageUploader(props) {
   });
   const onCloseUnsplash = useEventCallback(() => __async(this, null, function* () {
     if (dirty) {
-      yield onSave();
+      props.onChange(initialVal.current);
     }
     setUnsplashVisible(false);
     setLock(false);
   }));
-  useEffect(() => {
-    if (!unsplashVisible)
-      return;
-    const isLock = dirty;
-    setLock(isLock);
-  }, [dirty, setLock, unsplashVisible]);
   const formatMergetags = useMemo(() => {
     return getMergeTagsByType(mergetags || [], "image");
   }, [mergetags]);
@@ -27707,20 +27756,24 @@ function ImageUploader(props) {
           "div",
           {
             className: styles$2.exportFreeImage,
-            onClick: () => setUnsplashVisible(true)
+            onClick: () => {
+              setUnsplashVisible(true);
+              setLock(true);
+            }
           },
           t("Export free images")
         )) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { style: { fontSize: 16 } }, t("Attach your image here.")), /* @__PURE__ */ React__default.createElement("div", { style: { color: "#606A72", fontSize: 14 } }, t("Accepts .jpg, .jpeg, .png, and .gif file types.")))
       ));
     }
     return /* @__PURE__ */ React__default.createElement("img", { src: image2, style: { maxWidth: "100%", maxHeight: "100%" } });
-  }, [image2, isUploading, onUpload, props.value, unsplashClientId]);
+  }, [image2, isUploading, onUpload, props.value, setLock, unsplashClientId]);
   if (!props.uploadHandler) {
     return /* @__PURE__ */ React__default.createElement(Input, { value: props.value, onChange });
   }
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
+      ref: popupContainerRef,
       onClick: (e) => {
         e.stopPropagation();
         e.preventDefault();
@@ -27763,7 +27816,10 @@ function ImageUploader(props) {
         Select$1.Option,
         {
           value: "2",
-          onClick: () => setUnsplashVisible(true)
+          onClick: () => {
+            setUnsplashVisible(true);
+            setLock(true);
+          }
         },
         t("Export free images")
       )
@@ -27789,6 +27845,7 @@ function ImageUploader(props) {
           popupVisible,
           onVisibleChange: setPopupVisible,
           onChange: onChangeMergeTag,
+          getPopupContainer: pinToParent ? () => popupContainerRef.current || document.body : void 0,
           onClose,
           value: "",
           triggerElement: /* @__PURE__ */ React__default.createElement(
@@ -27810,14 +27867,6 @@ function ImageUploader(props) {
           allowClear: true
         }
       ))
-    ), /* @__PURE__ */ React__default.createElement(
-      Modal,
-      {
-        visible: preview,
-        footer: null,
-        onCancel: () => setPreview(false)
-      },
-      /* @__PURE__ */ React__default.createElement("img", { alt: "Preview", style: { width: "100%" }, src: image2 })
     )),
     /* @__PURE__ */ React__default.createElement(
       Drawer,
@@ -27883,6 +27932,20 @@ function ImageUploader(props) {
           presetList: unsplash == null ? void 0 : unsplash.presetList
         }
       )
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      Modal,
+      {
+        wrapClassName: "ImageUploaderField-preview",
+        visible: preview,
+        footer: null,
+        onCancel: () => setPreview(false),
+        getPopupContainer: () => {
+          return document.body;
+        },
+        style: { zIndex: 9999 }
+      },
+      /* @__PURE__ */ React__default.createElement("img", { alt: "Preview", style: { width: "100%" }, src: image2 })
     )
   );
 }
@@ -38808,6 +38871,7 @@ const ContextMenu = ({
     deleteSelectedColumn,
     mergeCeils
   } = useTableInteract();
+  const ele = document.getElementById("HoveringToolbar");
   return createPortal(
     /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
       "div",
@@ -38883,7 +38947,7 @@ const ContextMenu = ({
         /* @__PURE__ */ React__default.createElement("div", { className: "easy-email-pro-table-operation-menu-text" }, "Delete selected rows")
       )
     ), /* @__PURE__ */ React__default.createElement("style", null, styleText$b)),
-    document.body
+    ele || document.body
   );
 };
 const ERROR_LIMIT = 2;
@@ -38907,12 +38971,32 @@ const TableTools = (props) => {
       return;
     const handleContextmenu = (ev) => {
       ev.preventDefault();
-      setShowContextMenu(true);
       const iframeRect = iframe.getBoundingClientRect();
+      const initialLeft = ev.clientX + iframeRect.left;
+      const initialTop = ev.clientY + iframeRect.top;
+      const MENU_HEIGHT = 280;
+      const MENU_WIDTH = 220;
+      const viewportHeight = window.innerHeight;
+      const viewportWidth = window.innerWidth;
+      let adjustedLeft = initialLeft;
+      let adjustedTop = initialTop;
+      if (initialTop + MENU_HEIGHT > viewportHeight) {
+        adjustedTop = initialTop - MENU_HEIGHT;
+        if (adjustedTop < 0) {
+          adjustedTop = 8;
+        }
+      }
+      if (initialLeft + MENU_WIDTH > viewportWidth) {
+        adjustedLeft = viewportWidth - MENU_WIDTH - 8;
+      }
+      if (adjustedLeft < 0) {
+        adjustedLeft = 8;
+      }
       setPosition({
-        left: ev.clientX + iframeRect.left,
-        top: ev.clientY + iframeRect.top
+        left: adjustedLeft + 20,
+        top: adjustedTop
       });
+      setShowContextMenu(true);
     };
     props.nodeElement.addEventListener("contextmenu", handleContextmenu);
     return () => {
@@ -39383,6 +39467,35 @@ const getIsLargeScreen = () => {
   const isLargeScreen = windowSize >= 1600;
   return isLargeScreen;
 };
+const EditorContainer = ({
+  children,
+  style
+}) => {
+  const { lock } = useEditorState();
+  return /* @__PURE__ */ React__default.createElement("div", { style: __spreadProps(__spreadValues({}, style), { position: "relative" }), id: EDITOR_CONTAINER }, lock && /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(255, 255, 255, 0.3)",
+        zIndex: 10,
+        cursor: "not-allowed"
+      },
+      onPointerDown: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    }
+  ), children);
+};
 const useCreateConfig$1 = (_k) => {
   var _l = _k, {
     interactiveStyle,
@@ -39513,15 +39626,20 @@ const Layout$1 = ({ children, footer, header, tabLeft, tabRight }) => {
           },
           /* @__PURE__ */ React__default.createElement(SharedComponents.BlockSideBar, { height })
         ),
-        /* @__PURE__ */ React__default.createElement("div", { style: { height, minWidth: 800, flex: 1 } }, /* @__PURE__ */ React__default.createElement(
-          SharedComponents.EditorTabs,
+        /* @__PURE__ */ React__default.createElement(
+          EditorContainer,
           {
-            header,
-            footer,
-            left: tabLeft,
-            right: tabRight
+            style: { height, minWidth: 800, flex: 1 }
           },
-          /* @__PURE__ */ React__default.createElement(EmailEditor, null, /* @__PURE__ */ React__default.createElement("style", { id: "Retro-CSS" }, styleText$h, RetroStyleText, `
+          /* @__PURE__ */ React__default.createElement(
+            SharedComponents.EditorTabs,
+            {
+              header,
+              footer,
+              left: tabLeft,
+              right: tabRight
+            },
+            /* @__PURE__ */ React__default.createElement(EmailEditor, null, /* @__PURE__ */ React__default.createElement("style", { id: "Retro-CSS" }, styleText$h, RetroStyleText, `
                       body {
                         --page-width: ${pageDataWidth}px;
                       }
@@ -39533,7 +39651,8 @@ const Layout$1 = ({ children, footer, header, tabLeft, tabRight }) => {
                         }
 
                       `), children)
-        )),
+          )
+        ),
         showSidebar && compact && /* @__PURE__ */ React__default.createElement(
           Layout$2.Sider,
           {

package/lib/style.css

@@ -1069,6 +1069,9 @@ THEMES:
   z-index: 1;
   top: -10000px;
   left: -10000px;
+}
+
+.HoveringToolbar-list {
   padding: 3px;
   display: flex;
   align-items: center;

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

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const EditorContainer: ({ children, style, }: {
+    children: React.ReactNode;
+    style?: React.CSSProperties | undefined;
+}) => React.JSX.Element;

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

@@ -20,6 +20,7 @@ export interface ImageUploaderProps {
     enablePreview?: boolean;
     onlyPreview?: boolean;
     colSpan?: number;
+    pinToParent?: boolean;
 }
 declare function ImageUploader(props: ImageUploaderProps): React.JSX.Element;
 export declare const ImageUploaderField: (props: import("../enhancer").EnhancerProps & Omit<ImageUploaderProps, "onChange" | "value">) => React.JSX.Element;

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

@@ -0,0 +1 @@
+export declare const EDITOR_CONTAINER = "EditorContainer";

package/package.json

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