easy-email-extensions 3.0.12 → 3.1.1

package/lib/index2.js

@@ -54,15 +54,14 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import * as React from "react";
-import React__default, { useCallback, useState, useRef, useEffect, useMemo, Children, isValidElement, cloneElement, createContext, useContext, Component, memo, forwardRef, useLayoutEffect, createRef, useImperativeHandle, PureComponent, useReducer, createElement, Suspense } from "react";
-import { IconFont, Stack as Stack$6, TextStyle, getBlockNodeByIdx, useBlock, getEditNode, getShadowRoot, FIXED_CONTAINER_ID, getEditContent, getEditorRoot, useEditorProps, useEditorContext, useFocusIdx, scrollBlockEleIntoView, useHoverIdx, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, useActiveTab, ActiveTabKeys } from "easy-email-editor";
-import { BasicType, ImageManager, getIndexByIdx, getSiblingIdx, BlockManager, getPageIdx, getChildIdx, createBlockDataByType, getParentByIdx, getValueByIdx, MjmlToJson, JsonToMjml, getParentIdx, getNodeTypeFromClassName } from "easy-email-core";
-import { ReactSortable } from "react-sortablejs";
-import { useField, Field, useForm as useForm$1, Form as Form$3, version as version$2, useFormState } from "react-final-form";
+import React__default, { Children, isValidElement, cloneElement, createContext, useContext, Component, useMemo, memo, forwardRef, useEffect, useRef, useLayoutEffect, useState, createRef, useImperativeHandle, PureComponent, useCallback, useReducer, createElement, Suspense } from "react";
+import { IconFont, Stack as Stack$6, TextStyle, getBlockNodeByIdx, useBlock, getEditNode, getEditContent, useEditorProps, useFocusIdx, useEditorContext, getShadowRoot, FIXED_CONTAINER_ID, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_ID, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, getEditorRoot, useActiveTab, ActiveTabKeys } from "easy-email-editor";
+import { BasicType, ImageManager, BlockManager, createBlockDataByType, getParentByIdx, getValueByIdx, getIndexByIdx, getSiblingIdx, getNodeIdxFromClassName, getParentIdx, getNodeIdxClassName, getPageIdx, getChildIdx, MjmlToJson, JsonToMjml, getNodeTypeFromClassName } from "easy-email-core";
 import ReactDOM, { findDOMNode, createPortal } from "react-dom";
-var arco = "";
-const title = "_title_1gyaq_1";
-var styles$9 = {
+import { useField, Field, useForm as useForm$1, Form as Form$3, version as version$2, useFormState } from "react-final-form";
+var index$2 = "";
+const title = "_title_pteer_1";
+var styles$6 = {
   title
 };
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -5498,313 +5497,6 @@ function EyeIcon$1({
     iconName: "icon-eye"
   });
 }
