easy-email-extensions 3.0.14 → 3.1.3

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, getEditContent, useEditorProps, getShadowRoot, FIXED_CONTAINER_ID, useEditorContext, useFocusIdx, scrollBlockEleIntoView, useHoverIdx, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, getEditorRoot, 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, getContextMergeTags, 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,171 @@ 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;
+const fileNames = {
+  key: "id"
+};
+function BlockTree(props) {
+  const [blockTreeRef, setBlockTreeRef] = useState(null);
+  const dragNode = useRef(null);
+  const { treeData, allowDrop, onContextMenu, selectedKeys } = props;
+  const treeDataRef = useRef(treeData);
+  const [expandedKeys, setExpandedKeys] = useState([]);
+  const onExpand = useCallback((keys2) => {
+    setExpandedKeys(keys2);
+  }, [setExpandedKeys]);
+  useEffect(() => {
+    if (props.defaultExpandAll) {
+      const keys2 = [];
+      const loop2 = (data) => {
+        var _a;
+        keys2.push(data.id);
+        (_a = data.children) == null ? void 0 : _a.forEach(loop2);
+      };
+      treeDataRef.current.forEach(loop2);
+      setExpandedKeys(keys2);
+    }
+  }, [props.defaultExpandAll]);
+  useEffect(() => {
+    setExpandedKeys((keys2) => props.expandedKeys ? [...keys2, ...props.expandedKeys] : keys2);
+  }, [props.expandedKeys]);
+  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]);
+  return useMemo(() => /* @__PURE__ */ React__default.createElement("div", {
+    ref: setBlockTreeRef,
+    onMouseLeave: props.onMouseLeave
+  }, /* @__PURE__ */ React__default.createElement(CacheTree, {
+    selectedKeys,
+    expandedKeys,
+    onExpand,
+    draggable: true,
+    size: "small",
+    treeData,
+    blockNode: true,
+    fieldNames: fileNames,
+    onDragEnd,
+    onDragStart,
+    onDrop,
+    allowDrop: onDragMove,
+    onSelect,
+    renderTitle
+  })), [
+    treeData,
+    props.onMouseLeave,
+    expandedKeys,
+    selectedKeys,
+    onExpand,
+    onDragEnd,
+    onDragStart,
+    onDrop,
+    onDragMove,
+    onSelect,
+    renderTitle
+  ]);
+}
+const cacheTreeDebounceCallback = lodash.exports.debounce((data, setCacheProps) => {
+  setCacheProps(data);
+}, 300);
+function CacheTree(props) {
+  const [cacheProps, setCacheProps] = useState(props);
+  const lastProps = useRef(props);
+  useEffect(() => {
+    if (lastProps.current.treeData !== props.treeData) {
+      lastProps.current = props;
+      cacheTreeDebounceCallback(props, setCacheProps);
+      return () => {
+        cacheTreeDebounceCallback.cancel();
+      };
+    } 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 +31007,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 +31169,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 +31249,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 +31288,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 +38242,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 +38253,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 +38300,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 +38389,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 +38408,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 +38460,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 +38473,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
@@ -38905,26 +38765,220 @@ 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 { focusIdx: focusIdx2 } = useFocusIdx();
+  const { mergeTags: mergeTags2 = {}, mergeTagGenerate } = useEditorProps();
+  const { values: values2 } = useBlock();
+  const contextMergeTags = useMemo(() => getContextMergeTags(mergeTags2, values2, focusIdx2), [mergeTags2, values2, focusIdx2]);
   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,
+        disabled: lodash.exports.isObject(parent2[key]) || !parent2[title2],
         children: []
       };
       mapData.push(currentMapData);
-      const current = parent2[key];
-      if (lodash.exports.isObject(current)) {
+      const current = parent2[title2];
+      if (current && typeof current === "object") {
         Object.keys(current).map((childKey) => deep(key + "." + childKey, childKey, current, currentMapData.children));
       }
     };
-    Object.keys(mergeTags).map((key) => deep(key, key, mergeTags, treeData));
+    Object.keys(contextMergeTags).map((key) => deep(key, key, contextMergeTags, treeData));
     return treeData;
-  }, [mergeTags]);
+  }, [contextMergeTags]);
   const onSelect = useCallback((value) => {
     return props.onChange(value);
   }, [props]);
