easy-email-pro-theme 1.35.0 → 1.36.0

package/lib/index.js

@@ -8739,7 +8739,9 @@ const PreviewEmail = ({
   universalElementSetting,
   values: values2,
   mergetagsData,
-  pageDataVariables
+  pageDataVariables,
+  headerElement,
+  footerElement
 }) => {
   const mjmlString = useMemo$1(() => {
     return EditorCore.toMJML({
@@ -8747,13 +8749,17 @@ const PreviewEmail = ({
       mode: "production",
       universalElements: universalElementSetting,
       mergetagsData: cloneDeep(mergetagsData),
-      attributesVariables: pageDataVariables
+      attributesVariables: pageDataVariables,
+      headerElement,
+      footerElement
     });
   }, [
-    mergetagsData,
+    values2.content,
     universalElementSetting,
+    mergetagsData,
     pageDataVariables,
-    values2.content
+    headerElement,
+    footerElement
   ]);
   const html = useMemo$1(() => {
     const skeletonHtml = mjml(mjmlString, {
@@ -8821,7 +8827,7 @@ const PreviewEmailDrawer = ({
   const { activeTab } = useEditorState();
   const [isShowSidebar, setIsShowSidebar] = React__default.useState(false);
   const { values: values2, mergetagsData, pageDataVariables } = useEditorContext();
-  const { universalElementSetting } = useEditorProps();
+  const { universalElementSetting, headerElement, footerElement } = useEditorProps();
   const subject = useMemo$1(() => {
     try {
       return PluginManager.renderWithData(values2.subject, mergetagsData || {});
@@ -8898,7 +8904,9 @@ const PreviewEmailDrawer = ({
             universalElementSetting,
             values: values2,
             mergetagsData,
-            pageDataVariables
+            pageDataVariables,
+            headerElement,
+            footerElement
           }
         ))
       ), /* @__PURE__ */ React__default.createElement(
@@ -8930,6 +8938,8 @@ const PreviewEmailDrawer = ({
     values2,
     mergetagsData,
     pageDataVariables,
+    headerElement,
+    footerElement,
     isShowSidebar
   ]);
 };
@@ -14113,6 +14123,7 @@ const getElementPageLayout = (params) => {
   const top = overlayRectHeight + relativedElementReact.height + relativedElementReact.top;
   const isBottomEnough = document.documentElement.clientHeight > top + edge;
   const isTopEnough = iframeRect.top + relativedElementReact.top - overlayRectHeight > edge;
+  const relativedElementVisible = !(relativedElementReact.top > iframeRect.height || relativedElementReact.top + relativedElementReact.height < 0);
   return {
     pageXOffset: iframeRect.left + relativedElementReact.left,
     pageYOffset: iframeRect.top + relativedElementReact.top,
@@ -14121,7 +14132,8 @@ const getElementPageLayout = (params) => {
     iframeRect,
     relativedElementReact,
     overlayRect,
-    overlayRectHeight
+    overlayRectHeight,
+    relativedElementVisible
   };
 };
 const HoveringToolbar = () => {
@@ -14181,7 +14193,7 @@ const HoveringToolbar = () => {
       document.removeEventListener("click", onClick);
     };
   }, [contentWindow, editor]);
-  useEffect(() => {
+  const setHoveringBarStyle = useEventCallback(() => {
     var _a, _b;
     if (!selectedNode)
       return;
@@ -14189,13 +14201,13 @@ const HoveringToolbar = () => {
       return;
     const follow = (hoveringToolbar == null ? void 0 : hoveringToolbar.follow) || "selection";
     try {
-      const el = ref2.current;
+      const el2 = ref2.current;
       const doc = ReactEditor.findDocumentOrShadowRoot(editor);
-      if (!contentWindow || !el || el.contains(doc.activeElement) || !selectedContentBlockNode) {
+      if (!contentWindow || !el2 || el2.contains(doc.activeElement) || !selectedContentBlockNode) {
         return;
       }
       if (isNotSelect) {
-        el.removeAttribute("style");
+        el2.removeAttribute("style");
         return;
       }
       if (follow === "container") {
@@ -14204,11 +14216,15 @@ const HoveringToolbar = () => {
           return;
         const layout = getElementPageLayout({
           editor,
-          overlayElement: el,
+          overlayElement: el2,
           relativedElement: ReactEditor.toDOMNode(editor, selectedNode)
         });
         if (!layout)
           return;
+        if (!layout.relativedElementVisible) {
+          el2.removeAttribute("style");
+          return;
+        }
         const {
           isTopEnough,
           iframeRect,
@@ -14216,16 +14232,17 @@ const HoveringToolbar = () => {
           overlayRect,
           pageYOffset
         } = layout;
-        el.style.opacity = list.length === 0 ? "0" : "1";
-        const offsetTop = isTopEnough ? pageYOffset - overlayRect.height - 30 : pageYOffset + relativedElementReact.height + 30;
-        el.style.top = `${Math.max(offsetTop, iframeRect.top - overlayRect.height)}px`;
+        el2.style.opacity = list.length === 0 ? "0" : "1";
         const sectionDomNode = ReactEditor.toDOMNode(
           editor,
           Node$1.get(editor, [0, 0])
         );
+        const overlayRectWidth = overlayRect.width || relativedElementReact.width;
         const sectionDomNodeRect = sectionDomNode.getBoundingClientRect();
-        const offsetLeft = iframeRect.left + sectionDomNodeRect.left + (sectionDomNodeRect.width - overlayRect.width) / 2;
-        el.style.left = offsetLeft + "px";
+        const offsetLeft = iframeRect.left + sectionDomNodeRect.left + (sectionDomNodeRect.width - overlayRectWidth) / 2;
+        el2.style.left = offsetLeft + "px";
+        const offsetTop = isTopEnough ? pageYOffset - overlayRect.height - 30 : pageYOffset + relativedElementReact.height + 30;
+        el2.style.top = `${Math.max(offsetTop, iframeRect.top - overlayRect.height)}px`;
       } else if (follow === "page") {
         const selectedDomNode = ReactEditor.toDOMNode(editor, selectedNode);
         if (!selectedDomNode)
@@ -14237,12 +14254,12 @@ const HoveringToolbar = () => {
         );
         if (!iframe)
           return;
-        const overlayRect = el.getBoundingClientRect();
+        const overlayRect = el2.getBoundingClientRect();
         const iframeRect = iframe.getBoundingClientRect();
-        el.style.opacity = list.length === 0 ? "0" : "1";
-        el.style.width = contentWindow2.document.body.clientWidth + "px";
-        el.style.left = iframeRect.left + "px";
-        el.style.top = `${selectedDomNodeRect.top + contentWindow2.scrollY < overlayRect.height ? iframeRect.top - overlayRect.height : iframeRect.top}px`;
+        el2.style.opacity = list.length === 0 ? "0" : "1";
+        el2.style.width = contentWindow2.document.body.clientWidth + "px";
+        el2.style.left = iframeRect.left + "px";
+        el2.style.top = `${selectedDomNodeRect.top + contentWindow2.scrollY < overlayRect.height ? iframeRect.top - overlayRect.height : iframeRect.top}px`;
       } else {
         const domSelection = contentWindow.getSelection();
         if (!domSelection)
@@ -14259,7 +14276,7 @@ const HoveringToolbar = () => {
         }
         const layout = getElementPageLayout({
           editor,
-          overlayElement: el,
+          overlayElement: el2,
           relativedElement: ReactEditor.toDOMNode(
             editor,
             selectedContentBlockNode
@@ -14274,15 +14291,52 @@ const HoveringToolbar = () => {
           overlayRect,
           pageYOffset
         } = layout;
-        el.style.opacity = list.length === 0 ? "0" : "1";
-        el.style.top = `${isTopEnough ? pageYOffset - overlayRect.height - 10 : pageYOffset + relativedElementReact.height + 10}px`;
+        el2.style.opacity = list.length === 0 ? "0" : "1";
+        el2.style.top = `${isTopEnough ? pageYOffset - overlayRect.height - 10 : pageYOffset + relativedElementReact.height + 10}px`;
         const left = iframeRect.left + rect.left + overlayRect.width;
         const offsetLeft = document.documentElement.clientWidth - left;
-        el.style.left = offsetLeft > 0 ? `${rect.left + iframeRect.left - 30}px` : `${rect.left + iframeRect.left + offsetLeft - 30}px`;
+        el2.style.left = offsetLeft > 0 ? `${rect.left + iframeRect.left - 30}px` : `${rect.left + iframeRect.left + offsetLeft - 30}px`;
       }
     } catch (error2) {
     }
   });
+  useEffect(() => {
+    setHoveringBarStyle();
+  });
+  const el = ref2.current;
+  useEffect(() => {
+    const handleScroll = debounce$2(() => {
+      setHoveringBarStyle();
+    }, 100);
+    contentWindow == null ? void 0 : contentWindow.addEventListener("scroll", handleScroll);
+    return () => {
+      contentWindow == null ? void 0 : contentWindow.removeEventListener("scroll", handleScroll);
+    };
+  }, [contentWindow, setHoveringBarStyle]);
+  useEffect(() => {
+    if (!el || !selectedNode)
+      return;
+    const follow = hoveringToolbar == null ? void 0 : hoveringToolbar.follow;
+    if (follow === "page")
+      return;
+    const selectedDomNode = ReactEditor.toDOMNode(editor, selectedNode);
+    const observer = new IntersectionObserver(
+      (entries) => {
+        var _a;
+        const isIntersecting = (_a = entries[0]) == null ? void 0 : _a.isIntersecting;
+        if (isIntersecting) {
+          el.style.removeProperty("visibility");
+        } else {
+          el.style.visibility = "hidden";
+        }
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(selectedDomNode);
+    return () => {
+      observer.unobserve(selectedDomNode);
+    };
+  }, [editor, el, hoveringToolbar == null ? void 0 : hoveringToolbar.follow, selectedNode, setHoveringBarStyle]);
   const isShowHoveringBar = selectedContentBlockNode;
   const isShowTurnInto = isShowHoveringBar && !NodeUtils.isTextListElement(selectedContentBlockNode);
   const list = useMemo$1(() => {
@@ -14334,7 +14388,7 @@ const HoveringToolbar = () => {
     return /* @__PURE__ */ React__default.createElement("div", null, content);
   }
   return createPortal(
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("div", { style: { position: "fixed", top: 0, left: 0 } }, /* @__PURE__ */ React__default.createElement(
       "div",
       {
         ref: ref2,
@@ -14348,7 +14402,7 @@ const HoveringToolbar = () => {
           --hovering-bar-icon-size: ${(hoveringToolbar == null ? void 0 : hoveringToolbar.iconSize) || 12}px;
 
         }`)
-    ),
+    )),
     document.body
   );
 };

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

@@ -1,9 +1,11 @@
 import React from "react";
 import { EmailEditorProps, EmailTemplate } from "easy-email-pro-editor";
-export declare const PreviewEmail: ({ isDesktop, universalElementSetting, values, mergetagsData, pageDataVariables, }: {
+export declare const PreviewEmail: ({ isDesktop, universalElementSetting, values, mergetagsData, pageDataVariables, headerElement, footerElement, }: {
     isDesktop: boolean;
     universalElementSetting: EmailEditorProps["universalElementSetting"];
     values: EmailTemplate;
     mergetagsData: EmailEditorProps["mergetagsData"];
     pageDataVariables: EmailEditorProps["attributesVariables"];
+    headerElement?: EmailEditorProps["headerElement"];
+    footerElement?: EmailEditorProps["footerElement"];
 }) => React.JSX.Element;

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

@@ -7,7 +7,7 @@ export declare const SharedComponents: {
     PreviewEmailDrawer: ({ children, }: {
         children: import("react").ReactNode;
     }) => import("react").JSX.Element;
-    PreviewEmail: ({ isDesktop, universalElementSetting, values, mergetagsData, pageDataVariables, }: {
+    PreviewEmail: ({ isDesktop, universalElementSetting, values, mergetagsData, pageDataVariables, headerElement, footerElement, }: {
         isDesktop: boolean;
         universalElementSetting: ({
             elements: Record<string, import("../easy-email-pro-core/lib/typings").Element>;
@@ -34,6 +34,8 @@ export declare const SharedComponents: {
         values: import("easy-email-pro-editor").BasicEmailTemplate;
         mergetagsData: Record<string, any> | undefined;
         pageDataVariables: Record<string, string | number | boolean | null | undefined> | undefined;
+        headerElement?: import("../easy-email-pro-core/lib/typings").Element | undefined;
+        footerElement?: import("../easy-email-pro-core/lib/typings").Element | undefined;
     }) => import("react").JSX.Element;
     BlockSideBar: ({ height }: import("./BlockSideBar").BlockSideBarProps) => import("react").JSX.Element;
     ConfigurationSideBar: ({ height }: import("./ConfigurationSideBar").ConfigurationSideBarProps) => import("react").JSX.Element;

package/lib/typings/utils/getElementPageLayout.d.ts

@@ -14,4 +14,5 @@ export declare const getElementPageLayout: (params: {
     relativedElementReact: DOMRect;
     overlayRect: DOMRect;
     overlayRectHeight: number;
+    relativedElementVisible: boolean;
 } | undefined;

package/package.json

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