-const treeNodeList = "_treeNodeList_7a1ah_1";
-const treeNodeWrapper = "_treeNodeWrapper_7a1ah_6";
-const treeNode = "_treeNode_7a1ah_1";
-const treeNodeSelected = "_treeNodeSelected_7a1ah_18";
-const treeNodeTitle = "_treeNodeTitle_7a1ah_21";
-var styles$8 = {
-  treeNodeList,
-  treeNodeWrapper,
-  treeNode,
-  treeNodeSelected,
-  treeNodeTitle
-};
-const TreeCollapse = React__default.memo(({ expand, setExpand, hasChildren }) => {
-  const onToggle = useCallback(() => {
-    setExpand((v) => !v);
-  }, [setExpand]);
-  if (!hasChildren)
-    return /* @__PURE__ */ React__default.createElement(IconFont, {
-      size: 12,
-      iconName: "icon-dot",
-      onClickCapture: onToggle
-    });
-  if (expand) {
-    return /* @__PURE__ */ React__default.createElement(IconFont, {
-      size: 12,
-      iconName: "icon-minus-square",
-      onClickCapture: onToggle
-    });
-  }
-  return /* @__PURE__ */ React__default.createElement(IconFont, {
-    size: 12,
-    iconName: "icon-plus-square",
-    onClickCapture: onToggle
-  });
-});
-function classnames$1(...rest) {
-  return rest.filter((item2) => typeof item2 === "string").join(" ");
-}
-const DATA_ATTRIBUTE_ID = "data-tree-node-id";
-const DATA_ATTRIBUTE_INDEX = "data-tree-node-index";
-function BlockTreeItem(props) {
-  var _a, _b;
-  const {
-    nodeData,
-    renderTitle,
-    defaultExpandAll,
-    onDragStart,
-    onDragMove,
-    onDragEnd,
-    onSpill,
-    indent,
-    index: index2,
-    onSelect: handleSelect,
-    onMouseEnter: handleMouseEnter,
-    onContextMenu: handleContextMenu
-  } = props;
-  const [expand, setExpand] = useState(Boolean(defaultExpandAll));
-  const ulRef = useRef(null);
-  const initedRef = useRef(false);
-  useEffect(() => {
-    const ulEle = ulRef.current;
-    if (!ulEle)
-      return;
-    if (!initedRef.current) {
-      initedRef.current = true;
-      if (!expand) {
-        ulEle.style.setProperty("max-height", "0px");
-      }
-      return;
-    }
-    if (expand) {
-      const onTransitionEnd = () => {
-        ulEle.style.removeProperty("max-height");
-        ulEle.removeEventListener("transitionend", onTransitionEnd);
-      };
-      ulEle.style.setProperty("transition", "none");
-      ulEle.style.removeProperty("max-height");
-      const maxHeight = ulEle.getBoundingClientRect().height;
-      ulEle.style.setProperty("max-height", "0px");
-      ulEle.addEventListener("transitionend", onTransitionEnd);
-      requestAnimationFrame(() => {
-        ulEle.style.setProperty("transition", "all .3s ease-out");
-        ulEle.style.setProperty("max-height", maxHeight + "px");
-      });
-    } else {
-      ulEle.style.setProperty("transition", "none");
-      const maxHeight = ulEle.getBoundingClientRect().height;
-      ulEle.style.setProperty("max-height", maxHeight + "px");
-      requestAnimationFrame(() => {
-        ulEle.style.setProperty("transition", "all .3s ease-out");
-        ulEle.style.setProperty("max-height", "0px");
-      });
-    }
-  }, [expand]);
-  const onStart = useCallback((evt, sortable, store) => {
-    if (onDragStart) {
-      onDragStart(evt, sortable, store);
-    }
-    setExpand(false);
-  }, [onDragStart]);
-  const onSelect = useCallback((ev) => {
-    ev.stopPropagation();
-    handleSelect(nodeData.id);
-  }, [nodeData.id, handleSelect]);
-  const onMouseEnter = useCallback((ev) => {
-    handleMouseEnter && handleMouseEnter(nodeData.id, ev);
-  }, [nodeData.id, handleMouseEnter]);
-  const onContextMenu = useCallback((ev) => {
-    handleContextMenu && handleContextMenu(nodeData, ev);
-  }, [handleContextMenu, nodeData]);
-  return /* @__PURE__ */ React__default.createElement("li", {
-    className: styles$8.treeNodeWrapper
-  }, /* @__PURE__ */ React__default.createElement(ReactSortable, __spreadValues({
-    revertOnSpill: true,
-    list: [{ id: nodeData.id }],
-    setList: () => {
-    },
-    onMove: onDragMove,
-    onEnd: onDragEnd,
-    onStart,
-    onSpill
-  }, {
-    animation: 150,
-    fallbackOnBody: true,
-    swapThreshold: 0.65,
-    ghostClass: "ghost",
-    group: "shared"
-  }), /* @__PURE__ */ React__default.createElement("div", __spreadValues({
-    onMouseEnter,
-    onContextMenu,
-    className: classnames$1(styles$8.treeNode)
-  }, {
-    [DATA_ATTRIBUTE_ID]: nodeData.id,
-    [DATA_ATTRIBUTE_INDEX]: index2
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    style: { width: indent * 18 }
-  }), /* @__PURE__ */ React__default.createElement(TreeCollapse, {
-    hasChildren: Boolean((_a = nodeData.children) == null ? void 0 : _a.length),
-    expand,
-    setExpand
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$8.treeNodeTitle,
-    onClick: onSelect
-  }, renderTitle(nodeData)), /* @__PURE__ */ React__default.createElement(IconFont, {
-    iconName: "icon-drag",
-    style: { cursor: "grab", fontSize: 12 }
-  }))), /* @__PURE__ */ React__default.createElement("ul", {
-    ref: ulRef,
-    style: { overflow: "hidden" },
-    className: styles$8.treeNodeList
-  }, (_b = nodeData.children) == null ? void 0 : _b.map((item2, index22) => {
-    return /* @__PURE__ */ React__default.createElement(BlockTreeItem, {
-      key: index22,
-      index: index22,
-      onSelect: handleSelect,
-      onMouseEnter: handleMouseEnter,
-      onContextMenu: handleContextMenu,
-      nodeData: item2,
-      renderTitle,
-      indent: indent + 1,
-      defaultExpandAll,
-      onDragStart,
-      onDragMove,
-      onDragEnd,
-      onSpill
-    });
-  })));
-}
-const getCurrenTreeNode = (ele, rootEle) => {
-  if (ele.classList.contains(styles$8.treeNode))
-    return ele;
-  if (ele.parentElement && rootEle && rootEle.contains(ele.parentElement))
-    return getCurrenTreeNode(ele.parentElement, rootEle);
-  return null;
-};
-function BlockTree(props) {
-  const [eleRef, setEleRef] = useState(null);
-  const [selectedId, setSelectedId] = useState(props.selectedId);
-  const dropDataRef = useRef(null);
-  const {
-    treeData,
-    allowDrop,
-    onDrop,
-    onSelect,
-    onMouseEnter,
-    onMouseLeave,
-    onContextMenu
-  } = props;
-  const treeDataMap = useMemo(() => {
-    const map2 = {};
-    const loop2 = (node) => {
-      if (map2[node.id]) {
-        console.warn(`have same id ${node.id}`);
-      }
-      map2[node.id] = node;
-      if (node.children) {
-        node.children.forEach((item2) => {
-          loop2(item2);
-        });
-      }
-    };
-    treeData.forEach((item2) => {
-      loop2(item2);
-    });
-    return map2;
-  }, [treeData]);
-  useEffect(() => {
-    setSelectedId(props.selectedId);
-  }, [props.selectedId]);
-  useEffect(() => {
-    if (!eleRef)
-      return;
-    if (selectedId) {
-      const node = eleRef.querySelector("." + styles$8.treeNodeSelected);
-      if (node) {
-        node.classList.remove(styles$8.treeNodeSelected);
-      }
-      setTimeout(() => {
-        const selectedNode = eleRef.querySelector(`[${DATA_ATTRIBUTE_ID}="${selectedId}"]`);
-        if (selectedNode) {
-          selectedNode.classList.add(styles$8.treeNodeSelected);
-          selectedNode.scrollIntoView({
-            block: "center",
-            behavior: "smooth"
-          });
-        }
-      }, 50);
-    }
-  }, [eleRef, selectedId]);
-  const onDragStart = useCallback((evt, sortable, store) => {
-  }, []);
-  const onDragMove = useCallback((evt, originalEvent) => {
-    const dragEle = getCurrenTreeNode(evt.dragged);
-    const dropEle = getCurrenTreeNode(evt.related);
-    if (dropEle && dragEle) {
-      const dragId = dragEle.getAttribute(DATA_ATTRIBUTE_ID);
-      const dragIndex = dragEle.getAttribute(DATA_ATTRIBUTE_INDEX);
-      const dropId = dropEle.getAttribute(DATA_ATTRIBUTE_ID);
-      const dropIndex = dropEle.getAttribute(DATA_ATTRIBUTE_INDEX);
-      const currentDropData = {
-        dragNode: treeDataMap[dragId],
-        dragIndex: Number(dragIndex),
-        dropIndex: Number(dropIndex),
-        dropNode: treeDataMap[dropId],
-        willInsertAfter: evt.willInsertAfter,
-        event: originalEvent
-      };
-      const isAllowDrop = allowDrop(currentDropData);
-      if (isAllowDrop) {
-        dropEle.classList.add(styles$8.treeNodeDrop);
-        dropDataRef.current = currentDropData;
-        return true;
-      }
-    }
-    return false;
-  }, [allowDrop, treeDataMap]);
-  const onDragEnd = useCallback((evt) => {
-    if (dropDataRef.current) {
-      onDrop(dropDataRef.current);
-    }
-    dropDataRef.current = null;
-  }, [dropDataRef, , onDrop]);
-  const onSpill = useCallback((evt) => {
-    dropDataRef.current = null;
-  }, []);
-  return useMemo(() => /* @__PURE__ */ React__default.createElement("div", {
-    ref: setEleRef,
-    className: styles$8.tree,
-    onMouseLeave
-  }, props.treeData.map((item2) => /* @__PURE__ */ React__default.createElement("ul", {
-    key: item2.id,
-    className: styles$8.treeNodeList
-  }, /* @__PURE__ */ React__default.createElement(BlockTreeItem, {
-    nodeData: item2,
-    renderTitle: props.renderTitle,
-    indent: 0,
-    index: 0,
-    onSelect,
-    onMouseEnter,
-    onContextMenu,
-    defaultExpandAll: Boolean(props.defaultExpandAll),
-    onDragStart,
-    onDragMove,
-    onDragEnd,
-    onSpill
-  })))), [
-    onContextMenu,
-    onDragEnd,
-    onDragMove,
-    onDragStart,
-    onMouseEnter,
-    onMouseLeave,
-    onSelect,
-    onSpill,
-    props.defaultExpandAll,
-    props.renderTitle,
-    props.treeData
-  ]);
-}
-const wrap$1 = "_wrap_aul3a_1";
-const listItem = "_listItem_aul3a_13";
-const contextmenuMark = "_contextmenuMark_aul3a_23";
-var styles$7 = {
-  wrap: wrap$1,
-  listItem,
-  contextmenuMark
-};
 function _extends$f() {
   _extends$f = Object.assign || function(target2) {
     for (var i2 = 1; i2 < arguments.length; i2++) {
@@ -21735,7 +21427,7 @@ var __assign$y = globalThis && globalThis.__assign || function() {
   };
   return __assign$y.apply(this, arguments);
 };
-function wrapper$1(picker, displayName) {
+function wrapper(picker, displayName) {
   var _a;
   return _a = function(_super) {
     __extends$5(PickerWrapper, _super);
@@ -21748,11 +21440,11 @@ function wrapper$1(picker, displayName) {
     return PickerWrapper;
   }(React__default.Component), _a.displayName = displayName, _a;
 }
-var DatePicker = wrapper$1(React__default.createElement(DatePicker$2, null), "DatePicker");
-var MonthPicker = wrapper$1(React__default.createElement(MonthPicker$1, null), "MonthPicker");
-var YearPicker = wrapper$1(React__default.createElement(YearPicker$1, null), "YearPicker");
-var WeekPicker = wrapper$1(React__default.createElement(WeekPicker$1, null), "WeekPicker");
-var QuarterPicker = wrapper$1(React__default.createElement(QuarterPicker$1, null), "QuarterPicker");
+var DatePicker = wrapper(React__default.createElement(DatePicker$2, null), "DatePicker");
+var MonthPicker = wrapper(React__default.createElement(MonthPicker$1, null), "MonthPicker");
+var YearPicker = wrapper(React__default.createElement(YearPicker$1, null), "YearPicker");
+var WeekPicker = wrapper(React__default.createElement(WeekPicker$1, null), "WeekPicker");
+var QuarterPicker = wrapper(React__default.createElement(QuarterPicker$1, null), "QuarterPicker");
 var RangePicker = PickerRange;
 Object.assign(DatePicker, { MonthPicker, YearPicker, WeekPicker, QuarterPicker, RangePicker });
 var DatePicker$1 = DatePicker;
@@ -27893,7 +27585,7 @@ var __rest$2 = globalThis && globalThis.__rest || function(s, e) {
     }
   return t;
 };
-function TabPane$2(props, ref) {
+function TabPane$1(props, ref) {
   var shouldRender = useRef(false);
   var getPrefixCls = useContext(ConfigContext).getPrefixCls;
   var children = props.children, className = props.className, style = props.style, lazyload = props.lazyload, isActive = props.isActive, rest = __rest$2(props, ["children", "className", "style", "lazyload", "isActive"]);
@@ -27901,10 +27593,10 @@ function TabPane$2(props, ref) {
   shouldRender.current = lazyload ? shouldRender.current || isActive : true;
   return shouldRender.current && React__default.createElement("div", __assign$b({ ref }, omit$1(rest, ["destroyOnHide", "title", "closable"]), { className: cs(prefixCls2 + "-pane", className), style }), children);
 }
-var TabPaneRef = React__default.forwardRef(TabPane$2);
+var TabPaneRef = React__default.forwardRef(TabPane$1);
 TabPaneRef.displayName = "TabPane";
 TabPaneRef.isTabPane = true;
-var TabPane$3 = TabPaneRef;
+var TabPane$2 = TabPaneRef;
 function DropdownIcon(props) {
   var prefixCls2 = props.prefixCls, currentOffset = props.currentOffset, headerSize = props.headerSize, headerWrapperSize = props.headerWrapperSize, getTitleRef = props.getTitleRef, paneChildren = props.paneChildren, direction = props.direction;
   var paneKeys = paneChildren.map(function(child) {
@@ -28609,7 +28301,7 @@ function Tabs(baseProps, ref) {
 var ForwardRefTabs = React__default.forwardRef(Tabs);
 var TabsComponent = ForwardRefTabs;
 TabsComponent.displayName = "Tabs";
-TabsComponent.TabPane = TabPane$3;
+TabsComponent.TabPane = TabPane$2;
 var Tabs$1 = TabsComponent;
 function ownKeys$3(object, enumerableOnly) {
   var keys2 = Object.keys(object);
@@ -30501,10 +30193,10 @@ function TreeList(props, ref) {
       treeRef.current.handleCheck && treeRef.current.handleCheck(!checked, node.props._key, e);
     }
   }, []);
-  var handleLoadMore = useCallback(function(treeNode2) {
+  var handleLoadMore = useCallback(function(treeNode) {
     if (isFunction$5(loadMore)) {
-      var dataRef = treeNode2.props.dataRef;
-      return loadMore(treeNode2, dataRef);
+      var dataRef = treeNode.props.dataRef;
+      return loadMore(treeNode, dataRef);
     }
     return [];
   }, [loadMore]);
@@ -30942,6 +30634,138 @@ IconUpload.defaultProps = {
 };
 IconUpload.displayName = "IconUpload";
 var IconUpload$1 = IconUpload;
+const transparentImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==";
+const img = new Image();
+img.width = 0;
+img.height = 0;
+img.src = transparentImage;
+function BlockTree(props) {
+  const [blockTreeRef, setBlockTreeRef] = useState(null);
+  const [selectedId, setSelectedId] = useState(props.selectedId);
+  const dragNode = useRef(null);
+  const { treeData, allowDrop, onContextMenu } = props;
+  useEffect(() => {
+    setSelectedId(props.selectedId);
+  }, [props.selectedId]);
+  const onDragStart = useCallback((e, node) => {
+    var _a;
+    e.dataTransfer.dropEffect = "none";
+    const dragNodeData = node.props.dataRef;
+    dragNode.current = {
+      dataRef: dragNodeData,
+      parent: node.props.parent,
+      key: node.props._key,
+      parentKey: node.props.parentKey
+    };
+    (_a = props.onDragStart) == null ? void 0 : _a.call(props);
+  }, [props.onDragStart]);
+  const onDragMove = useCallback((option) => {
+    if (!dragNode.current)
+      return false;
+    const dropData = option.dropNode.props.dataRef;
+    const dropId = option.dropNode.props._key;
+    const currentDropData = {
+      dragNode: { key: dragNode.current.key },
+      dropNode: {
+        dataRef: dropData,
+        parent: option.dropNode.props.parent,
+        key: dropId
+      },
+      dropPosition: option.dropPosition
+    };
+    const isAllowDrop = allowDrop(currentDropData);
+    if (isAllowDrop) {
+      return true;
+    }
+    return false;
+  }, [dragNode]);
+  const onDrop = useCallback((info2) => {
+    const { dropNode, dropPosition, e } = info2;
+    e.dataTransfer.dropEffect = "move";
+    if (!dragNode.current || !dropNode)
+      return;
+    const dropData = dropNode.props.dataRef;
+    const currentDropData = {
+      dragNode: dragNode.current,
+      dropNode: {
+        dataRef: dropData,
+        parent: dropNode.props.parent,
+        key: dropNode.props._key,
+        parentKey: dropNode.props.parentKey
+      },
+      dropPosition
+    };
+    props.onDrop(currentDropData);
+  }, []);
+  const renderTitle = useCallback((nodeData) => {
+    return /* @__PURE__ */ React__default.createElement("div", {
+      style: { display: "inline-flex", width: "100%" },
+      onContextMenu: (ev) => onContextMenu && onContextMenu(nodeData, ev)
+    }, props.renderTitle(nodeData));
+  }, [onContextMenu]);
+  const onDragEnd = useCallback(() => {
+    var _a;
+    dragNode.current = null;
+    (_a = props.onDragEnd) == null ? void 0 : _a.call(props);
+  }, [props.onDragEnd]);
+  const onSelect = useCallback((selectedKeys2) => {
+    props.onSelect(selectedKeys2[0]);
+  }, [props.onSelect]);
+  useEffect(() => {
+    if (blockTreeRef) {
+      blockTreeRef.addEventListener("dragover", (e) => {
+        if (e.dataTransfer) {
+          e.dataTransfer.dropEffect = "move";
+        }
+      });
+    }
+  }, [blockTreeRef]);
+  const selectedKeys = useMemo(() => selectedId ? [selectedId] : [], [selectedId]);
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ref: setBlockTreeRef,
+    onMouseLeave: props.onMouseLeave
+  }, /* @__PURE__ */ React__default.createElement(CacheTree, {
+    selectedKeys,
+    draggable: true,
+    size: "small",
+    treeData,
+    blockNode: true,
+    fieldNames: {
+      key: "id"
+    },
+    onDragEnd,
+    onDragStart,
+    onDrop,
+    allowDrop: onDragMove,
+    onSelect,
+    renderTitle
+  }));
+}
+function CacheTree(props) {
+  const [cacheProps, setCacheProps] = useState(props);
+  const lastProps = useRef(props);
+  const debounceCallback = useCallback(lodash.exports.debounce((data) => {
+    setCacheProps(data);
+  }, 300), []);
+  useEffect(() => {
+    if (lastProps.current.treeData !== props.treeData) {
+      lastProps.current = props;
+      debounceCallback(props);
+    } else {
+      lastProps.current = props;
+      setCacheProps(props);
+    }
+  }, [props]);
+  return useMemo(() => /* @__PURE__ */ React__default.createElement(Tree$1, __spreadValues({}, cacheProps)), [cacheProps]);
+}
+const wrap$1 = "_wrap_aul3a_1";
+const listItem = "_listItem_aul3a_13";
+const contextmenuMark = "_contextmenuMark_aul3a_23";
+var styles$5 = {
+  wrap: wrap$1,
+  listItem,
+  contextmenuMark
+};
 var rngBrowser = { exports: {} };
 var getRandomValues = typeof crypto != "undefined" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto != "undefined" && typeof window.msCrypto.getRandomValues == "function" && msCrypto.getRandomValues.bind(msCrypto);
 if (getRandomValues) {
@@ -31150,7 +30974,7 @@ const btnWrap = "_btn-wrap_jzksr_43";
 const upload = "_upload_jzksr_68";
 const wrap = "_wrap_jzksr_80";
 const urlInput = "_urlInput_jzksr_80";
-var styles$6 = {
+var styles$4 = {
   container: container$1,
   error,
   item,
@@ -31312,16 +31136,16 @@ class Uploader {
     this.handler[event2] = handles.filter((item2) => item2 !== fn);
   }
 }
-function classnames(...rest) {
+function classnames$1(...rest) {
   return rest.filter((item2) => typeof item2 === "string").join(" ");
 }
 function previewLoadImage(url) {
   return new Promise((resolve) => {
-    const img = new Image();
-    img.setAttribute("crossOrigin", "Anonymous");
-    img.src = url;
-    img.onload = () => resolve(img);
-    img.onerror = () => resolve(img);
+    const img2 = new Image();
+    img2.setAttribute("crossOrigin", "Anonymous");
+    img2.src = url;
+    img2.onload = () => resolve(img2);
+    img2.onerror = () => resolve(img2);
   });
 }
 const defaultImagesMap$1 = {
@@ -31392,30 +31216,30 @@ function ImageUploader(props) {
   const content = useMemo(() => {
     if (isUploading) {
       return /* @__PURE__ */ React__default.createElement("div", {
-        className: styles$6["item"]
+        className: styles$4["item"]
       }, /* @__PURE__ */ React__default.createElement("div", {
-        className: classnames(styles$6["info"])
+        className: classnames$1(styles$4["info"])
       }, /* @__PURE__ */ React__default.createElement("img", {
         src: getImg$1("AttributePanel_03"),
         alt: "Loading..."
       }), /* @__PURE__ */ React__default.createElement("div", {
-        className: styles$6["btn-wrap"]
+        className: styles$4["btn-wrap"]
       })));
     }
     if (!props.value) {
       return /* @__PURE__ */ React__default.createElement("div", {
-        className: styles$6["upload"],
+        className: styles$4["upload"],
         onClick: onUpload
       }, /* @__PURE__ */ React__default.createElement(IconPlus$1, null), /* @__PURE__ */ React__default.createElement("div", null, "Upload"));
     }
     return /* @__PURE__ */ React__default.createElement("div", {
-      className: styles$6["item"]
+      className: styles$4["item"]
     }, /* @__PURE__ */ React__default.createElement("div", {
-      className: classnames(styles$6["info"])
+      className: classnames$1(styles$4["info"])
     }, /* @__PURE__ */ React__default.createElement("img", {
       src: props.value
     }), /* @__PURE__ */ React__default.createElement("div", {
-      className: styles$6["btn-wrap"]
+      className: styles$4["btn-wrap"]
     }, /* @__PURE__ */ React__default.createElement("a", {
       title: "Preview",
       onClick: () => setPreview(true)
@@ -31431,9 +31255,9 @@ function ImageUploader(props) {
     });
   }
   return /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$6.wrap
+    className: styles$4.wrap
   }, /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$6["container"]
+    className: styles$4["container"]
   }, content, /* @__PURE__ */ React__default.createElement(Input$5, {
     onPaste,
     value: props.value,
@@ -38385,7 +38209,7 @@ function ColorPicker(props) {
       height: 32,
       width: 32,
       padding: 4,
-      border: "1px solid #e6e6e6",
+      border: "1px solid var(--color-neutral-3, rgb(229, 230, 235))",
       borderRadius: showInput ? void 0 : 4,
       fontSize: 0,
       borderRight: showInput ? "none" : void 0,
@@ -38396,7 +38220,7 @@ function ColorPicker(props) {
     style: {
       position: "relative",
       display: "block",
-      border: "1px solid #999",
+      border: "1px solid var(--color-neutral-3, rgb(229, 230, 235))",
       borderRadius: 2,
       width: "100%",
       height: "100%",
@@ -38443,7 +38267,7 @@ function RadioGroup(props) {
 const helperText = "_helperText_cmm2s_1";
 const labelHidden = "_label-hidden_cmm2s_9";
 const editTab = "_editTab_cmm2s_20";
-var styles$5 = {
+var styles$3 = {
   helperText,
   "label-hidden": "_label-hidden_cmm2s_9",
   labelHidden,
@@ -38532,7 +38356,7 @@ function enhancer(Component2, changeAdapter) {
         alignment: alignment ? alignment : inline ? "center" : void 0,
         distribution
       }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, null, /* @__PURE__ */ React__default.createElement("label", {
-        className: labelHidden2 ? styles$5["label-hidden"] : void 0,
+        className: labelHidden2 ? styles$3["label-hidden"] : void 0,
         htmlFor: id
       }, /* @__PURE__ */ React__default.createElement("span", {
         style: { whiteSpace: "pre" }
@@ -38551,7 +38375,7 @@ function enhancer(Component2, changeAdapter) {
         value: valueAdapter ? valueAdapter(currentValue) : currentValue,
         onChange: onFieldChange
       })))), /* @__PURE__ */ React__default.createElement("div", {
-        className: styles$5.helperText
+        className: styles$3.helperText
       }, /* @__PURE__ */ React__default.createElement("small", null, helpText))));
     });
   };
@@ -38603,7 +38427,10 @@ function CheckBoxGroup(props) {
     value: item2.value
   }, item2.label))));
 }
-const { TabPane: TabPane$1 } = Tabs$1;
+function classnames(...rest) {
+  return rest.filter((item2) => typeof item2 === "string").join(" ");
+}
+const { TabPane } = Tabs$1;
 function EditTab(props) {
   const { value, additionItem } = props;
   const onAddTab = () => {
@@ -38613,14 +38440,14 @@ function EditTab(props) {
     props.onChange(value.filter((_, vIndex) => Number(index2) !== vIndex));
   };
   return /* @__PURE__ */ React__default.createElement(Tabs$1, {
-    className: classnames$1(styles$5.editTab),
+    className: classnames(styles$3.editTab),
     style: { border: "none" },
     type: "card",
     tabPosition: props.tabPosition,
     editable: true,
     onAddTab,
     onDeleteTab
-  }, (Array.isArray(value) ? value : []).map((item2, index2) => /* @__PURE__ */ React__default.createElement(TabPane$1, {
+  }, (Array.isArray(value) ? value : []).map((item2, index2) => /* @__PURE__ */ React__default.createElement(TabPane, {
     style: { paddingLeft: 12 },
     title: `${props.label || "Tab"} ${index2 + 1}`,
     key: index2
@@ -38655,92 +38482,51 @@ function InlineText({ idx, onChange, children }) {
   const {
     mutators: { setFieldTouched }
   } = useForm$1();
-  const [isFocus, setIsFocus] = useState(false);
   const [textContainer, setTextContainer] = useState(null);
   useField(idx);
   const { focusBlock: focusBlock2 } = useBlock();
   useEffect(() => {
-    const promiseObj = awaitForElement$1(idx);
-    promiseObj.promise.then((blockNode) => {
-      setTextContainer(blockNode);
-    });
+    let promiseObj;
+    const getTextBlock = () => {
+      promiseObj = awaitForElement$1(idx);
+      promiseObj.promise.then((blockNode) => {
+        if (blockNode.querySelector('[contenteditable="true"]')) {
+          setTextContainer(blockNode);
+        } else {
+          setTimeout(() => {
+            getTextBlock();
+          }, 50);
+        }
+      });
+    };
+    getTextBlock();
     return () => {
       promiseObj.cancel();
     };
   }, [idx, focusBlock2]);
-  const onTextChange = useCallback((text) => {
-    if ((focusBlock2 == null ? void 0 : focusBlock2.data.value.content) !== text) {
-      onChange(text);
-    }
-  }, [focusBlock2 == null ? void 0 : focusBlock2.data.value.content, onChange]);
   useEffect(() => {
     if (!textContainer)
       return;
     const container2 = getEditNode(textContainer);
     if (container2) {
-      container2.focus();
-      let focusTarget = null;
-      const root2 = getShadowRoot();
-      const onClick = (ev) => {
-        ev.stopPropagation();
-        focusTarget = ev.target;
-        const fixedContainer = document.getElementById(FIXED_CONTAINER_ID);
-        if (textContainer == null ? void 0 : textContainer.contains(focusTarget))
-          return;
-        if (fixedContainer && fixedContainer.contains(focusTarget))
-          return;
-        if (fixedContainer == null ? void 0 : fixedContainer.contains(document.activeElement))
-          return;
-        onTextChange(getEditContent(textContainer));
-      };
       const onPaste = (e) => {
         var _a;
         e.preventDefault();
         const text = ((_a = e.clipboardData) == null ? void 0 : _a.getData("text/plain")) || "";
         document.execCommand("insertHTML", false, text);
-      };
-      const stopDrag = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
+        onChange(getEditContent(textContainer));
       };
       const onInput = () => {
-        setFieldTouched(idx, true);
+        onChange(getEditContent(textContainer));
       };
       container2.addEventListener("paste", onPaste, true);
-      container2.addEventListener("dragstart", stopDrag);
       container2.addEventListener("input", onInput);
-      document.addEventListener("mousedown", onClick);
-      root2.addEventListener("mousedown", onClick);
       return () => {
         container2.removeEventListener("paste", onPaste, true);
-        container2.removeEventListener("dragstart", stopDrag);
         container2.removeEventListener("input", onInput);
-        document.removeEventListener("mousedown", onClick);
-        root2.removeEventListener("mousedown", onClick);
       };
     }
-  }, [idx, onTextChange, setFieldTouched, textContainer]);
-  useEffect(() => {
-    const onFocus3 = (ev) => {
-      ev.stopPropagation();
-      if (document.activeElement === getEditorRoot()) {
-        setIsFocus(true);
-      } else {
-        setIsFocus(false);
-      }
-    };
-    const root2 = getShadowRoot();
-    root2.addEventListener("click", onFocus3);
-    root2.addEventListener("focusin", onFocus3);
-    window.addEventListener("focusin", onFocus3);
-    return () => {
-      root2.addEventListener("click", onFocus3);
-      root2.removeEventListener("focusin", onFocus3);
-      window.removeEventListener("focusin", onFocus3);
-    };
-  }, []);
-  if (!isFocus)
-    return null;
+  }, [onChange, setFieldTouched, textContainer]);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
 }
 function AutoComplete(props) {
@@ -38946,876 +38732,204 @@ function FontFamily$1(props) {
     key: item2.value
   }, item2.label))));
 }
-const MergeTags$1 = React__default.memo((props) => {
-  const { mergeTags = {} } = useEditorProps();
+var styleText$1 = ".easy-email-extensions-Tools-Popover .arco-popover-content{padding:0}.easy-email-extensions-Tools-Popover .arco-popover-content-inner *::-webkit-scrollbar{-webkit-appearance:none;width:5px}.easy-email-extensions-Tools-Popover .arco-popover-content-inner *::-webkit-scrollbar-thumb{border-radius:5px;background-color:#00000080;box-shadow:0 0 1px #ffffff80;-webkit-box-shadow:0 0 1px rgba(255,255,255,.5)}\n";
+function Help(props) {
+  return /* @__PURE__ */ React__default.createElement(Tooltip$1, __spreadProps(__spreadValues({}, __spreadProps(__spreadValues({}, props), { style: void 0 })), {
+    content: props.title
+  }), /* @__PURE__ */ React__default.createElement("span", {
+    style: { cursor: "pointer" }
+  }, /* @__PURE__ */ React__default.createElement(IconQuestionCircle$1, {
+    style: props.style
+  })));
+}
+var ARRAY_ERROR = "FINAL_FORM/array-error";
+var fieldSubscriptionItems = ["active", "data", "dirty", "dirtySinceLastSubmit", "error", "initial", "invalid", "length", "modified", "modifiedSinceLastSubmit", "pristine", "submitError", "submitFailed", "submitSucceeded", "submitting", "touched", "valid", "value", "visited", "validating"];
+var version$1 = "4.20.4";
+function renderComponent(props, name) {
+  var render3 = props.render, children = props.children, component = props.component, rest = _objectWithoutPropertiesLoose(props, ["render", "children", "component"]);
+  if (component) {
+    return /* @__PURE__ */ createElement(component, _extends$f({}, rest, {
+      children,
+      render: render3
+    }));
+  }
+  if (render3) {
+    return render3(children === void 0 ? rest : _extends$f({}, rest, {
+      children
+    }));
+  }
+  if (typeof children !== "function") {
+    throw new Error("Must specify either a render prop, a render function as children, or a component prop to " + name);
+  }
+  return children(rest);
+}
+var defaultIsEqual = function defaultIsEqual2(aArray, bArray) {
+  return aArray === bArray || Array.isArray(aArray) && Array.isArray(bArray) && aArray.length === bArray.length && !aArray.some(function(a, index2) {
+    return a !== bArray[index2];
+  });
+};
+function useConstant(init) {
+  var ref = React__default.useRef();
+  if (!ref.current) {
+    ref.current = init();
+  }
+  return ref.current;
+}
+var all = fieldSubscriptionItems.reduce(function(result, key) {
+  result[key] = true;
+  return result;
+}, {});
+var useFieldArray = function useFieldArray2(name, _temp) {
+  var _ref2 = _temp === void 0 ? {} : _temp, _ref$subscription = _ref2.subscription, subscription = _ref$subscription === void 0 ? all : _ref$subscription, defaultValue = _ref2.defaultValue, initialValue = _ref2.initialValue, _ref$isEqual = _ref2.isEqual, isEqual2 = _ref$isEqual === void 0 ? defaultIsEqual : _ref$isEqual, validateProp = _ref2.validate;
+  var form = useForm$1("useFieldArray");
+  var formMutators = form.mutators;
+  var hasMutators = !!(formMutators && formMutators.push && formMutators.pop);
+  if (!hasMutators) {
+    throw new Error("Array mutators not found. You need to provide the mutators from final-form-arrays to your form");
+  }
+  var mutators = useConstant(function() {
+    return Object.keys(formMutators).reduce(function(result, key) {
+      result[key] = function() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        return formMutators[key].apply(formMutators, [name].concat(args));
+      };
+      return result;
+    }, {});
+  });
+  var validate3 = useConstant(function() {
+    return function(value, allValues, meta2) {
+      if (!validateProp)
+        return void 0;
+      var error2 = validateProp(value, allValues, meta2);
+      if (!error2 || Array.isArray(error2)) {
+        return error2;
+      } else {
+        var arrayError = [];
+        arrayError[ARRAY_ERROR] = error2;
+        return arrayError;
+      }
+    };
+  });
+  var _useField = useField(name, {
+    subscription: _extends$f({}, subscription, {
+      length: true
+    }),
+    defaultValue,
+    initialValue,
+    isEqual: isEqual2,
+    validate: validate3,
+    format: function format(v) {
+      return v;
+    }
+  }), _useField$meta = _useField.meta, length = _useField$meta.length, meta = _objectWithoutPropertiesLoose(_useField$meta, ["length"]), input = _useField.input, fieldState = _objectWithoutPropertiesLoose(_useField, ["meta", "input"]);
+  var forEach2 = function forEach3(iterator) {
+    var len = length || 0;
+    for (var i2 = 0; i2 < len; i2++) {
+      iterator(name + "[" + i2 + "]", i2);
+    }
+  };
+  var map2 = function map3(iterator) {
+    var len = length || 0;
+    var results = [];
+    for (var i2 = 0; i2 < len; i2++) {
+      results.push(iterator(name + "[" + i2 + "]", i2));
+    }
+    return results;
+  };
+  return {
+    fields: _extends$f({
+      name,
+      forEach: forEach2,
+      length: length || 0,
+      map: map2
+    }, mutators, fieldState, {
+      value: input.value
+    }),
+    meta
+  };
+};
+var version = "3.1.2";
+var versions = {
+  "final-form": version$1,
+  "react-final-form": version$2,
+  "react-final-form-arrays": version
+};
+var FieldArray = function FieldArray2(_ref2) {
+  var name = _ref2.name, subscription = _ref2.subscription, defaultValue = _ref2.defaultValue, initialValue = _ref2.initialValue, isEqual2 = _ref2.isEqual, validate3 = _ref2.validate, rest = _objectWithoutPropertiesLoose(_ref2, ["name", "subscription", "defaultValue", "initialValue", "isEqual", "validate"]);
+  var _useFieldArray = useFieldArray(name, {
+    subscription,
+    defaultValue,
+    initialValue,
+    isEqual: isEqual2,
+    validate: validate3
+  }), fields = _useFieldArray.fields, meta = _useFieldArray.meta;
+  return renderComponent(_extends$f({
+    fields,
+    meta: _extends$f({}, meta, {
+      __versions: versions
+    })
+  }, rest), "FieldArray(" + name + ")");
+};
+function AddFont() {
+  const { focusBlock: focusBlock2 } = useBlock();
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  const value = focusBlock2 == null ? void 0 : focusBlock2.data.value;
+  return /* @__PURE__ */ React__default.createElement(FieldArray, {
+    name: `${focusIdx2}.data.value.fonts`,
+    render: (arrayHelpers) => {
+      var _a;
+      return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Stack$6, {
+        vertical: true,
+        spacing: "tight"
+      }, /* @__PURE__ */ React__default.createElement(Stack$6, {
+        distribution: "equalSpacing"
+      }, /* @__PURE__ */ React__default.createElement(TextStyle, {
+        variation: "strong"
+      }, "Import font ", /* @__PURE__ */ React__default.createElement(Help, {
+        title: "Points to a hosted css file"
+      })), /* @__PURE__ */ React__default.createElement(Stack$6, null, /* @__PURE__ */ React__default.createElement(Button$4, {
+        size: "small",
+        icon: /* @__PURE__ */ React__default.createElement(IconPlus$1, null),
+        onClick: () => arrayHelpers.fields.push({ name: "", href: "" })
+      }))), /* @__PURE__ */ React__default.createElement(Stack$6, {
+        vertical: true,
+        spacing: "extraTight"
+      }, (_a = value.fonts) == null ? void 0 : _a.map((item2, index2) => {
+        return /* @__PURE__ */ React__default.createElement("div", {
+          key: index2
+        }, /* @__PURE__ */ React__default.createElement(Stack$6, {
+          alignment: "center",
+          wrap: false
+        }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+          fill: true
+        }, /* @__PURE__ */ React__default.createElement(TextField, {
+          inline: true,
+          name: `${focusIdx2}.data.value.fonts.${index2}.name`,
+          label: "Name"
+        })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+          fill: true
+        }, /* @__PURE__ */ React__default.createElement(TextField, {
+          inline: true,
+          name: `${focusIdx2}.data.value.fonts.${index2}.href`,
+          label: "Href"
+        })), /* @__PURE__ */ React__default.createElement(Button$4, {
+          icon: /* @__PURE__ */ React__default.createElement(IconDelete$1, null),
+          onClick: () => arrayHelpers.fields.remove(index2)
+        })));
+      }))));
+    }
+  });
+}
+const MergeTags = React__default.memo((props) => {
+  const { mergeTags = {}, mergeTagGenerate } = useEditorProps();
   const treeOptions = useMemo(() => {
     const treeData = [];
     const deep = (key, title2, parent2, mapData = []) => {
       const currentMapData = {
-        key: `{{${key}}}`,
-        value: `{{${key}}}`,
-        title: title2,
-        children: []
-      };
-      mapData.push(currentMapData);
-      const current = parent2[key];
-      if (lodash.exports.isObject(current)) {
-        Object.keys(current).map((childKey) => deep(key + "." + childKey, childKey, current, currentMapData.children));
-      }
-    };
-    Object.keys(mergeTags).map((key) => deep(key, key, mergeTags, treeData));
-    return treeData;
-  }, [mergeTags]);
-  const onSelect = useCallback((value) => {
-    return props.onChange(value);
-  }, [props]);
-  return /* @__PURE__ */ React__default.createElement("div", {
-    style: { color: "#333" }
-  }, props.isSelect ? /* @__PURE__ */ React__default.createElement(TreeSelect$1, {
-    value: props.value,
-    size: "small",
-    style: { width: 120 },
-    dropdownMenuStyle: { maxHeight: 400, overflow: "auto" },
-    placeholder: "Please select",
-    treeData: treeOptions,
-    onChange: onSelect
-  }) : /* @__PURE__ */ React__default.createElement(Tree$1, {
-    style: { width: 120 },
-    selectedKeys: [],
-    treeData: treeOptions,
-    onSelect: (vals) => onSelect(vals[0])
-  }));
-});
-var styleText$1 = ".easy-email-extensions-Tools-Popover .arco-popover-content{padding:0}.easy-email-extensions-Tools-Popover .arco-popover-content-inner *::-webkit-scrollbar{-webkit-appearance:none;width:5px}.easy-email-extensions-Tools-Popover .arco-popover-content-inner *::-webkit-scrollbar-thumb{border-radius:5px;background-color:#00000080;box-shadow:0 0 1px #ffffff80;-webkit-box-shadow:0 0 1px rgba(255,255,255,.5)}\n";
-function Tools(props) {
-  const { container: container2 } = props;
-  const { mergeTags } = useEditorProps();
-  const [selectionRange, setSelectionRange] = useState(null);
-  useEffect(() => {
-    const onSelectionChange = () => {
-      try {
-        const range2 = getShadowRoot().getSelection().getRangeAt(0);
-        if (range2) {
-          setSelectionRange(range2);
-        }
-      } catch (error2) {
-      }
-    };
-    document.addEventListener("selectionchange", onSelectionChange);
-    return () => {
-      document.removeEventListener("selectionchange", onSelectionChange);
-    };
-  }, []);
-  const restoreRange = useCallback((range2) => {
-    const selection = getShadowRoot().getSelection();
-    selection.removeAllRanges();
-    const newRange = document.createRange();
-    newRange.setStart(range2.startContainer, range2.startOffset);
-    newRange.setEnd(range2.endContainer, range2.endOffset);
-    selection.addRange(newRange);
-  }, []);
-  const execCommand = (cmd, val) => {
-    if (!container2) {
-      console.error("No container");
-      return;
-    }
-    if (!selectionRange) {
-      console.error("No selectionRange");
-      return;
-    }
-    if (!(container2 == null ? void 0 : container2.contains(selectionRange == null ? void 0 : selectionRange.commonAncestorContainer)) && container2 !== (selectionRange == null ? void 0 : selectionRange.commonAncestorContainer)) {
-      console.error("Not commonAncestorContainer");
-      return;
-    }
-    restoreRange(selectionRange);
-    if (cmd === "createLink") {
-      const linkData = val;
-      const target2 = linkData.blank ? "_blank" : "";
-      let link;
-      if (linkData.linkNode) {
-        link = linkData.linkNode;
-      } else {
-        const uuid2 = (+new Date()).toString();
-        document.execCommand(cmd, false, uuid2);
-        link = getShadowRoot().querySelector(`a[href="${uuid2}"`);
-      }
-      if (target2) {
-        link.setAttribute("target", target2);
-      }
-      link.style.color = "inherit";
-      link.style.textDecoration = linkData.underline ? "underline" : "none";
-      link.setAttribute("href", linkData.link);
-    } else {
-      document.execCommand(cmd, false, val);
-    }
-    const html = container2.innerHTML;
-    props.onChange(html);
-  };
-  const getPopoverMountNode = () => document.getElementById(FIXED_CONTAINER_ID);
-  return /* @__PURE__ */ React__default.createElement("div", {
-    id: "Tools",
-    style: { display: "flex", flexWrap: "nowrap" }
-  }, /* @__PURE__ */ React__default.createElement("div", {
-    style: {
-      display: "flex",
-      alignItems: "center"
-    }
-  }, /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(Popover$1, {
-    className: "easy-email-extensions-Tools-Popover",
-    trigger: "click",
-    content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$1), /* @__PURE__ */ React__default.createElement(FontFamily$1, {
-      onChange: (val) => execCommand("fontName", val)
-    })),
-    getPopupContainer: getPopoverMountNode
-  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    title: "font family",
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-font-family"
-    })
-  })), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(Popover$1, {
-    className: "easy-email-extensions-Tools-Popover",
-    color: "#fff",
-    trigger: "click",
-    content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$1), /* @__PURE__ */ React__default.createElement(FontSizeList, {
-      onChange: (val) => execCommand("fontSize", val)
-    })),
-    getPopupContainer: getPopoverMountNode
-  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    title: "line-height",
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-line-height"
-    })
-  })), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("bold"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-bold"
-    }),
-    title: "Bold"
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("italic"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-italic"
-    }),
-    title: "Italic"
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(ColorPicker, {
-    label: "",
-    position: "tl",
-    onChange: (color) => execCommand("foreColor", color),
-    getPopupContainer: getPopoverMountNode,
-    showInput: false
-  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-font-color"
-    }),
-    title: "Text color"
-  })), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(ColorPicker, {
-    label: "",
-    showInput: false,
-    position: "tl",
-    onChange: (color) => execCommand("hiliteColor", color),
-    getPopupContainer: getPopoverMountNode
-  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-bg-colors"
-    }),
-    title: "Background color"
-  })), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(Link$1, {
-    currentRange: selectionRange,
-    onChange: (values2) => execCommand("createLink", values2),
-    getPopupContainer: getPopoverMountNode
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), mergeTags && /* @__PURE__ */ React__default.createElement(Tooltip$1, {
-    color: "#fff",
-    position: "bottom",
-    content: /* @__PURE__ */ React__default.createElement(MergeTags$1, {
-      value: "",
-      onChange: (val) => execCommand("insertHTML", val)
-    }),
-    getPopupContainer: getPopoverMountNode
-  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    title: "Merge tag",
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-merge-tags"
-    })
-  })), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("justifyLeft"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-align-left"
-    }),
-    title: "Align left"
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("justifyCenter"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-align-center"
-    }),
-    title: "Align center"
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("justifyRight"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-align-right"
-    }),
-    title: "Align right"
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("insertOrderedList"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-list-ol"
-    }),
-    title: "Orderlist"
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("insertUnorderedList"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-list-ul"
-    }),
-    title: "Unorderlist"
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("strikeThrough"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-strikethrough"
-    }),
-    title: "StrikethroughOutlined"
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("underline"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-underline"
-    }),
-    title: "UnderlineOutlined"
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("insertHorizontalRule"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-line"
-    }),
-    title: "Line"
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("removeFormat"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-close"
-    }),
-    title: "Remove format"
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  })));
-}
-var styleText = ".easy-email-extensions-emailToolItem{display:inline-flex;position:relative;outline:none;font-weight:400;appearance:none;cursor:pointer!important;white-space:nowrap;transition:all .1s linear;box-sizing:border-box;line-height:1.5715;border:none;background-color:transparent;color:#fff}.easy-email-extensions-divider{position:relative;display:inline-flex;width:1px;height:16px;background-color:#808080e6}\n";
-function RichTextToolBar() {
-  const [direction, setDirection] = useState("top");
-  const [blockNode, setBlockNode] = useState(null);
-  const [offsetX, setOffsetX] = useState(0);
-  const { focusBlock: focusBlock2 } = useBlock();
-  const { pageData: pageData2 } = useEditorContext();
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  const pageWidth = +(pageData2.attributes.width || "600").replace("px", "");
-  useEffect(() => {
-    const promiseObj = awaitForElement(focusIdx2);
-    promiseObj.promise.then((blockNode2) => {
-      setBlockNode(blockNode2);
-    });
-    return () => {
-      promiseObj.cancel();
-    };
-  }, [focusIdx2, focusBlock2]);
-  useEffect(() => {
-    if (blockNode) {
-      const options2 = {
-        rootMargin: "-84px 0px 0px 0px",
-        root: getShadowRoot().firstChild,
-        threshold: [0, 1e-3, 0.1, 0.999, 0.8, 0.9, 1]
-      };
-      const checkDirection = (ev) => {
-        const [current] = ev;
-        const { top } = current.intersectionRect;
-        const boundingClientRect = current.boundingClientRect;
-        const rootBounds = current.rootBounds;
-        const intersectionRatio = current.intersectionRatio;
-        if (!rootBounds)
-          return;
-        const paddingLeft = (rootBounds.width - pageWidth) / 2;
-        const offsetLeft = boundingClientRect.left - rootBounds.left;
-        setOffsetX(paddingLeft - offsetLeft);
-        if (intersectionRatio === 1) {
-          setDirection("top");
-        } else {
-          if (top) {
-            if (top > rootBounds.top) {
-              setDirection("top");
-            } else {
-              setDirection("bottom");
-            }
-          }
-        }
-      };
-      const observer = new IntersectionObserver(checkDirection, options2);
-      observer.observe(blockNode);
-      return () => {
-        observer.unobserve(blockNode);
-      };
-    }
-  }, [blockNode, pageWidth]);
-  if (!blockNode)
-    return null;
-  const editorContainer = blockNode && getEditNode(blockNode);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, createPortal(/* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", {
-    dangerouslySetInnerHTML: { __html: styleText }
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    style: {
-      transform: direction === "top" ? "translate(0,-100%)" : void 0,
-      padding: "4px 8px",
-      boxSizing: "border-box",
-      position: "absolute",
-      zIndex: 100,
-      top: direction === "top" ? -40 : "calc(100% + 40px)",
-      left: offsetX,
-      width: pageWidth
-    }
-  }, /* @__PURE__ */ React__default.createElement("div", {
-    style: {
-      position: "absolute",
-      backgroundColor: "#41444d",
-      height: "100%",
-      width: "100%",
-      left: 0,
-      top: 0
-    }
-  }), /* @__PURE__ */ React__default.createElement(Tools, {
-    container: editorContainer,
-    onChange: () => {
-    }
-  }))), blockNode));
-}
-const TEXT_BAR_LOCATION_KEY = "TEXT_BAR_LOCATION_KEY";
-const RichTextFieldItem = (props) => {
-  useLocalStorage$1(TEXT_BAR_LOCATION_KEY, { left: 0, top: 0 });
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(RichTextToolBar, null), /* @__PURE__ */ React__default.createElement(InlineTextField, __spreadValues({}, props)));
-};
-const RichTextField = (props) => {
-  const { focusBlock: focusBlock2 } = useBlock();
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  if ((focusBlock2 == null ? void 0 : focusBlock2.type) !== BasicType.TEXT)
-    return null;
-  return /* @__PURE__ */ React__default.createElement(RichTextFieldItem, __spreadValues({
-    key: focusIdx2
-  }, props));
-};
-const TextField = enhancer(Input, (value) => value);
-const SearchField = enhancer(Input$5.Search, (val) => val);
-const TextAreaField = enhancer(Input$5.TextArea, (val) => val);
-const NumberField = enhancer(InputNumber$1, (e) => e);
-const SliderField = enhancer(Slider$2, (e) => e);
-const ColorPickerField = enhancer(ColorPicker, (e) => e);
-const UploadField = enhancer(UploadField$1, (val) => val);
-const ImageUploaderField = enhancer(ImageUploader, (url) => url);
-const SelectField = enhancer(Select, (e) => e);
-const AutoCompleteField = enhancer(AutoComplete, (e) => e);
-const RadioGroupField = enhancer(RadioGroup, (value) => value);
-const SwitchField = enhancer(Switch$1, (e) => e);
-const DatePickerField = enhancer(DatePicker$1, (date) => date);
-const CheckboxField = enhancer(CheckBoxGroup, (e) => e);
-const EditTabField = enhancer(EditTab, (e) => e);
-const InlineTextField = enhancer(InlineText, (value) => value);
-const AddToCollection = ({ visible, setVisible }) => {
-  const { focusBlock: focusBlockData } = useBlock();
-  const { onAddCollection, onUploadImage } = useEditorProps();
-  const onSubmit = (values2) => {
-    if (!values2.label)
-      return;
-    const uuid2 = uuid_1.v4();
-    onAddCollection == null ? void 0 : onAddCollection({
-      label: values2.label,
-      helpText: values2.helpText,
-      data: focusBlockData,
-      thumbnail: values2.thumbnail,
-      id: uuid2
-    });
-    setVisible(false);
-  };
-  return /* @__PURE__ */ React__default.createElement(Form$3, {
-    initialValues: { label: "", helpText: "", thumbnail: "" },
-    onSubmit
-  }, ({ handleSubmit }) => /* @__PURE__ */ React__default.createElement(Modal$1, {
-    maskClosable: false,
-    style: { zIndex: 2e3 },
-    visible,
-    title: "Add to collection",
-    onOk: () => handleSubmit(),
-    onCancel: () => setVisible(false)
-  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
-    vertical: true
-  }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, null), /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Title",
-    name: "label",
-    validate: (val) => {
-      if (!val)
-        return "Title required!";
-      return void 0;
-    }
-  }), /* @__PURE__ */ React__default.createElement(TextAreaField, {
-    label: "Description",
-    name: "helpText"
-  }), /* @__PURE__ */ React__default.createElement(ImageUploaderField, {
-    label: "Thumbnail",
-    name: "thumbnail",
-    uploadHandler: onUploadImage,
-    validate: (val) => {
-      if (!val)
-        return "Thumbnail required!";
-      return void 0;
-    }
-  }))));
-};
-function useAddToCollection() {
-  const [modalVisible, setModalVisible] = useState(false);
-  const modal = useMemo(() => /* @__PURE__ */ React__default.createElement(AddToCollection, {
-    visible: modalVisible,
-    setVisible: setModalVisible
-  }), [modalVisible]);
-  return {
-    modal,
-    modalVisible,
-    setModalVisible
-  };
-}
-function ContextMenu({
-  moveBlock,
-  copyBlock,
-  removeBlock,
-  contextMenuData,
-  onClose
-}) {
-  const { blockData, left, top } = contextMenuData;
-  const idx = blockData.id;
-  const { modal, modalVisible, setModalVisible } = useAddToCollection();
-  const ref = useRef(null);
-  const handleMoveUp = () => {
-    moveBlock(idx, getSiblingIdx(idx, -1));
-    scrollBlockEleIntoView({
-      idx: getSiblingIdx(idx, -1)
-    });
-    onClose();
-  };
-  const handleMoveDown = () => {
-    moveBlock(idx, getSiblingIdx(idx, 1));
-    scrollBlockEleIntoView({
-      idx: getSiblingIdx(idx, 1)
-    });
-    onClose();
-  };
-  const handleCopy = (ev) => {
-    copyBlock(idx);
-    scrollBlockEleIntoView({
-      idx: getSiblingIdx(idx, 1)
-    });
-    onClose();
-  };
-  const handleAddToCollection = () => {
-    setModalVisible(true);
-  };
-  const handleDelete = () => {
-    removeBlock(idx);
-    onClose();
-  };
-  const isFirst = getIndexByIdx(idx) === 0;
-  return /* @__PURE__ */ React__default.createElement("div", {
-    ref,
-    style: { visibility: modalVisible ? "hidden" : void 0 }
-  }, /* @__PURE__ */ React__default.createElement("div", {
-    style: {
-      left,
-      top
-    },
-    className: styles$7.wrap,
-    onClick: (e) => e.stopPropagation()
-  }, !isFirst && /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$7.listItem,
-    onClick: handleMoveUp
-  }, /* @__PURE__ */ React__default.createElement(IconFont, {
-    iconName: "icon-top",
-    style: { marginRight: 10 }
-  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Move up")), /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$7.listItem,
-    onClick: handleMoveDown
-  }, /* @__PURE__ */ React__default.createElement(IconFont, {
-    iconName: "icon-bottom",
-    style: { marginRight: 10 }
-  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Move down")), /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$7.listItem,
-    onClick: handleCopy
-  }, /* @__PURE__ */ React__default.createElement(IconFont, {
-    iconName: "icon-copy",
-    style: { marginRight: 10 }
-  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Copy")), /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$7.listItem,
-    onClick: handleAddToCollection
-  }, /* @__PURE__ */ React__default.createElement(IconFont, {
-    iconName: "icon-start",
-    style: { marginRight: 10 }
-  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Add to collection")), /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$7.listItem,
-    onClick: handleDelete
-  }, /* @__PURE__ */ React__default.createElement(IconFont, {
-    iconName: "icon-delete",
-    style: { marginRight: 10 }
-  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Delete")), /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$7.listItem,
-    onClick: handleAddToCollection
-  }, /* @__PURE__ */ React__default.createElement(IconFont, {
-    iconName: "icon-start",
-    style: { marginRight: 10 }
-  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Add to collection"))), /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$7.contextmenuMark,
-    onClick: onClose,
-    onContextMenu: (e) => {
-      e.preventDefault();
-      onClose(e);
-    }
-  }), modal);
-}
-function BlockLayer() {
-  const {
-    pageData: pageData2,
-    formState: { values: values2 }
-  } = useEditorContext();
-  const { onUploadImage, onAddCollection } = useEditorProps();
-  const { focusIdx: focusIdx2, setFocusIdx } = useFocusIdx();
-  const { setHoverIdx } = useHoverIdx();
-  const { moveBlock, setValueByIdx: setValueByIdx2, copyBlock, removeBlock } = useBlock();
-  const [contextMenuData, setContextMenuData] = useState(null);
-  const onToggleVisible = useCallback(({ id }, e) => {
-    e.stopPropagation();
-    const blockData = lodash.exports.get(values2, id);
-    if (blockData) {
-      blockData.data.hidden = !Boolean(blockData.data.hidden);
-      setValueByIdx2(id, blockData);
-    }
-  }, [setValueByIdx2, values2]);
-  const renderTitle = useCallback((data) => {
-    const block2 = BlockManager.getBlockByType(data.type);
-    return /* @__PURE__ */ React__default.createElement("div", {
-      className: styles$9.title
-    }, /* @__PURE__ */ React__default.createElement(TextStyle, {
-      size: "smallest"
-    }, block2 == null ? void 0 : block2.name), /* @__PURE__ */ React__default.createElement("div", {
-      className: styles$9.eyeIcon
-    }, /* @__PURE__ */ React__default.createElement(EyeIcon$1, {
-      blockData: data,
-      onToggleVisible
-    })));
-  }, [onToggleVisible]);
-  const treeData = useMemo(() => {
-    const copyData = lodash.exports.cloneDeep(pageData2);
-    const loop2 = (item2, id, parent2) => {
-      item2.id = id;
-      item2.parent = parent2;
-      item2.children.map((child, index2) => loop2(child, getChildIdx(id, index2), item2));
-    };
-    loop2(copyData, getPageIdx(), null);
-    return [copyData];
-  }, [pageData2]);
-  const onSelect = useCallback((selectedId) => {
-    setFocusIdx(selectedId);
-    scrollBlockEleIntoView({ idx: selectedId });
-  }, [setFocusIdx]);
-  const onContextMenu = useCallback((blockData, ev) => {
-    ev.preventDefault();
-    setContextMenuData({ blockData, left: ev.clientX, top: ev.clientY });
-  }, []);
-  const onCloseContextMenu = useCallback((ev) => {
-    setContextMenuData(null);
-  }, []);
-  const onMouseEnter = useCallback((id) => {
-    setHoverIdx(id);
-  }, [setHoverIdx]);
-  const onMouseLeave = useCallback(() => {
-    setHoverIdx("");
-  }, [setHoverIdx]);
-  const allowDrop = useCallback((params) => {
-    const { dragNode, dropNode, willInsertAfter } = params;
-    const dragBlock = BlockManager.getBlockByType(dragNode.type);
-    if (!dragBlock)
-      return false;
-    if (dragBlock.validParentType.includes(dropNode.type) && willInsertAfter) {
-      return true;
-    }
-    if (dropNode.parent && dragBlock.validParentType.includes(dropNode.parent.type)) {
-      return true;
-    }
-    return false;
-  }, []);
-  const onDrop = useCallback((params) => {
-    const { dragNode, dropNode, willInsertAfter } = params;
-    const dragBlock = BlockManager.getBlockByType(dragNode.type);
-    if (!dragBlock)
-      return;
-    if (dragBlock.validParentType.includes(dropNode.type) && willInsertAfter) {
-      moveBlock(dragNode.id, getChildIdx(dropNode.id, 0));
-    } else {
-      moveBlock(dragNode.id, willInsertAfter ? getSiblingIdx(dropNode.id, 1) : dropNode.id);
-    }
-  }, [moveBlock]);
-  const hasFocus = Boolean(focusIdx2);
-  return useMemo(() => {
-    if (!hasFocus)
-      return null;
-    return /* @__PURE__ */ React__default.createElement("div", __spreadValues({
-      id: "BlockLayerManager"
-    }, {
-      [DATA_ATTRIBUTE_DROP_CONTAINER]: "true"
-    }), /* @__PURE__ */ React__default.createElement(BlockTree, {
-      selectedId: focusIdx2,
-      defaultExpandAll: true,
-      treeData,
-      renderTitle,
-      allowDrop,
-      onContextMenu,
-      onDrop,
-      onSelect,
-      onMouseEnter,
-      onMouseLeave
-    }), contextMenuData && /* @__PURE__ */ React__default.createElement(ContextMenu, {
-      onClose: onCloseContextMenu,
-      moveBlock,
-      copyBlock,
-      removeBlock,
-      contextMenuData
-    }));
-  }, [
-    hasFocus,
-    focusIdx2,
-    treeData,
-    renderTitle,
-    allowDrop,
-    onContextMenu,
-    onDrop,
-    onSelect,
-    onMouseEnter,
-    onMouseLeave,
-    contextMenuData,
-    onCloseContextMenu,
-    onUploadImage,
-    onAddCollection,
-    moveBlock,
-    copyBlock,
-    removeBlock
-  ]);
-}
-function Help(props) {
-  return /* @__PURE__ */ React__default.createElement(Tooltip$1, __spreadProps(__spreadValues({}, __spreadProps(__spreadValues({}, props), { style: void 0 })), {
-    content: props.title
-  }), /* @__PURE__ */ React__default.createElement("span", {
-    style: { cursor: "pointer" }
-  }, /* @__PURE__ */ React__default.createElement(IconQuestionCircle$1, {
-    style: props.style
-  })));
-}
-var ARRAY_ERROR = "FINAL_FORM/array-error";
-var fieldSubscriptionItems = ["active", "data", "dirty", "dirtySinceLastSubmit", "error", "initial", "invalid", "length", "modified", "modifiedSinceLastSubmit", "pristine", "submitError", "submitFailed", "submitSucceeded", "submitting", "touched", "valid", "value", "visited", "validating"];
-var version$1 = "4.20.4";
-function renderComponent(props, name) {
-  var render3 = props.render, children = props.children, component = props.component, rest = _objectWithoutPropertiesLoose(props, ["render", "children", "component"]);
-  if (component) {
-    return /* @__PURE__ */ createElement(component, _extends$f({}, rest, {
-      children,
-      render: render3
-    }));
-  }
-  if (render3) {
-    return render3(children === void 0 ? rest : _extends$f({}, rest, {
-      children
-    }));
-  }
-  if (typeof children !== "function") {
-    throw new Error("Must specify either a render prop, a render function as children, or a component prop to " + name);
-  }
-  return children(rest);
-}
-var defaultIsEqual = function defaultIsEqual2(aArray, bArray) {
-  return aArray === bArray || Array.isArray(aArray) && Array.isArray(bArray) && aArray.length === bArray.length && !aArray.some(function(a, index2) {
-    return a !== bArray[index2];
-  });
-};
-function useConstant(init) {
-  var ref = React__default.useRef();
-  if (!ref.current) {
-    ref.current = init();
-  }
-  return ref.current;
-}
-var all = fieldSubscriptionItems.reduce(function(result, key) {
-  result[key] = true;
-  return result;
-}, {});
-var useFieldArray = function useFieldArray2(name, _temp) {
-  var _ref2 = _temp === void 0 ? {} : _temp, _ref$subscription = _ref2.subscription, subscription = _ref$subscription === void 0 ? all : _ref$subscription, defaultValue = _ref2.defaultValue, initialValue = _ref2.initialValue, _ref$isEqual = _ref2.isEqual, isEqual2 = _ref$isEqual === void 0 ? defaultIsEqual : _ref$isEqual, validateProp = _ref2.validate;
-  var form = useForm$1("useFieldArray");
-  var formMutators = form.mutators;
-  var hasMutators = !!(formMutators && formMutators.push && formMutators.pop);
-  if (!hasMutators) {
-    throw new Error("Array mutators not found. You need to provide the mutators from final-form-arrays to your form");
-  }
-  var mutators = useConstant(function() {
-    return Object.keys(formMutators).reduce(function(result, key) {
-      result[key] = function() {
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-        return formMutators[key].apply(formMutators, [name].concat(args));
-      };
-      return result;
-    }, {});
-  });
-  var validate3 = useConstant(function() {
-    return function(value, allValues, meta2) {
-      if (!validateProp)
-        return void 0;
-      var error2 = validateProp(value, allValues, meta2);
-      if (!error2 || Array.isArray(error2)) {
-        return error2;
-      } else {
-        var arrayError = [];
-        arrayError[ARRAY_ERROR] = error2;
-        return arrayError;
-      }
-    };
-  });
-  var _useField = useField(name, {
-    subscription: _extends$f({}, subscription, {
-      length: true
-    }),
-    defaultValue,
-    initialValue,
-    isEqual: isEqual2,
-    validate: validate3,
-    format: function format(v) {
-      return v;
-    }
-  }), _useField$meta = _useField.meta, length = _useField$meta.length, meta = _objectWithoutPropertiesLoose(_useField$meta, ["length"]), input = _useField.input, fieldState = _objectWithoutPropertiesLoose(_useField, ["meta", "input"]);
-  var forEach2 = function forEach3(iterator) {
-    var len = length || 0;
-    for (var i2 = 0; i2 < len; i2++) {
-      iterator(name + "[" + i2 + "]", i2);
-    }
-  };
-  var map2 = function map3(iterator) {
-    var len = length || 0;
-    var results = [];
-    for (var i2 = 0; i2 < len; i2++) {
-      results.push(iterator(name + "[" + i2 + "]", i2));
-    }
-    return results;
-  };
-  return {
-    fields: _extends$f({
-      name,
-      forEach: forEach2,
-      length: length || 0,
-      map: map2
-    }, mutators, fieldState, {
-      value: input.value
-    }),
-    meta
-  };
-};
-var version = "3.1.2";
-var versions = {
-  "final-form": version$1,
-  "react-final-form": version$2,
-  "react-final-form-arrays": version
-};
-var FieldArray = function FieldArray2(_ref2) {
-  var name = _ref2.name, subscription = _ref2.subscription, defaultValue = _ref2.defaultValue, initialValue = _ref2.initialValue, isEqual2 = _ref2.isEqual, validate3 = _ref2.validate, rest = _objectWithoutPropertiesLoose(_ref2, ["name", "subscription", "defaultValue", "initialValue", "isEqual", "validate"]);
-  var _useFieldArray = useFieldArray(name, {
-    subscription,
-    defaultValue,
-    initialValue,
-    isEqual: isEqual2,
-    validate: validate3
-  }), fields = _useFieldArray.fields, meta = _useFieldArray.meta;
-  return renderComponent(_extends$f({
-    fields,
-    meta: _extends$f({}, meta, {
-      __versions: versions
-    })
-  }, rest), "FieldArray(" + name + ")");
-};
-function AddFont() {
-  const { focusBlock: focusBlock2 } = useBlock();
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  const value = focusBlock2 == null ? void 0 : focusBlock2.data.value;
-  return /* @__PURE__ */ React__default.createElement(FieldArray, {
-    name: `${focusIdx2}.data.value.fonts`,
-    render: (arrayHelpers) => {
-      var _a;
-      return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Stack$6, {
-        vertical: true,
-        spacing: "tight"
-      }, /* @__PURE__ */ React__default.createElement(Stack$6, {
-        distribution: "equalSpacing"
-      }, /* @__PURE__ */ React__default.createElement(TextStyle, {
-        variation: "strong"
-      }, "Import font ", /* @__PURE__ */ React__default.createElement(Help, {
-        title: "Points to a hosted css file"
-      })), /* @__PURE__ */ React__default.createElement(Stack$6, null, /* @__PURE__ */ React__default.createElement(Button$4, {
-        size: "small",
-        icon: /* @__PURE__ */ React__default.createElement(IconPlus$1, null),
-        onClick: () => arrayHelpers.fields.push({ name: "", href: "" })
-      }))), /* @__PURE__ */ React__default.createElement(Stack$6, {
-        vertical: true,
-        spacing: "extraTight"
-      }, (_a = value.fonts) == null ? void 0 : _a.map((item2, index2) => {
-        return /* @__PURE__ */ React__default.createElement("div", {
-          key: index2
-        }, /* @__PURE__ */ React__default.createElement(Stack$6, {
-          alignment: "center",
-          wrap: false
-        }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-          fill: true
-        }, /* @__PURE__ */ React__default.createElement(TextField, {
-          inline: true,
-          name: `${focusIdx2}.data.value.fonts.${index2}.name`,
-          label: "Name"
-        })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-          fill: true
-        }, /* @__PURE__ */ React__default.createElement(TextField, {
-          inline: true,
-          name: `${focusIdx2}.data.value.fonts.${index2}.href`,
-          label: "Href"
-        })), /* @__PURE__ */ React__default.createElement(Button$4, {
-          icon: /* @__PURE__ */ React__default.createElement(IconDelete$1, null),
-          onClick: () => arrayHelpers.fields.remove(index2)
-        })));
-      }))));
-    }
-  });
-}
-const MergeTags = React__default.memo((props) => {
-  const { mergeTags = {} } = useEditorProps();
-  const treeOptions = useMemo(() => {
-    const treeData = [];
-    const deep = (key, title2, parent2, mapData = []) => {
-      const currentMapData = {
-        key: `{{${key}}}`,
-        value: `{{${key}}}`,
+        key: mergeTagGenerate(key),
+        value: mergeTagGenerate(key),
         title: title2,
         children: []
       };
@@ -39848,10 +38962,6 @@ const MergeTags = React__default.memo((props) => {
     onSelect: (vals) => onSelect(vals[0])
   }));
 });
-const wrapper = "_wrapper_j840r_1";
-var styles$4 = {
-  wrapper
-};
 const AttributesPanelWrapper = (props) => {
   const { focusBlock: focusBlock2, setFocusBlock } = useBlock();
   const { mergeTags } = useEditorProps();
@@ -39864,11 +38974,9 @@ const AttributesPanelWrapper = (props) => {
   }, [focusBlock2, setFocusBlock]);
   if (!focusBlock2 || !block2)
     return null;
-  return /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$4.wrapper
-  }, /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", {
     style: {
-      border: "1px solid #f0f0f0",
+      border: "1px solid var(--color-neutral-3, rgb(229, 230, 235))",
       borderBottom: "none",
       padding: "12px 24px"
     }
@@ -39883,7 +38991,10 @@ const AttributesPanelWrapper = (props) => {
   }, /* @__PURE__ */ React__default.createElement(Stack$6, {
     spacing: "extraTight",
     alignment: "center"
-  }, /* @__PURE__ */ React__default.createElement(EyeIcon, null), /* @__PURE__ */ React__default.createElement(TextStyle, null, `${block2.name} attributes`)), /* @__PURE__ */ React__default.createElement(Stack$6.Item, null, props.extra))), Boolean(focusBlock2.data.hidden) && mergeTags && /* @__PURE__ */ React__default.createElement(Stack$6, {
+  }, /* @__PURE__ */ React__default.createElement(EyeIcon, null), /* @__PURE__ */ React__default.createElement(TextStyle, {
+    variation: "strong",
+    size: "large"
+  }, `${block2.name} attributes`)), /* @__PURE__ */ React__default.createElement(Stack$6.Item, null, props.extra))), Boolean(focusBlock2.data.hidden) && mergeTags && /* @__PURE__ */ React__default.createElement(Stack$6, {
     spacing: "extraTight"
   }, /* @__PURE__ */ React__default.createElement(TextStyle, null, "Hide if"), /* @__PURE__ */ React__default.createElement(MergeTags, {
     isSelect: true,
@@ -39910,8 +39021,10 @@ function EyeIcon() {
   if (focusBlock2.type === BasicType.PAGE)
     return null;
   return focusBlock2.data.hidden ? /* @__PURE__ */ React__default.createElement(IconEyeInvisible$1, {
+    style: { cursor: "pointer", fontSize: 18 },
     onClick: onToggleVisible
   }) : /* @__PURE__ */ React__default.createElement(IconEye$1, {
+    style: { cursor: "pointer", fontSize: 18 },
     onClick: onToggleVisible
   });
 }
@@ -40038,10 +39151,10 @@ function Padding(props = {}) {
       bottom,
       right
     };
-  }, [paddingList, defaultPaddingList]);
+  }, [paddingList, defaultPaddingList, defaultPaddingValue, paddingValue]);
   const onChancePadding = useCallback((val) => {
     change(focusIdx2 + `.attributes[${attributeName}]`, val);
-  }, [focusIdx2, attributeName]);
+  }, [focusIdx2, attributeName, change]);
   return /* @__PURE__ */ React__default.createElement(Form$3, {
     initialValues: paddingFormValues,
     subscription: { submitting: true, pristine: true },
@@ -41696,168 +40809,1013 @@ function Table() {
     setVisible
   }));
 }