@@ -38933,911 +38987,34 @@ const MergeTags$1 = React__default.memo((props) => {
   }, 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
+    onChange: (val) => onSelect(val)
   }) : /* @__PURE__ */ React__default.createElement(Tree$1, {
-    style: { width: 120 },
+    defaultExpandedKeys: [],
     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");
+const AttributesPanelWrapper = (props) => {
+  const { focusBlock: focusBlock2, setFocusBlock } = useBlock();
+  const { mergeTags: mergeTags2 } = useEditorProps();
+  const block2 = focusBlock2 && BlockManager.getBlockByType(focusBlock2.type);
+  const onChangeHidden = useCallback((val) => {
+    if (!focusBlock2)
       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", {
+    focusBlock2.data.hidden = val;
+    setFocusBlock(__spreadValues({}, focusBlock2));
+  }, [focusBlock2, setFocusBlock]);
+  if (!focusBlock2 || !block2)
+    return null;
+  return /* @__PURE__ */ React__default.createElement("div", null, /* @__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 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;
-    }
-  }))));
-};
-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}}}`,
-        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: (val) => onSelect(val)
-  }) : /* @__PURE__ */ React__default.createElement(Tree$1, {
-    style: { width: 120 },
-    selectedKeys: [],
-    treeData: treeOptions,
-    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();
-  const block2 = focusBlock2 && BlockManager.getBlockByType(focusBlock2.type);
-  const onChangeHidden = useCallback((val) => {
-    if (!focusBlock2)
-      return;
-    focusBlock2.data.hidden = val;
-    setFocusBlock(__spreadValues({}, focusBlock2));
-  }, [focusBlock2, setFocusBlock]);
-  if (!focusBlock2 || !block2)
-    return null;
-  return /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$4.wrapper
-  }, /* @__PURE__ */ React__default.createElement("div", {
-    style: {
-      border: "1px solid #f0f0f0",
-      borderBottom: "none",
-      padding: "12px 24px"
+      border: "1px solid var(--color-neutral-3, rgb(229, 230, 235))",
+      borderBottom: "none",
+      padding: "12px 24px"
     }
   }, /* @__PURE__ */ React__default.createElement(Stack$6, {
     vertical: true
@@ -39850,7 +39027,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) && mergeTags2 && /* @__PURE__ */ React__default.createElement(Stack$6, {
     spacing: "extraTight"
   }, /* @__PURE__ */ React__default.createElement(TextStyle, null, "Hide if"), /* @__PURE__ */ React__default.createElement(MergeTags, {
     isSelect: true,
@@ -39877,8 +39057,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
   });
 }
@@ -40005,10 +39187,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 },
@@ -41663,165 +40845,1011 @@ 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: mergeTags2 } = 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"
+  }), mergeTags2 && /* @__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");
+            }
+          } 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 TreeSelectField = enhancer(TreeSelect$1, (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
-  })), 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 } = useEditorContext();
+  const { focusIdx: focusIdx2, setFocusIdx } = useFocusIdx();
+  const { setHoverIdx, setIsDragging, setDirection } = useHoverIdx();
+  const { moveBlock, setValueByIdx: setValueByIdx2, copyBlock, removeBlock, values: values2 } = useBlock();
+  const {
+    setBlockLayerRef,
+    allowDrop,
+    blockLayerRef,
+    removeHightLightClassName
+  } = useAvatarWrapperDrop();
+  const valueRef = useRef(values2);
+  useEffect(() => {
+    valueRef.current = values2;
+  }, [values2]);
+  const [contextMenuData, setContextMenuData] = useState(null);
+  const onToggleVisible = useCallback(({ id }, e) => {
+    e.stopPropagation();
+    const blockData = lodash.exports.get(valueRef.current, id);
+    if (blockData) {
+      blockData.data.hidden = !Boolean(blockData.data.hidden);
+      setValueByIdx2(id, blockData);
+    }
+  }, [setValueByIdx2]);
+  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();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(Stack$6, null, /* @__PURE__ */ React__default.createElement(RadioGroupField, {
-      label: "Direction",
-      name: `${focusIdx2}.attributes.direction`,
-      options,
-      inline: true
-    }));
+      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 selectedKeys = useMemo(() => {
+    if (!focusIdx2)
+      return [];
+    return [focusIdx2];
   }, [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
-    }))));
+  const expandedKeys = useMemo(() => {
+    if (!focusIdx2)
+      return [];
+    let currentIdx = getParentIdx(focusIdx2);
+    const keys2 = [];
+    while (currentIdx) {
+      keys2.push(currentIdx);
+      currentIdx = getParentIdx(currentIdx);
+    }
+    return keys2;
   }, [focusIdx2]);
+  const hasFocus = Boolean(focusIdx2);
+  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, {
+    selectedKeys,
+    expandedKeys,
+    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
+  }));
 }
 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
@@ -41879,7 +41907,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
 };
