easy-email-pro-theme 1.53.0 → 1.54.0

package/lib/index.js

@@ -516,36 +516,51 @@ const RetroStyleText = '[data-slate-block=page] {\n  min-height: 300px;\n}\n\n[d
 const withTheme$1 = (editor) => {
   const { insertBreak, normalizeNode, deleteBackward, apply: apply2, insertSoftBreak } = editor;
   editor.insertBreak = (...args) => {
-    const node = Editor.above(editor, {
-      match: NodeUtils.isTextElement
-    });
-    if (!node)
-      return;
-    insertBreak(...args);
+    try {
+      if (!editor.selection) {
+        insertBreak(...args);
+        return;
+      }
+      const node = Editor.above(editor, {
+        match: NodeUtils.isTextElement
+      });
+      if (!node)
+        return;
+      insertBreak(...args);
+    } catch (error2) {
+      insertBreak(...args);
+    }
   };
   editor.insertSoftBreak = () => {
   };
   editor.deleteBackward = (unit) => {
-    const contentElementEntry = Editor.above(editor, {
-      match: NodeUtils.isContentElement
-    });
-    if (contentElementEntry && editor.selection) {
-      const elementLength = contentElementEntry[1].length;
-      const childPath = editor.selection.anchor.path.filter(
-        (_, index2) => index2 > elementLength - 1
-      );
-      const isCollapsed = Boolean(
-        editor.selection && (Range.isCollapsed(editor.selection) || Editor.string(editor, editor.selection) === "")
-      );
-      const isFirstNode = childPath.every((item2) => item2 === 0);
-      if (isCollapsed && editor.selection.anchor.offset === 0 && editor.selection.focus.offset === 0 && isFirstNode) {
-        if (editor.selection && Editor.string(editor, editor.selection) === Editor.string(editor, contentElementEntry[1])) {
-          editor.unwrapNodes({
-            match: NodeUtils.isHTMLBlockNodeElement
-          });
-        }
+    try {
+      if (!editor.selection) {
+        deleteBackward(unit);
         return;
       }
+      const contentElementEntry = Editor.above(editor, {
+        match: NodeUtils.isContentElement
+      });
+      if (contentElementEntry && editor.selection) {
+        const elementLength = contentElementEntry[1].length;
+        const childPath = editor.selection.anchor.path.filter(
+          (_, index2) => index2 > elementLength - 1
+        );
+        const isCollapsed = Boolean(
+          editor.selection && (Range.isCollapsed(editor.selection) || Editor.string(editor, editor.selection) === "")
+        );
+        const isFirstNode = childPath.every((item2) => item2 === 0);
+        if (isCollapsed && editor.selection.anchor.offset === 0 && editor.selection.focus.offset === 0 && isFirstNode) {
+          if (editor.selection && Editor.string(editor, editor.selection) === Editor.string(editor, contentElementEntry[1])) {
+            editor.unwrapNodes({
+              match: NodeUtils.isHTMLBlockNodeElement
+            });
+          }
+          return;
+        }
+      }
+    } catch (error2) {
     }
     deleteBackward(unit);
   };
@@ -906,6 +921,11 @@ const DraggingProvider = ({
             removeSelectedStyle();
             return;
           }
+          const disableDragElement = NodeUtils.isPageHeaderElement(dropElement) || NodeUtils.isPageFooterElement(dropElement);
+          if (disableDragElement) {
+            removeSelectedStyle();
+            return;
+          }
           let dropPath = ReactEditor.findPath(editor, dropElement);
           let source = null;
           if ((propsData == null ? void 0 : propsData.action) === "move") {
@@ -1817,6 +1837,9 @@ const useCopyBlock = () => {
       if (lock)
         return;
       const block = Node.get(editor, path2);
+      if (NodeUtils.isPageHeaderElement(block) || NodeUtils.isPageFooterElement(block)) {
+        return;
+      }
       const next = Path.next(path2);
       const newBlock = assignIdsToElementTree(block, true);
       Transforms.insertNodes(editor, newBlock, {
@@ -1887,6 +1910,10 @@ const useDeleteBlock = () => {
     (path2) => {
       if (lock)
         return;
+      const element = Node.get(editor, path2);
+      if (NodeUtils.isPageHeaderElement(element) || NodeUtils.isPageFooterElement(element)) {
+        return;
+      }
       try {
         const [entry] = Editor.nodes(editor, {
           match(node, currentPath) {
@@ -2292,6 +2319,7 @@ const ElementTools$1 = ({ element, nodeElement, path: path2 }) => {
     isHideBackIcon = true;
   }
   const hideAddToCollection = universalElementEditing || standaloneElementEditing || !universalElementSetting;
+  const hideInnerTools = NodeUtils.isPageHeaderElement(element) || NodeUtils.isPageFooterElement(element);
   const renderContent = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     "div",
     {
@@ -2320,7 +2348,7 @@ const ElementTools$1 = ({ element, nodeElement, path: path2 }) => {
       },
       /* @__PURE__ */ React__default.createElement(
         "div",
-        __spreadProps(__spreadValues({}, isEditingUniversalElement || isEditingStandaloneElement ? {} : dragHandle), {
+        __spreadProps(__spreadValues({}, isEditingUniversalElement || isEditingStandaloneElement || hideInnerTools ? {} : dragHandle), {
           style: {
             cursor: isEditingUniversalElement || isEditingStandaloneElement ? "default" : "grab",
             display: "flex"
@@ -2335,7 +2363,7 @@ const ElementTools$1 = ({ element, nodeElement, path: path2 }) => {
         ),
         BlockManager.getBlockTitle(element)
       ),
-      ElementToolsInner ? /* @__PURE__ */ React__default.createElement(
+      !hideInnerTools && (ElementToolsInner ? /* @__PURE__ */ React__default.createElement(
         ElementToolsInner,
         {
           element,
@@ -2349,9 +2377,30 @@ const ElementTools$1 = ({ element, nodeElement, path: path2 }) => {
           onPointerDown: onSelectParent
         },
         /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-back-parent" })
-      ), !isEditingUniversalElement && !isEditingStandaloneElement && /* @__PURE__ */ React__default.createElement("div", { className: "element-tools-item", onPointerDown: onCopy }, /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-copy" })), !hideAddToCollection && /* @__PURE__ */ React__default.createElement("div", { className: "element-tools-item", onPointerDown: openModal }, /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-collection" })), !isEditingUniversalElement && !isEditingStandaloneElement && /* @__PURE__ */ React__default.createElement("div", { className: "element-tools-item", onPointerDown: onDelete }, /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-delete" })))
+      ), !isEditingUniversalElement && !isEditingStandaloneElement && /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: "element-tools-item",
+          onPointerDown: onCopy
+        },
+        /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-copy" })
+      ), !hideAddToCollection && /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: "element-tools-item",
+          onPointerDown: openModal
+        },
+        /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-collection" })
+      ), !isEditingUniversalElement && !isEditingStandaloneElement && /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: "element-tools-item",
+          onPointerDown: onDelete
+        },
+        /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-delete" })
+      )))
     ),
-    showDragMoveIcon && !isEditingUniversalElement && !isEditingStandaloneElement && /* @__PURE__ */ React__default.createElement("div", __spreadValues({ className: "element-tools-move-handle" }, dragHandleV2), /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-move" }))
+    showDragMoveIcon && !hideInnerTools && !isEditingUniversalElement && !isEditingStandaloneElement && /* @__PURE__ */ React__default.createElement("div", __spreadValues({ className: "element-tools-move-handle" }, dragHandleV2), /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-move" }))
   ), /* @__PURE__ */ React__default.createElement("div", { className: "element-dragover" }), /* @__PURE__ */ React__default.createElement("style", null, styleText$g));
   return /* @__PURE__ */ React__default.createElement("div", null, renderContent);
 };
@@ -2366,6 +2415,9 @@ const ElementHover$1 = ({
     return null;
   if (NodeUtils.isUnsetElement(element))
     return null;
+  if ((NodeUtils.isPageHeaderElement(element) || NodeUtils.isPageFooterElement(element)) && !element.data.editable) {
+    return null;
+  }
   const renderContent = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(ElementTools$1, { element, nodeElement, path: path2 }), /* @__PURE__ */ React__default.createElement("style", null, styleText$f));
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, renderContent);
 };
@@ -2373,6 +2425,9 @@ const styleText$e = "[data-slate-selected=true] .element-tools-container,\n[data
 const ElementSelected = ({ element, nodeElement, path: path2 }) => {
   if (NodeUtils.isUnsetElement(element))
     return null;
+  if ((NodeUtils.isPageHeaderElement(element) || NodeUtils.isPageFooterElement(element)) && !element.data.editable) {
+    return null;
+  }
   const renderContent = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(ElementTools$1, { element, nodeElement, path: path2 }), /* @__PURE__ */ React__default.createElement("style", null, styleText$e));
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, renderContent);
 };
@@ -7536,6 +7591,21 @@ const BlockLayer = () => {
       handleCollapseToggle(defaultCollapsedAll);
     }
   }, [defaultCollapsedAll, handleCollapseToggle]);
+  const filterItems = useMemo(() => {
+    return pageElement.children.filter((child) => {
+      return !(NodeUtils.isPageHeaderElement(child) || NodeUtils.isPageFooterElement(child));
+    });
+  }, [pageElement.children]);
+  const pageHeaderElement = useMemo(() => {
+    return pageElement.children.find(
+      (child) => NodeUtils.isPageHeaderElement(child)
+    );
+  }, [pageElement.children]);
+  const pageFooterElement = useMemo(() => {
+    return pageElement.children.find(
+      (child) => NodeUtils.isPageFooterElement(child)
+    );
+  }, [pageElement.children]);
   if (!inited)
     return null;
   return /* @__PURE__ */ React__default.createElement("div", { onMouseOut: (e) => e.stopPropagation() }, /* @__PURE__ */ React__default.createElement(
@@ -7557,15 +7627,113 @@ const BlockLayer = () => {
         style: { marginRight: 12 }
       }
     ), /* @__PURE__ */ React__default.createElement(Typography$1.Text, { style: { fontSize: 14, color: "#333" } }, t("Collapse All")))
-  ), /* @__PURE__ */ React__default.createElement(
+  ), pageHeaderElement && /* @__PURE__ */ React__default.createElement(HeaderFooterItem, { element: pageHeaderElement }), filterItems.length > 0 && /* @__PURE__ */ React__default.createElement(
     ElementList,
     {
-      blocks: pageElement.children,
+      blocks: filterItems,
       collapsedItems,
       onToggleCollapse: toggleItemCollapse
     }
-  ));
+  ), pageFooterElement && /* @__PURE__ */ React__default.createElement(HeaderFooterItem, { element: pageFooterElement }));
 };
+function HeaderFooterItem({ element }) {
+  const { setSelectedNodePath, setHoverNodePath } = useEditorActions();
+  const { hoverNodePath, selectedNodePath } = useEditorState();
+  const editor = useSlateStatic();
+  const path2 = useMemo(() => {
+    try {
+      return ReactEditor.findPath(editor, element);
+    } catch (error2) {
+      return null;
+    }
+  }, [element, editor]);
+  const onClick = () => {
+    if (!path2)
+      return;
+    setSelectedNodePath(path2);
+  };
+  const label = BlockManager.getBlockTitle(element);
+  const isHovered = useMemo(() => {
+    if (!path2 || !hoverNodePath)
+      return false;
+    return Path.equals(path2, hoverNodePath);
+  }, [path2, hoverNodePath]);
+  const isSelected = useMemo(() => {
+    if (!path2 || !selectedNodePath)
+      return false;
+    return Path.equals(path2, selectedNodePath);
+  }, [path2, selectedNodePath]);
+  const handleMouseEnter = () => {
+    if (path2) {
+      setHoverNodePath(path2);
+    }
+  };
+  const handleMouseLeave = () => {
+    setHoverNodePath(null);
+  };
+  const getBackgroundColor = () => {
+    if (isSelected) {
+      return "rgba(var(--primary-6), 0.15)";
+    }
+    if (isHovered) {
+      return "#e8e8e8";
+    }
+    return "#f5f5f5";
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: styles$4.item,
+      onClick,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      style: {
+        backgroundColor: getBackgroundColor(),
+        marginTop: "8px",
+        marginBottom: "8px",
+        borderRadius: "4px",
+        borderLeft: isSelected ? "3px solid var(--primary-6)" : "none",
+        transition: "background-color 0.2s"
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: styles$4.itemContent,
+        style: {
+          backgroundColor: "transparent",
+          padding: "8px 10px"
+        }
+      },
+      /* @__PURE__ */ React__default.createElement("div", { className: styles$4.itemTitle }, /* @__PURE__ */ React__default.createElement("div", { className: styles$4.itemLabelWrapper }, /* @__PURE__ */ React__default.createElement(
+        SharedComponents.ElementIcon,
+        {
+          type: element.type,
+          width: 16,
+          height: 16
+        }
+      ), /* @__PURE__ */ React__default.createElement("div", { className: styles$4.itemLabel }, label))),
+      /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: styles$4.itemActions,
+          style: { opacity: 1 },
+          onClick: (e) => e.stopPropagation()
+        },
+        /* @__PURE__ */ React__default.createElement("div", { className: styles$4.action }, /* @__PURE__ */ React__default.createElement(
+          "svg",
+          {
+            viewBox: "0 0 1024 1024",
+            width: "16",
+            height: "16",
+            fill: "currentColor"
+          },
+          /* @__PURE__ */ React__default.createElement("path", { d: "M716.8 512L332.8 128c-12.8-12.8-12.8-32 0-44.8s32-12.8 44.8 0l409.6 409.6c12.8 12.8 12.8 32 0 44.8L377.6 940.8c-12.8 12.8-32 12.8-44.8 0s-12.8-32 0-44.8L716.8 512z" })
+        ))
+      )
+    )
+  );
+}
 const BlockSideBar = ({ height }) => {
   const { setSelectedNodePath } = useEditorActions();
   const selectedNodePath = useSelectedNodePath();
@@ -8127,7 +8295,7 @@ const Controller = () => {
         position: "fixed",
         bottom: offset.bottom,
         left: offset.left,
-        zIndex: 11,
+        zIndex: 1,
         cursor: "grab"
       }
     },