-const blocks = {
-  [BasicType.PAGE]: Page,
-  [BasicType.SECTION]: Section,
-  [BasicType.COLUMN]: Column,
-  [BasicType.TEXT]: Text,
-  [BasicType.IMAGE]: Image$1,
-  [BasicType.GROUP]: Group,
-  [BasicType.BUTTON]: Button,
-  [BasicType.DIVIDER]: Divider,
-  [BasicType.WRAPPER]: Wrapper,
-  [BasicType.SPACER]: Spacer,
-  [BasicType.RAW]: Raw,
-  [BasicType.ACCORDION]: Accordion,
-  [BasicType.ACCORDION_ELEMENT]: AccordionElement,
-  [BasicType.ACCORDION_TITLE]: AccordionTitle,
-  [BasicType.ACCORDION_TEXT]: AccordionText,
-  [BasicType.CAROUSEL]: Carousel,
-  [BasicType.HERO]: Hero,
-  [BasicType.NAVBAR]: Navbar,
-  [BasicType.SOCIAL]: Social,
-  [BasicType.TABLE]: Table
+const blocks = {
+  [BasicType.PAGE]: Page,
+  [BasicType.SECTION]: Section,
+  [BasicType.COLUMN]: Column,
+  [BasicType.TEXT]: Text,
+  [BasicType.IMAGE]: Image$1,
+  [BasicType.GROUP]: Group,
+  [BasicType.BUTTON]: Button,
+  [BasicType.DIVIDER]: Divider,
+  [BasicType.WRAPPER]: Wrapper,
+  [BasicType.SPACER]: Spacer,
+  [BasicType.RAW]: Raw,
+  [BasicType.ACCORDION]: Accordion,
+  [BasicType.ACCORDION_ELEMENT]: AccordionElement,
+  [BasicType.ACCORDION_TITLE]: AccordionTitle,
+  [BasicType.ACCORDION_TEXT]: AccordionText,
+  [BasicType.CAROUSEL]: Carousel,
+  [BasicType.HERO]: Hero,
+  [BasicType.NAVBAR]: Navbar,
+  [BasicType.SOCIAL]: Social,
+  [BasicType.TABLE]: Table
+};
+class BlockAttributeConfigurationManager {
+  static add(componentMap) {
+    Object.keys(componentMap).forEach((name) => {
+      this.map[name] = componentMap[name];
+    });
+  }
+  static get(name) {
+    return this.map[name];
+  }
+  static getMap() {
+    return this.map;
+  }
+}
+__publicField(BlockAttributeConfigurationManager, "map", __spreadValues({}, blocks));
+function AttributePanel() {
+  const { values: values2, focusBlock: focusBlock2 } = useBlock();
+  const { initialized } = useEditorContext();
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  const value = getValueByIdx(values2, focusIdx2);
+  const Com = focusBlock2 && BlockAttributeConfigurationManager.get(focusBlock2.type);
+  const shadowRoot = getShadowRoot();
+  if (!value || !initialized)
+    return null;
+  return /* @__PURE__ */ React__default.createElement(PresetColorsProvider, null, Com ? /* @__PURE__ */ React__default.createElement(Com, null) : /* @__PURE__ */ React__default.createElement("div", {
+    style: { marginTop: 200, padding: "0 50px" }
+  }, /* @__PURE__ */ React__default.createElement(TextStyle, {
+    size: "extraLarge"
+  }, "No matching components")), /* @__PURE__ */ React__default.createElement("div", {
+    style: { position: "absolute" }
+  }, /* @__PURE__ */ React__default.createElement(RichTextField, {
+    idx: focusIdx2
+  })), shadowRoot && ReactDOM.createPortal(/* @__PURE__ */ React__default.createElement("style", null, `
+              .email-block [contentEditable="true"],
+              .email-block [contentEditable="true"] * {
+                outline: none;
+                cursor: text;
+              }
+              `), shadowRoot));
+}
+function Decoration() {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(Stack$6, {
+      key: focusIdx2,
+      vertical: true,
+      spacing: "extraTight"
+    }, /* @__PURE__ */ React__default.createElement(TextStyle, {
+      variation: "strong",
+      size: "large"
+    }, "Decoration"), /* @__PURE__ */ React__default.createElement(TextField, {
+      label: "Border radius",
+      name: `${focusIdx2}.attributes.borderRadius`,
+      inline: true
+    }), /* @__PURE__ */ React__default.createElement(TextField, {
+      label: "Border",
+      name: `${focusIdx2}.attributes.border`,
+      inline: true,
+      alignment: "center"
+    }), /* @__PURE__ */ React__default.createElement(NumberField, {
+      label: "Opacity",
+      max: 1,
+      min: 0,
+      step: 0.1,
+      name: `${focusIdx2}.attributes.opacity`,
+      inline: true,
+      alignment: "center"
+    }));
+  }, [focusIdx2]);
+}
+const options = [
+  {
+    value: "ltr",
+    label: "ltr"
+  },
+  {
+    value: "rtl",
+    label: "rtl"
+  }
+];
+function Direction() {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(Stack$6, null, /* @__PURE__ */ React__default.createElement(RadioGroupField, {
+      label: "Direction",
+      name: `${focusIdx2}.attributes.direction`,
+      options,
+      inline: true
+    }));
+  }, [focusIdx2]);
+}
+function Margin() {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(Stack$6, {
+      vertical: true,
+      spacing: "extraTight"
+    }, /* @__PURE__ */ React__default.createElement(TextStyle, {
+      size: "large"
+    }, "Margin"), /* @__PURE__ */ React__default.createElement(Stack$6, {
+      wrap: false
+    }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+      fill: true
+    }, /* @__PURE__ */ React__default.createElement(TextField, {
+      label: "Top",
+      quickchange: true,
+      name: `${focusIdx2}.attributes.marginTop`,
+      inline: true
+    })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+      fill: true
+    }, /* @__PURE__ */ React__default.createElement(TextField, {
+      label: "Bottom",
+      quickchange: true,
+      name: `${focusIdx2}.attributes.marginBottom`,
+      inline: true
+    }))), /* @__PURE__ */ React__default.createElement(Stack$6, {
+      wrap: false
+    }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+      fill: true
+    }, /* @__PURE__ */ React__default.createElement(TextField, {
+      label: "Left",
+      quickchange: true,
+      name: `${focusIdx2}.attributes.marginLeft`,
+      inline: true
+    })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+      fill: true
+    }, /* @__PURE__ */ React__default.createElement(TextField, {
+      label: "Right",
+      quickchange: true,
+      name: `${focusIdx2}.attributes.marginRight`,
+      inline: true
+    }))));
+  }, [focusIdx2]);
+}
+function Tools(props) {
+  const { container: container2 } = props;
+  const { mergeTags } = useEditorProps();
+  const [selectionRange, setSelectionRange] = useState(null);
+  useEffect(() => {
+    const onSelectionChange = () => {
+      try {
+        const range2 = getShadowRoot().getSelection().getRangeAt(0);
+        if (range2) {
+          setSelectionRange(range2);
+        }
+      } catch (error2) {
+      }
+    };
+    document.addEventListener("selectionchange", onSelectionChange);
+    return () => {
+      document.removeEventListener("selectionchange", onSelectionChange);
+    };
+  }, []);
+  const restoreRange = useCallback((range2) => {
+    const selection = getShadowRoot().getSelection();
+    selection.removeAllRanges();
+    const newRange = document.createRange();
+    newRange.setStart(range2.startContainer, range2.startOffset);
+    newRange.setEnd(range2.endContainer, range2.endOffset);
+    selection.addRange(newRange);
+  }, []);
+  const execCommand = (cmd, val) => {
+    if (!container2) {
+      console.error("No container");
+      return;
+    }
+    if (!selectionRange) {
+      console.error("No selectionRange");
+      return;
+    }
+    if (!(container2 == null ? void 0 : container2.contains(selectionRange == null ? void 0 : selectionRange.commonAncestorContainer)) && container2 !== (selectionRange == null ? void 0 : selectionRange.commonAncestorContainer)) {
+      console.error("Not commonAncestorContainer");
+      return;
+    }
+    restoreRange(selectionRange);
+    if (cmd === "createLink") {
+      const linkData = val;
+      const target2 = linkData.blank ? "_blank" : "";
+      let link;
+      if (linkData.linkNode) {
+        link = linkData.linkNode;
+      } else {
+        const uuid2 = (+new Date()).toString();
+        document.execCommand(cmd, false, uuid2);
+        link = getShadowRoot().querySelector(`a[href="${uuid2}"`);
+      }
+      if (target2) {
+        link.setAttribute("target", target2);
+      }
+      link.style.color = "inherit";
+      link.style.textDecoration = linkData.underline ? "underline" : "none";
+      link.setAttribute("href", linkData.link);
+    } else {
+      document.execCommand(cmd, false, val);
+    }
+    const html = container2.innerHTML;
+    props.onChange(html);
+  };
+  const getPopoverMountNode = () => document.getElementById(FIXED_CONTAINER_ID);
+  return /* @__PURE__ */ React__default.createElement("div", {
+    id: "Tools",
+    style: { display: "flex", flexWrap: "nowrap" }
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center"
+    }
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(Popover$1, {
+    className: "easy-email-extensions-Tools-Popover",
+    trigger: "click",
+    content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$1), /* @__PURE__ */ React__default.createElement(FontFamily$1, {
+      onChange: (val) => execCommand("fontName", val)
+    })),
+    getPopupContainer: getPopoverMountNode
+  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    title: "font family",
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-font-family"
+    })
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(Popover$1, {
+    className: "easy-email-extensions-Tools-Popover",
+    color: "#fff",
+    trigger: "click",
+    content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$1), /* @__PURE__ */ React__default.createElement(FontSizeList, {
+      onChange: (val) => execCommand("fontSize", val)
+    })),
+    getPopupContainer: getPopoverMountNode
+  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    title: "line-height",
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-line-height"
+    })
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    onClick: () => execCommand("bold"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-bold"
+    }),
+    title: "Bold"
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    onClick: () => execCommand("italic"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-italic"
+    }),
+    title: "Italic"
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(ColorPicker, {
+    label: "",
+    position: "tl",
+    onChange: (color) => execCommand("foreColor", color),
+    getPopupContainer: getPopoverMountNode,
+    showInput: false
+  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-font-color"
+    }),
+    title: "Text color"
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(ColorPicker, {
+    label: "",
+    showInput: false,
+    position: "tl",
+    onChange: (color) => execCommand("hiliteColor", color),
+    getPopupContainer: getPopoverMountNode
+  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-bg-colors"
+    }),
+    title: "Background color"
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(Link$1, {
+    currentRange: selectionRange,
+    onChange: (values2) => execCommand("createLink", values2),
+    getPopupContainer: getPopoverMountNode
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), mergeTags && /* @__PURE__ */ React__default.createElement(Popover$1, {
+    trigger: "click",
+    color: "#fff",
+    position: "bottom",
+    content: /* @__PURE__ */ React__default.createElement(MergeTags, {
+      value: "",
+      onChange: (val) => execCommand("insertHTML", val)
+    }),
+    getPopupContainer: getPopoverMountNode
+  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    title: "Merge tag",
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-merge-tags"
+    })
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    onClick: () => execCommand("justifyLeft"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-align-left"
+    }),
+    title: "Align left"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    onClick: () => execCommand("justifyCenter"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-align-center"
+    }),
+    title: "Align center"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    onClick: () => execCommand("justifyRight"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-align-right"
+    }),
+    title: "Align right"
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    onClick: () => execCommand("insertOrderedList"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-list-ol"
+    }),
+    title: "Orderlist"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    onClick: () => execCommand("insertUnorderedList"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-list-ul"
+    }),
+    title: "Unorderlist"
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    onClick: () => execCommand("strikeThrough"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-strikethrough"
+    }),
+    title: "StrikethroughOutlined"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    onClick: () => execCommand("underline"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-underline"
+    }),
+    title: "UnderlineOutlined"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    onClick: () => execCommand("insertHorizontalRule"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-line"
+    }),
+    title: "Line"
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    onClick: () => execCommand("removeFormat"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-close"
+    }),
+    title: "Remove format"
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  })));
+}
+var styleText = ".easy-email-extensions-emailToolItem{display:inline-flex;position:relative;outline:none;font-weight:400;appearance:none;cursor:pointer!important;white-space:nowrap;transition:all .1s linear;box-sizing:border-box;line-height:1.5715;border:none;background-color:transparent;color:#fff}.easy-email-extensions-divider{position:relative;display:inline-flex;width:1px;height:16px;background-color:#808080e6}\n";
+function RichTextToolBar() {
+  const [direction, setDirection] = useState("top");
+  const [blockNode, setBlockNode] = useState(null);
+  const [offsetX, setOffsetX] = useState(0);
+  const { focusBlock: focusBlock2 } = useBlock();
+  const { pageData: pageData2 } = useEditorContext();
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  const pageWidth = +(pageData2.attributes.width || "600").replace("px", "");
+  useEffect(() => {
+    const promiseObj = awaitForElement(focusIdx2);
+    promiseObj.promise.then((blockNode2) => {
+      setBlockNode(blockNode2);
+    });
+    return () => {
+      promiseObj.cancel();
+    };
+  }, [focusIdx2, focusBlock2]);
+  useEffect(() => {
+    if (blockNode) {
+      const options2 = {
+        rootMargin: "-84px 0px 0px 0px",
+        root: getShadowRoot().firstChild,
+        threshold: [0, 1e-3, 0.1, 0.999, 0.8, 0.9, 1]
+      };
+      const checkDirection = (ev) => {
+        const [current] = ev;
+        const { top } = current.intersectionRect;
+        const boundingClientRect = current.boundingClientRect;
+        const rootBounds = current.rootBounds;
+        const intersectionRatio = current.intersectionRatio;
+        if (!rootBounds)
+          return;
+        const paddingLeft = (rootBounds.width - pageWidth) / 2;
+        const offsetLeft = boundingClientRect.left - rootBounds.left;
+        setOffsetX(paddingLeft - offsetLeft);
+        if (intersectionRatio === 1) {
+          setDirection("top");
+        } else {
+          if (top) {
+            if (top > rootBounds.top) {
+              setDirection("top");
+            } else {
+              setDirection("bottom");
+            }
+          }
+        }
+      };
+      const observer = new IntersectionObserver(checkDirection, options2);
+      observer.observe(blockNode);
+      return () => {
+        observer.unobserve(blockNode);
+      };
+    }
+  }, [blockNode, pageWidth]);
+  if (!blockNode)
+    return null;
+  const editorContainer = blockNode && getEditNode(blockNode);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, createPortal(/* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", {
+    dangerouslySetInnerHTML: { __html: styleText }
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    style: {
+      transform: direction === "top" ? "translate(0,-100%)" : void 0,
+      padding: "4px 8px",
+      boxSizing: "border-box",
+      position: "absolute",
+      zIndex: 100,
+      top: direction === "top" ? -40 : "calc(100% + 40px)",
+      left: offsetX,
+      width: pageWidth
+    }
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    style: {
+      position: "absolute",
+      backgroundColor: "#41444d",
+      height: "100%",
+      width: "100%",
+      left: 0,
+      top: 0
+    }
+  }), /* @__PURE__ */ React__default.createElement(Tools, {
+    container: editorContainer,
+    onChange: () => {
+    }
+  }))), blockNode));
+}
+const RichTextField = (props) => {
+  const { focusBlock: focusBlock2 } = useBlock();
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  if ((focusBlock2 == null ? void 0 : focusBlock2.type) !== BasicType.TEXT)
+    return null;
+  const name = `${focusIdx2}.data.value.content`;
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(RichTextToolBar, null), /* @__PURE__ */ React__default.createElement(Field, {
+    name,
+    parse: (v) => v
+  }, ({ input }) => /* @__PURE__ */ React__default.createElement(FieldWrapper, __spreadProps(__spreadValues({}, props), {
+    input
+  }))));
+};
+function FieldWrapper(props) {
+  const _a = props, { input } = _a, rest = __objRest(_a, ["input"]);
+  const debounceCallbackChange = useCallback(lodash.exports.debounce((val) => {
+    input.onChange(val);
+  }, 500), [input]);
+  return /* @__PURE__ */ React__default.createElement(InlineText, __spreadProps(__spreadValues({}, rest), {
+    onChange: debounceCallbackChange
+  }));
+}
+const TextField = enhancer(Input, (value) => value);
+const SearchField = enhancer(Input$5.Search, (val) => val);
+const TextAreaField = enhancer(Input$5.TextArea, (val) => val);
+const NumberField = enhancer(InputNumber$1, (e) => e);
+const SliderField = enhancer(Slider$2, (e) => e);
+const ColorPickerField = enhancer(ColorPicker, (e) => e);
+const UploadField = enhancer(UploadField$1, (val) => val);
+const ImageUploaderField = enhancer(ImageUploader, (url) => url);
+const SelectField = enhancer(Select, (e) => e);
+const AutoCompleteField = enhancer(AutoComplete, (e) => e);
+const RadioGroupField = enhancer(RadioGroup, (value) => value);
+const SwitchField = enhancer(Switch$1, (e) => e);
+const DatePickerField = enhancer(DatePicker$1, (date) => date);
+const CheckboxField = enhancer(CheckBoxGroup, (e) => e);
+const EditTabField = enhancer(EditTab, (e) => e);
+const InlineTextField = enhancer(InlineText, (value) => value);
+const AddToCollection = ({ visible, setVisible }) => {
+  const { focusBlock: focusBlockData } = useBlock();
+  const { onAddCollection, onUploadImage } = useEditorProps();
+  const onSubmit = (values2) => {
+    if (!values2.label)
+      return;
+    const uuid2 = uuid_1.v4();
+    onAddCollection == null ? void 0 : onAddCollection({
+      label: values2.label,
+      helpText: values2.helpText,
+      data: focusBlockData,
+      thumbnail: values2.thumbnail,
+      id: uuid2
+    });
+    setVisible(false);
+  };
+  return /* @__PURE__ */ React__default.createElement(Form$3, {
+    initialValues: { label: "", helpText: "", thumbnail: "" },
+    onSubmit
+  }, ({ handleSubmit }) => /* @__PURE__ */ React__default.createElement(Modal$1, {
+    maskClosable: false,
+    style: { zIndex: 2e3 },
+    visible,
+    title: "Add to collection",
+    onOk: () => handleSubmit(),
+    onCancel: () => setVisible(false)
+  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
+    vertical: true
+  }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, null), /* @__PURE__ */ React__default.createElement(TextField, {
+    label: "Title",
+    name: "label",
+    validate: (val) => {
+      if (!val)
+        return "Title required!";
+      return void 0;
+    }
+  }), /* @__PURE__ */ React__default.createElement(TextAreaField, {
+    label: "Description",
+    name: "helpText"
+  }), /* @__PURE__ */ React__default.createElement(ImageUploaderField, {
+    label: "Thumbnail",
+    name: "thumbnail",
+    uploadHandler: onUploadImage,
+    validate: (val) => {
+      if (!val)
+        return "Thumbnail required!";
+      return void 0;
+    }
+  }))));
 };
