easy-email-pro-theme 1.54.2 → 1.55.0

package/lib/index.js

@@ -54,16 +54,16 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { classnames, useEditorActions, useDragNodePath, useStandaloneElementEditing, useEditorProps, useRefState, isDOMElement, useMergeTagsData, useLockState, useEventCallback, useSelectedNodePath, useSelectedNode, useSetSelectedNodePath, useSetHoverNodePath, useUniversalElementEditing, useUniversalElementPath, useStandaloneElementPath, useStandaloneElement, useEditorState, useActiveTab, ActiveTabKeys, toggleFormat, TextFormat, useUniversalElement, isFormatActive, validation, CustomEvent, getDynamicImagePlaceholder, EmailEditorProvider, EmailEditor, useForceUpdate, useEqualState, IframeComponent, HtmlStringToReactNodes, useStandaloneElementSaveButton, ExternalComponents, useDragoverDirection } from "easy-email-pro-editor";
+import { classnames, useEditorActions, useDragNodePath, useStandaloneElementEditing, useEditorProps, useRefState, isDOMElement, useMergeTagsData, useLockState, useEventCallback, useSelectedNodePath, useSelectedNode, useSetSelectedNodePath, useSetHoverNodePath, useEditorStateStore, useUniversalElementEditing, useUniversalElementPath, useStandaloneElementPath, useStandaloneElement, useEditorState, useActiveTab, ActiveTabKeys, toggleFormat, TextFormat, useUniversalElement, isFormatActive, validation, CustomEvent, getDynamicImagePlaceholder, EmailEditorProvider, EmailEditor, useForceUpdate, useEqualState, IframeComponent, HtmlStringToReactNodes, useStandaloneElementSaveButton, ExternalComponents, useDragoverDirection } from "easy-email-pro-editor";
 import { useSlate, ReactEditor, useSlateStatic, useSelected } from "slate-react";
 import * as React$2 from "react";
 import React__default, { useRef, useState, useEffect, useCallback, useMemo, createContext, useContext, useLayoutEffect, memo, useReducer, cloneElement, forwardRef, Suspense, Component, createElement } from "react";
 import { NodeUtils, BlockManager, ElementType, EditorCore, t, ElementCategory, classnames as classnames$1, StandardType, PluginManager, EditorAuth, HtmlNodeAdapter, ConditionOperator, ConditionOperatorSymbol, EmailRenderProvider, components, I18nManager } from "easy-email-pro-core";
 import { cloneDeep, get, isEqual, set, omit as omit$2, merge as merge$1, debounce as debounce$2, isUndefined as isUndefined$1, uniqueId, isString as isString$1, isFunction as isFunction$4, isNumber as isNumber$1, upperFirst, sum, flatMap } from "lodash";
-import { Editor, Range, Node, Transforms, Path, Text as Text$2, createEditor } from "slate";
+import { Editor, Range, Node, Transforms, Path, Text as Text$4, createEditor } from "slate";
 import { nanoid } from "nanoid";
-import { Form, Input, Modal, Collapse, Space, Empty, Card, Grid, Button as Button$2, Drawer, Switch, Typography as Typography$1, Tabs, Radio, Tooltip, Divider as Divider$2, Alert, Popconfirm, Message, PageHeader, Spin, Layout as Layout$2, Popover, Select as Select$1, Slider, InputNumber, Tag, Link as Link$3, List as List$1, Skeleton, Trigger } from "@arco-design/web-react";
-import { IconPlus, IconCopy, IconDelete, IconEdit, IconLeft, IconDownload, IconUndo, IconRedo, IconMinus, IconEye, IconSubscribeAdd, IconClose, IconCheckCircleFill, IconDragArrow, IconPalette, IconLock, IconUnlock, IconImage, IconQuestionCircle, IconLink, IconCloud, IconDragDotVertical, IconSend, IconDown } from "@arco-design/web-react/icon";
+import { Form, Input, Modal, Collapse, Space, Empty, Card, Grid, Button as Button$2, Drawer, Switch, Typography as Typography$1, Tabs, Radio, Tooltip, Divider as Divider$2, Alert, Popconfirm, Message, PageHeader as PageHeader$1, Spin, Layout as Layout$2, Popover, Select as Select$1, Slider, InputNumber, Tag, Link as Link$3, List as List$1, Skeleton, Trigger } from "@arco-design/web-react";
+import { IconPlus, IconCopy, IconDelete, IconEdit, IconLeft, IconDownload, IconUndo, IconRedo, IconMinus, IconEye, IconSubscribeAdd, IconClose, IconCheckCircleFill, IconDragArrow, IconPalette, IconLock, IconUnlock, IconImage, IconQuestionCircle, IconLink, IconCloud, IconDragDotVertical, IconSend, IconDown, IconCheck, IconSearch } from "@arco-design/web-react/icon";
 import { unstable_batchedUpdates, createPortal } from "react-dom";
 import mjml from "mjml-browser";
 import { HistoryEditor } from "slate-history";
@@ -512,7 +512,7 @@ const styleText$h = `@font-face {
 }
 
 `;
-const RetroStyleText = '[data-slate-block=page] {\n  min-height: 300px;\n}\n\n[data-slate-category=navbar]::after,\n[data-slate-category=social]::after {\n  content: "";\n  left: 0;\n  top: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  cursor: default;\n}\n\n[data-slate-hover=true] {\n  z-index: 4;\n}\n\n[data-slate-focus=true] {\n  z-index: 3;\n}\n\n[data-slate-selected=true] {\n  z-index: 3;\n}\n\n[data-slate-hover=true] .element-tools-container {\n  z-index: 4;\n}\n\n[data-slate-selected=true] .element-tools-container {\n  z-index: 4;\n}\n\n[data-slate-void=true] [data-slate-node=element][data-slate-block=button]:hover,\n[data-slate-void=true] [data-slate-node=element][data-slate-block=text]:hover {\n  outline: 2px solid var(--hover-color);\n}\n\n.text-mergetag {\n  outline: 1px solid rgb(78, 89, 105);\n  outline-offset: 1px;\n  padding: 0 2px;\n  border-radius: 2px;\n  cursor: pointer;\n  transition: all 0.1s linear;\n  border: none;\n  font-weight: inherit;\n  outline-color: #00a0ac;\n  color: inherit;\n  background-color: #ebf9fc;\n  max-width: 10em;\n  font-style: inherit;\n  text-decoration-line: inherit;\n  position: relative;\n}\n\n.text-mergetag [data-slate-string=true] {\n  font-size: 0px;\n}\n\nbody .element-tools-container {\n  outline: 2px solid var(--hover-color);\n  z-index: 1;\n}\n\nbody .element-tools-container .element-tools {\n  color: #fff;\n  background-color: var(--hover-color);\n}\n\nbody .element-tools-container .element-drag-button {\n  background-color: var(--hover-color);\n}\n\n[data-layer-dragging=true] .element-tools-container {\n  opacity: 0;\n}\n\n[data-is-dragging=true] .element-tools-container {\n  opacity: 0;\n}\n\n#dragging-placeholder .element-tools-container {\n  opacity: 1 !important;\n}\n\n[data-slate-type=placeholder] {\n  min-height: 64px;\n  position: relative;\n  background-color: rgba(242, 244, 245, 0.64);\n  outline: rgb(43, 152, 211) dashed 1px;\n  outline-offset: -1px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.3;\n  color: rgb(48, 59, 67);\n  margin: 0 20px;\n}\n\n[data-slate-type=placeholder] .element-delete {\n  border-radius: 2px;\n  padding: 0px;\n  cursor: pointer;\n  height: 28px;\n  width: 28px;\n  background-color: rgb(223, 227, 230);\n  color: rgb(96, 106, 114);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  left: 10px;\n  top: 10px;\n  opacity: 0.8;\n}\n\n[data-slate-type=placeholder] .element-delete:hover {\n  background-color: rgb(180, 187, 195);\n  opacity: 1;\n}\n\n[data-slate-type=placeholder] .element-delete svg {\n  width: 20px;\n  height: 20px;\n}\n\n[data-slate-universal-editing=true] {\n  z-index: 2;\n}\n\n.standalone-element-mask,\n.universal-element-mask {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 10;\n}\n\n.unset-element-mask {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n[data-slate-universal-editing=true] .universal-element-mask,\n[data-slate-standalone-editing=true] .standalone-element-mask {\n  display: none;\n}\n\n[data-slate-universal-editing=true] .universal-element-editing-mask,\n[data-slate-standalone-editing=true] .standalone-element-editing-mask {\n  z-index: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  inset: 0px;\n}\n\n[data-slate-universal-editing=true] .universal-element-editing-mask::before,\n[data-slate-standalone-editing=true] .standalone-element-editing-mask::before {\n  content: " ";\n  width: 10000px;\n  height: 10000px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  transform: translate(-50%, -50%);\n  z-index: 10;\n}\n\n[data-slate-universal-editing=true] .universal-element-editing-mask::after,\n[data-slate-standalone-editing=true] .standalone-element-editing-mask::after {\n  position: absolute;\n  content: " ";\n  width: 100%;\n  height: 100%;\n  inset: 0px;\n  pointer-events: none;\n  outline: 9999px solid rgba(255, 255, 255, 0.6);\n}\n\n.element-tools-container[data-category=page] .element-tools {\n  display: none;\n}\n\n.element-tools-container[data-category=page] .element-drag-button {\n  display: none;\n}\n\n.element-tools-container[data-category=page] .element-tools-move-handle {\n  display: none;\n}';
+const RetroStyleText = '[data-slate-block=page] {\n  min-height: 300px;\n}\n\n[data-slate-category=navbar]::after,\n[data-slate-category=social]::after {\n  content: "";\n  left: 0;\n  top: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  cursor: default;\n}\n\n[data-slate-hover=true] {\n  z-index: 3;\n}\n\n[data-slate-focus=true] {\n  z-index: 4;\n}\n\n[data-slate-selected=true] {\n  z-index: 4;\n}\n\n[data-slate-hover=true] .element-tools-container {\n  z-index: 3;\n}\n\n[data-slate-selected=true] .element-tools-container {\n  z-index: 4;\n}\n\n[data-slate-void=true] [data-slate-node=element][data-slate-block=button]:hover,\n[data-slate-void=true] [data-slate-node=element][data-slate-block=text]:hover {\n  outline: 2px solid var(--hover-color);\n}\n\n.text-mergetag {\n  outline: 1px solid rgb(78, 89, 105);\n  outline-offset: 1px;\n  padding: 0 2px;\n  border-radius: 2px;\n  cursor: pointer;\n  transition: all 0.1s linear;\n  border: none;\n  font-weight: inherit;\n  outline-color: #00a0ac;\n  color: inherit;\n  background-color: #ebf9fc;\n  max-width: 10em;\n  font-style: inherit;\n  text-decoration-line: inherit;\n  position: relative;\n}\n\n.text-mergetag [data-slate-string=true] {\n  font-size: 0px;\n}\n\nbody .element-tools-container {\n  outline: 2px solid var(--hover-color);\n  z-index: 1;\n}\n\nbody .element-tools-container .element-tools {\n  color: #fff;\n  background-color: var(--hover-color);\n}\n\nbody .element-tools-container .element-drag-button {\n  background-color: var(--hover-color);\n}\n\n[data-layer-dragging=true] .element-tools-container {\n  opacity: 0;\n}\n\n[data-is-dragging=true] .element-tools-container {\n  opacity: 0;\n}\n\n#dragging-placeholder .element-tools-container {\n  opacity: 1 !important;\n}\n\n[data-slate-type=placeholder] {\n  min-height: 64px;\n  position: relative;\n  background-color: rgba(242, 244, 245, 0.64);\n  outline: rgb(43, 152, 211) dashed 1px;\n  outline-offset: -1px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.3;\n  color: rgb(48, 59, 67);\n  margin: 0 20px;\n}\n\n[data-slate-type=placeholder] .element-delete {\n  border-radius: 2px;\n  padding: 0px;\n  cursor: pointer;\n  height: 28px;\n  width: 28px;\n  background-color: rgb(223, 227, 230);\n  color: rgb(96, 106, 114);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  left: 10px;\n  top: 10px;\n  opacity: 0.8;\n}\n\n[data-slate-type=placeholder] .element-delete:hover {\n  background-color: rgb(180, 187, 195);\n  opacity: 1;\n}\n\n[data-slate-type=placeholder] .element-delete svg {\n  width: 20px;\n  height: 20px;\n}\n\n[data-slate-universal-editing=true] {\n  z-index: 2;\n}\n\n.standalone-element-mask,\n.universal-element-mask {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 10;\n}\n\n.unset-element-mask {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n[data-slate-universal-editing=true] .universal-element-mask,\n[data-slate-standalone-editing=true] .standalone-element-mask {\n  display: none;\n}\n\n[data-slate-universal-editing=true] .universal-element-editing-mask,\n[data-slate-standalone-editing=true] .standalone-element-editing-mask {\n  z-index: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  inset: 0px;\n}\n\n[data-slate-universal-editing=true] .universal-element-editing-mask::before,\n[data-slate-standalone-editing=true] .standalone-element-editing-mask::before {\n  content: " ";\n  width: 10000px;\n  height: 10000px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  transform: translate(-50%, -50%);\n  z-index: 10;\n}\n\n[data-slate-universal-editing=true] .universal-element-editing-mask::after,\n[data-slate-standalone-editing=true] .standalone-element-editing-mask::after {\n  position: absolute;\n  content: " ";\n  width: 100%;\n  height: 100%;\n  inset: 0px;\n  pointer-events: none;\n  outline: 9999px solid rgba(255, 255, 255, 0.6);\n}\n\n.element-tools-container[data-category=page] .element-tools {\n  display: none;\n}\n\n.element-tools-container[data-category=page] .element-drag-button {\n  display: none;\n}\n\n.element-tools-container[data-category=page] .element-tools-move-handle {\n  display: none;\n}\n\n[data-slate-block][data-slate-selected] {\n  z-index: 4;\n}\n\n[data-slate-block]:has([data-slate-selected]) {\n  z-index: 4;\n}';
 const withTheme$1 = (editor) => {
   const { insertBreak, normalizeNode, deleteBackward, apply: apply2, insertSoftBreak } = editor;
   editor.insertBreak = (...args) => {
@@ -623,11 +623,14 @@ const withTheme$1 = (editor) => {
         return;
       }
     }
-    apply2({
-      type: "remove_node",
-      path: removePath,
-      node: Node.get(editor, removePath)
-    });
+    try {
+      apply2({
+        type: "remove_node",
+        path: removePath,
+        node: Node.get(editor, removePath)
+      });
+    } catch (error2) {
+    }
   };
   editor.normalizeNode = (entry) => {
     const [node, path2] = entry;
@@ -1853,6 +1856,30 @@ const useCopyBlock = () => {
     [editor, lock, setSelectedNodePath]
   );
 };