@@ -14481,41 +14649,62 @@ 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 { selection } = editor;
-  const nodePath = selectedNode && (selection == null ? void 0 : selection.anchor.path) ? selection.anchor.path : null;
+  const { lock } = useEditorState();
+  const selection = editor.selection;
+  const nodePath = selectedNode && (selection == null ? void 0 : selection.anchor.path) && Node.has(editor, selection.anchor.path) ? selection.anchor.path : null;
   const isTable2 = selectedNode && NodeUtils.isTable2Element(selectedNode);
-  const contentElements = Array.from(
-    Editor.nodes(editor, {
-      match: (node) => isTable2 ? NodeUtils.isTable2TdElement(node) : NodeUtils.isContentElement(node)
-    })
-  );
+  let contentElements = [];
+  try {
+    contentElements = Array.from(
+      Editor.nodes(editor, {
+        match: (node) => isTable2 ? NodeUtils.isTable2TdElement(node) : NodeUtils.isContentElement(node)
+      })
+    );
+  } catch (error2) {
+  }
   let selectedContentBlockNodeEntry = null;
-  const mergetagNodeEntry = nodePath ? Editor.above(editor, {
-    at: nodePath,
-    match: NodeUtils.isMergetagElement
-  }) : null;
-  const htmlNodeImgEntry = nodePath ? Editor.above(editor, {
-    at: nodePath,
-    match: (node) => NodeUtils.isHTMLNodeElement(node) && node.data.tagName === "img"
-  }) : null;
+  let mergetagNodeEntry = null;
+  if (nodePath) {
+    try {
+      mergetagNodeEntry = Editor.above(editor, {
+        at: nodePath,
+        match: NodeUtils.isMergetagElement
+      });
+    } catch (error2) {
+    }
+  }
+  let htmlNodeImgEntry = null;
+  if (nodePath) {
+    try {
+      htmlNodeImgEntry = Editor.above(editor, {
+        at: nodePath,
+        match: (node) => NodeUtils.isHTMLNodeElement(node) && node.data.tagName === "img"
+      });
+    } catch (error2) {
+    }
+  }
   const mergetagNode = mergetagNodeEntry == null ? void 0 : mergetagNodeEntry[0];
   const isMergeTagSelected = Boolean(mergetagNode);
   if (nodePath) {
-    selectedContentBlockNodeEntry = Editor.above(editor, {
-      at: nodePath,
-      match: NodeUtils.isTextElement
-    });
-    if (!selectedContentBlockNodeEntry) {
-      const entry = Editor.node(editor, nodePath);
-      if (NodeUtils.isTextElement(entry[0])) {
-        selectedContentBlockNodeEntry = entry;
+    try {
+      selectedContentBlockNodeEntry = Editor.above(editor, {
+        at: nodePath,
+        match: NodeUtils.isTextElement
+      });
+      if (!selectedContentBlockNodeEntry) {
+        const entry = Editor.node(editor, nodePath);
+        if (NodeUtils.isTextElement(entry[0])) {
+          selectedContentBlockNodeEntry = entry;
+        }
       }
+    } catch (error2) {
     }
   }
   let contentWindow = null;
@@ -14525,9 +14714,13 @@ const HoveringToolbar = () => {
   }
   const selectedContentBlockNode = selectedContentBlockNodeEntry == null ? void 0 : selectedContentBlockNodeEntry[0];
   const isNotSelect = !selection;
-  const isCollapsed = Boolean(
-    selection && (Range.isCollapsed(selection) || Editor.string(editor, selection) === "")
-  );
+  let isCollapsed = true;
+  if (selection) {
+    try {
+      isCollapsed = Range.isCollapsed(selection) || Editor.string(editor, selection) === "";
+    } catch (error2) {
+    }
+  }
   useEffect(() => {
     if (!contentWindow)
       return;
@@ -14549,7 +14742,7 @@ const HoveringToolbar = () => {
     };
   }, [contentWindow, editor]);
   const setHoveringBarStyle = useEventCallback(() => {
-    var _a, _b;
+    var _a;
     if (!selectedNode)
       return;
     if (hoveringToolbar == null ? void 0 : hoveringToolbar.fixed)
@@ -14588,9 +14781,12 @@ const HoveringToolbar = () => {
           pageYOffset
         } = layout;
         el2.style.opacity = list.length === 0 ? "0" : "1";
+        const sectionPath = [0, 0];
+        if (!Node.has(editor, sectionPath))
+          return;
         const sectionDomNode = ReactEditor.toDOMNode(
           editor,
-          Node.get(editor, [0, 0])
+          Node.get(editor, sectionPath)
         );
         const overlayRectWidth = overlayRect.width || relativedElementReact.width;
         const sectionDomNodeRect = sectionDomNode.getBoundingClientRect();
@@ -14621,8 +14817,8 @@ const HoveringToolbar = () => {
           return;
         const domRange = domSelection.getRangeAt(0);
         let rect = domRange.getBoundingClientRect();
-        if (rect.top === 0 && rect.left === 0 && ((_a = editor.selection) == null ? void 0 : _a.anchor.path)) {
-          const textNode = Node.get(editor, (_b = editor.selection) == null ? void 0 : _b.anchor.path);
+        if (rect.top === 0 && rect.left === 0 && ((_a = editor.selection) == null ? void 0 : _a.anchor.path) && Node.has(editor, editor.selection.anchor.path)) {
+          const textNode = Node.get(editor, editor.selection.anchor.path);
           const rangeNode = ReactEditor.toDOMNode(editor, textNode);
           const rang = document.createRange();
           rang.selectNode(rangeNode);
@@ -14742,23 +14938,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) {
@@ -14852,21 +15071,40 @@ function ColorPickerContent(props) {
 }
 const BgColor = () => {
   const editor = useSlate();
-  let [nodeEntry] = Editor.nodes(editor, {
-    match: (node) => {
-      return Text$2.isText(node);
-    },
-    mode: "lowest",
-    voids: true
-  });
+  const { getPopupContainer } = useContext(RichTextBarContext);
+  let nodeEntry = null;
+  try {
+    if (editor.selection && Node.has(editor, editor.selection.anchor.path)) {
+      const nodes = Editor.nodes(editor, {
+        match: (node) => {
+          return Text$2.isText(node);
+        },
+        mode: "lowest",
+        voids: true
+      });
+      const first = nodes.next().value;
+      if (first) {
+        nodeEntry = first;
+      }
+    }
+  } catch (error2) {
+  }
   if (!nodeEntry) {
-    const [mergetagNodeEntry] = Editor.nodes(editor, {
-      match: (node) => {
-        return NodeUtils.isMergetagElement(node);
-      },
-      mode: "lowest"
-    });
-    nodeEntry = mergetagNodeEntry;
+    try {
+      if (editor.selection && Node.has(editor, editor.selection.anchor.path)) {
+        const nodes = Editor.nodes(editor, {
+          match: (node) => {
+            return NodeUtils.isMergetagElement(node);
+          },
+          mode: "lowest"
+        });
+        const first = nodes.next().value;
+        if (first) {
+          nodeEntry = first;
+        }
+      }
+    } catch (error2) {
+    }
   }
   const { setFieldValue } = useEditorContext();
   const activeTab = useActiveTab();
@@ -14933,6 +15171,9 @@ const BgColor = () => {
           popupStyle: { padding: "10px" }
         },
         getPopupContainer: (node) => {
+          if (getPopupContainer) {
+            return getPopupContainer(node);
+          }
           return Array.from(document.querySelectorAll(".RichTextBar")).find(
             (item2) => item2.contains(node)
           );
@@ -14972,25 +15213,38 @@ const BgColor = () => {
         "A"
       )))
     );
-  }, [color2, onChange, onClose, textNode == null ? void 0 : textNode.color]);
+  }, [color2, getPopupContainer, onChange, onClose, textNode == null ? void 0 : textNode.color]);
 };
 const FontColor = () => {
+  const { getPopupContainer } = useContext(RichTextBarContext);
   const editor = useSlate();
-  let [nodeEntry] = Editor.nodes(editor, {
-    match: (node) => {
-      return Text$2.isText(node);
-    },
-    mode: "lowest",
-    voids: true
-  });
+  let nodeEntry = null;
+  try {
+    if (editor.selection && Node.has(editor, editor.selection.anchor.path)) {
+      const [entry] = Editor.nodes(editor, {
+        match: (node) => {
+          return Text$2.isText(node);
+        },
+        mode: "lowest",
+        voids: true
+      });
+      nodeEntry = entry;
+    }
+  } catch (error2) {
+  }
   if (!nodeEntry) {
-    const [mergetagNodeEntry] = Editor.nodes(editor, {
-      match: (node) => {
-        return NodeUtils.isMergetagElement(node);
-      },
-      mode: "lowest"
-    });
-    nodeEntry = mergetagNodeEntry;
+    try {
+      if (editor.selection && Node.has(editor, editor.selection.anchor.path)) {
+        const [mergetagNodeEntry] = Editor.nodes(editor, {
+          match: (node) => {
+            return NodeUtils.isMergetagElement(node);
+          },
+          mode: "lowest"
+        });
+        nodeEntry = mergetagNodeEntry;
+      }
+    } catch (error2) {
+    }
   }
   const { setFieldValue } = useEditorContext();
   const activeTab = useActiveTab();
@@ -15052,6 +15306,9 @@ const FontColor = () => {
         popupStyle: { padding: "10px" }
       },
       getPopupContainer: (node) => {
+        if (getPopupContainer) {
+          return getPopupContainer(node);
+        }
         return Array.from(document.querySelectorAll(".RichTextBar")).find(
           (item2) => item2.contains(node)
         );
@@ -15105,7 +15362,44 @@ const FormatButton = (_a) => {
   ]);
   const { setFieldValue, getFieldValue } = useEditorContext();
   const editor = useSlate();
-  const active = rest.active || format && isFormatActive(editor, format);
+  const contentNodeEntry = useMemo(() => {
+    var _a2, _b2;
+    return editor.selection ? editor.findSelfOrAncestorNodeByCategory({
+      category: ElementCategory.TEXT,
+      path: (_a2 = editor.selection) == null ? void 0 : _a2.anchor.path
+    }) || editor.findSelfOrAncestorNodeByType({
+      type: ElementType.STANDARD_TABLE2,
+      path: (_b2 = editor.selection) == null ? void 0 : _b2.anchor.path
+    }) : null;
+  }, [editor, editor.selection]);
+  const active = useMemo(() => {
+    if (rest.active)
+      return true;
+    if (!format)
+      return false;
+    if (isFormatActive(editor, format))
+      return true;
+    if (contentNodeEntry) {
+      const node = contentNodeEntry[0];
+      if (format === TextFormat.BOLD) {
+        const val = get(node, "attributes.font-weight");
+        return val === "bold" || parseInt(val) > 500;
+      }
+      if (format === TextFormat.ITALIC) {
+        const val = get(node, "attributes.font-style");
+        return val === "italic";
+      }
+      if (format === TextFormat.UNDERLINE) {
+        const val = get(node, "attributes.text-decoration");
+        return val === "underline" || typeof val === "string" && val.includes("underline");
+      }
+      if (format === TextFormat.STRIKETHROUGH) {
+        const val = get(node, "attributes.text-decoration");
+        return val === "line-through" || typeof val === "string" && val.includes("line-through");
+      }
+    }
+    return false;
+  }, [rest.active, format, editor, contentNodeEntry]);
   const onClick = () => {
     var _a2, _b2, _c;
     if (onClickHandle) {
@@ -15118,16 +15412,16 @@ const FormatButton = (_a) => {
       type: ElementType.MERGETAG,
       path: (_a2 = editor.selection) == null ? void 0 : _a2.anchor.path
     }) : null;
-    const contentNodeEntry = editor.selection ? editor.findSelfOrAncestorNodeByCategory({
+    const contentNodeEntry2 = editor.selection ? editor.findSelfOrAncestorNodeByCategory({
       category: ElementCategory.TEXT,
       path: (_b2 = editor.selection) == null ? void 0 : _b2.anchor.path
     }) || editor.findSelfOrAncestorNodeByType({
       type: ElementType.STANDARD_TABLE2,
       path: (_c = editor.selection) == null ? void 0 : _c.anchor.path
     }) : null;
-    if (!contentNodeEntry)
+    if (!contentNodeEntry2)
       return;
-    const contentNodePath = contentNodeEntry[1];
+    const contentNodePath = contentNodeEntry2[1];
     const selection = editor.selection;
     const isCollapsed = Boolean(
       selection && (Range.isCollapsed(selection) || Editor.string(editor, selection) === "") && !mergeNodeEntry
@@ -15201,14 +15495,18 @@ const FormatButton = (_a) => {
   ));
 };
 const getLinkNode = (editor) => {
-  const [match] = Editor.nodes(editor, {
-    match: (n) => {
-      return Text$2.isText(n) && Boolean(n[TextFormat.LINK]);
-    },
-    mode: "lowest",
-    voids: true
-  });
-  return match;
+  try {
+    const [match] = Editor.nodes(editor, {
+      match: (n) => {
+        return Text$2.isText(n) && Boolean(n[TextFormat.LINK]);
+      },
+      mode: "lowest",
+      voids: true
+    });
+    return match;
+  } catch (error2) {
+    return void 0;
+  }
 };
 class Uploader {
   constructor(uploadServer, options2) {
@@ -15664,7 +15962,6 @@ function isValidHttpUrl(str) {
 const TextLink = () => {
   const editor = useSlate();
   const linkNodeEntry = getLinkNode(editor);
-  console.log(linkNodeEntry);
   const ref = useRef(null);
   const linkNode = linkNodeEntry == null ? void 0 : linkNodeEntry[0];
   const selectedNodePath = useSelectedNodePath();
@@ -15960,9 +16257,15 @@ const options$9 = [
 ];
 const TurnInto = () => {
   const editor = useSlate();
-  const nodeEntry = Editor.above(editor, {
-    match: NodeUtils.isBlockElement
-  });
+  let nodeEntry = null;
+  try {
+    if (editor.selection && Node.has(editor, editor.selection.anchor.path)) {
+      nodeEntry = Editor.above(editor, {
+        match: NodeUtils.isBlockElement
+      });
+    }
+  } catch (error2) {
+  }
   const node = nodeEntry == null ? void 0 : nodeEntry[0];
   const onChange = (value) => {
     var _a;
@@ -16062,26 +16365,46 @@ function styleStringToObject(styleString) {
 const TextAlign$1 = () => {
   var _a, _b;
   const editor = useSlate();
-  const [match] = Editor.nodes(editor, {
-    match: (n) => NodeUtils.isContentElement(n),
-    mode: "all"
-  });
-  const [matchHtmlBlockNode] = Editor.nodes(editor, {
-    match: (node2) => {
-      return NodeUtils.isHTMLBlockNodeElement(node2);
-    },
-    mode: "lowest"
-  });
+  let match = null;
+  try {
+    if (editor.selection && Node.has(editor, editor.selection.anchor.path)) {
+      const nodes = Editor.nodes(editor, {
+        match: (n) => NodeUtils.isContentElement(n),
+        mode: "all"
+      });
+      const first = nodes.next().value;
+      if (first) {
+        match = first;
+      }
+    }
+  } catch (error2) {
+  }
+  let matchHtmlBlockNode = null;
+  try {
+    if (editor.selection && Node.has(editor, editor.selection.anchor.path)) {
+      const nodes = Editor.nodes(editor, {
+        match: (node2) => {
+          return NodeUtils.isHTMLBlockNodeElement(node2);
+        },
+        mode: "lowest"
+      });
+      const first = nodes.next().value;
+      if (first) {
+        matchHtmlBlockNode = first;
+      }
+    }
+  } catch (error2) {
+  }
   const { enabledHtmlBlockNodeAlign } = useEditorProps();
-  const node = match == null ? void 0 : match[0];
   const { setFieldValue } = useEditorContext();
+  const node = match == null ? void 0 : match[0];
   let styleObject;
   if (matchHtmlBlockNode == null ? void 0 : matchHtmlBlockNode[0]) {
     styleObject = styleStringToObject(
       ((_b = (_a = matchHtmlBlockNode == null ? void 0 : matchHtmlBlockNode[0]) == null ? void 0 : _a.attributes) == null ? void 0 : _b.style) || ""
     );
   }
-  const matchAlign = get(styleObject, "text-align") || get(node.attributes, "align");
+  const matchAlign = get(styleObject, "text-align") || ((node == null ? void 0 : node.attributes) ? get(node.attributes, "align") : void 0);
   const onAlignHandle = (align) => {
     var _a2;
     if (!match)
@@ -16184,22 +16507,41 @@ const FontSize$2 = () => {
   const { fontSizeList } = useEditorProps();
   const [fontSizeValue, setFontSizeValue] = useState();
   const { setFieldValue } = useEditorContext();
-  const editor = useSlate();
-  let [nodeEntry] = Editor.nodes(editor, {
-    match: (node) => {
-      return Text$2.isText(node);
-    },
-    mode: "lowest",
-    voids: true
+  const { selectedNode } = useSelectedNode();
+  const elementDefault = useElementDefault({
+    path: null,
+    type: (selectedNode == null ? void 0 : selectedNode.type) || null
   });
+  const editor = useSlate();
+  let nodeEntry = null;
+  try {
+    const selection = editor.selection;
+    if (selection && Range.isCollapsed(selection) && Node.has(editor, selection.anchor.path)) {
+      const entries = Editor.nodes(editor, {
+        match: (node) => Text$2.isText(node),
+        mode: "lowest",
+        voids: true
+      });
+      const first = entries.next().value;
+      if (first)
+        nodeEntry = first;
+    }
+  } catch (error2) {
+  }
   if (!nodeEntry) {
-    const [mergetagNodeEntry] = Editor.nodes(editor, {
-      match: (node) => {
-        return NodeUtils.isMergetagElement(node);
-      },
-      mode: "lowest"
-    });
-    nodeEntry = mergetagNodeEntry;
+    try {
+      const selection = editor.selection;
+      if (selection && Range.isCollapsed(selection) && Node.has(editor, selection.anchor.path)) {
+        const entries = Editor.nodes(editor, {
+          match: (node) => NodeUtils.isMergetagElement(node),
+          mode: "lowest"
+        });
+        const first = entries.next().value;
+        if (first)
+          nodeEntry = first;
+      }
+    } catch (error2) {
+    }
   }
   const textNode = nodeEntry == null ? void 0 : nodeEntry[0];
   useEffect(() => {
@@ -16211,6 +16553,9 @@ const FontSize$2 = () => {
       } catch (error2) {
       }
     }
+    if (!fontSizeValue2) {
+      fontSizeValue2 = get(elementDefault.attributes, "font-size");
+    }
     setFontSizeValue(fontSizeValue2);
   }, [editor, textNode, textNode == null ? void 0 : textNode.fontSize]);
   const optionsList = useMemo(() => {
@@ -16284,13 +16629,27 @@ const FontFamily$2 = () => {
   const editor = useSlate();
   const { setFieldValue } = useEditorContext();
   const [fontFamilyValue, setFontFamilyValue] = useState();
-  const [nodeEntry] = Editor.nodes(editor, {
-    match: (node) => {
-      return Text$2.isText(node);
-    },
-    voids: true,
-    mode: "lowest"
+  const { selectedNode } = useSelectedNode();
+  const elementDefault = useElementDefault({
+    path: null,
+    type: (selectedNode == null ? void 0 : selectedNode.type) || null
   });
+  let nodeEntry = null;
+  try {
+    const selection = editor.selection;
+    if (selection && Range.isCollapsed(selection) && Node.has(editor, selection.anchor.path)) {
+      const entries = Editor.nodes(editor, {
+        match: (node) => Text$2.isText(node),
+        voids: true,
+        mode: "lowest"
+      });
+      const first = entries.next().value;
+      if (first)
+        nodeEntry = first;
+    }
+  } catch (error2) {
+    console.warn("FontFamily: failed to get nodes safely", error2);
+  }
   const textNode = nodeEntry == null ? void 0 : nodeEntry[0];
   useEffect(() => {
     var _a;
@@ -16302,8 +16661,11 @@ const FontFamily$2 = () => {
       } catch (error2) {
       }
     }
+    if (!fontFamilyValue2) {
+      fontFamilyValue2 = get(elementDefault.attributes, "font-family");
+    }
     setFontFamilyValue(fontFamilyValue2);
-  }, [editor, textNode, textNode == null ? void 0 : textNode.fontFamily]);
+  }, [editor, textNode, textNode == null ? void 0 : textNode.fontFamily, elementDefault.attributes]);
   const optionsList = useMemo(() => {
     const list = [...fontList];
     if (fontFamilyValue) {
@@ -16376,20 +16738,28 @@ const List = () => {
   const onToggleList = (format) => {
     if (!editor.selection)
       return;
-    const elementEntry = Editor.above(editor, {
-      match(node, path2) {
-        return NodeUtils.isBlockElement(node);
-      },
-      mode: "lowest"
-    });
+    let elementEntry = null;
+    try {
+      elementEntry = Editor.above(editor, {
+        match(node, path2) {
+          return NodeUtils.isBlockElement(node);
+        },
+        mode: "lowest"
+      });
+    } catch (error2) {
+    }
     if (!elementEntry)
       return;
-    const htmlBlockNodeElementEntry = Editor.above(editor, {
-      match(node, path2) {
-        return NodeUtils.isHTMLBlockNodeElement(node);
-      },
-      mode: "lowest"
-    });
+    let htmlBlockNodeElementEntry = null;
+    try {
+      htmlBlockNodeElementEntry = Editor.above(editor, {
+        match(node, path2) {
+          return NodeUtils.isHTMLBlockNodeElement(node);
+        },
+        mode: "lowest"
+      });
+    } catch (error2) {
+    }
     if (!htmlBlockNodeElementEntry) {
       Transforms.wrapNodes(
         editor,
@@ -16407,12 +16777,16 @@ const List = () => {
         }
       );
     }
-    const [match] = Array.from(
-      Editor.nodes(editor, {
-        at: Editor.unhangRange(editor, editor.selection),
-        match: (n) => !Editor.isEditor(n) && NodeUtils.isHTMLBlockNodeElement(n) && n.data.tagName === format
-      })
-    );
+    let match = null;
+    try {
+      [match] = Array.from(
+        Editor.nodes(editor, {
+          at: Editor.unhangRange(editor, editor.selection),
+          match: (n) => !Editor.isEditor(n) && NodeUtils.isHTMLBlockNodeElement(n) && n.data.tagName === format
+        })
+      );
+    } catch (error2) {
+    }
     const isActive = !!match;
     Transforms.unwrapNodes(editor, {
       match: (n) => NodeUtils.isHTMLBlockNodeElement(n) && LIST_TYPES.includes(n.data.tagName),
@@ -16454,9 +16828,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 +16871,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 +16882,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,32 +16957,51 @@ 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") }))
   );
 };
+const RichTextBarContext = React__default.createContext({});
 const RichTextBar = ({
-  list
+  list,
+  wrap: wrap2,
+  getPopupContainer
 }) => {
+  const contextValue = useMemo(
+    () => ({ getPopupContainer }),
+    [getPopupContainer]
+  );
   const { MergetagPopover: MergetagPopover2, mergetags, AIAssistant: AIAssistant2 } = useEditorProps();
   const { selectedNode } = useSelectedNode();
   const editor = useSlate();
   const { selection } = editor;
-  const nodePath = selectedNode && (selection == null ? void 0 : selection.anchor.path) ? selection.anchor.path : null;
-  const mergetagNodeEntry = nodePath ? Editor.above(editor, {
-    at: nodePath,
-    match: NodeUtils.isMergetagElement
-  }) : null;
+  const nodePath = selectedNode && (selection == null ? void 0 : selection.anchor.path) && Node.has(editor, selection.anchor.path) ? selection.anchor.path : null;
+  let mergetagNodeEntry = null;
+  if (nodePath) {
+    try {
+      mergetagNodeEntry = Editor.above(editor, {
+        at: nodePath,
+        match: NodeUtils.isMergetagElement
+      });
+    } catch (error2) {
+    }
+  }
   const mergetagNode = mergetagNodeEntry == null ? void 0 : mergetagNodeEntry[0];
   const onSave = useCallback(
     (val) => {
       if (!mergetagNode)
         return;
+      let path2;
+      try {
+        path2 = ReactEditor.findPath(editor, mergetagNode);
+      } catch (error2) {
+        return;
+      }
       Transforms.setNodes(
         editor,
         {
@@ -16589,7 +17010,7 @@ const RichTextBar = ({
           }
         },
         {
-          at: ReactEditor.findPath(editor, mergetagNode)
+          at: path2
         }
       );
     },
@@ -16654,12 +17075,17 @@ const RichTextBar = ({
       return /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: index2 }, isFunction$4(Com) ? /* @__PURE__ */ React__default.createElement(Com, null) : toolsMapping[item2]);
     });
   }, [AIAssistant2, list, mergetagNode, mergetags]);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(RichTextBarContext.Provider, { value: contextValue }, /* @__PURE__ */ React__default.createElement(
     "div",
     {
       id: "RichTextBar",
       className: "RichTextBar",
-      style: { display: "inline-flex", alignItems: "stretch" }
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        flexWrap: wrap2 ? "wrap" : "nowrap",
+        rowGap: "4px"
+      }
     },
     content
   ), /* @__PURE__ */ React__default.createElement("div", { className: "mergtag-popover" }, mergetagNode && MergetagPopover2 && /* @__PURE__ */ React__default.createElement(
@@ -27489,7 +27915,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 +28087,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 +28129,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 +28189,10 @@ function ImageUploader(props) {
         Select$1.Option,
         {
           value: "2",
-          onClick: () => setUnsplashVisible(true)
+          onClick: () => {
+            setUnsplashVisible(true);
+            setLock(true);
+          }
         },
         t("Export free images")
       )
@@ -27789,6 +28218,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 +28240,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 +28305,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 })
     )
   );
 }
@@ -28084,9 +28520,19 @@ const RichTextField$1 = "";
 const loop = () => {
 };
 const RichtextBar = (props) => {
-  const { clientId } = useEditorProps();
+  const { clientId, enabledAutoComplete } = useEditorProps();
   const editor = useMemo(() => createEditor(), []);
   const lastTemplateRef = useRef(null);
+  const propsOnChangeRef = useRef(props.onChange);
+  useEffect(() => {
+    propsOnChangeRef.current = props.onChange;
+  }, [props.onChange]);
+  const debouncedChange = useMemo(
+    () => debounce$2((value) => {
+      propsOnChangeRef.current(value);
+    }, 100),
+    []
+  );
   const calculateData = useMemo(() => {
     if (!props.pageElement) {
       const path22 = [0, 0, 0, 0];
@@ -28123,6 +28569,8 @@ const RichtextBar = (props) => {
       return [{ subject: "", content }, path22];
     }
     const pageElement = cloneDeep(omit$2(props.pageElement, "children"));
+    pageElement.attributes["margin-top"] = "0px";
+    pageElement.attributes["margin-bottom"] = "0px";
     const template2 = {
       subject: "Blank",
       content: pageElement
@@ -28152,34 +28600,47 @@ const RichtextBar = (props) => {
       }));
       path2 = [0, 0, 0];
     } else if (NodeUtils.isContentElement(props.value)) {
-      template2.content = BlockManager.getBlockByType(ElementType.PAGE).create(__spreadProps(__spreadValues({}, pageElement), {
-        children: [
-          BlockManager.getBlockByType(ElementType.STANDARD_SECTION).create({
+      if (enabledAutoComplete) {
+        template2.content = BlockManager.getBlockByType(ElementType.PAGE).create(
+          __spreadProps(__spreadValues({}, pageElement), {
+            children: [props.value]
+          })
+        );
+        path2 = [0, 0];
+      } else {
+        template2.content = BlockManager.getBlockByType(ElementType.PAGE).create(
+          __spreadProps(__spreadValues({}, pageElement), {
             children: [
-              BlockManager.getBlockByType(ElementType.STANDARD_COLUMN).create({
+              BlockManager.getBlockByType(ElementType.STANDARD_SECTION).create({
                 children: [
                   BlockManager.getBlockByType(
-                    ElementType.STANDARD_PARAGRAPH
+                    ElementType.STANDARD_COLUMN
                   ).create({
-                    children: [props.value]
+                    children: [
+                      BlockManager.getBlockByType(
+                        ElementType.STANDARD_PARAGRAPH
+                      ).create({
+                        children: [props.value]
+                      })
+                    ]
                   })
-                ]
+                ],
+                attributes: {
+                  "padding-bottom": "0px",
+                  "padding-left": "0px",
+                  "padding-right": "0px",
+                  "padding-top": "0px"
+                }
               })
-            ],
-            attributes: {
-              "padding-bottom": "0px",
-              "padding-left": "0px",
-              "padding-right": "0px",
-              "padding-top": "0px"
-            }
+            ]
           })
-        ]
-      }));
-      path2 = [0, 0, 0, 0];
+        );
+        path2 = [0, 0, 0, 0];
+      }
     }
     return [template2, path2];
-  }, [props.pageElement, props.value]);
-  const template = calculateData[0];
+  }, [enabledAutoComplete, props.pageElement, props.value]);
+  const template = useMemo(() => cloneDeep(calculateData[0]), [calculateData]);
   const initialValue = useMemo(() => {
     if (!isEqual(lastTemplateRef.current, template)) {
       lastTemplateRef.current = template;
@@ -28188,12 +28649,17 @@ const RichtextBar = (props) => {
   }, [template]);
   const onPageChange = useEventCallback(
     (page, editor2) => {
-      const currentElement = Node.get(editor2, calculateData[1]);
-      if (!currentElement) {
-        console.error("Element not found");
-        return;
+      try {
+        if (!Node.has(editor2, calculateData[1]))
+          return;
+        const currentElement = Node.get(editor2, calculateData[1]);
+        if (!currentElement) {
+          console.error("Element not found");
+          return;
+        }
+        debouncedChange(cloneDeep(currentElement));
+      } catch (error2) {
       }
-      props.onChange(currentElement);
     }
   );
   return useMemo(() => {
@@ -28205,16 +28671,59 @@ const RichtextBar = (props) => {
         initialValues: initialValue,
         editor,
         withEnhanceEditor: withTheme$1,
+        EnhanceProvider: PluginsProvider,
         onSubmit: loop,
         onPageChange,
         newLineWithBr: true
       },
-      /* @__PURE__ */ React__default.createElement(SharedComponents.HoveringToolbar, null),
-      /* @__PURE__ */ React__default.createElement(EmailEditor, null),
+      /* @__PURE__ */ React__default.createElement("div", { className: "RichTextField-fixed-toolbar" }, /* @__PURE__ */ React__default.createElement(
+        SharedComponents.RichTextBar,
+        {
+          wrap: true,
+          getPopupContainer: () => document.body,
+          list: [
+            TextFormat.FONT_SIZE,
+            TextFormat.TEXT_COLOR,
+            TextFormat.BACKGROUND_COLOR,
+            TextFormat.ALIGN,
+            TextFormat.LIST,
+            TextFormat.BOLD,
+            TextFormat.ITALIC,
+            TextFormat.UNDERLINE,
+            TextFormat.STRIKETHROUGH,
+            TextFormat.LINK,
+            TextFormat.MERGETAG,
+            TextFormat.REMOVE_FORMAT
+          ]
+        }
+      )),
+      /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: "RichTextField-content",
+          style: { minHeight: props.height }
+        },
+        /* @__PURE__ */ React__default.createElement(EmailEditor, null)
+      ),
       /* @__PURE__ */ React__default.createElement(SharedComponents.Hotkeys, null),
-      /* @__PURE__ */ React__default.createElement("style", null, styleText$h)
+      /* @__PURE__ */ React__default.createElement("style", null, styleText$h),
+      /* @__PURE__ */ React__default.createElement(AuthSelectBlockPath, { path: calculateData[1] })
     );
-  }, [props.height, clientId, initialValue, editor, onPageChange]);
+  }, [
+    props.height,
+    clientId,
+    initialValue,
+    editor,
+    onPageChange,
+    calculateData
+  ]);
+};
+const AuthSelectBlockPath = ({ path: path2 }) => {
+  const setSelectedNodePath = useSetSelectedNodePath();
+  useEffect(() => {
+    setSelectedNodePath(path2);
+  }, [path2, setSelectedNodePath]);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
 };
 const DefaultRichTextField = enhancer(RichtextBar);
 const RichTextField = (props) => {
@@ -33622,6 +34131,52 @@ const ConfigPanelsMap = {
   [ElementType.STANDARD_TABLE2]: Table2,
   [ElementType.STANDARD_BLOCK_QUOTE]: Blockquote
 };
+const PageHeaderSchema = [
+  {
+    type: "CollapseGroup",
+    name: "0",
+    header: t("Logo"),
+    defaultActive: true,
+    children: [
+      {
+        type: "ImageUrl",
+        // section->column->image
+        name: "data.content.0.children.0.children.0.attributes.src",
+        label: t("Logo")
+      },
+      {
+        type: "PixelField",
+        name: "data.content.0.children.0.children.0.attributes.width",
+        label: t("Width")
+      },
+      {
+        type: "BackgroundColor",
+        name: "attributes.background-color",
+        label: t("Background color")
+      }
+    ]
+  }
+];
+const PageFooterSchema = [
+  {
+    type: "CollapseGroup",
+    name: "0",
+    header: t("Footer"),
+    defaultActive: true,
+    children: [
+      {
+        type: "TextField",
+        name: "data.content.0.children.0.children.0.children.0.text",
+        label: t("Text")
+      },
+      {
+        type: "BackgroundColor",
+        name: "attributes.background-color",
+        label: t("Background color")
+      }
+    ]
+  }
+];
 const BlockSchemasMap = {
   // // Text elements
   // [ElementType.TEXT]: TextSchema,
@@ -33663,6 +34218,8 @@ const BlockSchemasMap = {
   // [ElementType.STANDARD_SOCIAL]: SocialSchema,
   // Note: Code and Widget components are too complex for schema-based approach
   // They will continue to use component-based configuration
+  [ElementType.PAGE_HEADER]: PageHeaderSchema,
+  [ElementType.PAGE_FOOTER]: PageFooterSchema
 };
 const SchemaPanelRenderer = ({
   schema,
@@ -38808,6 +39365,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 +39441,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 +39465,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 +39961,63 @@ 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 normalizeElements = (element) => {
+  const pageHeaderElements = element.children.filter(
+    NodeUtils.isPageHeaderElement
+  );
+  if (pageHeaderElements.length > 1) {
+    throw new Error("Only one page header element is allowed");
+  }
+  const pageFooterElements = element.children.filter(
+    NodeUtils.isPageFooterElement
+  );
+  if (pageFooterElements.length > 1) {
+    throw new Error("Only one page footer element is allowed");
+  }
+  if (pageHeaderElements.length === 0 && pageFooterElements.length === 0) {
+    return assignIdsToElementTree(element);
+  }
+  const otherElements = element.children.filter(
+    (child) => !NodeUtils.isPageHeaderElement(child) && !NodeUtils.isPageFooterElement(child)
+  );
+  const sortedChildren = [
+    ...pageHeaderElements.length > 0 ? pageHeaderElements : [],
+    ...otherElements,
+    ...pageFooterElements.length > 0 ? pageFooterElements : []
+  ];
+  return assignIdsToElementTree(__spreadProps(__spreadValues({}, element), {
+    children: sortedChildren
+  }));
+};
 const useCreateConfig$1 = (_k) => {
   var _l = _k, {
     interactiveStyle,
@@ -39392,7 +40027,7 @@ const useCreateConfig$1 = (_k) => {
     "hoveringToolbar"
   ]);
   const editor = useMemo(() => createEditor(), []);
-  rest.initialValues.content = assignIdsToElementTree(
+  rest.initialValues.content = normalizeElements(
     rest.initialValues.content
   );
   let initialValues = rest.initialValues;
@@ -39513,15 +40148,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 +40173,8 @@ const Layout$1 = ({ children, footer, header, tabLeft, tabRight }) => {
                         }
 
                       `), children)
-        )),
+          )
+        ),
         showSidebar && compact && /* @__PURE__ */ React__default.createElement(
           Layout$2.Sider,
           {
@@ -40365,52 +41006,59 @@ const withTheme = (editor) => {
   };
   editor.deleteBackward = (unit) => {
     var _a;
-    const textElementEntry = Editor.above(editor, {
-      match: NodeUtils.isTextElement
-    });
-    if (textElementEntry) {
-      const text = Editor.string(editor, textElementEntry[1]);
-      if (text.length === 0 && textElementEntry[0].type !== ElementType.STANDARD_PARAGRAPH && !NodeUtils.isTextListItemElement(textElementEntry[0])) {
-        Transforms.setNodes(
-          editor,
-          {
-            type: ElementType.STANDARD_PARAGRAPH
-          },
-          {
-            at: textElementEntry[1]
-          }
-        );
+    try {
+      if (!editor.selection) {
+        deleteBackward(unit);
         return;
       }
-    }
-    const contentElementEntry = Editor.above(editor, {
-      match: NodeUtils.isContentElement
-    });
-    if (contentElementEntry && !NodeUtils.isTextListItemElement(contentElementEntry[0])) {
-      const isVoid = NodeUtils.isVoidBlockElement(contentElementEntry[0]);
-      const textElement = contentElementEntry[0];
-      if (textElement.children.length === 1 && !isVoid) {
-        if (((_a = editor.selection) == null ? void 0 : _a.focus.offset) === 0) {
-          editor.withoutNormalizing(() => {
-            const previousText = Editor.previous(editor);
-            const [previousEntry] = previousText ? Editor.nodes(editor, {
-              match: (node) => {
-                return NodeUtils.isTextElement(node) || NodeUtils.isButtonElement(node);
-              },
-              at: previousText[1]
-            }) : [];
-            if (previousEntry) {
-              Transforms.select(editor, Editor.end(editor, previousEntry[1]));
-            } else {
-              Transforms.deselect(editor);
+      const textElementEntry = Editor.above(editor, {
+        match: NodeUtils.isTextElement
+      });
+      if (textElementEntry) {
+        const text = Editor.string(editor, textElementEntry[1]);
+        if (text.length === 0 && textElementEntry[0].type !== ElementType.STANDARD_PARAGRAPH && !NodeUtils.isTextListItemElement(textElementEntry[0])) {
+          Transforms.setNodes(
+            editor,
+            {
+              type: ElementType.STANDARD_PARAGRAPH
+            },
+            {
+              at: textElementEntry[1]
             }
-            Transforms.delete(editor, {
-              at: contentElementEntry[1]
-            });
-          });
+          );
           return;
         }
       }
+      const contentElementEntry = Editor.above(editor, {
+        match: NodeUtils.isContentElement
+      });
+      if (contentElementEntry && !NodeUtils.isTextListItemElement(contentElementEntry[0])) {
+        const isVoid = NodeUtils.isVoidBlockElement(contentElementEntry[0]);
+        const textElement = contentElementEntry[0];
+        if (textElement.children.length === 1 && !isVoid) {
+          if (((_a = editor.selection) == null ? void 0 : _a.focus.offset) === 0) {
+            editor.withoutNormalizing(() => {
+              const previousText = Editor.previous(editor);
+              const [previousEntry] = previousText ? Editor.nodes(editor, {
+                match: (node) => {
+                  return NodeUtils.isTextElement(node) || NodeUtils.isButtonElement(node);
+                },
+                at: previousText[1]
+              }) : [];
+              if (previousEntry) {
+                Transforms.select(editor, Editor.end(editor, previousEntry[1]));
+              } else {
+                Transforms.deselect(editor);
+              }
+              Transforms.delete(editor, {
+                at: contentElementEntry[1]
+              });
+            });
+            return;
+          }
+        }
+      }
+    } catch (error2) {
     }
     deleteBackward(unit);
   };