-class BlockAttributeConfigurationManager {
-  static add(componentMap) {
-    Object.keys(componentMap).forEach((name) => {
-      this.map[name] = componentMap[name];
+function useAddToCollection() {
+  const [modalVisible, setModalVisible] = useState(false);
+  const modal = useMemo(() => /* @__PURE__ */ React__default.createElement(AddToCollection, {
+    visible: modalVisible,
+    setVisible: setModalVisible
+  }), [modalVisible]);
+  return {
+    modal,
+    modalVisible,
+    setModalVisible
+  };
+}
+function ContextMenu({
+  moveBlock,
+  copyBlock,
+  removeBlock,
+  contextMenuData,
+  onClose
+}) {
+  const { blockData, left, top } = contextMenuData;
+  const idx = blockData.id;
+  const { modal, modalVisible, setModalVisible } = useAddToCollection();
+  const ref = useRef(null);
+  const handleMoveUp = () => {
+    moveBlock(idx, getSiblingIdx(idx, -1));
+    scrollBlockEleIntoView({
+      idx: getSiblingIdx(idx, -1)
     });
+    onClose();
+  };
+  const handleMoveDown = () => {
+    moveBlock(idx, getSiblingIdx(idx, 1));
+    scrollBlockEleIntoView({
+      idx: getSiblingIdx(idx, 1)
+    });
+    onClose();
+  };
+  const handleCopy = (ev) => {
+    copyBlock(idx);
+    scrollBlockEleIntoView({
+      idx: getSiblingIdx(idx, 1)
+    });
+    onClose();
+  };
+  const handleAddToCollection = () => {
+    setModalVisible(true);
+  };
+  const handleDelete = () => {
+    removeBlock(idx);
+    onClose();
+  };
+  const isFirst = getIndexByIdx(idx) === 0;
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ref,
+    style: { visibility: modalVisible ? "hidden" : void 0 }
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    style: {
+      left,
+      top
+    },
+    className: styles$5.wrap,
+    onClick: (e) => e.stopPropagation()
+  }, !isFirst && /* @__PURE__ */ React__default.createElement("div", {
+    className: styles$5.listItem,
+    onClick: handleMoveUp
+  }, /* @__PURE__ */ React__default.createElement(IconFont, {
+    iconName: "icon-top",
+    style: { marginRight: 10 }
+  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Move up")), /* @__PURE__ */ React__default.createElement("div", {
+    className: styles$5.listItem,
+    onClick: handleMoveDown
+  }, /* @__PURE__ */ React__default.createElement(IconFont, {
+    iconName: "icon-bottom",
+    style: { marginRight: 10 }
+  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Move down")), /* @__PURE__ */ React__default.createElement("div", {
+    className: styles$5.listItem,
+    onClick: handleCopy
+  }, /* @__PURE__ */ React__default.createElement(IconFont, {
+    iconName: "icon-copy",
+    style: { marginRight: 10 }
+  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Copy")), /* @__PURE__ */ React__default.createElement("div", {
+    className: styles$5.listItem,
+    onClick: handleAddToCollection
+  }, /* @__PURE__ */ React__default.createElement(IconFont, {
+    iconName: "icon-start",
+    style: { marginRight: 10 }
+  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Add to collection")), /* @__PURE__ */ React__default.createElement("div", {
+    className: styles$5.listItem,
+    onClick: handleDelete
+  }, /* @__PURE__ */ React__default.createElement(IconFont, {
+    iconName: "icon-delete",
+    style: { marginRight: 10 }
+  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Delete")), /* @__PURE__ */ React__default.createElement("div", {
+    className: styles$5.listItem,
+    onClick: handleAddToCollection
+  }, /* @__PURE__ */ React__default.createElement(IconFont, {
+    iconName: "icon-start",
+    style: { marginRight: 10 }
+  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Add to collection"))), /* @__PURE__ */ React__default.createElement("div", {
+    className: styles$5.contextmenuMark,
+    onClick: onClose,
+    onContextMenu: (e) => {
+      e.preventDefault();
+      onClose(e);
+    }
+  }), modal);
+}
+function useAvatarWrapperDrop() {
+  const [blockLayerRef, setBlockLayerRef] = useState(null);
+  const { setHoverIdx, setDirection } = useHoverIdx();
+  const { dataTransfer, setDataTransfer } = useDataTransfer();
+  const {
+    formState: { values: values2 }
+  } = useEditorContext();
+  const valuesRef = useRef(values2);
+  const dataTransferRef = useRef(dataTransfer);
+  useEffect(() => {
+    valuesRef.current = values2;
+  }, [values2]);
+  useEffect(() => {
+    dataTransferRef.current = dataTransfer;
+  }, [dataTransfer]);
+  function isKeyObject(o) {
+    return o.key !== void 0;
   }
-  static get(name) {
-    return this.map[name];
-  }
-  static getMap() {
-    return this.map;
-  }
+  const removeHightLightClassName = useCallback(() => {
+    if (!blockLayerRef)
+      return;
+    blockLayerRef.querySelectorAll(".arco-tree-node-title-gap-top, .arco-tree-node-title-gap-bottom, .arco-tree-node-title-highlight").forEach((item2) => {
+      item2.classList.remove("arco-tree-node-title-gap-top", "arco-tree-node-title-gap-bottom", "arco-tree-node-title-highlight");
+    });
+  }, [blockLayerRef]);
+  const allowDrop = useCallback((params) => {
+    const { dragNode, dropNode, dropPosition } = params;
+    let dragType;
+    if (isKeyObject(dragNode)) {
+      const blockData = lodash.exports.get(valuesRef.current, dragNode.key);
+      if (!blockData)
+        return false;
+      dragType = blockData.type;
+    } else {
+      dragType = dragNode.type;
+    }
+    const dragBlock = BlockManager.getBlockByType(dragType);
+    if (!dragBlock)
+      return false;
+    if (dropPosition === 0) {
+      if (dragBlock.validParentType.includes(dropNode.dataRef.type) && dropNode.dataRef.children.length === 0) {
+        return {
+          position: 0,
+          key: dropNode.key
+        };
+      } else if (dropNode.parent && dragBlock.validParentType.includes(dropNode.parent.type)) {
+        return {
+          position: -1,
+          key: dropNode.key
+        };
+      }
+    } else {
+      if (dropNode.parent && dragBlock.validParentType.includes(dropNode.parent.type)) {
+        return {
+          position: dropPosition,
+          key: dropNode.key
+        };
+      }
+    }
+    setDirection("");
+    setHoverIdx("");
+    return false;
+  }, [setDirection, setHoverIdx, removeHightLightClassName]);
+  useEffect(() => {
+    if (blockLayerRef) {
+      const onDragOver = lodash.exports.debounce((ev) => {
+        var _a, _b, _c, _d;
+        if (!dataTransferRef.current)
+          return;
+        const blockNode = getBlockNodeByChildEle(ev.target);
+        if (!blockNode || !ev.target)
+          return;
+        const directionPosition = getDirectionPosition(ev, 5);
+        const treeNodeEle = (_b = (_a = blockNode.parentNode) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.parentNode;
+        if (!treeNodeEle)
+          return;
+        removeHightLightClassName();
+        const dropIdx = getNodeIdxFromClassName(blockNode.classList);
+        if (!dropIdx)
+          return;
+        const dropParentIdx = getParentIdx(dropIdx);
+        const dropBlockData = lodash.exports.get(valuesRef.current, dropIdx);
+        const dropParentBlockData = dropParentIdx ? lodash.exports.get(valuesRef.current, dropParentIdx) : null;
+        let dropPosition = 0;
+        if (directionPosition.vertical.direction === "top" && directionPosition.vertical.isEdge) {
+          dropPosition = -1;
+        } else if (directionPosition.vertical.direction === "bottom" && directionPosition.vertical.isEdge) {
+          dropPosition = 1;
+        }
+        const dropResult = allowDrop({
+          dragNode: {
+            type: dataTransferRef.current.type
+          },
+          dropNode: {
+            dataRef: dropBlockData,
+            key: dropIdx,
+            parent: dropParentBlockData
+          },
+          dropPosition
+        });
+        if (!dropResult)
+          return;
+        const node = (_d = (_c = document.querySelector(`[data-tree-idx="${dropResult.key}"]`)) == null ? void 0 : _c.parentNode) == null ? void 0 : _d.parentNode;
+        if (node instanceof HTMLElement) {
+          removeHightLightClassName();
+          node.classList.add("arco-tree-node-title-gap-bottom");
+        }
+        setDirection(getDirectionFormDropPosition(dropResult.position));
+        setHoverIdx(dropResult.key);
+        if (dropResult.position === -1) {
+          treeNodeEle.classList.add("arco-tree-node-title-gap-top");
+          setDataTransfer((dataTransfer2) => {
+            return __spreadProps(__spreadValues({}, dataTransfer2), {
+              parentIdx: dropParentIdx,
+              positionIndex: getIndexByIdx(dropIdx)
+            });
+          });
+        } else if (dropResult.position === 1) {
+          setDataTransfer((dataTransfer2) => {
+            return __spreadProps(__spreadValues({}, dataTransfer2), {
+              parentIdx: dropParentIdx,
+              positionIndex: getIndexByIdx(dropIdx) + 1
+            });
+          });
+          treeNodeEle.classList.add("arco-tree-node-title-gap-bottom");
+        } else {
+          treeNodeEle.classList.add("arco-tree-node-title-highlight");
+          setDataTransfer((dataTransfer2) => {
+            return __spreadProps(__spreadValues({}, dataTransfer2), {
+              parentIdx: getIndexByIdx(dropIdx),
+              positionIndex: 0
+            });
+          });
+        }
+      });
+      const onDragend = (ev) => {
+        removeHightLightClassName();
+      };
+      const onDrop = (ev) => {
+        setTimeout(() => {
+          removeHightLightClassName();
+        }, 0);
+      };
+      blockLayerRef.addEventListener("dragover", onDragOver);
+      blockLayerRef.addEventListener("drop", onDrop);
+      blockLayerRef.addEventListener("dragleave", onDragend);
+      return () => {
+        blockLayerRef.removeEventListener("dragover", onDragOver);
+        blockLayerRef.removeEventListener("drop", onDrop);
+        blockLayerRef.removeEventListener("dragleave", onDragend);
+      };
+    }
+  }, [blockLayerRef, dataTransferRef, valuesRef, removeHightLightClassName]);
+  return {
+    setBlockLayerRef,
+    blockLayerRef,
+    allowDrop,
+    removeHightLightClassName
+  };
 }
-__publicField(BlockAttributeConfigurationManager, "map", __spreadValues({}, blocks));
-function AttributePanel() {
-  const { values: values2, focusBlock: focusBlock2 } = useBlock();
-  const { initialized } = useEditorContext();
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  const value = getValueByIdx(values2, focusIdx2);
-  const Com = focusBlock2 && BlockAttributeConfigurationManager.get(focusBlock2.type);
-  const shadowRoot = getShadowRoot();
-  if (!value || !initialized)
-    return null;
-  return /* @__PURE__ */ React__default.createElement(PresetColorsProvider, null, Com ? /* @__PURE__ */ React__default.createElement(Com, null) : /* @__PURE__ */ React__default.createElement("div", {
-    style: { marginTop: 200, padding: "0 50px" }
-  }, /* @__PURE__ */ React__default.createElement(TextStyle, {
-    size: "extraLarge"
-  }, "No matching components")), /* @__PURE__ */ React__default.createElement("div", {
-    style: { position: "absolute" }
-  }, /* @__PURE__ */ React__default.createElement(RichTextField, {
-    idx: focusIdx2,
-    name: `${focusIdx2}.data.value.content`,
-    label: "",
-    labelHidden: true
-  })), shadowRoot && ReactDOM.createPortal(/* @__PURE__ */ React__default.createElement("style", null, `
-              .email-block [contentEditable="true"],
-              .email-block [contentEditable="true"] * {
-                outline: none;
-                cursor: text;
-              }
-              `), shadowRoot));
+function getDirectionFormDropPosition(position) {
+  if (position === -1)
+    return "top";
+  if (position === 1)
+    return "bottom";
+  return "";
 }
-function Decoration() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(Stack$6, {
-      key: focusIdx2,
-      vertical: true,
-      spacing: "extraTight"
+function BlockLayer() {
+  const {
+    pageData: pageData2,
+    formState: { values: values2 }
+  } = useEditorContext();
+  const { onUploadImage, onAddCollection } = useEditorProps();
+  const { focusIdx: focusIdx2, setFocusIdx } = useFocusIdx();
+  const { setHoverIdx, setIsDragging, setDirection } = useHoverIdx();
+  const { moveBlock, setValueByIdx: setValueByIdx2, copyBlock, removeBlock } = useBlock();
+  const {
+    setBlockLayerRef,
+    allowDrop,
+    blockLayerRef,
+    removeHightLightClassName
+  } = useAvatarWrapperDrop();
+  const [contextMenuData, setContextMenuData] = useState(null);
+  const onToggleVisible = useCallback(({ id }, e) => {
+    e.stopPropagation();
+    const blockData = lodash.exports.get(values2, id);
+    if (blockData) {
+      blockData.data.hidden = !Boolean(blockData.data.hidden);
+      setValueByIdx2(id, blockData);
+    }
+  }, [setValueByIdx2, values2]);
+  const renderTitle = useCallback((data) => {
+    const block2 = BlockManager.getBlockByType(data.type);
+    const isPage = data.type === BasicType.PAGE;
+    return /* @__PURE__ */ React__default.createElement("div", {
+      "data-tree-idx": data.id,
+      className: classnames(styles$6.title, !isPage && getNodeIdxClassName(data.id), !isPage && "email-block")
     }, /* @__PURE__ */ React__default.createElement(TextStyle, {
-      variation: "strong",
-      size: "large"
-    }, "Decoration"), /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Border radius",
-      name: `${focusIdx2}.attributes.borderRadius`,
-      inline: true
-    }), /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Border",
-      name: `${focusIdx2}.attributes.border`,
-      inline: true,
-      alignment: "center"
-    }), /* @__PURE__ */ React__default.createElement(NumberField, {
-      label: "Opacity",
-      max: 1,
-      min: 0,
-      step: 0.1,
-      name: `${focusIdx2}.attributes.opacity`,
-      inline: true,
-      alignment: "center"
-    }));
-  }, [focusIdx2]);
-}
-const options = [
-  {
-    value: "ltr",
-    label: "ltr"
-  },
-  {
-    value: "rtl",
-    label: "rtl"
-  }
-];
-function Direction() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
+      size: "smallest"
+    }, block2 == null ? void 0 : block2.name), /* @__PURE__ */ React__default.createElement("div", {
+      className: styles$6.eyeIcon
+    }, /* @__PURE__ */ React__default.createElement(EyeIcon$1, {
+      blockData: data,
+      onToggleVisible
+    })));
+  }, [onToggleVisible]);
+  const treeData = useMemo(() => {
+    const copyData = lodash.exports.cloneDeep(pageData2);
+    const loop2 = (item2, id, parent2) => {
+      item2.id = id;
+      item2.parent = parent2;
+      item2.children.map((child, index2) => loop2(child, getChildIdx(id, index2), item2));
+    };
+    loop2(copyData, getPageIdx(), null);
+    return [copyData];
+  }, [pageData2]);
+  const onSelect = useCallback((selectedId) => {
+    setFocusIdx(selectedId);
+    scrollBlockEleIntoView({ idx: selectedId });
+  }, [setFocusIdx]);
+  const onContextMenu = useCallback((blockData, ev) => {
+    ev.preventDefault();
+    setContextMenuData({ blockData, left: ev.clientX, top: ev.clientY });
+  }, []);
+  const onCloseContextMenu = useCallback((ev) => {
+    setContextMenuData(null);
+  }, []);
+  const onMouseEnter = useCallback((id) => {
+    setHoverIdx(id);
+  }, [setHoverIdx]);
+  const onMouseLeave = useCallback(() => {
+    setHoverIdx("");
+  }, [setHoverIdx]);
+  const onDragStart = useCallback(() => {
+    setIsDragging(true);
+  }, [setIsDragging]);
+  const onDragEnd = useCallback(() => {
+    setIsDragging(false);
+  }, [setIsDragging]);
+  const onDrop = useCallback((params) => {
+    const { dragNode, dropNode, dropPosition } = params;
+    const dragBlock = BlockManager.getBlockByType(dragNode.dataRef.type);
+    if (!dragBlock)
+      return false;
+    const dropIndex = getIndexByIdx(dropNode.key);
+    if (dropPosition === 0) {
+      if (dragBlock.validParentType.includes(dropNode.dataRef.type) && dropNode.dataRef.children.length === 0) {
+        moveBlock(dragNode.key, getChildIdx(dropNode.key, 0));
+      } else if (dropNode.parent && dragBlock.validParentType.includes(dropNode.parent.type)) {
+        moveBlock(dragNode.key, getChildIdx(dropNode.parentKey, dropIndex));
+      }
+    } else {
+      moveBlock(dragNode.key, getChildIdx(dropNode.parentKey, dropPosition > 0 ? dropIndex + 1 : dropIndex));
+    }
+  }, [moveBlock]);
+  useEffect(() => {
+    if (!blockLayerRef)
+      return;
+    if (focusIdx2) {
+      setTimeout(() => {
+        const selectedNode = blockLayerRef.querySelector(`[${DATA_ATTRIBUTE_ID}="${focusIdx2}"]`);
+        if (selectedNode) {
+          selectedNode.scrollIntoView({
+            block: "center",
+            behavior: "smooth"
+          });
+        }
+      }, 50);
+    }
+  }, [blockLayerRef, focusIdx2]);
+  const blockTreeAllowDrop = useCallback((data) => {
+    var _a, _b;
+    const dropResult = allowDrop(data);
+    if (dropResult) {
+      const node = (_b = (_a = document.querySelector(`[data-tree-idx="${dropResult.key}"]`)) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.parentNode;
+      if (node instanceof HTMLElement) {
+        removeHightLightClassName();
+        node.classList.add("arco-tree-node-title-gap-bottom");
+      }
+      setDirection(getDirectionFormDropPosition(dropResult.position));
+      setHoverIdx(dropResult.key);
+    }
+    return dropResult;
+  }, [allowDrop]);
+  const hasFocus = Boolean(focusIdx2);
   return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(Stack$6, null, /* @__PURE__ */ React__default.createElement(RadioGroupField, {
-      label: "Direction",
-      name: `${focusIdx2}.attributes.direction`,
-      options,
-      inline: true
+    if (!hasFocus)
+      return null;
+    return /* @__PURE__ */ React__default.createElement("div", __spreadValues({
+      ref: setBlockLayerRef,
+      id: "BlockLayerManager"
+    }, {
+      [DATA_ATTRIBUTE_DROP_CONTAINER]: "true"
+    }), /* @__PURE__ */ React__default.createElement(BlockTree, {
+      selectedId: focusIdx2,
+      defaultExpandAll: true,
+      treeData,
+      renderTitle,
+      allowDrop: blockTreeAllowDrop,
+      onContextMenu,
+      onDrop,
+      onDragStart,
+      onDragEnd,
+      onSelect,
+      onMouseEnter,
+      onMouseLeave
+    }), contextMenuData && /* @__PURE__ */ React__default.createElement(ContextMenu, {
+      onClose: onCloseContextMenu,
+      moveBlock,
+      copyBlock,
+      removeBlock,
+      contextMenuData
     }));
-  }, [focusIdx2]);
-}
-function Margin() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(Stack$6, {
-      vertical: true,
-      spacing: "extraTight"
-    }, /* @__PURE__ */ React__default.createElement(TextStyle, {
-      size: "large"
-    }, "Margin"), /* @__PURE__ */ React__default.createElement(Stack$6, {
-      wrap: false
-    }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: true
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Top",
-      quickchange: true,
-      name: `${focusIdx2}.attributes.marginTop`,
-      inline: true
-    })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: true
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Bottom",
-      quickchange: true,
-      name: `${focusIdx2}.attributes.marginBottom`,
-      inline: true
-    }))), /* @__PURE__ */ React__default.createElement(Stack$6, {
-      wrap: false
-    }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: true
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Left",
-      quickchange: true,
-      name: `${focusIdx2}.attributes.marginLeft`,
-      inline: true
-    })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: true
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Right",
-      quickchange: true,
-      name: `${focusIdx2}.attributes.marginRight`,
-      inline: true
-    }))));
-  }, [focusIdx2]);
+  }, [
+    hasFocus,
+    focusIdx2,
+    treeData,
+    renderTitle,
+    allowDrop,
+    onContextMenu,
+    onDrop,
+    onSelect,
+    onMouseEnter,
+    onMouseLeave,
+    contextMenuData,
+    onCloseContextMenu,
+    onUploadImage,
+    onAddCollection,
+    moveBlock,
+    copyBlock,
+    removeBlock,
+    onDragEnd,
+    onDragStart
+  ]);
 }
 const BlocksPanel$1 = "_BlocksPanel_15fho_1";
 const blockItem = "_blockItem_15fho_5";
 const closeBtn = "_closeBtn_15fho_12";