@@ -41889,7 +41917,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) => {
@@ -41901,7 +41929,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);
@@ -41912,7 +41940,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%",
@@ -41927,7 +41955,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,
@@ -43973,13 +44001,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",
@@ -43989,7 +44017,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
@@ -44000,7 +44028,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", {
@@ -44015,17 +44044,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
       }))
@@ -44042,11 +44070,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",
@@ -44090,33 +44121,37 @@ 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();
   const [mjmlText, setMjmlText] = useState("");
   const { pageData } = useEditorContext();
+  const { mergeTags } = useEditorProps();
   const code = useMemo(() => {
     if (!focusBlock)
       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);
@@ -44156,14 +44191,13 @@ function SourceCodePanel() {
       idx: focusIdx,
       data: focusBlock,
       context: pageData,
-      mode: "production"
+      mode: "production",
+      dataSource: mergeTags
     }));
-  }, [focusBlock, focusIdx, pageData]);
+  }, [focusBlock, focusIdx, pageData, mergeTags]);
   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" }
@@ -44171,7 +44205,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",
@@ -44199,25 +44233,29 @@ function Toolbar({
     copyBlock(focusIdx2);
   };
   const handleDelete = () => {
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
     removeBlock(focusIdx2);
   };
   const handleSelectParent = () => {
     setFocusIdx(getParentIdx(focusIdx2));
   };
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
+    id: "easy-email-extensions-InteractivePrompt-Toolbar",
     style: {
       position: "absolute",
       left: 0,
+      height: 0,
       top: direction === "top" || isPage ? 0 : "100%",
-      fontSize: 14,
       zIndex: 3,
-      color: "#000",
-      width: "100%",
-      pointerEvents: "none",
-      lineHeight: "22px"
+      width: "100%"
     }
   }, /* @__PURE__ */ React__default.createElement("div", {
     style: {
+      fontSize: 14,
+      lineHeight: "22px",
+      pointerEvents: "auto",
       color: "#ffffff",
       transform: direction !== "top" || isPage ? void 0 : "translateY(-100%)",
       display: "flex"
@@ -44225,7 +44263,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",
@@ -44265,7 +44303,7 @@ function ToolItem(props) {
     onClick: props.onClick,
     style: {
       color: "#ffffff",
-      backgroundColor: "#1890ff",
+      backgroundColor: "var(--selected-color)",
       height: 22,
       fontSize: props.width || 14,
       lineHeight: "22px",
@@ -44275,7 +44313,7 @@ function ToolItem(props) {
       cursor: "pointer",
       justifyContent: "center"
     },
-    className: classnames$1("iconfont", props.iconName)
+    className: classnames("iconfont", props.iconName)
   });
 }
 function FocusTooltip() {
@@ -44334,6 +44372,7 @@ function FocusTooltip() {
   if (!block2 || !blockNode)
     return null;
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, createPortal(/* @__PURE__ */ React__default.createElement("div", {
+    id: "easy-email-extensions-InteractivePrompt-FocusTooltip",
     style: {
       position: "absolute",
       width: "100%",
@@ -44436,6 +44475,7 @@ function HoverTooltip() {
   if (!block2 || !blockNode)
     return null;
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, createPortal(/* @__PURE__ */ React__default.createElement("div", {
+    id: "easy-email-extensions-InteractivePrompt-HoverTooltip",
     style: {
       position: "absolute",
       height: "100%",
@@ -44449,14 +44489,14 @@ function HoverTooltip() {
     type: isDragging ? "drag" : "hover",
     lineWidth: 1,
     title: block2.name,
-    direction: isTop ? "noEnoughTop" : direction,
+    direction: isTop && direction === "top" ? "noEnoughTop" : direction,
     isDragging
   })), blockNode));
 }
 function TipNode(props) {
   const { direction, title: title2, lineWidth, type } = props;
   const dragTitle = useMemo(() => {
-    if (direction === "top") {
+    if (direction === "top" || direction === "noEnoughTop") {
       return `Insert before ${title2}`;
     } else if (direction === "bottom") {
       return `Insert after ${title2}`;
@@ -44620,10 +44660,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",
@@ -44631,40 +44670,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
@@ -44675,7 +44712,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 };
+export { CheckboxField 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, TreeSelectField as R, ShortcutToolbar as S, TextAlign as T, UploadField as U, VerticalAlign as V, Width as W, AutoCompleteField as X, RadioGroupField as Y, SwitchField as Z, DatePickerField as _, BlockAttributeConfigurationManager as a, EditTabField as a0, InlineTextField as a1, enhancer as a2, RichTextField as a3, 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