+const useAddBlock = () => {
+  const editor = useSlate();
+  const lock = useLockState();
+  const setSelectedNodePath = useSetSelectedNodePath();
+  return useCallback(
+    (block, path2, toNext = true) => {
+      if (lock)
+        return;
+      const next = toNext ? Path.next(path2) : path2;
+      const blockDefinition = BlockManager.getBlockByType(block.type);
+      const newBlock = assignIdsToElementTree(
+        blockDefinition.create(block)
+      );
+      Transforms.insertNodes(editor, newBlock, {
+        at: next
+      });
+      try {
+        setSelectedNodePath(next);
+      } catch (error2) {
+      }
+    },
+    [editor, lock, setSelectedNodePath]
+  );
+};
 const useMoveUp = () => {
   const editor = useSlate();
   const lock = useLockState();
@@ -2003,6 +2030,7 @@ const useElementInteract = () => {
   const clearCanvas = useClearCanvas();
   const resetSelectedNode = useResetSelectedNode();
   const { isChanged } = useLastSelectedNode();
+  const addBlock = useAddBlock();
   return {
     copyBlock,
     deleteBlock,
@@ -2010,7 +2038,8 @@ const useElementInteract = () => {
     isChanged,
     resetSelectedNode,
     moveUp,
-    moveDown
+    moveDown,
+    addBlock
   };
 };
 const defaultFontList = [
@@ -2235,6 +2264,29 @@ const MinimalistProvider = ({ children }) => {
 const useMinimalistContext = () => {
   return useContext(MinimalistContext);
 };
+const useBlocksDrawer = () => {
+  const context = useEditorStateStore();
+  const openBlocksDrawer = useCallback(
+    (insertPath, parentCategory) => {
+      context.setBlocksDrawerInsertPath(insertPath);
+      context.setBlocksDrawerVisible(true);
+      context.setBlocksDrawerParentCategory(parentCategory);
+    },
+    [context]
+  );
+  const closeBlocksDrawer = useCallback(() => {
+    context.setBlocksDrawerVisible(false);
+    context.setBlocksDrawerInsertPath(void 0);
+    context.setBlocksDrawerParentCategory(void 0);
+  }, [context]);
+  return {
+    openBlocksDrawer,
+    closeBlocksDrawer,
+    visible: context.blocksDrawerVisible,
+    insertPath: context.blocksDrawerInsertPath,
+    parentCategory: context.blocksDrawerParentCategory
+  };
+};
 const ElementTools$1 = ({ element, nodeElement, path: path2 }) => {
   const editor = useSlate();
   const { copyBlock, deleteBlock } = useElementInteract();
@@ -2432,8 +2484,6 @@ const ElementSelected = ({ element, nodeElement, path: path2 }) => {
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, renderContent);
 };
 const styleText$d = "body {\n  --sectionElementOffset: 100px;\n  --wrapperElementOffset: 150px;\n}\n\n@media screen and (max-width: 850px) {\n  [data-slate-block=page] {\n    --sectionElementOffset: 70px;\n    --wrapperElementOffset: 100px;\n  }\n}\n.section-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n.hero-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-full-width=true].section-category-hover {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n[data-is-hero-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-section-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-section-category=true][data-is-full-width=true].element-tools-container {\n  width: calc(100% - 4px - 16px);\n  transform: none;\n}\n\n.wrapper-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--wrapperElementOffset));\n  transform: translate(calc(-1 * var(--wrapperElementOffset)), 0);\n}\n\n[data-is-full-width=true].wrapper-category-hover {\n  width: calc(100% - 4px - 16px);\n  transform: none;\n}\n\n[data-is-wrapper-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--wrapperElementOffset));\n  transform: translate(calc(-1 * var(--wrapperElementOffset)), 0);\n  position: absolute;\n}\n\n[data-is-wrapper-category=true][data-is-full-width=true].element-tools-container {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n.wrapper-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--wrapperElementOffset));\n  transform: translate(calc(-1 * var(--wrapperElementOffset)), 0);\n}\n\n[data-is-wrapper-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--wrapperElementOffset));\n  transform: translate(calc(-1 * var(--wrapperElementOffset)), 0);\n  position: absolute;\n}";
-const styleText$c = "[data-standard-table2-selected=true] ::selection {\n  background: none !important;\n}\n\n[data-standard-table2-selected=true] [data-standard-table2-td-selected=true] {\n  background-color: rgba(199, 199, 199, 0.4) !important;\n}";
-const styleText$b = ".easy-email-pro-table-operation-menu {\n  position: fixed;\n  z-index: 999999;\n  background-color: #fff;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  font-size: 14px;\n  z-index: 100;\n  overflow: hidden;\n  border-radius: 4px;\n  padding: 4px 0;\n}\n.easy-email-pro-table-operation-menu .easy-email-pro-table-operation-menu-dividing {\n  height: 1px;\n  background-color: #efefef;\n}\n.easy-email-pro-table-operation-menu .easy-email-pro-table-operation-menu-item {\n  display: flex;\n  align-items: center;\n  padding: 10px 16px;\n  line-height: 18px;\n  background-color: #fff;\n  cursor: pointer;\n  color: #595959;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.easy-email-pro-table-operation-menu .easy-email-pro-table-operation-menu-item:hover {\n  background-color: #efefef;\n}\n.easy-email-pro-table-operation-menu .easy-email-pro-table-operation-menu-item .easy-email-pro-table-operation-menu-icon {\n  margin-right: 8px;\n  height: 20px;\n  width: 20px;\n  font-size: 0;\n}";
 const stylesText$1 = '.BlockSideBar .arco-tabs-header {\n  display: flex;\n  width: 100%;\n}\n.BlockSideBar .arco-tabs-header .arco-tabs-header-title {\n  flex: 1;\n  margin: 0px !important;\n  padding: 0 !important;\n  height: 60px;\n  line-height: 60px;\n  position: relative;\n}\n.BlockSideBar .arco-tabs-header .arco-tabs-header-title:hover::after {\n  content: "";\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  top: initial;\n  height: 2px;\n  background-color: var(--color-border-3);\n  transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n}\n.BlockSideBar .arco-tabs-header .arco-tabs-header-title .arco-tabs-header-title-text {\n  display: block;\n  text-align: center;\n  width: 100%;\n}\n.BlockSideBar .arco-tabs-header .arco-tabs-header-title .arco-tabs-header-title-text::before {\n  display: none;\n}\n.BlockSideBar .arco-tabs-content {\n  padding-top: 0;\n}\n\n.ConfigurationSideBar {\n  height: 60px;\n  line-height: 60px;\n  position: relative;\n  border-bottom: 1px solid #e5e7eb;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: rgb(var(--primary-6));\n  font-weight: 500;\n}';
 const UniversalList = () => {
   const { universalElementSetting } = useEditorProps();
@@ -7161,7 +7211,7 @@ const action = "_action_7uv5l_56";
 const itemTitle = "_itemTitle_7uv5l_73";
 const itemCollapse = "_itemCollapse_7uv5l_79";
 const itemChildren = "_itemChildren_7uv5l_100";
-const styles$4 = {
+const styles$6 = {
   item: item$2,
   itemContent,
   itemActions,
@@ -7353,7 +7403,7 @@ function SortableComponentItem({
   const isVoid = BlockManager.getBlockByType(component.block.type).void;
   const hasBlockChildren = !isVoid && component.block.children.every((child) => NodeUtils.isBlockElement(child));
   const hideWhenDragging = isDraggingLevel && !isCurrentDragging;
-  return /* @__PURE__ */ React__default.createElement("div", { ref: setNodeRef, style, className: styles$4.sortableItem }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { ref: setNodeRef, style, className: styles$6.sortableItem }, /* @__PURE__ */ React__default.createElement(
     ComponentItem,
     {
       component,
@@ -7363,7 +7413,7 @@ function SortableComponentItem({
       onToggleCollapse,
       dragHandleProps: __spreadValues(__spreadValues({}, attributes), listeners)
     }
-  ), hasBlockChildren && !isCollapsed && !isDragging && !hideWhenDragging && /* @__PURE__ */ React__default.createElement("div", { className: styles$4.itemChildren }, /* @__PURE__ */ React__default.createElement(
+  ), hasBlockChildren && !isCollapsed && !isDragging && !hideWhenDragging && /* @__PURE__ */ React__default.createElement("div", { className: styles$6.itemChildren }, /* @__PURE__ */ React__default.createElement(
     ElementList,
     {
       blocks: component.block.children,
@@ -7467,11 +7517,11 @@ function ComponentItem({
     setHoverNodePath(null);
   };
   const itemClassName = useMemo(() => {
-    const classes = [styles$4.item];
+    const classes = [styles$6.item];
     if (isHovered)
-      classes.push(styles$4.itemHovered);
+      classes.push(styles$6.itemHovered);
     if (isSelected)
-      classes.push(styles$4.itemSelected);
+      classes.push(styles$6.itemSelected);
     return classes.join(" ");
   }, [isHovered, isSelected]);
   return /* @__PURE__ */ React__default.createElement(
@@ -7482,10 +7532,10 @@ function ComponentItem({
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: styles$4.itemContent }, /* @__PURE__ */ React__default.createElement("div", { className: styles$4.itemTitle }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("div", { className: styles$6.itemContent }, /* @__PURE__ */ React__default.createElement("div", { className: styles$6.itemTitle }, /* @__PURE__ */ React__default.createElement(
       "div",
       {
-        className: styles$4.itemCollapse,
+        className: styles$6.itemCollapse,
         style: { opacity: hasBlockChildren ? 1 : 0 },
         onClick: handleCollapseClick
       },
@@ -7499,28 +7549,28 @@ function ComponentItem({
         },
         collapseIcon
       )
-    ), /* @__PURE__ */ React__default.createElement("div", { className: styles$4.itemLabelWrapper }, /* @__PURE__ */ React__default.createElement(
+    ), /* @__PURE__ */ React__default.createElement("div", { className: styles$6.itemLabelWrapper }, /* @__PURE__ */ React__default.createElement(
       SharedComponents.ElementIcon,
       {
         type: component.block.type,
         width: 16,
         height: 16
       }
-    ), /* @__PURE__ */ React__default.createElement("div", { className: styles$4.itemLabel }, displayLabel))), /* @__PURE__ */ React__default.createElement(
+    ), /* @__PURE__ */ React__default.createElement("div", { className: styles$6.itemLabel }, displayLabel))), /* @__PURE__ */ React__default.createElement(
       "div",
       {
-        className: styles$4.itemActions,
+        className: styles$6.itemActions,
         onClick: (e) => e.stopPropagation()
       },
-      /* @__PURE__ */ React__default.createElement("div", { className: styles$4.action, onClick: onCopy }, /* @__PURE__ */ React__default.createElement(IconCopy, null)),
-      /* @__PURE__ */ React__default.createElement("div", { className: styles$4.action, onClick: onRemove }, /* @__PURE__ */ React__default.createElement(IconDelete, null)),
+      /* @__PURE__ */ React__default.createElement("div", { className: styles$6.action, onClick: onCopy }, /* @__PURE__ */ React__default.createElement(IconCopy, null)),
+      /* @__PURE__ */ React__default.createElement("div", { className: styles$6.action, onClick: onRemove }, /* @__PURE__ */ React__default.createElement(IconDelete, null)),
       /* @__PURE__ */ React__default.createElement(
         "div",
         __spreadValues({
           style: {
             cursor: "grab"
           },
-          className: styles$4.action
+          className: styles$6.action
         }, dragHandleProps),
         /* @__PURE__ */ React__default.createElement("svg", { viewBox: "0 0 20 20", width: "12" }, /* @__PURE__ */ React__default.createElement("path", { d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z" }))
       )
@@ -7683,7 +7733,7 @@ function HeaderFooterItem({ element }) {
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: styles$4.item,
+      className: styles$6.item,
       onClick,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
@@ -7699,28 +7749,28 @@ function HeaderFooterItem({ element }) {
     /* @__PURE__ */ React__default.createElement(
       "div",
       {
-        className: styles$4.itemContent,
+        className: styles$6.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(
+      /* @__PURE__ */ React__default.createElement("div", { className: styles$6.itemTitle }, /* @__PURE__ */ React__default.createElement("div", { className: styles$6.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$6.itemLabel }, label))),
       /* @__PURE__ */ React__default.createElement(
         "div",
         {
-          className: styles$4.itemActions,
+          className: styles$6.itemActions,
           style: { opacity: 1 },
           onClick: (e) => e.stopPropagation()
         },
-        /* @__PURE__ */ React__default.createElement("div", { className: styles$4.action }, /* @__PURE__ */ React__default.createElement(
+        /* @__PURE__ */ React__default.createElement("div", { className: styles$6.action }, /* @__PURE__ */ React__default.createElement(
           "svg",
           {
             viewBox: "0 0 1024 1024",
@@ -8102,6 +8152,7 @@ const ConfigurationPanel = ({
   return useMemo(() => {
     if (!element || !selectedNodePath)
       return null;
+    const isPageHeaderOrFooter = NodeUtils.isPageHeaderElement(element) || NodeUtils.isPageFooterElement(element);
     const isSelectedUniversalElement = universalElementPath && Path.equals(selectedNodePath, universalElementPath);
     const isSelectedStandaloneElement = standaloneElementPath && Path.equals(selectedNodePath, standaloneElementPath);
     const isHideBackIcon = (universalElementEditing || standaloneElementEditing) && compact;
@@ -8168,7 +8219,7 @@ const ConfigurationPanel = ({
             onClick: generateImage
           }
         )
-      ), !isSelectedUniversalElement && !isSelectedStandaloneElement && /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(
+      ), !isSelectedUniversalElement && !isSelectedStandaloneElement && !isPageHeaderOrFooter && /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(
         Button$2,
         {
           onClick: () => onCopy(selectedNodePath),
@@ -8389,7 +8440,7 @@ const TabHeader = (props) => {
   ));
 };
 const hoverUnderline = "_hoverUnderline_8d8dl_1";
-const styles$3 = {
+const styles$5 = {
   hoverUnderline
 };
 function BlockPaths({
@@ -8451,7 +8502,7 @@ function BlockPaths({
           /* @__PURE__ */ React__default.createElement(
             "span",
             {
-              className: styles$3.hoverUnderline,
+              className: styles$5.hoverUnderline,
               onClick: () => setSelectedNodePath(item2.path)
             },
             item2.name
@@ -9042,7 +9093,7 @@ const UniversalElementEditorDrawer = ({ children }) => {
         footer: null
       },
       /* @__PURE__ */ React__default.createElement(
-        PageHeader,
+        PageHeader$1,
         {
           backIcon: hasChanged ? /* @__PURE__ */ React__default.createElement(
             Popconfirm,
@@ -9154,9 +9205,9 @@ const PreviewEmail = ({
   const [html, setHtml] = useState("");
   const mjmlString = useMemo(() => {
     try {
-      let content = values.content;
+      let content2 = values.content;
       if (widgetMode) {
-        content = __spreadProps(__spreadValues({}, content), {
+        content2 = __spreadProps(__spreadValues({}, content2), {
           children: [
             __spreadProps(__spreadValues({}, values.widgetElement), {
               children: values.content.children
@@ -9165,7 +9216,7 @@ const PreviewEmail = ({
         });
       }
       return EditorCore.toMJML({
-        element: content,
+        element: content2,
         mode: "production",
         universalElements: universalElementSetting,
         mergetagsData: cloneDeep(mergetagsData),
@@ -13677,7 +13728,7 @@ var OverlayScrollbars$1 = { exports: {} };
           function getContentMeasureElement() {
             return _isTextarea ? _textareaCoverElement[0] : _contentElementNative;
           }
-          function generateDiv(classesOrAttrs, content) {
+          function generateDiv(classesOrAttrs, content2) {
             return "<div " + (classesOrAttrs ? type(classesOrAttrs) == TYPES.s ? 'class="' + classesOrAttrs + '"' : function() {
               var key2;
               var attrs = _strEmpty;
@@ -13686,7 +13737,7 @@ var OverlayScrollbars$1 = { exports: {} };
                   attrs += (key2 === "c" ? "class" : key2) + '="' + classesOrAttrs[key2] + '" ';
               }
               return attrs;
-            }() : _strEmpty) + ">" + (content || _strEmpty) + "</div>";
+            }() : _strEmpty) + ">" + (content2 || _strEmpty) + "</div>";
           }
           function selectOrGenerateDivByClass(className, selectParentOrOnlyChildren) {
             var onlyChildren = type(selectParentOrOnlyChildren) == TYPES.b;
@@ -14934,9 +14985,9 @@ const HoveringToolbar = () => {
   ]);
   if (!isShowHoveringBar || !list.length)
     return null;
-  const content = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, hoveringToolbar == null ? void 0 : hoveringToolbar.prefix, /* @__PURE__ */ React__default.createElement(SharedComponents.RichTextBar, { list }), hoveringToolbar == null ? void 0 : hoveringToolbar.subfix, /* @__PURE__ */ React__default.createElement("style", null, styleText$h));
+  const content2 = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, hoveringToolbar == null ? void 0 : hoveringToolbar.prefix, /* @__PURE__ */ React__default.createElement(SharedComponents.RichTextBar, { list }), hoveringToolbar == null ? void 0 : hoveringToolbar.subfix, /* @__PURE__ */ React__default.createElement("style", null, styleText$h));
   if (hoveringToolbar == null ? void 0 : hoveringToolbar.fixed) {
-    return /* @__PURE__ */ React__default.createElement("div", null, content);
+    return /* @__PURE__ */ React__default.createElement("div", null, content2);
   }
   const editorContainer = document.getElementById(EDITOR_CONTAINER);
   return createPortal(
@@ -14969,7 +15020,7 @@ const HoveringToolbar = () => {
             className: "HoveringToolbar-list",
             style: { visibility: lock ? "hidden" : "visible" }
           },
-          content
+          content2
         ),
         /* @__PURE__ */ React__default.createElement("style", null, `#HoveringToolbar {
           --hovering-bar-icon-size: ${(hoveringToolbar == null ? void 0 : hoveringToolbar.iconSize) || 12}px;
@@ -15077,7 +15128,7 @@ const BgColor = () => {
     if (editor.selection && Node.has(editor, editor.selection.anchor.path)) {
       const nodes = Editor.nodes(editor, {
         match: (node) => {
-          return Text$2.isText(node);
+          return Text$4.isText(node);
         },
         mode: "lowest",
         voids: true
@@ -15147,7 +15198,7 @@ const BgColor = () => {
           [TextFormat.BACKGROUND_COLOR]: val
         },
         {
-          match: Text$2.isText,
+          match: Text$4.isText,
           split: true,
           at: mergeNodeEntry ? mergeNodeEntry[1] : void 0,
           voids: true
@@ -15223,7 +15274,7 @@ const FontColor = () => {
     if (editor.selection && Node.has(editor, editor.selection.anchor.path)) {
       const [entry] = Editor.nodes(editor, {
         match: (node) => {
-          return Text$2.isText(node);
+          return Text$4.isText(node);
         },
         mode: "lowest",
         voids: true
@@ -15287,7 +15338,7 @@ const FontColor = () => {
           [TextFormat.TEXT_COLOR]: val
         },
         {
-          match: Text$2.isText,
+          match: Text$4.isText,
           split: true,
           at: mergeNodeEntry ? mergeNodeEntry[1] : void 0,
           voids: true
@@ -15498,7 +15549,7 @@ const getLinkNode = (editor) => {
   try {
     const [match] = Editor.nodes(editor, {
       match: (n) => {
-        return Text$2.isText(n) && Boolean(n[TextFormat.LINK]);
+        return Text$4.isText(n) && Boolean(n[TextFormat.LINK]);
       },
       mode: "lowest",
       voids: true
@@ -15766,18 +15817,18 @@ function basicElementToStandardElement(element) {
   }
   return element;
 }
-const mjmlToJson = (content) => {
-  if (!isString$1(content)) {
-    return mjmlTransform(content);
+const mjmlToJson = (content2) => {
+  if (!isString$1(content2)) {
+    return mjmlTransform(content2);
   }
   const domParser = new DOMParser();
-  const dom = domParser.parseFromString(content, "text/xml");
+  const dom = domParser.parseFromString(content2, "text/xml");
   const root2 = dom.firstChild;
   if (root2.tagName !== "mjml") {
     throw new Error("mjmlToJson: invalid mjml. First node must be mjml");
   }
   if (root2.tagName === "mjml") {
-    const { json } = mjml(content, {
+    const { json } = mjml(content2, {
       validationLevel: "soft"
     });
     const parseValue = mjmlTransform(json);
@@ -15947,6 +15998,12 @@ const getMergeTagsByType = (mergetags, type) => {
   });
   return list;
 };
+const getFallbackValue = (params) => {
+  const { mode, name, defaultElement } = params;
+  if (!defaultElement)
+    return void 0;
+  return mode === ActiveTabKeys.DESKTOP ? get(defaultElement, "attributes." + name) : get(defaultElement, "mobileAttributes." + name);
+};
 function isValidHttpUrl(str) {
   let url;
   try {
@@ -15962,6 +16019,7 @@ function isValidHttpUrl(str) {
 const TextLink = () => {
   const editor = useSlate();
   const linkNodeEntry = getLinkNode(editor);
+  const { getPopupContainer } = useContext(RichTextBarContext);
   const ref = useRef(null);
   const linkNode = linkNodeEntry == null ? void 0 : linkNodeEntry[0];
   const selectedNodePath = useSelectedNodePath();
@@ -16044,7 +16102,7 @@ const TextLink = () => {
         } : null
       },
       {
-        match: Text$2.isText,
+        match: Text$4.isText,
         split: true,
         at: mergeNodeEntry ? mergeNodeEntry[1] : void 0,
         voids: true
@@ -16078,6 +16136,9 @@ const TextLink = () => {
         popupStyle: { padding: "10px 0px 0px 0px", width: 400 }
       },
       getPopupContainer: (node) => {
+        if (getPopupContainer) {
+          return getPopupContainer(node);
+        }
         return Array.from(document.querySelectorAll(".RichTextBar")).find(
           (item2) => item2.contains(node)
         );
@@ -16518,7 +16579,7 @@ const FontSize$2 = () => {
     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),
+        match: (node) => Text$4.isText(node),
         mode: "lowest",
         voids: true
       });
@@ -16592,7 +16653,7 @@ const FontSize$2 = () => {
           [TextFormat.FONT_SIZE]: val
         },
         {
-          match: Text$2.isText,
+          match: Text$4.isText,
           split: true,
           at: mergeNodeEntry ? mergeNodeEntry[1] : void 0,
           voids: true
@@ -16639,7 +16700,7 @@ const FontFamily$2 = () => {
     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),
+        match: (node) => Text$4.isText(node),
         voids: true,
         mode: "lowest"
       });
@@ -16700,7 +16761,7 @@ const FontFamily$2 = () => {
           [TextFormat.FONT_FAMILY]: val
         },
         {
-          match: Text$2.isText,
+          match: Text$4.isText,
           split: true,
           at: mergeNodeEntry ? mergeNodeEntry[1] : void 0,
           voids: true
@@ -16858,7 +16919,7 @@ const Image$5 = () => {
       }
     );
     Transforms.insertNodes(editor, imageNode, {
-      match: Text$2.isText
+      match: Text$4.isText
     });
     (_a = ref.current) == null ? void 0 : _a.click();
   };
@@ -17016,7 +17077,7 @@ const RichTextBar = ({
     },
     [editor, mergetagNode]
   );
-  const content = useMemo(() => {
+  const content2 = useMemo(() => {
     const toolsMapping = {
       [TextFormat.TURN_INTO]: /* @__PURE__ */ React__default.createElement(PreventFocusWrapper, null, /* @__PURE__ */ React__default.createElement(TurnInto, null)),
       [TextFormat.AI_ASSISTANT]: AIAssistant2 && !mergetagNode ? /* @__PURE__ */ React__default.createElement(SharedComponents.AIAssistant, null) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null),
@@ -17087,7 +17148,7 @@ const RichTextBar = ({
         rowGap: "4px"
       }
     },
-    content
+    content2
   ), /* @__PURE__ */ React__default.createElement("div", { className: "mergtag-popover" }, mergetagNode && MergetagPopover2 && /* @__PURE__ */ React__default.createElement(
     MergetagPopover2,
     {
@@ -17223,11 +17284,11 @@ const extend = (a, b, thisArg, { allOwnKeys } = {}) => {
   }, { allOwnKeys });
   return a;
 };
-const stripBOM = (content) => {
-  if (content.charCodeAt(0) === 65279) {
-    content = content.slice(1);
+const stripBOM = (content2) => {
+  if (content2.charCodeAt(0) === 65279) {
+    content2 = content2.slice(1);
   }
-  return content;
+  return content2;
 };
 const inherits = (constructor, superConstructor, props, descriptors2) => {
   constructor.prototype = Object.create(superConstructor.prototype, descriptors2);
@@ -27317,6 +27378,45 @@ const JsonAdapter = {
     return val;
   }
 };
+const pixelAdapter = {
+  formatter(val) {
+    if (!isString$1(val) && !val)
+      return "";
+    val = val.toString();
+    if (/^\d+px$/.test(val.trim()))
+      return val.replace("px", "");
+    return val;
+  },
+  normalize(val) {
+    if (!isString$1(val))
+      return void 0;
+    val = val.toString().trim();
+    if (!val)
+      return void 0;
+    if (/^\d+$/.test(val))
+      return val + "px";
+    return val;
+  }
+};
+const sliderAdapter = {
+  formatter(val) {
+    if (!val)
+      return 0;
+    val = val.toString();
+    if (/^\d+px$/.test(val.trim()))
+      return +val.replace("px", "");
+    return +val;
+  },
+  normalize(val) {
+    if (!isNumber$1(val))
+      return void 0;
+    if (!val)
+      return void 0;
+    if (/^\d+$/.test(val))
+      return val + "px";
+    return val;
+  }
+};
 const colorAdapter = {
   formatter(val) {
     if (!isString$1(val) && !val)
@@ -27363,6 +27463,18 @@ const pixelNumberAdapter = {
     return val;
   }
 };
+const fontStyleAdapter = {
+  formatter(val) {
+    if (!val)
+      return "normal";
+    return val;
+  },
+  normalize(val) {
+    if (val === "normal")
+      return void 0;
+    return val;
+  }
+};
 const fontWeightAdapter = {
   formatter(val) {
     if (!val)
@@ -27661,7 +27773,7 @@ function EditPanelList(props) {
     },
     [list, props, prevActiveKey, itemIds]
   );
-  const content = /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
+  const content2 = /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
     Collapse,
     {
       activeKey,
@@ -27705,7 +27817,7 @@ function EditPanelList(props) {
           }
         )
       },
-      list.length === 0 ? /* @__PURE__ */ React__default.createElement(Empty, { description: t("No data") }) : content
+      list.length === 0 ? /* @__PURE__ */ React__default.createElement(Empty, { description: t("No data") }) : content2
     );
   }
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
@@ -27740,7 +27852,7 @@ function EditPanelList(props) {
         ),
         contentStyle: { padding: 10 }
       },
-      list.length === 0 ? /* @__PURE__ */ React__default.createElement(Empty, { description: t("No data") }) : content
+      list.length === 0 ? /* @__PURE__ */ React__default.createElement(Empty, { description: t("No data") }) : content2
     )),
     /* @__PURE__ */ React__default.createElement(DragOverlay, null, activeId && activeItem ? /* @__PURE__ */ React__default.createElement(
       "div",
@@ -27889,7 +28001,7 @@ const cardItemLeft = "_cardItemLeft_8uw8m_71";
 const cardItemRight = "_cardItemRight_8uw8m_85";
 const selectImage = "_selectImage_8uw8m_93";
 const exportFreeImage = "_exportFreeImage_8uw8m_110";
-const styles$2 = {
+const styles$4 = {
   container,
   error,
   item,
@@ -28102,9 +28214,9 @@ function ImageUploader(props) {
     },
     [props]
   );
-  const content = useMemo(() => {
+  const content2 = useMemo(() => {
     if (isUploading) {
-      return /* @__PURE__ */ React__default.createElement("div", { className: styles$2["item"] }, /* @__PURE__ */ React__default.createElement("div", { className: classnames$1(styles$2["info"]) }, /* @__PURE__ */ React__default.createElement(Spin, { size: 60 }), /* @__PURE__ */ React__default.createElement("div", { className: styles$2["btn-wrap"] })));
+      return /* @__PURE__ */ React__default.createElement("div", { className: styles$4["item"] }, /* @__PURE__ */ React__default.createElement("div", { className: classnames$1(styles$4["info"]) }, /* @__PURE__ */ React__default.createElement(Spin, { size: 60 }), /* @__PURE__ */ React__default.createElement("div", { className: styles$4["btn-wrap"] })));
     }
     if (!props.value) {
       return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
@@ -28125,10 +28237,10 @@ function ImageUploader(props) {
             lineHeight: "22px"
           }
         },
-        unsplashClientId ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: styles$2.selectImage, onClick: onUpload }, t("Select image")), /* @__PURE__ */ React__default.createElement(
+        unsplashClientId ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: styles$4.selectImage, onClick: onUpload }, t("Select image")), /* @__PURE__ */ React__default.createElement(
           "div",
           {
-            className: styles$2.exportFreeImage,
+            className: styles$4.exportFreeImage,
             onClick: () => {
               setUnsplashVisible(true);
               setLock(true);
@@ -28175,14 +28287,14 @@ function ImageUploader(props) {
           backgroundPosition: "0 0, 10px 10px"
         }
       },
-      content
+      content2
     )), image2 && !onlyPreview && /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 11, offset: 1 }, /* @__PURE__ */ React__default.createElement("div", null, imgDetail.width, " ", /* @__PURE__ */ React__default.createElement("span", null, " x "), " ", imgDetail.height, " "), /* @__PURE__ */ React__default.createElement("div", { style: { marginTop: 10 } }, imgDetail.size, "k"), /* @__PURE__ */ React__default.createElement("div", { style: { marginTop: 10, whiteSpace: "nowrap" } }, enableUnsplash && unsplashClientId ? /* @__PURE__ */ React__default.createElement(
       Select$1,
       {
         triggerProps: {
           popupStyle: { display: "inline-flex" }
         },
-        triggerElement: /* @__PURE__ */ React__default.createElement("span", { className: styles$2.actionItem }, t("Replace"))
+        triggerElement: /* @__PURE__ */ React__default.createElement("span", { className: styles$4.actionItem }, t("Replace"))
       },
       /* @__PURE__ */ React__default.createElement(Select$1.Option, { value: "1", onClick: onUpload }, t("Select image")),
       /* @__PURE__ */ React__default.createElement(
@@ -28196,10 +28308,10 @@ function ImageUploader(props) {
         },
         t("Export free images")
       )
-    ) : /* @__PURE__ */ React__default.createElement("span", { className: styles$2.actionItem, onClick: onUpload }, t("Replace")), enablePreview && /* @__PURE__ */ React__default.createElement("span", null, " ∙ "), enablePreview && /* @__PURE__ */ React__default.createElement(
+    ) : /* @__PURE__ */ React__default.createElement("span", { className: styles$4.actionItem, onClick: onUpload }, t("Replace")), enablePreview && /* @__PURE__ */ React__default.createElement("span", null, " ∙ "), enablePreview && /* @__PURE__ */ React__default.createElement(
       "span",
       {
-        className: styles$2.actionItem,
+        className: styles$4.actionItem,
         onClick: () => setPreview(true)
       },
       t("Preview")
@@ -28423,7 +28535,7 @@ function EditPanelTabs(props) {
     }
   };
   const list = useMemo(() => Array.isArray(value) ? value : [], [value]);
-  const content = /* @__PURE__ */ React__default.createElement(
+  const content2 = /* @__PURE__ */ React__default.createElement(
     Tabs,
     {
       activeTab: activeKey,
@@ -28454,7 +28566,7 @@ function EditPanelTabs(props) {
       props.renderItem(item2, index2)
     ))
   );
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, list.length === 0 ? /* @__PURE__ */ React__default.createElement(Empty, null) : content);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, list.length === 0 ? /* @__PURE__ */ React__default.createElement(Empty, null) : content2);
 }
 const DefaultEditPanelTabsField = enhancer(EditPanelTabs);
 const EditPanelTabsField = (props) => {
@@ -28536,7 +28648,7 @@ const RichtextBar = (props) => {
   const calculateData = useMemo(() => {
     if (!props.pageElement) {
       const path22 = [0, 0, 0, 0];
-      const content = BlockManager.getBlockByType(ElementType.PAGE).create({
+      const content2 = BlockManager.getBlockByType(ElementType.PAGE).create({
         attributes: {
           "background-color": "#ffffff"
         },
@@ -28566,7 +28678,7 @@ const RichtextBar = (props) => {
           })
         ]
       });
-      return [{ subject: "", content }, path22];
+      return [{ subject: "", content: content2 }, path22];
     }
     const pageElement = cloneDeep(omit$2(props.pageElement, "children"));
     pageElement.attributes["margin-top"] = "0px";
@@ -28657,6 +28769,9 @@ const RichtextBar = (props) => {
           console.error("Element not found");
           return;
         }
+        if (isEqual(JSON.stringify(currentElement), JSON.stringify(props.value))) {
+          return;
+        }
         debouncedChange(cloneDeep(currentElement));
       } catch (error2) {
       }
@@ -28674,7 +28789,8 @@ const RichtextBar = (props) => {
         EnhanceProvider: PluginsProvider,
         onSubmit: loop,
         onPageChange,
-        newLineWithBr: true
+        newLineWithBr: true,
+        readOnly: false
       },
       /* @__PURE__ */ React__default.createElement("div", { className: "RichTextField-fixed-toolbar" }, /* @__PURE__ */ React__default.createElement(
         SharedComponents.RichTextBar,
@@ -28707,10 +28823,12 @@ const RichtextBar = (props) => {
       ),
       /* @__PURE__ */ React__default.createElement(SharedComponents.Hotkeys, null),
       /* @__PURE__ */ React__default.createElement("style", null, styleText$h),
-      /* @__PURE__ */ React__default.createElement(AuthSelectBlockPath, { path: calculateData[1] })
+      /* @__PURE__ */ React__default.createElement(AutoSelectBlockPath, { path: calculateData[1] }),
+      /* @__PURE__ */ React__default.createElement(AutoSyncAttributes, { path: calculateData[1], element: props.value })
     );
   }, [
     props.height,
+    props.value,
     clientId,
     initialValue,
     editor,
@@ -28718,13 +28836,36 @@ const RichtextBar = (props) => {
     calculateData
   ]);
 };
-const AuthSelectBlockPath = ({ path: path2 }) => {
+const AutoSelectBlockPath = ({ path: path2 }) => {
   const setSelectedNodePath = useSetSelectedNodePath();
   useEffect(() => {
     setSelectedNodePath(path2);
   }, [path2, setSelectedNodePath]);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
 };
+const AutoSyncAttributes = ({
+  path: path2,
+  element
+}) => {
+  const { setFieldValue, getFieldValue } = useEditorContext();
+  console.log("element", element);
+  useEffect(() => {
+    const attributes = get(element, "attributes");
+    const mobileAttributes = get(element, "mobileAttributes");
+    const currentAttributes = getFieldValue(path2, "attributes");
+    const currentMobileAttributes = getFieldValue(path2, "mobileAttributes");
+    if (!isEqual(JSON.stringify(attributes), JSON.stringify(currentAttributes))) {
+      setFieldValue(path2, "attributes", cloneDeep(attributes));
+    }
+    if (!isEqual(
+      JSON.stringify(mobileAttributes),
+      JSON.stringify(currentMobileAttributes)
+    )) {
+      setFieldValue(path2, "mobileAttributes", cloneDeep(mobileAttributes));
+    }
+  }, [element.attributes, path2, setFieldValue, getFieldValue, element]);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
+};
 const DefaultRichTextField = enhancer(RichtextBar);
 const RichTextField = (props) => {
   return /* @__PURE__ */ React__default.createElement(DefaultRichTextField, __spreadProps(__spreadValues({}, props), { formItem: { noStyle: true } }));
@@ -28756,7 +28897,7 @@ const positionControl = "_positionControl_1t3ne_44";
 const percentSign = "_percentSign_1t3ne_50";
 const deleteButton = "_deleteButton_1t3ne_55";
 const sizeInputs = "_sizeInputs_1t3ne_62";
-const styles$1 = {
+const styles$3 = {
   controlSection,
   controlGroup,
   colorHeader,
@@ -29170,7 +29311,7 @@ function GradientGenerator(props) {
           )
         ))
       }
-    ), /* @__PURE__ */ React__default.createElement("div", { className: styles$1.controlSection }, /* @__PURE__ */ React__default.createElement("div", { className: styles$1.controlGroup }, /* @__PURE__ */ React__default.createElement(
+    ), /* @__PURE__ */ React__default.createElement("div", { className: styles$3.controlSection }, /* @__PURE__ */ React__default.createElement("div", { className: styles$3.controlGroup }, /* @__PURE__ */ React__default.createElement(
       Form.Item,
       {
         label: /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
@@ -29255,7 +29396,7 @@ function GradientGenerator(props) {
           )
         )))
       )
-    )), /* @__PURE__ */ React__default.createElement(Divider$2, { style: { margin: "0px 0 10px 0" } }), /* @__PURE__ */ React__default.createElement("div", { className: styles$1.controlGroup }, /* @__PURE__ */ React__default.createElement(Form.Item, { label: t(`Gradient Type`), layout: "vertical" }, /* @__PURE__ */ React__default.createElement(
+    )), /* @__PURE__ */ React__default.createElement(Divider$2, { style: { margin: "0px 0 10px 0" } }), /* @__PURE__ */ React__default.createElement("div", { className: styles$3.controlGroup }, /* @__PURE__ */ React__default.createElement(Form.Item, { label: t(`Gradient Type`), layout: "vertical" }, /* @__PURE__ */ React__default.createElement(
       Select$1,
       {
         style: { width: "100%" },
@@ -29276,7 +29417,7 @@ function GradientGenerator(props) {
           }));
         }
       }
-    ))), /* @__PURE__ */ React__default.createElement("div", { className: styles$1.controlGroup }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 11 }, /* @__PURE__ */ React__default.createElement(Form.Item, { label: t(`Width`), layout: "vertical" }, /* @__PURE__ */ React__default.createElement(
+    ))), /* @__PURE__ */ React__default.createElement("div", { className: styles$3.controlGroup }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 11 }, /* @__PURE__ */ React__default.createElement(Form.Item, { label: t(`Width`), layout: "vertical" }, /* @__PURE__ */ React__default.createElement(
       InputNumber,
       {
         style: { width: "100%" },
@@ -29294,7 +29435,7 @@ function GradientGenerator(props) {
           setData(__spreadProps(__spreadValues({}, data), { height: value }));
         }
       }
-    ))))), /* @__PURE__ */ React__default.createElement(Divider$2, null), data.type === "linear" && /* @__PURE__ */ React__default.createElement("div", { className: styles$1.controlGroup }, /* @__PURE__ */ React__default.createElement(Form.Item, { label: t(`Angle`), layout: "vertical" }, /* @__PURE__ */ React__default.createElement(
+    ))))), /* @__PURE__ */ React__default.createElement(Divider$2, null), data.type === "linear" && /* @__PURE__ */ React__default.createElement("div", { className: styles$3.controlGroup }, /* @__PURE__ */ React__default.createElement(Form.Item, { label: t(`Angle`), layout: "vertical" }, /* @__PURE__ */ React__default.createElement(
       Slider,
       {
         value: data.angle,
@@ -29307,7 +29448,7 @@ function GradientGenerator(props) {
         step: 1,
         showInput: true
       }
-    ))), /* @__PURE__ */ React__default.createElement(Divider$2, null), /* @__PURE__ */ React__default.createElement("div", { className: styles$1.controlGroup }, /* @__PURE__ */ React__default.createElement("div", { className: styles$1.colorHeader }, /* @__PURE__ */ React__default.createElement("div", { className: styles$1.label }, t(`Colors`), " (", colors.length, "/", MAX_COLORS, ")"), /* @__PURE__ */ React__default.createElement(
+    ))), /* @__PURE__ */ React__default.createElement(Divider$2, null), /* @__PURE__ */ React__default.createElement("div", { className: styles$3.controlGroup }, /* @__PURE__ */ React__default.createElement("div", { className: styles$3.colorHeader }, /* @__PURE__ */ React__default.createElement("div", { className: styles$3.label }, t(`Colors`), " (", colors.length, "/", MAX_COLORS, ")"), /* @__PURE__ */ React__default.createElement(
       Button$2,
       {
         type: "text",
@@ -29317,7 +29458,7 @@ function GradientGenerator(props) {
         disabled: colors.length >= MAX_COLORS
       },
       t(`Add Color`)
-    )), /* @__PURE__ */ React__default.createElement("div", { className: styles$1.colorList }, colors.map((color2, index2) => /* @__PURE__ */ React__default.createElement("div", { key: color2.id, className: styles$1.colorItem }, /* @__PURE__ */ React__default.createElement("div", { className: styles$1.colorInputs }, /* @__PURE__ */ React__default.createElement(
+    )), /* @__PURE__ */ React__default.createElement("div", { className: styles$3.colorList }, colors.map((color2, index2) => /* @__PURE__ */ React__default.createElement("div", { key: color2.id, className: styles$3.colorItem }, /* @__PURE__ */ React__default.createElement("div", { className: styles$3.colorInputs }, /* @__PURE__ */ React__default.createElement(
       ColorPicker$1,
       {
         value: color2.color,
@@ -29329,7 +29470,7 @@ function GradientGenerator(props) {
           }));
         }
       }
-    )), /* @__PURE__ */ React__default.createElement("div", { className: styles$1.positionControl }, /* @__PURE__ */ React__default.createElement(
+    )), /* @__PURE__ */ React__default.createElement("div", { className: styles$3.positionControl }, /* @__PURE__ */ React__default.createElement(
       InputNumber,
       {
         value: color2.position,
@@ -29344,13 +29485,13 @@ function GradientGenerator(props) {
         min: 0,
         max: 100
       }
-    ), /* @__PURE__ */ React__default.createElement("span", { className: styles$1.percentSign }, "%"), colors.length > MIN_COLORS && /* @__PURE__ */ React__default.createElement(
+    ), /* @__PURE__ */ React__default.createElement("span", { className: styles$3.percentSign }, "%"), colors.length > MIN_COLORS && /* @__PURE__ */ React__default.createElement(
       Button$2,
       {
         type: "text",
         icon: /* @__PURE__ */ React__default.createElement(IconDelete, null),
         onClick: () => removeColor(index2),
-        className: styles$1.deleteButton
+        className: styles$3.deleteButton
       }
     )))))))),
     /* @__PURE__ */ React__default.createElement("canvas", { ref: canvasRef, style: { display: "none" } })
@@ -29629,12 +29770,6 @@ function FontWeight(props) {
     [props]
   );
 }
-const getFallbackValue = (params) => {
-  const { mode, name, defaultElement } = params;
-  if (!defaultElement)
-    return void 0;
-  return mode === ActiveTabKeys.DESKTOP ? get(defaultElement, "attributes." + name) : get(defaultElement, "mobileAttributes." + name);
-};
 function Typography(props) {
   const { showTextDirectionMode } = useEditorProps();
   const { label = t("Font"), path: path2, defaultElement } = props;
@@ -30253,7 +30388,7 @@ function Height(props) {
     );
   }, [label, props]);
 }
-const category = ElementCategory.BUTTON;
+const category$2 = ElementCategory.BUTTON;
 const path$1 = [0];
 function ButtonCategory(props) {
   const element = useElementDefault({
@@ -30268,7 +30403,7 @@ function ButtonCategory(props) {
         defaultElement: element,
         path: path$1
       }, props), {
-        name: `data.categoryAttributes.${category}`
+        name: `data.categoryAttributes.${category$2}`
       })
     ));
   }, [element, props]);
@@ -32210,16 +32345,16 @@ const ResponsiveTabs = ({
     showSourceCode
   ]);
 };
-const Text$1 = ({ nodePath }) => {
+const Text$3 = ({ nodePath }) => {
   const desktop = useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(AttributesContainer$f, { mode: ActiveTabKeys.DESKTOP, nodePath });
+    return /* @__PURE__ */ React__default.createElement(AttributesContainer$h, { mode: ActiveTabKeys.DESKTOP, nodePath });
   }, [nodePath]);
   const mobile = useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(AttributesContainer$f, { mode: ActiveTabKeys.MOBILE, nodePath });
+    return /* @__PURE__ */ React__default.createElement(AttributesContainer$h, { mode: ActiveTabKeys.MOBILE, nodePath });
   }, [nodePath]);
   return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(ResponsiveTabs, { desktop, mobile }));
 };
-function AttributesContainer$f({
+function AttributesContainer$h({
   nodePath,
   mode
 }) {
@@ -32291,14 +32426,14 @@ const Section$1 = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$e,
+        AttributesContainer$g,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$e,
+        AttributesContainer$g,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -32307,7 +32442,7 @@ const Section$1 = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$e({
+function AttributesContainer$g({
   nodePath,
   mode
 }) {
@@ -32449,14 +32584,14 @@ const Button$1 = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$d,
+        AttributesContainer$f,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$d,
+        AttributesContainer$f,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -32465,7 +32600,7 @@ const Button$1 = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$d({
+function AttributesContainer$f({
   nodePath,
   mode
 }) {
@@ -32579,14 +32714,14 @@ const Image$4 = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$c,
+        AttributesContainer$e,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$c,
+        AttributesContainer$e,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -32595,7 +32730,7 @@ const Image$4 = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$c({
+function AttributesContainer$e({
   nodePath,
   mode
 }) {
@@ -32703,14 +32838,14 @@ const Divider$1 = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$b,
+        AttributesContainer$d,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$b,
+        AttributesContainer$d,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -32719,7 +32854,7 @@ const Divider$1 = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$b({
+function AttributesContainer$d({
   nodePath,
   mode
 }) {
@@ -32785,14 +32920,14 @@ const Spacer$1 = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$a,
+        AttributesContainer$c,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$a,
+        AttributesContainer$c,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -32801,7 +32936,7 @@ const Spacer$1 = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$a({
+function AttributesContainer$c({
   nodePath,
   mode
 }) {
@@ -32826,14 +32961,14 @@ const Navbar$1 = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$9,
+        AttributesContainer$b,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$9,
+        AttributesContainer$b,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -32842,7 +32977,7 @@ const Navbar$1 = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$9({
+function AttributesContainer$b({
   nodePath,
   mode
 }) {
@@ -33029,14 +33164,14 @@ const Social$1 = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$8,
+        AttributesContainer$a,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$8,
+        AttributesContainer$a,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -33045,7 +33180,7 @@ const Social$1 = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$8({
+function AttributesContainer$a({
   nodePath,
   mode
 }) {
@@ -33286,14 +33421,14 @@ const Hero = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$7,
+        AttributesContainer$9,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$7,
+        AttributesContainer$9,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -33302,7 +33437,7 @@ const Hero = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$7({
+function AttributesContainer$9({
   nodePath,
   mode
 }) {
@@ -33444,14 +33579,14 @@ const Column = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$6,
+        AttributesContainer$8,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$6,
+        AttributesContainer$8,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -33460,7 +33595,7 @@ const Column = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$6({
+function AttributesContainer$8({
   nodePath,
   mode
 }) {
@@ -33518,14 +33653,14 @@ const Wrapper = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$5,
+        AttributesContainer$7,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$5,
+        AttributesContainer$7,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -33534,7 +33669,7 @@ const Wrapper = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$5({
+function AttributesContainer$7({
   nodePath,
   mode
 }) {
@@ -33583,14 +33718,14 @@ const Widget = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$4,
+        AttributesContainer$6,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$4,
+        AttributesContainer$6,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -33599,7 +33734,7 @@ const Widget = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$4({
+function AttributesContainer$6({
   nodePath,
   mode
 }) {
@@ -33758,14 +33893,14 @@ const Blockquote = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$3,
+        AttributesContainer$5,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$3,
+        AttributesContainer$5,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -33774,7 +33909,7 @@ const Blockquote = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$3({
+function AttributesContainer$5({
   nodePath,
   mode
 }) {
@@ -33847,14 +33982,14 @@ const Table = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$2,
+        AttributesContainer$4,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$2,
+        AttributesContainer$4,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -33863,7 +33998,7 @@ const Table = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$2({
+function AttributesContainer$4({
   nodePath,
   mode
 }) {
@@ -33950,14 +34085,14 @@ const Group = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$1,
+        AttributesContainer$3,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer$1,
+        AttributesContainer$3,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -33966,7 +34101,7 @@ const Group = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer$1({
+function AttributesContainer$3({
   nodePath,
   mode
 }) {
@@ -33994,14 +34129,14 @@ const Table2 = ({ nodePath }) => {
     ResponsiveTabs,
     {
       desktop: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer,
+        AttributesContainer$2,
         {
           mode: ActiveTabKeys.DESKTOP,
           nodePath
         }
       ),
       mobile: /* @__PURE__ */ React__default.createElement(
-        AttributesContainer,
+        AttributesContainer$2,
         {
           mode: ActiveTabKeys.MOBILE,
           nodePath
@@ -34010,7 +34145,7 @@ const Table2 = ({ nodePath }) => {
     }
   ));
 };
-function AttributesContainer({
+function AttributesContainer$2({
   nodePath,
   mode
 }) {
@@ -34101,6 +34236,113 @@ function AttributesContainer({
     }
   ))));
 }
+const PageHeader = ({ nodePath }) => {
+  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(
+    ResponsiveTabs,
+    {
+      desktop: /* @__PURE__ */ React__default.createElement(
+        AttributesContainer$1,
+        {
+          mode: ActiveTabKeys.DESKTOP,
+          nodePath
+        }
+      ),
+      mobile: /* @__PURE__ */ React__default.createElement(
+        AttributesContainer$1,
+        {
+          mode: ActiveTabKeys.MOBILE,
+          nodePath
+        }
+      )
+    }
+  ));
+};
+function AttributesContainer$1({
+  nodePath,
+  mode
+}) {
+  const { selectedNode } = useSelectedNode();
+  if (!selectedNode)
+    return null;
+  return /* @__PURE__ */ React__default.createElement(CollapseWrapper$1, { defaultActiveKey: ["0", "1", "2", "3", "4"] }, /* @__PURE__ */ React__default.createElement(Collapse.Item, { name: "3", header: t("Content") }, /* @__PURE__ */ React__default.createElement(
+    AttributeField.ImageUrl,
+    {
+      path: nodePath,
+      name: "data.content.0.attributes.src",
+      label: t("Text")
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    AttributeField.BackgroundColor,
+    {
+      path: nodePath,
+      name: "attributes.background-color",
+      label: t("Background color")
+    }
+  )), /* @__PURE__ */ React__default.createElement(Collapse.Item, { name: "0", header: t("Dimension") }, /* @__PURE__ */ React__default.createElement(
+    AttributeField.SliderField,
+    {
+      label: t("Width"),
+      path: nodePath,
+      name: "data.content.0.attributes.width",
+      formItem: sliderAdapter,
+      max: 300,
+      min: 100
+    }
+  ), /* @__PURE__ */ React__default.createElement(AttributeField.Padding, { path: nodePath, name: "attributes" })));
+}
+const PageFooter = ({ nodePath }) => {
+  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(
+    ResponsiveTabs,
+    {
+      desktop: /* @__PURE__ */ React__default.createElement(
+        AttributesContainer,
+        {
+          mode: ActiveTabKeys.DESKTOP,
+          nodePath
+        }
+      ),
+      mobile: /* @__PURE__ */ React__default.createElement(
+        AttributesContainer,
+        {
+          mode: ActiveTabKeys.MOBILE,
+          nodePath
+        }
+      )
+    }
+  ));
+};
+function AttributesContainer({
+  nodePath,
+  mode
+}) {
+  const { selectedNode } = useSelectedNode();
+  if (!selectedNode)
+    return null;
+  return /* @__PURE__ */ React__default.createElement(CollapseWrapper$1, { defaultActiveKey: ["0", "1", "2", "3", "4"] }, /* @__PURE__ */ React__default.createElement(Collapse.Item, { name: "3", header: t("Content") }, /* @__PURE__ */ React__default.createElement(
+    AttributeField.TextAreaField,
+    {
+      path: nodePath,
+      name: "data.content.0.children.0.children.0.children.0.text",
+      label: t("Text")
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    AttributeField.BackgroundColor,
+    {
+      path: nodePath,
+      name: "attributes.background-color",
+      label: t("Background color")
+    }
+  )), /* @__PURE__ */ React__default.createElement(Collapse.Item, { name: "0", header: t("Dimension") }, /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      label: t("Width"),
+      component: AttributeField.Width,
+      path: nodePath,
+      name: "width",
+      formItem: pixelNumberAdapter
+    }
+  )));
+}
 const ConfigPanelsMap = {
   [ElementType.PAGE]: Page$1,
   [ElementType.STANDARD_NAVBAR]: Navbar$1,
@@ -34118,65 +34360,21 @@ const ConfigPanelsMap = {
   [ElementType.SECTION_WIDGET]: Widget,
   [ElementType.WRAPPER_WIDGET]: Widget,
   [ElementType.DANGEROUS_CODE]: Code,
+  [ElementType.PAGE_HEADER]: PageHeader,
+  [ElementType.PAGE_FOOTER]: PageFooter,
   //text
-  [ElementType.TEXT]: Text$1,
-  [ElementType.STANDARD_TEXT]: Text$1,
-  [ElementType.STANDARD_PARAGRAPH]: Text$1,
-  [ElementType.STANDARD_TEXT_LIST]: Text$1,
-  [ElementType.STANDARD_H1]: Text$1,
-  [ElementType.STANDARD_H2]: Text$1,
-  [ElementType.STANDARD_H3]: Text$1,
-  [ElementType.STANDARD_H4]: Text$1,
+  [ElementType.TEXT]: Text$3,
+  [ElementType.STANDARD_TEXT]: Text$3,
+  [ElementType.STANDARD_PARAGRAPH]: Text$3,
+  [ElementType.STANDARD_TEXT_LIST]: Text$3,
+  [ElementType.STANDARD_H1]: Text$3,
+  [ElementType.STANDARD_H2]: Text$3,
+  [ElementType.STANDARD_H3]: Text$3,
+  [ElementType.STANDARD_H4]: Text$3,
   [ElementType.STANDARD_TABLE]: Table,
   [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,
@@ -34218,8 +34416,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
+  // [ElementType.PAGE_HEADER]: PageHeaderSchema,
+  // [ElementType.PAGE_FOOTER]: PageFooterSchema,
 };
 const SchemaPanelRenderer = ({
   schema,
@@ -34636,7 +34834,7 @@ const ConfigurationSideBar = ({ height }) => {
   ));
 };
 const largeTabsHeader = "_largeTabsHeader_d2sio_1";
-const styles = {
+const styles$2 = {
   largeTabsHeader
 };
 function AddItems(props) {
@@ -34920,7 +35118,7 @@ function WidgetConfigPanel({
         renderTabHeader: (_, DefaultHeader) => /* @__PURE__ */ React__default.createElement(
           "div",
           {
-            className: styles.largeTabsHeader,
+            className: styles$2.largeTabsHeader,
             style: { display: "flex", alignItems: "center" }
           },
           /* @__PURE__ */ React__default.createElement(DefaultHeader, { style: { flex: 1 } })
@@ -35082,7 +35280,7 @@ function WidgetConfigPanel({
     /* @__PURE__ */ React__default.createElement(DragOverlay, null, overlayContent)
   ));
 }
-const styleText$a = ".MergeTagComponent-image {\n  max-width: 150px;\n}";
+const styleText$c = ".MergeTagComponent-image {\n  max-width: 150px;\n}";
 const MergeTagComponent = React__default.memo((props) => {
   const ref = useRef(null);
   const onCloseRef = useRefState(props.onClose);
@@ -35146,7 +35344,7 @@ const MergeTagComponent = React__default.memo((props) => {
       onPointerDown: (e) => e.stopPropagation(),
       onClick: (e) => e.stopPropagation()
     },
-    /* @__PURE__ */ React__default.createElement("style", null, styleText$a),
+    /* @__PURE__ */ React__default.createElement("style", null, styleText$c),
     /* @__PURE__ */ React__default.createElement(
       Select$1,
       __spreadProps(__spreadValues({
@@ -35220,8 +35418,8 @@ const SvgMoreIcon = (props) => /* @__PURE__ */ React$2.createElement("svg", __sp
   display: "block",
   fill: "currentColor"
 }, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props), /* @__PURE__ */ React$2.createElement("g", null, /* @__PURE__ */ React$2.createElement("path", { d: "M3,1.5A1.5,1.5,0,1,1,1.5,0,1.5,1.5,0,0,1,3,1.5Z" }), /* @__PURE__ */ React$2.createElement("path", { d: "M8,1.5A1.5,1.5,0,1,1,6.5,0,1.5,1.5,0,0,1,8,1.5Z" }), /* @__PURE__ */ React$2.createElement("path", { d: "M13,1.5A1.5,1.5,0,1,1,11.5,0,1.5,1.5,0,0,1,13,1.5Z" })));
-const styleText$9 = ".easy-email-pro-image-MoreIcon {\n  width: 26px;\n  height: 26px;\n  padding: 2px;\n  position: absolute;\n  color: #fff;\n  right: 0px;\n  z-index: 10;\n  top: 0px;\n  box-sizing: border-box;\n  cursor: pointer;\n  background-color: rgba(55, 53, 47, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 3px;\n}\n.easy-email-pro-image-MoreIcon svg {\n  width: 13px;\n}";
-const styleText$8 = '.easy-email-pro-overlay-container {\n  position: fixed;\n}\n.easy-email-pro-overlay-container .easy-email-pro-overlay-wrapper .content-type {\n  display: flex;\n  padding-left: 14px;\n  padding-right: 14px;\n  margin-top: 6px;\n  margin-bottom: 8px;\n  color: rgba(55, 53, 47, 0.65);\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 120%;\n  user-select: none;\n  text-transform: uppercase;\n}\n.easy-email-pro-overlay-container .easy-email-pro-overlay-wrapper .action-list-item {\n  line-height: 120%;\n  width: 100%;\n  user-select: none;\n  font-size: 14px;\n}\n.easy-email-pro-overlay-container .easy-email-pro-overlay-wrapper .action-list-item .action-list-item-inner {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  width: calc(100% - 8px);\n  margin-left: 4px;\n  margin-right: 4px;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  border-radius: 3px;\n}\n.easy-email-pro-overlay-container .easy-email-pro-overlay-wrapper .action-list-item .action-list-item-inner-hover {\n  transition: "background" 20ms ease-in 0s;\n  background: rgba(55, 53, 47, 0.08);\n}\n.easy-email-pro-overlay-container .easy-email-pro-overlay-wrapper .action-list-item .img {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 10px;\n  margin-right: 4px;\n  margin-top: 1px;\n  align-self: flex-start;\n}\n.easy-email-pro-overlay-container .easy-email-pro-overlay-wrapper .action-list-item .img img {\n  display: block;\n  object-fit: cover;\n  border-radius: 3px;\n  width: 16px;\n  height: 16px;\n}\n.easy-email-pro-overlay-container .easy-email-pro-overlay-wrapper .action-list-item .content {\n  margin-left: 6px;\n  margin-right: 12px;\n  min-width: 0px;\n  flex: 1 1 auto;\n  text-align: left;\n}\n.easy-email-pro-overlay-container .easy-email-pro-overlay-wrapper .action-list-item .content .title {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: rgba(55, 53, 47, 0.65);\n}\n.easy-email-pro-overlay-container .easy-email-pro-overlay-wrapper .action-list-item .content .desc {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: rgba(55, 53, 47, 0.65);\n  margin-top: 2px;\n  font-size: 12px;\n}\n.easy-email-pro-overlay-container .easy-email-pro-scrollbar {\n  display: flex;\n  flex-direction: column;\n  width: 324px;\n  min-width: 180px;\n  max-width: calc(100vw - 24px);\n  height: 100%;\n  max-height: 40vh;\n  border-radius: 4px;\n  background: white;\n  position: relative;\n  max-width: calc(100vw - 24px);\n  box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;\n  overflow: auto;\n  padding-top: 6px;\n  padding-bottom: 6px;\n}';
+const styleText$b = ".easy-email-pro-image-MoreIcon {\n  width: 26px;\n  height: 26px;\n  padding: 2px;\n  position: absolute;\n  color: #fff;\n  right: 0px;\n  z-index: 10;\n  top: 0px;\n  box-sizing: border-box;\n  cursor: pointer;\n  background-color: rgba(55, 53, 47, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 3px;\n}\n.easy-email-pro-image-MoreIcon svg {\n  width: 13px;\n}";
+const styleText$a = '.easy-email-pro-overlay-container {\n  position: fixed;\n}\n.easy-email-pro-overlay-container .easy-email-pro-overlay-wrapper .content-type {\n  display: flex;\n  padding-left: 14px;\n  padding-right: 14px;\n  margin-top: 6px;\n  margin-bottom: 8px;\n  color: rgba(55, 53, 47, 0.65);\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 120%;\n  user-select: none;\n  text-transform: uppercase;\n}\n.easy-email-pro-overlay-container .easy-email-pro-overlay-wrapper .action-list-item {\n  line-height: 120%;\n  width: 100%;\n  user-select: none;\n  font-size: 14px;\n}\n.easy-email-pro-overlay-container .easy-email-pro-overlay-wrapper .action-list-item .action-list-item-inner {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  width: calc(100% - 8px);\n  margin-left: 4px;\n  margin-right: 4px;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  border-radius: 3px;\n}\n.easy-email-pro-overlay-container .easy-email-pro-overlay-wrapper .action-list-item .action-list-item-inner-hover {\n  transition: "background" 20ms ease-in 0s;\n  background: rgba(55, 53, 47, 0.08);\n}\n.easy-email-pro-overlay-container .easy-email-pro-overlay-wrapper .action-list-item .img {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 10px;\n  margin-right: 4px;\n  margin-top: 1px;\n  align-self: flex-start;\n}\n.easy-email-pro-overlay-container .easy-email-pro-overlay-wrapper .action-list-item .img img {\n  display: block;\n  object-fit: cover;\n  border-radius: 3px;\n  width: 16px;\n  height: 16px;\n}\n.easy-email-pro-overlay-container .easy-email-pro-overlay-wrapper .action-list-item .content {\n  margin-left: 6px;\n  margin-right: 12px;\n  min-width: 0px;\n  flex: 1 1 auto;\n  text-align: left;\n}\n.easy-email-pro-overlay-container .easy-email-pro-overlay-wrapper .action-list-item .content .title {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: rgba(55, 53, 47, 0.65);\n}\n.easy-email-pro-overlay-container .easy-email-pro-overlay-wrapper .action-list-item .content .desc {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: rgba(55, 53, 47, 0.65);\n  margin-top: 2px;\n  font-size: 12px;\n}\n.easy-email-pro-overlay-container .easy-email-pro-scrollbar {\n  display: flex;\n  flex-direction: column;\n  width: 324px;\n  min-width: 180px;\n  max-width: calc(100vw - 24px);\n  height: 100%;\n  max-height: 40vh;\n  border-radius: 4px;\n  background: white;\n  position: relative;\n  max-width: calc(100vw - 24px);\n  box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;\n  overflow: auto;\n  padding-top: 6px;\n  padding-bottom: 6px;\n}';
 const SvgDuplicateIcon = (props) => /* @__PURE__ */ React$2.createElement("svg", __spreadValues({ viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", style: {
   width: 16,
   height: 16,
@@ -35489,7 +35687,7 @@ const MoreActionsMenusOverlay = (props) => {
       )
     );
   }));
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "easy-email-pro-overlay-container", style: { left, top } }, /* @__PURE__ */ React__default.createElement("div", { className: "easy-email-pro-overlay-wrapper" }, /* @__PURE__ */ React__default.createElement("div", { className: "easy-email-pro-scrollbar scrollbar" }, list))), /* @__PURE__ */ React__default.createElement("style", null, styleText$8));
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "easy-email-pro-overlay-container", style: { left, top } }, /* @__PURE__ */ React__default.createElement("div", { className: "easy-email-pro-overlay-wrapper" }, /* @__PURE__ */ React__default.createElement("div", { className: "easy-email-pro-scrollbar scrollbar" }, list))), /* @__PURE__ */ React__default.createElement("style", null, styleText$a));
 };
 const MoreIcon = ({
   isHover,
@@ -35531,7 +35729,7 @@ const MoreIcon = ({
       onPointerDown: onToggle
     },
     /* @__PURE__ */ React__default.createElement(SvgMoreIcon, null),
-    /* @__PURE__ */ React__default.createElement("style", null, styleText$9)
+    /* @__PURE__ */ React__default.createElement("style", null, styleText$b)
   ), /* @__PURE__ */ React__default.createElement(
     MoreActionsMenusOverlay,
     {
@@ -35881,7 +36079,7 @@ const UnsplashImagesDrawer = forwardRef(
     ), /* @__PURE__ */ React__default.createElement("div", { ref, onClick: () => setUnsplashVisible(true) }, props.children));
   }
 );
-const styleText$7 = ".MinimalistEditorTopBar {\n  height: 50px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid var(--color-border-2);\n  position: relative;\n}\n.MinimalistEditorTopBar .MinimalistEditorTopBar-left-side {\n  position: absolute;\n  left: 10px;\n  max-width: 400px;\n  display: flex;\n  align-items: center;\n}\n.MinimalistEditorTopBar .MinimalistEditorTopBar-right-side {\n  position: absolute;\n  right: 10px;\n}\n.MinimalistEditorTopBar .MinimalistEditorTopBar-center-side {\n  max-width: 600px;\n  min-width: 400px;\n  display: flex;\n}\n.MinimalistEditorTopBar #RichTextBar .formatButton {\n  font-size: 16px;\n}\n.MinimalistEditorTopBar .easy-email-pro-font-size,\n.MinimalistEditorTopBar .easy-email-pro-turnInto,\n.MinimalistEditorTopBar .easy-email-pro-font-family {\n  margin-right: 10px;\n}\n.MinimalistEditorTopBar .easy-email-pro-font-size .arco-select-view,\n.MinimalistEditorTopBar .easy-email-pro-turnInto .arco-select-view,\n.MinimalistEditorTopBar .easy-email-pro-font-family .arco-select-view {\n  border-width: 1px !important;\n}\n.MinimalistEditorTopBar .controller-item {\n  cursor: pointer;\n  font-size: 24px !important;\n  color: rgb(34, 47, 62);\n}\n.MinimalistEditorTopBar .controller-item button {\n  padding: 0 8px !important;\n}\n.MinimalistEditorTopBar [data-enable=false] {\n  color: rgba(34, 47, 62, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}";
+const styleText$9 = ".MinimalistEditorTopBar {\n  height: 50px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid var(--color-border-2);\n  position: relative;\n}\n.MinimalistEditorTopBar .MinimalistEditorTopBar-left-side {\n  position: absolute;\n  left: 10px;\n  max-width: 400px;\n  display: flex;\n  align-items: center;\n}\n.MinimalistEditorTopBar .MinimalistEditorTopBar-right-side {\n  position: absolute;\n  right: 10px;\n}\n.MinimalistEditorTopBar .MinimalistEditorTopBar-center-side {\n  max-width: 600px;\n  min-width: 400px;\n  display: flex;\n}\n.MinimalistEditorTopBar #RichTextBar .formatButton {\n  font-size: 16px;\n}\n.MinimalistEditorTopBar .easy-email-pro-font-size,\n.MinimalistEditorTopBar .easy-email-pro-turnInto,\n.MinimalistEditorTopBar .easy-email-pro-font-family {\n  margin-right: 10px;\n}\n.MinimalistEditorTopBar .easy-email-pro-font-size .arco-select-view,\n.MinimalistEditorTopBar .easy-email-pro-turnInto .arco-select-view,\n.MinimalistEditorTopBar .easy-email-pro-font-family .arco-select-view {\n  border-width: 1px !important;\n}\n.MinimalistEditorTopBar .controller-item {\n  cursor: pointer;\n  font-size: 24px !important;\n  color: rgb(34, 47, 62);\n}\n.MinimalistEditorTopBar .controller-item button {\n  padding: 0 8px !important;\n}\n.MinimalistEditorTopBar [data-enable=false] {\n  color: rgba(34, 47, 62, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}";
 const EditorTopBar = () => {
   const editor = useSlate();
   const { copyBlock, deleteBlock } = useElementInteract();
@@ -36001,7 +36199,7 @@ const EditorTopBar = () => {
       },
       /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-mobile" })
     )), /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(Button$2.Group, null, /* @__PURE__ */ React__default.createElement(Button$2, { disabled: !undoable }, /* @__PURE__ */ React__default.createElement(Tooltip, { position: "top", content: t("Undo") }, /* @__PURE__ */ React__default.createElement(IconUndo, { width: 40, onClick: editor.undo }))), /* @__PURE__ */ React__default.createElement(Button$2, { disabled: !redoable }, /* @__PURE__ */ React__default.createElement(Tooltip, { position: "top", content: t("Redo") }, /* @__PURE__ */ React__default.createElement(IconRedo, { onClick: editor.redo })))), canPreview && (lock ? /* @__PURE__ */ React__default.createElement(Tooltip, { content: t("Email preview") }, /* @__PURE__ */ React__default.createElement(Button$2, { disabled: lock }, /* @__PURE__ */ React__default.createElement(IconEye, null))) : /* @__PURE__ */ React__default.createElement(SharedComponents.PreviewEmailDrawer, null, /* @__PURE__ */ React__default.createElement(Tooltip, { content: t("Email preview") }, /* @__PURE__ */ React__default.createElement(Button$2, { disabled: lock }, /* @__PURE__ */ React__default.createElement(IconEye, null)))))), /* @__PURE__ */ React__default.createElement("div", null)))
-  ), /* @__PURE__ */ React__default.createElement("style", null, styleText$7));
+  ), /* @__PURE__ */ React__default.createElement("style", null, styleText$9));
 };
 const index$3 = "";
 const PopupCard = (props) => {
@@ -36458,7 +36656,7 @@ const Image$2 = ({ nodePath }) => {
     /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-adjust" })
   ));
 };
-const Text = ({ nodePath }) => {
+const Text$2 = ({ nodePath }) => {
   return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(SharedComponents.HoveringToolbar, null));
 };
 const Button = ({ nodePath }) => {
@@ -37012,13 +37210,13 @@ const ConfigurationToolbarMap = {
   [ElementType.STANDARD_DIVIDER]: Divider,
   [ElementType.STANDARD_SPACER]: Spacer,
   //text
-  [ElementType.STANDARD_TEXT]: Text,
-  [ElementType.STANDARD_TEXT_LIST]: Text,
-  [ElementType.STANDARD_PARAGRAPH]: Text,
-  [ElementType.STANDARD_H1]: Text,
-  [ElementType.STANDARD_H2]: Text,
-  [ElementType.STANDARD_H3]: Text,
-  [ElementType.STANDARD_H4]: Text
+  [ElementType.STANDARD_TEXT]: Text$2,
+  [ElementType.STANDARD_TEXT_LIST]: Text$2,
+  [ElementType.STANDARD_PARAGRAPH]: Text$2,
+  [ElementType.STANDARD_H1]: Text$2,
+  [ElementType.STANDARD_H2]: Text$2,
+  [ElementType.STANDARD_H3]: Text$2,
+  [ElementType.STANDARD_H4]: Text$2
 };
 const ConfigurationToolbar = () => {
   const { selectedNode } = useSelectedNode();
@@ -38812,7 +39010,7 @@ const StandaloneElementEditorDrawer = ({ children }) => {
         footer: null
       },
       /* @__PURE__ */ React__default.createElement(
-        PageHeader,
+        PageHeader$1,
         {
           backIcon: hasChanged ? /* @__PURE__ */ React__default.createElement(
             Popconfirm,
@@ -38926,46 +39124,870 @@ const DraggingPlaceholderWrapper = (props) => {
     props.placeholder
   );
 };
-ExternalComponents.ChildrenWithPlaceholderWrapper = DraggingPlaceholderWrapper;
-const SharedComponents = {
-  PreviewEmailDrawer,
-  PreviewEmail,
-  ElementIcon,
-  BlockSideBar,
-  ConfigurationSideBar,
-  AttributePanel,
-  ColumnLayout,
-  ConfigurationDrawer,
-  ConfigurationPanel,
-  CollapseWrapper,
-  EditorTabs,
-  UniversalElementEditorDrawer,
-  StandaloneElementEditorDrawer,
-  RichTextBar,
-  HoveringToolbar,
-  TextHTMLEditor,
-  Hotkeys,
-  Controller,
-  UnsplashImages,
-  UnsplashImagesDrawer,
-  WidgetConfigPanel,
-  FullHeightOverlayScrollbars,
-  BlockList,
-  UniversalListItem,
-  UniversalList,
-  MergeTagComponent,
-  ImageAction,
-  DesktopEmailPreview,
-  MobilePreview,
-  MinimalistEditorTopBar: EditorTopBar,
-  ConfigurationToolbar,
-  AIAssistant,
-  AIPromptModal,
-  SourceCodePanel,
-  DragItem,
-  ElementStyleGallery,
-  StandaloneElementSaveButtonPortal
+const stylesText = ".mergtag-popover {\n  position: relative;\n  width: 100%;\n}\n\n.easy-email-pro-merge-tag-popover {\n  line-height: 1.3;\n  background-color: #fff;\n  border-top: 1px solid rgb(229, 230, 235);\n  z-index: 10;\n  padding: 20px;\n  font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;\n}\n.easy-email-pro-merge-tag-popover h3 {\n  margin: 0;\n  font-size: 12px;\n  color: rgb(32, 34, 35);\n  text-transform: uppercase;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.easy-email-pro-merge-tag-popover .easy-email-pro-merge-tag-popover-desc {\n  font-size: 14px;\n  color: rgb(109, 113, 117);\n}\n.easy-email-pro-merge-tag-popover .easy-email-pro-merge-tag-popover-desc-label {\n  font-weight: 400;\n  line-height: 15px;\n  border: 1px solid rgb(109, 113, 117);\n  border-radius: 4px;\n  text-transform: none;\n  letter-spacing: normal;\n  position: relative;\n  display: flex;\n  align-items: center;\n  color: rgb(32, 34, 35);\n  cursor: text;\n  font-size: 14px;\n}\n.easy-email-pro-merge-tag-popover input {\n  text-transform: none;\n  letter-spacing: normal;\n  position: relative;\n  z-index: 20;\n  display: block;\n  flex: 1 1;\n  width: 100%;\n  min-width: 0;\n  min-height: 25px;\n  margin: 0;\n  padding: 5px 12px;\n  background: none;\n  border: 1px solid transparent;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  appearance: none;\n  caret-color: rgb(32, 34, 35);\n  color: rgb(32, 34, 35);\n}\n.easy-email-pro-merge-tag-popover input:focus {\n  outline: none;\n}\n.easy-email-pro-merge-tag-popover .easy-email-pro-merge-tag-popover-desc-label-count {\n  color: rgb(109, 113, 117);\n  z-index: 20;\n  margin: 0 12px 0 3.5px;\n  pointer-events: none;\n  text-align: right;\n}\n.easy-email-pro-merge-tag-popover .easy-email-pro-merge-tag-popover-desc-label-button {\n  font-size: 14px;\n  text-align: right;\n  margin-top: 10px;\n  font-weight: normal;\n  margin-bottom: 5px;\n}\n.easy-email-pro-merge-tag-popover .easy-email-pro-merge-tag-popover-desc-label-button button {\n  color: rgb(var(--primary-6));\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.1s linear;\n  cursor: pointer;\n  outline: none;\n  background-color: transparent;\n  border: 1px solid transparent;\n}\n.easy-email-pro-merge-tag-popover .easy-email-pro-merge-tag-popover-desc-label-button button:focus {\n  color: rgb(var(--primary-6));\n  background-color: rgb(242, 243, 245);\n}\n.easy-email-pro-merge-tag-popover .easy-email-pro-merge-tag-popover-desc-label-button button:hover {\n  color: rgb(var(--primary-6));\n  background-color: rgb(242, 243, 245);\n}\n.easy-email-pro-merge-tag-popover .easy-email-pro-merge-tag-popover-container {\n  position: relative;\n  z-index: 2;\n}";
+const MergetagPopover = ({
+  element,
+  onSave
+}) => {
+  const [text, setText] = useState(element.data.default || "");
+  useEffect(() => {
+    setText(element.data.default || "");
+  }, [element.data.default]);
+  const onChange = useCallback(
+    (ev) => {
+      setText(ev.target.value);
+      onSave(ev.target.value);
+    },
+    [onSave]
+  );
+  return /* @__PURE__ */ React__default.createElement("div", { className: classnames$1("easy-email-pro-merge-tag-popover") }, /* @__PURE__ */ React__default.createElement("div", { className: "easy-email-pro-merge-tag-popover-container" }, /* @__PURE__ */ React__default.createElement("h3", { style: { marginBottom: 10 } }, /* @__PURE__ */ React__default.createElement("span", null, t("Default value"))), /* @__PURE__ */ React__default.createElement("div", { className: "easy-email-pro-merge-tag-popover-desc" }, /* @__PURE__ */ React__default.createElement("p", { style: { marginBottom: 10 } }, t(
+    'If a personalized text value isn"t available, then a default value is shown.'
+  )), /* @__PURE__ */ React__default.createElement("div", { className: "easy-email-pro-merge-tag-popover-desc-label" }, /* @__PURE__ */ React__default.createElement(
+    "input",
+    {
+      autoFocus: true,
+      value: text,
+      onChange,
+      type: "text",
+      autoComplete: "off",
+      maxLength: 40
+    }
+  ), /* @__PURE__ */ React__default.createElement("div", { className: "easy-email-pro-merge-tag-popover-desc-label-count" }, text.length, "/40")))), /* @__PURE__ */ React__default.createElement("style", null, stylesText));
+};
+const blocksDrawer = "_blocksDrawer_ek6hr_1";
+const content = "_content_ek6hr_8";
+const category$1 = "_category_ek6hr_14";
+const categoryHeader$1 = "_categoryHeader_ek6hr_21";
+const blockList = "_blockList_ek6hr_27";
+const addButton = "_addButton_ek6hr_39";
+const badge = "_badge_ek6hr_43";
+const blockItem = "_blockItem_ek6hr_57";
+const blockIcon = "_blockIcon_ek6hr_61";
+const layoutPreview$1 = "_layoutPreview_ek6hr_81";
+const layoutAddButton = "_layoutAddButton_ek6hr_85";
+const blockActions = "_blockActions_ek6hr_94";
+const styles$1 = {
+  blocksDrawer,
+  content,
+  category: category$1,
+  categoryHeader: categoryHeader$1,
+  blockList,
+  addButton,
+  badge,
+  blockItem,
+  blockIcon,
+  layoutPreview: layoutPreview$1,
+  layoutAddButton,
+  blockActions
+};
+const { Text: Text$1 } = Typography$1;
+const LayoutPreview$1 = ({
+  sections,
+  onAdd
+}) => {
+  const isMultipleSections = sections.length > 1;
+  const [isHovered, setIsHovered] = useState(false);
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: styles$1.layoutPreview,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      style: {
+        padding: "12px 0",
+        borderBottom: "1px solid var(--color-border-2)",
+        cursor: "pointer",
+        transition: "background-color 0.2s ease",
+        position: "relative"
+      }
+    },
+    sections.map((section, sIndex) => /* @__PURE__ */ React__default.createElement("div", { key: sIndex }, isMultipleSections && sIndex > 0 && /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        style: {
+          fontSize: 10,
+          color: "var(--color-text-3)",
+          marginTop: 6,
+          marginBottom: 6
+        }
+      },
+      "Row ",
+      sIndex + 1
+    ), /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        style: {
+          height: 32,
+          border: "1px solid var(--color-border-3)",
+          borderRadius: 2,
+          overflow: "hidden",
+          display: "flex",
+          backgroundColor: "var(--color-fill-2)",
+          marginBottom: isMultipleSections && sIndex < sections.length - 1 ? 6 : 0
+        }
+      },
+      section.columns.map((width, cIndex) => /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          key: cIndex,
+          style: {
+            width,
+            borderRight: cIndex === section.columns.length - 1 ? "none" : "1px solid var(--color-border-3)",
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: 10,
+            color: "var(--color-text-3)",
+            fontWeight: 500
+          }
+        },
+        width
+      ))
+    ))),
+    isHovered && /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          right: 0,
+          top: "50%",
+          transform: "translateY(-50%)"
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Button$2,
+        {
+          type: "primary",
+          size: "small",
+          onClick: (e) => {
+            e.stopPropagation();
+            onAdd();
+          }
+        },
+        t("Add")
+      )
+    )
+  );
+};
+const BlocksDrawer = () => {
+  const [ref, setRef] = useState(null);
+  const { addBlock } = useElementInteract();
+  const {
+    visible,
+    closeBlocksDrawer: onClose,
+    insertPath,
+    parentCategory
+  } = useBlocksDrawer();
+  const editorProps = useEditorProps();
+  const { categories: propsCategories } = editorProps;
+  const categories = useMemo(() => {
+    return (propsCategories || []).map((categoryItem) => {
+      if (!parentCategory)
+        return null;
+      if (categoryItem.displayType === "grid") {
+        return __spreadProps(__spreadValues({}, categoryItem), {
+          blocks: categoryItem.blocks.filter((block) => {
+            const blockDefinition = BlockManager.getBlockByType(block.type);
+            return NodeUtils.isParentCategory(
+              blockDefinition.category,
+              parentCategory
+            );
+          })
+        });
+      } else if (categoryItem.displayType === "section") {
+        if (parentCategory === ElementType.PAGE) {
+          return categoryItem;
+        }
+        return null;
+      } else if (categoryItem.displayType === "column" || categoryItem.displayType === "widget") {
+        if (parentCategory === ElementType.WRAPPER || parentCategory === ElementType.PAGE) {
+          return categoryItem;
+        }
+        return null;
+      }
+      return null;
+    }).filter(Boolean);
+  }, [propsCategories, parentCategory]);
+  const handleSelectBlock = useCallback(
+    (blockType) => {
+      if (!insertPath)
+        return;
+      try {
+        addBlock(blockType, insertPath, false);
+        onClose();
+      } catch (error2) {
+        console.error("Failed to add block:", error2);
+      }
+    },
+    [addBlock, insertPath, onClose]
+  );
+  return useMemo(() => {
+    if (!(propsCategories == null ? void 0 : propsCategories.length))
+      return null;
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        id: "BlocksDrawer",
+        ref: setRef,
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+          zIndex: 1,
+          pointerEvents: visible ? "auto" : "none",
+          display: visible ? "block" : "none"
+        }
+      }
+    ), ref && /* @__PURE__ */ React__default.createElement(
+      Drawer,
+      {
+        width: "100%",
+        title: null,
+        closable: false,
+        focusLock: false,
+        placement: "left",
+        bodyStyle: { padding: 0, transition: "none" },
+        visible,
+        getPopupContainer: () => ref,
+        footer: null,
+        onCancel: onClose
+      },
+      /* @__PURE__ */ React__default.createElement("div", { className: styles$1.blocksDrawer }, /* @__PURE__ */ React__default.createElement("div", { style: { padding: "16px 10px" } }, /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(
+        Button$2,
+        {
+          type: "text",
+          onClick: onClose,
+          icon: /* @__PURE__ */ React__default.createElement(IconLeft, null),
+          shape: "circle"
+        }
+      ), /* @__PURE__ */ React__default.createElement("div", null, t(`Add block`)))), /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: styles$1.content,
+          style: { height: `calc(${editorProps.height} - 60px)` }
+        },
+        categories.map((category2, categoryIndex) => {
+          if (category2.displayType === "grid") {
+            return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex, className: styles$1.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles$1.categoryHeader }, /* @__PURE__ */ React__default.createElement(
+              Text$1,
+              {
+                bold: true,
+                style: {
+                  fontSize: 14,
+                  textTransform: "uppercase",
+                  letterSpacing: 0.5
+                }
+              },
+              category2.label
+            )), /* @__PURE__ */ React__default.createElement(
+              List$1,
+              {
+                className: styles$1.blockList,
+                dataSource: category2.blocks,
+                render: (block, blockIndex) => /* @__PURE__ */ React__default.createElement(
+                  List$1.Item,
+                  {
+                    key: blockIndex,
+                    className: styles$1.blockItem,
+                    actions: [
+                      /* @__PURE__ */ React__default.createElement(
+                        "div",
+                        {
+                          key: "actions",
+                          className: styles$1.blockActions
+                        },
+                        /* @__PURE__ */ React__default.createElement(
+                          Button$2,
+                          {
+                            type: "primary",
+                            size: "small",
+                            className: styles$1.addButton,
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleSelectBlock(__spreadProps(__spreadValues({}, block.payload), {
+                                type: block.type
+                              }));
+                            }
+                          },
+                          t(`Add`)
+                        )
+                      )
+                    ]
+                  },
+                  /* @__PURE__ */ React__default.createElement(Space, { size: 12 }, /* @__PURE__ */ React__default.createElement(
+                    "div",
+                    {
+                      className: styles$1.blockIcon,
+                      style: {
+                        width: 24,
+                        height: 24,
+                        minWidth: 24,
+                        minHeight: 24,
+                        maxWidth: 24,
+                        maxHeight: 24,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        flexShrink: 0,
+                        overflow: "hidden",
+                        position: "relative"
+                      }
+                    },
+                    block.icon
+                  ), /* @__PURE__ */ React__default.createElement(Text$1, null, block.title || BlockManager.getBlockTitle(__spreadProps(__spreadValues({}, block.payload), {
+                    type: block.type
+                  }))))
+                )
+              }
+            ));
+          }
+          if (category2.displayType === "section") {
+            return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex, className: styles$1.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles$1.categoryHeader }, /* @__PURE__ */ React__default.createElement(
+              Text$1,
+              {
+                bold: true,
+                style: {
+                  fontSize: 12,
+                  textTransform: "uppercase",
+                  letterSpacing: 0.5
+                }
+              },
+              category2.label
+            )), /* @__PURE__ */ React__default.createElement("div", { style: { padding: "0 20px" } }, category2.blocks.map((item2, index2) => /* @__PURE__ */ React__default.createElement("div", { key: index2 }, /* @__PURE__ */ React__default.createElement(
+              "div",
+              {
+                style: {
+                  fontSize: 13,
+                  fontWeight: 500,
+                  padding: "14px 0 8px 0",
+                  color: "var(--color-text-2)"
+                }
+              },
+              item2.title
+            ), item2.variants && item2.variants.map((variant, vIndex) => /* @__PURE__ */ React__default.createElement(
+              LayoutPreview$1,
+              {
+                key: vIndex,
+                sections: variant.sections,
+                onAdd: () => {
+                  const isMultiple = variant.sections.length > 1;
+                  if (isMultiple) {
+                    const wrapperBlock = BlockManager.getBlockByType(
+                      ElementType.STANDARD_WRAPPER
+                    );
+                    const element = wrapperBlock.create({
+                      attributes: {
+                        "background-repeat": "no-repeat"
+                      },
+                      children: variant.sections.map(
+                        (section) => ({
+                          type: StandardType.STANDARD_SECTION,
+                          attributes: {},
+                          data: {},
+                          children: section.columns.map(
+                            (column2) => ({
+                              type: StandardType.STANDARD_COLUMN,
+                              attributes: { width: column2 },
+                              data: {},
+                              children: []
+                            })
+                          )
+                        })
+                      )
+                    });
+                    handleSelectBlock(element);
+                  } else {
+                    const sectionBlock = BlockManager.getBlockByType(
+                      ElementType.STANDARD_SECTION
+                    );
+                    const element = sectionBlock.create({
+                      attributes: {},
+                      data: {},
+                      children: variant.sections[0].columns.map(
+                        (column2) => ({
+                          type: StandardType.STANDARD_COLUMN,
+                          attributes: { width: column2 },
+                          data: {},
+                          children: []
+                        })
+                      )
+                    });
+                    handleSelectBlock(element);
+                  }
+                }
+              }
+            ))))));
+          }
+          if (category2.displayType === "column") {
+            return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex, className: styles$1.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles$1.categoryHeader }, /* @__PURE__ */ React__default.createElement(
+              Text$1,
+              {
+                bold: true,
+                style: {
+                  fontSize: 12,
+                  textTransform: "uppercase",
+                  letterSpacing: 0.5
+                }
+              },
+              category2.label
+            )), /* @__PURE__ */ React__default.createElement("div", { style: { padding: "0 20px" } }, category2.blocks.map((item2, index2) => /* @__PURE__ */ React__default.createElement("div", { key: index2 }, /* @__PURE__ */ React__default.createElement(
+              "div",
+              {
+                style: {
+                  fontSize: 13,
+                  fontWeight: 500,
+                  padding: "14px 0 8px 0",
+                  color: "var(--color-text-2)"
+                }
+              },
+              item2.title
+            ), item2.payload && item2.payload.map(
+              (columns, pIndex) => /* @__PURE__ */ React__default.createElement(
+                LayoutPreview$1,
+                {
+                  key: pIndex,
+                  sections: [{ columns }],
+                  onAdd: () => {
+                    const sectionBlock = BlockManager.getBlockByType(
+                      ElementType.STANDARD_SECTION
+                    );
+                    const element = sectionBlock.create({
+                      attributes: {},
+                      data: {},
+                      children: columns.map(
+                        (column2) => ({
+                          type: StandardType.STANDARD_COLUMN,
+                          attributes: { width: column2 },
+                          data: {},
+                          children: []
+                        })
+                      )
+                    });
+                    handleSelectBlock(element);
+                  }
+                }
+              )
+            )))));
+          }
+          if (category2.displayType === "custom") {
+            return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex, className: styles$1.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles$1.categoryHeader }, /* @__PURE__ */ React__default.createElement(
+              Text$1,
+              {
+                bold: true,
+                style: {
+                  fontSize: 12,
+                  textTransform: "uppercase",
+                  letterSpacing: 0.5
+                }
+              },
+              category2.label
+            )), /* @__PURE__ */ React__default.createElement("div", { style: { padding: "16px 20px" } }, category2.blocks.map((item2, index2) => /* @__PURE__ */ React__default.createElement(
+              "div",
+              {
+                key: index2,
+                style: {
+                  marginBottom: index2 < category2.blocks.length - 1 ? 16 : 0
+                }
+              },
+              item2
+            ))));
+          }
+          return null;
+        })
+      )),
+      /* @__PURE__ */ React__default.createElement("style", null, `#BlocksDrawer .arco-drawer { transform: none !important; }`)
+    ));
+  }, [
+    propsCategories == null ? void 0 : propsCategories.length,
+    visible,
+    ref,
+    onClose,
+    editorProps.height,
+    categories,
+    handleSelectBlock
+  ]);
+};
+const blocksModal = "_blocksModal_oes30_1";
+const modalHeader = "_modalHeader_oes30_9";
+const headerActions = "_headerActions_oes30_16";
+const searchInput = "_searchInput_oes30_22";
+const modalTitle = "_modalTitle_oes30_26";
+const contentArea = "_contentArea_oes30_32";
+const category = "_category_oes30_38";
+const categoryHeader = "_categoryHeader_oes30_45";
+const gridContainer = "_gridContainer_oes30_56";
+const gridItem = "_gridItem_oes30_65";
+const selected = "_selected_oes30_84";
+const gridItemIcon = "_gridItemIcon_oes30_88";
+const gridItemLabel = "_gridItemLabel_oes30_118";
+const checkIcon = "_checkIcon_oes30_126";
+const emptyState = "_emptyState_oes30_143";
+const layoutPreview = "_layoutPreview_oes30_153";
+const layoutSelected = "_layoutSelected_oes30_169";
+const layoutRowLabel = "_layoutRowLabel_oes30_175";
+const layoutRow = "_layoutRow_oes30_175";
+const layoutColumn = "_layoutColumn_oes30_200";
+const styles = {
+  blocksModal,
+  modalHeader,
+  headerActions,
+  searchInput,
+  modalTitle,
+  contentArea,
+  category,
+  categoryHeader,
+  gridContainer,
+  gridItem,
+  selected,
+  gridItemIcon,
+  gridItemLabel,
+  checkIcon,
+  emptyState,
+  layoutPreview,
+  layoutSelected,
+  layoutRowLabel,
+  layoutRow,
+  layoutColumn
+};
+const { Text } = Typography$1;
+const LayoutPreview = ({
+  sections,
+  isSelected,
+  onClick
+}) => {
+  const isMultipleSections = sections.length > 1;
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: `${styles.layoutPreview} ${isSelected ? styles.layoutSelected : ""}`,
+      onClick
+    },
+    sections.map((section, sIndex) => /* @__PURE__ */ React__default.createElement("div", { key: sIndex }, isMultipleSections && sIndex > 0 && /* @__PURE__ */ React__default.createElement("div", { className: styles.layoutRowLabel }, "Row ", sIndex + 1), /* @__PURE__ */ React__default.createElement("div", { className: styles.layoutRow }, section.columns.map((width, cIndex) => /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        key: cIndex,
+        className: styles.layoutColumn,
+        style: { width }
+      },
+      width
+    ))))),
+    isSelected && sections.length > 0 && /* @__PURE__ */ React__default.createElement("div", { className: styles.checkIcon }, /* @__PURE__ */ React__default.createElement(IconCheck, null))
+  );
 };
+const BlocksModal = () => {
+  const { addBlock } = useElementInteract();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedBlock, setSelectedBlock] = useState(null);
+  const {
+    visible,
+    closeBlocksDrawer: onClose,
+    insertPath,
+    parentCategory
+  } = useBlocksDrawer();
+  const editorProps = useEditorProps();
+  const { categories: propsCategories } = editorProps;
+  const categories = useMemo(() => {
+    const filtered = (propsCategories || []).map((categoryItem) => {
+      if (!parentCategory)
+        return null;
+      if (categoryItem.displayType === "grid") {
+        const filteredBlocks = categoryItem.blocks.filter((block) => {
+          const blockDefinition = BlockManager.getBlockByType(block.type);
+          const matchesParent = NodeUtils.isParentCategory(
+            blockDefinition.category,
+            parentCategory
+          );
+          if (matchesParent && searchQuery.trim()) {
+            const blockTitle = block.title || BlockManager.getBlockTitle(__spreadProps(__spreadValues({}, block.payload), {
+              type: block.type
+            }));
+            const searchLower = searchQuery.toLowerCase();
+            return blockTitle.toLowerCase().includes(searchLower) || block.type.toLowerCase().includes(searchLower) || categoryItem.label.toLowerCase().includes(searchLower);
+          }
+          return matchesParent;
+        });
+        return __spreadProps(__spreadValues({}, categoryItem), {
+          blocks: filteredBlocks
+        });
+      } else if (categoryItem.displayType === "section") {
+        if (parentCategory === ElementType.PAGE) {
+          if (searchQuery.trim()) {
+            const filteredBlocks = categoryItem.blocks.filter((item2) => {
+              const searchLower = searchQuery.toLowerCase();
+              return item2.title && item2.title.toLowerCase().includes(searchLower) || categoryItem.label.toLowerCase().includes(searchLower);
+            });
+            return __spreadProps(__spreadValues({}, categoryItem), {
+              blocks: filteredBlocks
+            });
+          }
+          return categoryItem;
+        }
+        return null;
+      } else if (categoryItem.displayType === "column" || categoryItem.displayType === "widget") {
+        if (parentCategory === ElementType.WRAPPER || parentCategory === ElementType.PAGE) {
+          if (searchQuery.trim()) {
+            const filteredBlocks = categoryItem.blocks.filter(
+              (item2) => {
+                const searchLower = searchQuery.toLowerCase();
+                return item2.title && item2.title.toLowerCase().includes(searchLower) || categoryItem.label.toLowerCase().includes(searchLower);
+              }
+            );
+            return __spreadProps(__spreadValues({}, categoryItem), {
+              blocks: filteredBlocks
+            });
+          }
+          return categoryItem;
+        }
+        return null;
+      }
+      return null;
+    }).filter((category2) => {
+      var _a;
+      return category2 && (((_a = category2.blocks) == null ? void 0 : _a.length) > 0 || category2.displayType !== "grid");
+    });
+    return filtered;
+  }, [propsCategories, parentCategory, searchQuery]);
+  const handleSelectBlock = useCallback(
+    (blockType) => {
+      if (!insertPath)
+        return;
+      try {
+        addBlock(blockType, insertPath, false);
+        onClose();
+        setSelectedBlock(null);
+      } catch (error2) {
+        console.error("Failed to add block:", error2);
+      }
+    },
+    [addBlock, insertPath, onClose]
+  );
+  const handleGridItemClick = useCallback(
+    (block, categoryIndex, blockIndex) => {
+      setSelectedBlock({ block, categoryIndex, blockIndex });
+    },
+    []
+  );
+  const handleAddClick = useCallback(() => {
+    if (!selectedBlock)
+      return;
+    const { block, categoryIndex } = selectedBlock;
+    const category2 = categories[categoryIndex];
+    if ((category2 == null ? void 0 : category2.displayType) === "grid") {
+      handleSelectBlock(__spreadProps(__spreadValues({}, block.payload), {
+        type: block.type
+      }));
+      return;
+    }
+    if ((category2 == null ? void 0 : category2.displayType) === "column" && block.columns) {
+      const sectionBlock = BlockManager.getBlockByType(
+        ElementType.STANDARD_SECTION
+      );
+      const element = sectionBlock.create({
+        attributes: {},
+        data: {},
+        children: block.columns.map((column2) => ({
+          type: StandardType.STANDARD_COLUMN,
+          attributes: { width: column2 },
+          data: {},
+          children: []
+        }))
+      });
+      handleSelectBlock(element);
+      return;
+    }
+    if ((category2 == null ? void 0 : category2.displayType) === "section" && block.sections) {
+      const isMultiple = block.sections.length > 1;
+      if (isMultiple) {
+        const wrapperBlock = BlockManager.getBlockByType(
+          ElementType.STANDARD_WRAPPER
+        );
+        const element = wrapperBlock.create({
+          attributes: {
+            "background-repeat": "no-repeat"
+          },
+          children: block.sections.map((section) => ({
+            type: StandardType.STANDARD_SECTION,
+            attributes: {},
+            data: {},
+            children: section.columns.map((column2) => ({
+              type: StandardType.STANDARD_COLUMN,
+              attributes: { width: column2 },
+              data: {},
+              children: []
+            }))
+          }))
+        });
+        handleSelectBlock(element);
+      } else {
+        const sectionBlock = BlockManager.getBlockByType(
+          ElementType.STANDARD_SECTION
+        );
+        const element = sectionBlock.create({
+          attributes: {},
+          data: {},
+          children: block.sections[0].columns.map((column2) => ({
+            type: StandardType.STANDARD_COLUMN,
+            attributes: { width: column2 },
+            data: {},
+            children: []
+          }))
+        });
+        handleSelectBlock(element);
+      }
+    }
+  }, [selectedBlock, categories, handleSelectBlock]);
+  const handleModalClose = useCallback(() => {
+    setSelectedBlock(null);
+    setSearchQuery("");
+    onClose();
+  }, [onClose]);
+  const handleSearchChange = useCallback((value) => {
+    setSearchQuery(value);
+    setSelectedBlock(null);
+  }, []);
+  const renderGridContent = useMemo(() => {
+    return categories.map((category2, categoryIndex) => {
+      if (category2.displayType === "grid") {
+        return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex, className: styles.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles.categoryHeader }, /* @__PURE__ */ React__default.createElement(Text, { bold: true }, category2.label)), /* @__PURE__ */ React__default.createElement("div", { className: styles.gridContainer }, category2.blocks.map((block, blockIndex) => {
+          const isSelected = (selectedBlock == null ? void 0 : selectedBlock.categoryIndex) === categoryIndex && (selectedBlock == null ? void 0 : selectedBlock.blockIndex) === blockIndex;
+          const blockTitle = block.title || BlockManager.getBlockTitle(__spreadProps(__spreadValues({}, block.payload), {
+            type: block.type
+          }));
+          return /* @__PURE__ */ React__default.createElement(
+            "div",
+            {
+              key: blockIndex,
+              className: `${styles.gridItem} ${isSelected ? styles.selected : ""}`,
+              onClick: () => handleGridItemClick(block, categoryIndex, blockIndex)
+            },
+            /* @__PURE__ */ React__default.createElement("div", { className: styles.gridItemIcon }, block.icon),
+            /* @__PURE__ */ React__default.createElement("div", { className: styles.gridItemLabel }, blockTitle),
+            isSelected && /* @__PURE__ */ React__default.createElement("div", { className: styles.checkIcon }, /* @__PURE__ */ React__default.createElement(IconCheck, null))
+          );
+        })));
+      }
+      if (category2.displayType === "section") {
+        return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex, className: styles.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles.categoryHeader }, /* @__PURE__ */ React__default.createElement(Text, { bold: true }, category2.label)), /* @__PURE__ */ React__default.createElement("div", { style: { padding: "0 20px" } }, category2.blocks.map((item2, index2) => /* @__PURE__ */ React__default.createElement("div", { key: index2 }, /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            style: {
+              fontSize: 13,
+              fontWeight: 500,
+              padding: "14px 0 8px 0",
+              color: "var(--color-text-2)"
+            }
+          },
+          item2.title
+        ), /* @__PURE__ */ React__default.createElement(
+          Space,
+          {
+            direction: "vertical",
+            size: 10,
+            style: { width: "100%" }
+          },
+          item2.variants && item2.variants.map((variant, vIndex) => {
+            const isSelected = (selectedBlock == null ? void 0 : selectedBlock.categoryIndex) === categoryIndex && (selectedBlock == null ? void 0 : selectedBlock.blockIndex) === index2 && (selectedBlock == null ? void 0 : selectedBlock.variantIndex) === vIndex;
+            return /* @__PURE__ */ React__default.createElement(
+              LayoutPreview,
+              {
+                key: vIndex,
+                sections: variant.sections,
+                isSelected,
+                onClick: () => {
+                  setSelectedBlock({
+                    block: variant,
+                    categoryIndex,
+                    blockIndex: index2,
+                    variantIndex: vIndex
+                  });
+                }
+              }
+            );
+          })
+        )))));
+      }
+      if (category2.displayType === "column") {
+        return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex, className: styles.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles.categoryHeader }, /* @__PURE__ */ React__default.createElement(Text, { bold: true }, category2.label)), /* @__PURE__ */ React__default.createElement("div", { style: { padding: "0 20px" } }, category2.blocks.map((item2, index2) => /* @__PURE__ */ React__default.createElement("div", { key: index2 }, /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            style: {
+              fontSize: 13,
+              fontWeight: 500,
+              padding: "14px 0 8px 0",
+              color: "var(--color-text-2)"
+            }
+          },
+          item2.title
+        ), item2.payload && item2.payload.map((columns, pIndex) => {
+          const isSelected = (selectedBlock == null ? void 0 : selectedBlock.categoryIndex) === categoryIndex && (selectedBlock == null ? void 0 : selectedBlock.blockIndex) === index2 && (selectedBlock == null ? void 0 : selectedBlock.layoutIndex) === pIndex;
+          return /* @__PURE__ */ React__default.createElement(
+            LayoutPreview,
+            {
+              key: pIndex,
+              sections: [{ columns }],
+              isSelected,
+              onClick: () => {
+                setSelectedBlock({
+                  block: { columns },
+                  categoryIndex,
+                  blockIndex: index2,
+                  layoutIndex: pIndex
+                });
+              }
+            }
+          );
+        })))));
+      }
+      if (category2.displayType === "custom") {
+        return /* @__PURE__ */ React__default.createElement("div", { key: categoryIndex, className: styles.category }, /* @__PURE__ */ React__default.createElement("div", { className: styles.categoryHeader }, /* @__PURE__ */ React__default.createElement(Text, { bold: true }, category2.label)), /* @__PURE__ */ React__default.createElement("div", { style: { padding: "16px 20px" } }, category2.blocks.map((item2, index2) => /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            key: index2,
+            style: {
+              marginBottom: index2 < category2.blocks.length - 1 ? 16 : 0
+            }
+          },
+          item2
+        ))));
+      }
+      return null;
+    });
+  }, [categories, selectedBlock, handleGridItemClick]);
+  return /* @__PURE__ */ React__default.createElement(
+    Modal,
+    {
+      title: /* @__PURE__ */ React__default.createElement("div", { className: styles.modalHeader }, t("Section library")),
+      visible,
+      onCancel: handleModalClose,
+      style: { width: 800, maxWidth: "90vw" },
+      okButtonProps: {
+        disabled: !selectedBlock,
+        onClick: handleAddClick
+      },
+      okText: t("Add"),
+      cancelButtonProps: {
+        onClick: handleModalClose
+      },
+      cancelText: t("Cancel")
+    },
+    /* @__PURE__ */ React__default.createElement("div", { className: styles.blocksModal }, /* @__PURE__ */ React__default.createElement("div", { className: styles.headerActions }, /* @__PURE__ */ React__default.createElement(
+      Input,
+      {
+        className: styles.searchInput,
+        placeholder: t("Search blocks..."),
+        prefix: /* @__PURE__ */ React__default.createElement(IconSearch, null),
+        value: searchQuery,
+        onChange: handleSearchChange,
+        allowClear: true
+      }
+    )), /* @__PURE__ */ React__default.createElement("div", { className: styles.contentArea }, categories.length > 0 ? renderGridContent : /* @__PURE__ */ React__default.createElement("div", { className: styles.emptyState }, t("No blocks available"))))
+  );
+};
+const styleText$8 = "[data-standard-table2-selected=true] ::selection {\n  background: none !important;\n}\n\n[data-standard-table2-selected=true] [data-standard-table2-td-selected=true] {\n  background-color: rgba(199, 199, 199, 0.4) !important;\n}";
+const styleText$7 = ".easy-email-pro-table-operation-menu {\n  position: fixed;\n  z-index: 999999;\n  background-color: #fff;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  font-size: 14px;\n  z-index: 100;\n  overflow: hidden;\n  border-radius: 4px;\n  padding: 4px 0;\n}\n.easy-email-pro-table-operation-menu .easy-email-pro-table-operation-menu-dividing {\n  height: 1px;\n  background-color: #efefef;\n}\n.easy-email-pro-table-operation-menu .easy-email-pro-table-operation-menu-item {\n  display: flex;\n  align-items: center;\n  padding: 10px 16px;\n  line-height: 18px;\n  background-color: #fff;\n  cursor: pointer;\n  color: #595959;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.easy-email-pro-table-operation-menu .easy-email-pro-table-operation-menu-item:hover {\n  background-color: #efefef;\n}\n.easy-email-pro-table-operation-menu .easy-email-pro-table-operation-menu-item .easy-email-pro-table-operation-menu-icon {\n  margin-right: 8px;\n  height: 20px;\n  width: 20px;\n  font-size: 0;\n}";
 const table2SelectedDataType = "data-standard-table2-selected";
 const table2TdSelectedDataType = "data-standard-table2-td-selected";
 const defaultTd = {
@@ -39440,13 +40462,13 @@ const ContextMenu = ({
         /* @__PURE__ */ React__default.createElement("div", { className: "easy-email-pro-table-operation-menu-icon" }, /* @__PURE__ */ React__default.createElement(IconFont, { size: 20, iconName: "icon-delete-selected-rows" })),
         /* @__PURE__ */ React__default.createElement("div", { className: "easy-email-pro-table-operation-menu-text" }, "Delete selected rows")
       )
-    ), /* @__PURE__ */ React__default.createElement("style", null, styleText$b)),
+    ), /* @__PURE__ */ React__default.createElement("style", null, styleText$7)),
     ele || document.body
   );
 };
 const ERROR_LIMIT = 2;
 const TableTools = (props) => {
-  const selected = useSelected();
+  const selected2 = useSelected();
   const editor = useSlate();
   const [showContextMenu, setShowContextMenu] = useState(false);
   const [position, setPosition] = useState({ left: 0, top: 0 });
@@ -39498,7 +40520,7 @@ const TableTools = (props) => {
     };
   }, [iframe, props.nodeElement]);
   useEffect(() => {
-    if (!selected) {
+    if (!selected2) {
       Array.from(
         props.nodeElement.querySelectorAll(
           `[data-slate-category="${ElementCategory.TABLE2_TD}"]`
@@ -39507,7 +40529,7 @@ const TableTools = (props) => {
         td.removeAttribute(table2TdSelectedDataType);
       });
     }
-  }, [props.nodeElement, selected]);
+  }, [props.nodeElement, selected2]);
   useEffect(() => {
     if (!iframe || !contentWindow)
       return;
@@ -39623,9 +40645,53 @@ const TableTools = (props) => {
       contentWindow == null ? void 0 : contentWindow.removeEventListener("pointerup", handleUp);
     };
   }, [contentWindow, editor, iframe, props.nodeElement]);
-  if (!selected)
+  if (!selected2)
     return null;
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$c), showContextMenu && /* @__PURE__ */ React__default.createElement(ContextMenu, { position }));
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$8), showContextMenu && /* @__PURE__ */ React__default.createElement(ContextMenu, { position }));
+};
+ExternalComponents.ChildrenWithPlaceholderWrapper = DraggingPlaceholderWrapper;
+const SharedComponents = {
+  PreviewEmailDrawer,
+  PreviewEmail,
+  ElementIcon,
+  BlockSideBar,
+  ConfigurationSideBar,
+  AttributePanel,
+  ColumnLayout,
+  ConfigurationDrawer,
+  ConfigurationPanel,
+  MergetagPopover,
+  CollapseWrapper,
+  EditorTabs,
+  UniversalElementEditorDrawer,
+  StandaloneElementEditorDrawer,
+  RichTextBar,
+  HoveringToolbar,
+  TextHTMLEditor,
+  Hotkeys,
+  Controller,
+  UnsplashImages,
+  UnsplashImagesDrawer,
+  WidgetConfigPanel,
+  FullHeightOverlayScrollbars,
+  BlockList,
+  UniversalListItem,
+  UniversalList,
+  MergeTagComponent,
+  ImageAction,
+  DesktopEmailPreview,
+  MobilePreview,
+  MinimalistEditorTopBar: EditorTopBar,
+  ConfigurationToolbar,
+  AIAssistant,
+  AIPromptModal,
+  SourceCodePanel,
+  DragItem,
+  ElementStyleGallery,
+  StandaloneElementSaveButtonPortal,
+  BlocksDrawer,
+  BlocksModal,
+  TableTools
 };
 const stopEvent$1 = (ev) => {
   ev.stopPropagation();
@@ -39639,6 +40705,12 @@ const ElementPlaceholderWrapper = (props) => {
     ev.stopPropagation();
     deleteBlock(Path.parent(path2));
   };
+  const { openBlocksDrawer } = useBlocksDrawer();
+  const onOpenBlockDrawer = (ev) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    openBlocksDrawer(path2, ElementCategory.COLUMN);
+  };
   const isSectionCategory = NodeUtils.isSectionElement(element);
   const isHeroCategory = NodeUtils.isHeroElement(element);
   const isWrapperCategory = NodeUtils.isWrapperElement(element);
@@ -39665,7 +40737,20 @@ const ElementPlaceholderWrapper = (props) => {
       }
     )))) : /* @__PURE__ */ React__default.createElement("div", { className: "wrapper-category-hover" }));
   } else if (element.type === ElementType.PLACEHOLDER) {
-    renderContent = /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", { className: "element-delete" }, /* @__PURE__ */ React__default.createElement(IconDelete, { onPointerDown })), /* @__PURE__ */ React__default.createElement("div", { style: { textAlign: "center" } }, t("Drop content here")));
+    renderContent = /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        style: {
+          cursor: "pointer",
+          pointerEvents: "auto",
+          width: "100%",
+          height: "100%"
+        },
+        onClickCapture: onOpenBlockDrawer
+      },
+      /* @__PURE__ */ React__default.createElement("div", { className: "element-delete" }, /* @__PURE__ */ React__default.createElement(IconDelete, { onPointerDown })),
+      /* @__PURE__ */ React__default.createElement("div", { style: { textAlign: "center" } }, t("Drop content here"))
+    );
   }
   const isUniversalElement = NodeUtils.isUniversalElement(element);
   const isStandaloneElement = NodeUtils.isStandaloneElement(element);
@@ -39699,7 +40784,7 @@ const ElementPlaceholderWrapper = (props) => {
     }
   }
   if (NodeUtils.isTable2Element(element)) {
-    renderContent = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, renderContent, /* @__PURE__ */ React__default.createElement(TableTools, __spreadValues({}, props)));
+    renderContent = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, renderContent, /* @__PURE__ */ React__default.createElement(SharedComponents.TableTools, __spreadValues({}, props)));
   }
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, renderContent, /* @__PURE__ */ React__default.createElement("style", null, styleText$d));
 };
@@ -39886,36 +40971,6 @@ const ElementDragover$1 = (props) => {
   }
   return /* @__PURE__ */ React__default.createElement(ElementDragoverPlaceholder, __spreadValues({}, props));
 };
-const stylesText = ".mergtag-popover {\n  position: relative;\n  width: 100%;\n}\n\n.easy-email-pro-merge-tag-popover {\n  line-height: 1.3;\n  background-color: #fff;\n  border-top: 1px solid rgb(229, 230, 235);\n  z-index: 10;\n  padding: 20px;\n  font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;\n}\n.easy-email-pro-merge-tag-popover h3 {\n  margin: 0;\n  font-size: 12px;\n  color: rgb(32, 34, 35);\n  text-transform: uppercase;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.easy-email-pro-merge-tag-popover .easy-email-pro-merge-tag-popover-desc {\n  font-size: 14px;\n  color: rgb(109, 113, 117);\n}\n.easy-email-pro-merge-tag-popover .easy-email-pro-merge-tag-popover-desc-label {\n  font-weight: 400;\n  line-height: 15px;\n  border: 1px solid rgb(109, 113, 117);\n  border-radius: 4px;\n  text-transform: none;\n  letter-spacing: normal;\n  position: relative;\n  display: flex;\n  align-items: center;\n  color: rgb(32, 34, 35);\n  cursor: text;\n  font-size: 14px;\n}\n.easy-email-pro-merge-tag-popover input {\n  text-transform: none;\n  letter-spacing: normal;\n  position: relative;\n  z-index: 20;\n  display: block;\n  flex: 1 1;\n  width: 100%;\n  min-width: 0;\n  min-height: 25px;\n  margin: 0;\n  padding: 5px 12px;\n  background: none;\n  border: 1px solid transparent;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  appearance: none;\n  caret-color: rgb(32, 34, 35);\n  color: rgb(32, 34, 35);\n}\n.easy-email-pro-merge-tag-popover input:focus {\n  outline: none;\n}\n.easy-email-pro-merge-tag-popover .easy-email-pro-merge-tag-popover-desc-label-count {\n  color: rgb(109, 113, 117);\n  z-index: 20;\n  margin: 0 12px 0 3.5px;\n  pointer-events: none;\n  text-align: right;\n}\n.easy-email-pro-merge-tag-popover .easy-email-pro-merge-tag-popover-desc-label-button {\n  font-size: 14px;\n  text-align: right;\n  margin-top: 10px;\n  font-weight: normal;\n  margin-bottom: 5px;\n}\n.easy-email-pro-merge-tag-popover .easy-email-pro-merge-tag-popover-desc-label-button button {\n  color: rgb(var(--primary-6));\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.1s linear;\n  cursor: pointer;\n  outline: none;\n  background-color: transparent;\n  border: 1px solid transparent;\n}\n.easy-email-pro-merge-tag-popover .easy-email-pro-merge-tag-popover-desc-label-button button:focus {\n  color: rgb(var(--primary-6));\n  background-color: rgb(242, 243, 245);\n}\n.easy-email-pro-merge-tag-popover .easy-email-pro-merge-tag-popover-desc-label-button button:hover {\n  color: rgb(var(--primary-6));\n  background-color: rgb(242, 243, 245);\n}\n.easy-email-pro-merge-tag-popover .easy-email-pro-merge-tag-popover-container {\n  position: relative;\n  z-index: 2;\n}";
-const MergetagPopover = ({
-  element,
-  onSave
-}) => {
-  const [text, setText] = useState(element.data.default || "");
-  useEffect(() => {
-    setText(element.data.default || "");
-  }, [element.data.default]);
-  const onChange = useCallback(
-    (ev) => {
-      setText(ev.target.value);
-      onSave(ev.target.value);
-    },
-    [onSave]
-  );
-  return /* @__PURE__ */ React__default.createElement("div", { className: classnames$1("easy-email-pro-merge-tag-popover") }, /* @__PURE__ */ React__default.createElement("div", { className: "easy-email-pro-merge-tag-popover-container" }, /* @__PURE__ */ React__default.createElement("h3", { style: { marginBottom: 10 } }, /* @__PURE__ */ React__default.createElement("span", null, t("Default value"))), /* @__PURE__ */ React__default.createElement("div", { className: "easy-email-pro-merge-tag-popover-desc" }, /* @__PURE__ */ React__default.createElement("p", { style: { marginBottom: 10 } }, t(
-    'If a personalized text value isn"t available, then a default value is shown.'
-  )), /* @__PURE__ */ React__default.createElement("div", { className: "easy-email-pro-merge-tag-popover-desc-label" }, /* @__PURE__ */ React__default.createElement(
-    "input",
-    {
-      autoFocus: true,
-      value: text,
-      onChange,
-      type: "text",
-      autoComplete: "off",
-      maxLength: 40
-    }
-  ), /* @__PURE__ */ React__default.createElement("div", { className: "easy-email-pro-merge-tag-popover-desc-label-count" }, text.length, "/40")))), /* @__PURE__ */ React__default.createElement("style", null, stylesText));
-};
 const FullScreenLoading = ({
   size = 40,
   isFullScreen
@@ -40207,7 +41262,7 @@ const Layout$1 = ({ children, footer, header, tabLeft, tabRight }) => {
   }
   if (!root2 || !inited)
     return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, layoutContent);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, layoutContent, /* @__PURE__ */ React__default.createElement(SharedComponents.HoveringToolbar, null), /* @__PURE__ */ React__default.createElement(SharedComponents.Controller, null), /* @__PURE__ */ React__default.createElement(SharedComponents.Hotkeys, null), /* @__PURE__ */ React__default.createElement(AutoDeselectElement$1, null), /* @__PURE__ */ React__default.createElement("style", null, styleText$h));
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, layoutContent, /* @__PURE__ */ React__default.createElement(SharedComponents.BlocksModal, null), /* @__PURE__ */ React__default.createElement(SharedComponents.HoveringToolbar, null), /* @__PURE__ */ React__default.createElement(SharedComponents.Controller, null), /* @__PURE__ */ React__default.createElement(SharedComponents.Hotkeys, null), /* @__PURE__ */ React__default.createElement(AutoDeselectElement$1, null), /* @__PURE__ */ React__default.createElement("style", null, styleText$h));
 };
 const Retro = { useCreateConfig: useCreateConfig$1, Layout: Layout$1 };
 const styleText$4 = '[data-slate-hide-cursor=true][data-slate-hover=true] {\n  cursor: none;\n}\n[data-slate-hide-cursor=true][data-slate-hover=true]:hover {\n  outline: none !important;\n}\n\n[data-slate-hide-cursor=true] [data-slate-hover=true] .element-tools-container {\n  opacity: 0;\n}\n\n.element-tools-container {\n  position: absolute;\n  font-size: 14px;\n  left: 0px;\n  top: 0px;\n  width: 100%;\n  height: 100%;\n  outline-offset: -2px;\n  outline: 2px dashed transparent;\n  outline-offset: -2px;\n  pointer-events: none;\n}\n\n.element-tools {\n  pointer-events: auto;\n  position: absolute;\n  top: 0;\n  left: 0;\n  transform: translate(0, -100%);\n  display: flex;\n  align-items: center;\n  font-size: 14px !important;\n  height: 22px;\n  padding: 1px 5px;\n  line-height: 22px;\n  font-weight: normal !important;\n  font-style: normal !important;\n}\n.element-tools .element-tools-item {\n  font-size: 12px !important;\n  line-height: 20px;\n  width: 25px;\n  display: flex;\n  pointer-events: auto;\n  cursor: pointer;\n  justify-content: center;\n}\n\n.element-tools-bottom {\n  top: 100%;\n  transform: translate(0, 0);\n}\n\n.element-drag-button {\n  pointer-events: auto;\n  position: absolute;\n  z-index: 4;\n  top: 50%;\n  right: 0%;\n  color: #fff;\n  color: rgb(255, 255, 255);\n  height: 28px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: translate(50%, -50%);\n  border-radius: 50%;\n  cursor: grab;\n}\n.element-drag-button .iconfont {\n  cursor: grab !important;\n}\n\nbody [data-slate-hover=true] .element-tools-container .element-tools {\n  color: #fff;\n  background-color: var(--hover-color);\n}\nbody [data-slate-hover=true] .element-tools-container .element-drag-button {\n  background-color: var(--hover-color);\n}\n\n[data-slate-block=page][data-slate-hover=true] > .element-tools-container .element-tools {\n  display: none;\n}\n[data-slate-block=page][data-slate-hover=true] > .element-tools-container .element-drag-button {\n  display: none;\n}\n\n.element-hover-container {\n  position: absolute;\n  font-size: 14px;\n  left: 0px;\n  top: 0px;\n  width: 100%;\n  height: 100%;\n  outline-offset: -2px;\n  outline: 2px solid transparent;\n  color: var(--hover-color);\n  outline-offset: -2px;\n  z-index: 10;\n  pointer-events: none;\n  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";\n}\n.element-hover-container .element-hover-tools {\n  pointer-events: auto;\n  height: calc(100% + 4px);\n  position: absolute;\n  top: -2px;\n  left: 0;\n  transform: translate(-100%, 0%);\n  display: flex;\n  font-size: 14px !important;\n  padding: 1px 5px;\n  line-height: 22px;\n  font-weight: normal !important;\n  font-style: normal !important;\n}\n.element-hover-container .element-hover-tools .element-selected-tools-item {\n  user-select: none;\n  transition: background 20ms ease-in 0s;\n  cursor: grab;\n  display: flex;\n  width: 18px;\n  height: 24px;\n  border-radius: 3px;\n}\n.element-hover-container .element-hover-tools .element-selected-tools-item .element-selected-tools-item-tooltip {\n  display: none;\n  opacity: 0;\n}\n.element-hover-container .element-hover-tools .element-selected-tools-item:hover {\n  color: var(--hover-color);\n  background-color: #efefee;\n}\n.element-hover-container .element-hover-tools .element-selected-tools-item:hover .element-selected-tools-item-tooltip {\n  padding: 2px 4px;\n  opacity: 1;\n  transition: opacity 0.3s;\n  position: absolute;\n  top: 0px;\n  left: 50%;\n  transform: translate(-50%, -100%);\n  background-color: #0f0f0f;\n  color: #e7e7e7;\n  display: block;\n  font-size: 12px;\n  white-space: nowrap;\n  border-radius: 5px;\n}\n\n[data-slate-hide-cursor=true] [data-slate-hover=true] {\n  cursor: none;\n}\n[data-slate-hide-cursor=true] [data-slate-hover=true]:hover {\n  outline: none !important;\n}\n\n[data-slate-hide-cursor=true] .element-tools-container,\n[data-slate-hide-cursor=true] .element-hover-container {\n  opacity: 0;\n}';
@@ -40743,19 +41798,19 @@ const minimaliststyleText = `[data-slate-block=page] {
 }
 
 [data-slate-hover=true] {
-  z-index: 4;
+  z-index: 3;
 }
 
 [data-slate-focus=true] {
-  z-index: 3;
+  z-index: 4;
 }
 
 [data-slate-selected=true] {
-  z-index: 3;
+  z-index: 4;
 }
 
 [data-slate-hover=true] .element-tools-container {
-  z-index: 4;
+  z-index: 3;
 }
 
 [data-slate-selected=true] .element-tools-container {
@@ -41885,6 +42940,7 @@ const Layout = ({ children }) => {
   return /* @__PURE__ */ React__default.createElement(MinimalistProvider, null, layoutContent, controller && /* @__PURE__ */ React__default.createElement(SharedComponents.Controller, null), /* @__PURE__ */ React__default.createElement(SharedComponents.Hotkeys, null), /* @__PURE__ */ React__default.createElement(AutoDeselectElement, null), /* @__PURE__ */ React__default.createElement("style", null, styleText$h, " "));
 };
 const Minimalist = { useCreateConfig, Layout };
+const IconFontStyle = styleText$h;
 export {
   AttributeField,
   AttributesPanelWrapper,
@@ -41896,6 +42952,8 @@ export {
   DraggingProviderContext,
   ElementStyles,
   IconFont,
+  IconFontStyle,
+  JsonAdapter,
   Minimalist,
   PluginsProvider,
   ResponsiveField,
@@ -41903,11 +42961,23 @@ export {
   Retro,
   SharedComponents,
   WidgetTypeOptions,
+  arrayStringAdapter,
   assignIdsToElementTree,
+  colorAdapter,
+  directionAdapter,
   enhancer,
+  fontStyleAdapter,
+  fontWeightAdapter,
+  getFallbackValue,
   getMergeTagsByType,
+  italicAdapter,
   mjmlToJson,
+  pixelAdapter,
+  pixelNumberAdapter,
   previewLoadImage,
+  sliderAdapter,
+  useAddBlock,
+  useBlocksDrawer,
   useClearCanvas,
   useColorContext,
   useCopyBlock,