-var styles$3 = {
+var styles$2 = {
   BlocksPanel: BlocksPanel$1,
   blockItem,
   closeBtn
@@ -41915,7 +41873,7 @@ __publicField(BlockMarketManager, "category", []);
 __publicField(BlockMarketManager, "subscriptHandles", []);
 const mask = "_mask_1a0xw_1";
 const drag = "_drag_1a0xw_12";
-var styles$2 = {
+var styles$1 = {
   mask,
   drag
 };
@@ -41925,7 +41883,7 @@ const BlockMaskWrapper = (props) => {
   const { type, payload } = props;
   const onMouseDown = useCallback(() => {
     if (ref.current) {
-      ref.current.classList.add(styles$2.drag);
+      ref.current.classList.add(styles$1.drag);
     }
   }, []);
   const onMaskMouseDown = useCallback((ev) => {
@@ -41937,7 +41895,7 @@ const BlockMaskWrapper = (props) => {
   useEffect(() => {
     const mouseup = () => {
       if (ref.current) {
-        ref.current.classList.remove(styles$2.drag);
+        ref.current.classList.remove(styles$1.drag);
       }
     };
     document.addEventListener("mouseup", mouseup);
@@ -41948,7 +41906,7 @@ const BlockMaskWrapper = (props) => {
   return /* @__PURE__ */ React__default.createElement("div", {
     style: { position: "relative" }
   }, props.children, /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$2.wrapper,
+    className: styles$1.wrapper,
     style: {
       position: "absolute",
       height: "100%",
@@ -41963,7 +41921,7 @@ const BlockMaskWrapper = (props) => {
     payload
   }, /* @__PURE__ */ React__default.createElement("div", {
     ref,
-    className: styles$2.mask,
+    className: styles$1.mask,
     onMouseDown: onMaskMouseDown
   }, /* @__PURE__ */ React__default.createElement("div", {
     ref: dragRef,
@@ -44009,13 +43967,13 @@ const BlocksPanel = (props) => {
   }, /* @__PURE__ */ React__default.createElement("div", {
     onClick: toggleVisible
   }, props.children), ele && visible && createPortal(/* @__PURE__ */ React__default.createElement("div", {
-    className: styles$3.BlocksPanel,
+    className: styles$2.BlocksPanel,
     style: {
       pointerEvents: isDragging ? "none" : void 0,
       position: "fixed",
       width: isDragging ? 0 : 650,
+      backgroundColor: "var(--color-bg-2)",
       zIndex: 200,
-      top: 0,
       left: 60,
       maxHeight: "85vh",
       transition: "width .5s",
@@ -44025,7 +43983,7 @@ const BlocksPanel = (props) => {
     bodyStyle: { padding: 0 },
     title: "Drag block",
     extra: /* @__PURE__ */ React__default.createElement("div", {
-      className: styles$3.closeBtn
+      className: styles$2.closeBtn
     }, /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-close",
       onClick: toggleVisible
@@ -44036,7 +43994,8 @@ const BlocksPanel = (props) => {
   }, filterCategories.map((category, index2) => /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
     style: {
       padding: 0,
-      overflow: "auto"
+      overflow: "auto",
+      height: 500
     },
     key: category.title,
     title: /* @__PURE__ */ React__default.createElement("div", {
@@ -44051,17 +44010,16 @@ const BlocksPanel = (props) => {
 };
 const BlockPanelItem = React__default.memo((props) => {
   return /* @__PURE__ */ React__default.createElement(Tabs$1, {
-    style: { padding: "20px 0" },
     tabPosition: "left"
   }, props.category.blocks.map((block2, index2) => {
     return /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
-      style: { padding: 0 },
+      style: { padding: 0, height: 500 },
       key: block2.title,
       title: /* @__PURE__ */ React__default.createElement(Stack$6, {
         alignment: "center",
         spacing: "extraTight"
       }, /* @__PURE__ */ React__default.createElement("div", {
-        className: styles$3.blockItem
+        className: styles$2.blockItem
       }, block2.title), block2.description && /* @__PURE__ */ React__default.createElement(Help, {
         title: block2.description
       }))
@@ -44078,11 +44036,14 @@ const BlockPanelItem = React__default.memo((props) => {
   }));
 });
 function ShortcutToolbar() {
+  const blocksPanelRef = useRef(null);
   return /* @__PURE__ */ React__default.createElement(Stack$6, {
     vertical: true,
     alignment: "center",
     distribution: "center"
-  }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, null), /* @__PURE__ */ React__default.createElement(BlockAvatarWrapper, {
+  }, /* @__PURE__ */ React__default.createElement(BlocksPanel, null, /* @__PURE__ */ React__default.createElement("div", {
+    ref: blocksPanelRef
+  })), /* @__PURE__ */ React__default.createElement(BlockAvatarWrapper, {
     type: BasicType.TEXT
   }, /* @__PURE__ */ React__default.createElement(IconFont, {
     title: "Text",
@@ -44126,22 +44087,25 @@ function ShortcutToolbar() {
       cursor: "move",
       color: "#e5afe5"
     }
-  })), /* @__PURE__ */ React__default.createElement(BlocksPanel, null, /* @__PURE__ */ React__default.createElement(IconFont, {
+  })), /* @__PURE__ */ React__default.createElement(IconFont, {
+    onClick: () => {
+      var _a;
+      return (_a = blocksPanelRef.current) == null ? void 0 : _a.click();
+    },
     iconName: "icon-more",
     style: {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      color: "#000",
       width: 30,
       height: 30,
       borderRadius: "50%",
-      boxShadow: "0 0 12px -3px rgb(0 0 0 / 20%), 0 2px 7px -1px rgb(0 0 0 / 14%), 0 2px 4px -1px rgb(0 0 0 / 20%)",
+      color: "var(--color-text-2)",
+      boxShadow: "0 0 12px -3px var(--color-text-2)",
       fontSize: 18
     }
-  })));
+  }));
 }
-var styles$1 = {};
 function SourceCodePanel() {
   const { setValueByIdx, focusBlock, values } = useBlock();
   const { focusIdx } = useFocusIdx();
@@ -44152,7 +44116,7 @@ function SourceCodePanel() {
       return "";
     return JSON.stringify(focusBlock, null, 2) || "";
   }, [focusBlock]);
-  const onChaneCode = useCallback((event) => {
+  const onChangeCode = useCallback((event) => {
     try {
       const parseValue = JSON.parse(JSON.stringify(eval("(" + event.target.value + ")")));
       const block = BlockManager.getBlockByType(parseValue.type);
@@ -44197,9 +44161,7 @@ function SourceCodePanel() {
   }, [focusBlock, focusIdx, pageData]);
   if (!focusBlock)
     return null;
-  return /* @__PURE__ */ React__default.createElement(Collapse$1, {
-    className: styles$1.wrapper
-  }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+  return /* @__PURE__ */ React__default.createElement(Collapse$1, null, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "json",
     header: "Json source",
     contentStyle: { padding: "8px 13px" }
@@ -44207,7 +44169,7 @@ function SourceCodePanel() {
     key: code,
     defaultValue: code,
     autoSize: { maxRows: 25 },
-    onBlur: onChaneCode
+    onBlur: onChangeCode
   })), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "mjml",
     header: "MJML source",
@@ -44261,7 +44223,7 @@ function Toolbar({
   }, /* @__PURE__ */ React__default.createElement("div", {
     style: {
       color: "#ffffff",
-      backgroundColor: "#1890ff",
+      backgroundColor: "var(--selected-color)",
       height: "22px",
       display: "inline-flex",
       padding: "1px 5px",
@@ -44301,7 +44263,7 @@ function ToolItem(props) {
     onClick: props.onClick,
     style: {
       color: "#ffffff",
-      backgroundColor: "#1890ff",
+      backgroundColor: "var(--selected-color)",
       height: 22,
       fontSize: props.width || 14,
       lineHeight: "22px",
@@ -44311,7 +44273,7 @@ function ToolItem(props) {
       cursor: "pointer",
       justifyContent: "center"
     },
-    className: classnames$1("iconfont", props.iconName)
+    className: classnames("iconfont", props.iconName)
   });
 }
 function FocusTooltip() {
@@ -44656,10 +44618,9 @@ var styles = {
   container,
   customScrollBar
 };
-const { TabPane } = Tabs$1;
 const SimpleLayout = (props) => {
   const { height: containerHeight } = useEditorProps();
-  return /* @__PURE__ */ React__default.createElement(Layout$1, null, /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ React__default.createElement(Layout$1, {
     style: {
       display: "flex",
       width: "100vw",
@@ -44667,40 +44628,38 @@ const SimpleLayout = (props) => {
       minWidth: 1400
     }
   }, /* @__PURE__ */ React__default.createElement(Layout$1.Sider, {
-    theme: "light",
-    width: 60,
-    style: { border: "1px solid #f0f0f0" }
-  }, /* @__PURE__ */ React__default.createElement(ShortcutToolbar, null)), /* @__PURE__ */ React__default.createElement(Layout$1.Sider, {
     style: {
-      borderLeft: "none",
+      width: 360
+    }
+  }, /* @__PURE__ */ React__default.createElement(Card$1, {
+    bodyStyle: { padding: 0 },
+    style: { border: "none" }
+  }, /* @__PURE__ */ React__default.createElement(Card$1.Grid, {
+    style: { width: 60 }
+  }, /* @__PURE__ */ React__default.createElement(ShortcutToolbar, null)), /* @__PURE__ */ React__default.createElement(Card$1.Grid, {
+    className: styles.customScrollBar,
+    style: {
+      width: 300,
+      paddingBottom: 50,
+      border: "none",
       height: containerHeight,
       overflow: "auto"
-    },
-    className: styles.customScrollBar,
-    theme: "light",
-    width: 300
+    }
   }, /* @__PURE__ */ React__default.createElement(Card$1, {
-    bodyStyle: { padding: 0, paddingBottom: 50 },
-    style: { borderBottom: "none" }
-  }, /* @__PURE__ */ React__default.createElement(Tabs$1, {
-    style: { borderLeft: "none" },
-    defaultActiveTab: "Layout"
-  }, /* @__PURE__ */ React__default.createElement(TabPane, {
-    style: { paddingTop: 10 },
-    key: "Layout",
-    title: "Layout"
+    title: "Layout",
+    style: { border: "none" }
   }, /* @__PURE__ */ React__default.createElement(BlockLayer, null))))), /* @__PURE__ */ React__default.createElement(Layout$1, {
     style: { height: containerHeight }
   }, props.children), /* @__PURE__ */ React__default.createElement(Layout$1.Sider, {
     style: { height: containerHeight },
-    theme: "light",
     width: 350
   }, /* @__PURE__ */ React__default.createElement(Card$1, {
     size: "small",
     id: "rightSide",
     style: {
       maxHeight: "100%",
-      height: "100%"
+      height: "100%",
+      borderLeft: "none"
     },
     bodyStyle: { padding: 0 },
     className: styles.customScrollBar
@@ -44711,7 +44670,7 @@ const SimpleLayout = (props) => {
   }, /* @__PURE__ */ React__default.createElement(AttributePanel, null)), /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
     key: "Source code",
     title: "Source code"
-  }, /* @__PURE__ */ React__default.createElement(SourceCodePanel, null)))))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null));
+  }, /* @__PURE__ */ React__default.createElement(SourceCodePanel, null))))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null));
 };
 export { EditTabField as $, AttributePanel as A, BlockLayer as B, Color as C, Decoration as D, TextAreaField as E, FontFamily as F, NumberField as G, Height as H, InteractivePrompt as I, SliderField as J, ColorPickerField as K, LetterSpacing as L, Margin as M, NavbarLinkPadding as N, ImageUploaderField as O, Padding as P, SelectField as Q, AutoCompleteField as R, ShortcutToolbar as S, TextAlign as T, UploadField as U, VerticalAlign as V, Width as W, RadioGroupField as X, SwitchField as Y, DatePickerField as Z, CheckboxField as _, BlockAttributeConfigurationManager as a, InlineTextField as a0, enhancer as a1, RichTextField as a2, Align as b, commonjsGlobal as c, AttributesPanelWrapper as d, ContainerBackgroundColor as e, TextDecoration as f, Background as g, LineHeight as h, TextTransform as i, BackgroundColor as j, Direction as k, Link as l, Border as m, BorderColor as n, FontSize as o, MergeTags as p, BorderStyle as q, FontStyle as r, BorderWidth as s, FontWeight as t, BlockMarketManager as u, BlockMaskWrapper as v, SourceCodePanel as w, SimpleLayout as x, TextField as y, SearchField as z };
 //# sourceMappingURL=index2.js.map