easy-email-extensions 3.0.11 → 3.1.0

package/lib/index2.js

@@ -54,15 +54,14 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import * as React from "react";
-import React__default, { useCallback, useState, useRef, useEffect, useMemo, Children, isValidElement, cloneElement, createContext, useContext, Component, memo, forwardRef, useLayoutEffect, createRef, useImperativeHandle, PureComponent, useReducer, createElement, Suspense } from "react";
-import { IconFont, Stack as Stack$6, TextStyle, getBlockNodeByIdx, useBlock, getEditNode, getShadowRoot, FIXED_CONTAINER_ID, getEditContent, getEditorRoot, useEditorProps, useEditorContext, useFocusIdx, scrollBlockEleIntoView, useHoverIdx, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, useActiveTab, ActiveTabKeys } from "easy-email-editor";
-import { BasicType, ImageManager, getIndexByIdx, getSiblingIdx, BlockManager, getPageIdx, getChildIdx, createBlockDataByType, getParentByIdx, getValueByIdx, MjmlToJson, JsonToMjml, getParentIdx, getNodeTypeFromClassName } from "easy-email-core";
-import { ReactSortable } from "react-sortablejs";
-import { useField, Field, useForm as useForm$1, Form as Form$3, version as version$2, useFormState } from "react-final-form";
+import React__default, { Children, isValidElement, cloneElement, createContext, useContext, Component, useMemo, memo, forwardRef, useEffect, useRef, useLayoutEffect, useState, createRef, useImperativeHandle, PureComponent, useCallback, useReducer, createElement, Suspense } from "react";
+import { IconFont, Stack as Stack$6, TextStyle, getBlockNodeByIdx, useBlock, getEditNode, getEditContent, useEditorProps, getShadowRoot, FIXED_CONTAINER_ID, useEditorContext, useFocusIdx, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_ID, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, getEditorRoot, useActiveTab, ActiveTabKeys } from "easy-email-editor";
+import { BasicType, ImageManager, getIndexByIdx, getSiblingIdx, BlockManager, getNodeIdxFromClassName, getParentIdx, getNodeIdxClassName, getPageIdx, getChildIdx, createBlockDataByType, getParentByIdx, getValueByIdx, MjmlToJson, JsonToMjml, getNodeTypeFromClassName } from "easy-email-core";
 import ReactDOM, { findDOMNode, createPortal } from "react-dom";
-var arco = "";
-const title = "_title_1gyaq_1";
-var styles$9 = {
+import { useField, Field, useForm as useForm$1, Form as Form$3, version as version$2, useFormState } from "react-final-form";
+var index$2 = "";
+const title = "_title_pteer_1";
+var styles$6 = {
   title
 };
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -5498,313 +5497,6 @@ function EyeIcon$1({
     iconName: "icon-eye"
   });
 }
-const treeNodeList = "_treeNodeList_7a1ah_1";
-const treeNodeWrapper = "_treeNodeWrapper_7a1ah_6";
-const treeNode = "_treeNode_7a1ah_1";
-const treeNodeSelected = "_treeNodeSelected_7a1ah_18";
-const treeNodeTitle = "_treeNodeTitle_7a1ah_21";
-var styles$8 = {
-  treeNodeList,
-  treeNodeWrapper,
-  treeNode,
-  treeNodeSelected,
-  treeNodeTitle
-};
-const TreeCollapse = React__default.memo(({ expand, setExpand, hasChildren }) => {
-  const onToggle = useCallback(() => {
-    setExpand((v) => !v);
-  }, [setExpand]);
-  if (!hasChildren)
-    return /* @__PURE__ */ React__default.createElement(IconFont, {
-      size: 12,
-      iconName: "icon-dot",
-      onClickCapture: onToggle
-    });
-  if (expand) {
-    return /* @__PURE__ */ React__default.createElement(IconFont, {
-      size: 12,
-      iconName: "icon-minus-square",
-      onClickCapture: onToggle
-    });
-  }
-  return /* @__PURE__ */ React__default.createElement(IconFont, {
-    size: 12,
-    iconName: "icon-plus-square",
-    onClickCapture: onToggle
-  });
-});
-function classnames$1(...rest) {
-  return rest.filter((item2) => typeof item2 === "string").join(" ");
-}
-const DATA_ATTRIBUTE_ID = "data-tree-node-id";
-const DATA_ATTRIBUTE_INDEX = "data-tree-node-index";
-function BlockTreeItem(props) {
-  var _a, _b;
-  const {
-    nodeData,
-    renderTitle,
-    defaultExpandAll,
-    onDragStart,
-    onDragMove,
-    onDragEnd,
-    onSpill,
-    indent,
-    index: index2,
-    onSelect: handleSelect,
-    onMouseEnter: handleMouseEnter,
-    onContextMenu: handleContextMenu
-  } = props;
-  const [expand, setExpand] = useState(Boolean(defaultExpandAll));
-  const ulRef = useRef(null);
-  const initedRef = useRef(false);
-  useEffect(() => {
-    const ulEle = ulRef.current;
-    if (!ulEle)
-      return;
-    if (!initedRef.current) {
-      initedRef.current = true;
-      if (!expand) {
-        ulEle.style.setProperty("max-height", "0px");
-      }
-      return;
-    }
-    if (expand) {
-      const onTransitionEnd = () => {
-        ulEle.style.removeProperty("max-height");
-        ulEle.removeEventListener("transitionend", onTransitionEnd);
-      };
-      ulEle.style.setProperty("transition", "none");
-      ulEle.style.removeProperty("max-height");
-      const maxHeight = ulEle.getBoundingClientRect().height;
-      ulEle.style.setProperty("max-height", "0px");
-      ulEle.addEventListener("transitionend", onTransitionEnd);
-      requestAnimationFrame(() => {
-        ulEle.style.setProperty("transition", "all .3s ease-out");
-        ulEle.style.setProperty("max-height", maxHeight + "px");
-      });
-    } else {
-      ulEle.style.setProperty("transition", "none");
-      const maxHeight = ulEle.getBoundingClientRect().height;
-      ulEle.style.setProperty("max-height", maxHeight + "px");
-      requestAnimationFrame(() => {
-        ulEle.style.setProperty("transition", "all .3s ease-out");
-        ulEle.style.setProperty("max-height", "0px");
-      });
-    }
-  }, [expand]);
-  const onStart = useCallback((evt, sortable, store) => {
-    if (onDragStart) {
-      onDragStart(evt, sortable, store);
-    }
-    setExpand(false);
-  }, [onDragStart]);
-  const onSelect = useCallback((ev) => {
-    ev.stopPropagation();
-    handleSelect(nodeData.id);
-  }, [nodeData.id, handleSelect]);
-  const onMouseEnter = useCallback((ev) => {
-    handleMouseEnter && handleMouseEnter(nodeData.id, ev);
-  }, [nodeData.id, handleMouseEnter]);
-  const onContextMenu = useCallback((ev) => {
-    handleContextMenu && handleContextMenu(nodeData, ev);
-  }, [handleContextMenu, nodeData]);
-  return /* @__PURE__ */ React__default.createElement("li", {
-    className: styles$8.treeNodeWrapper
-  }, /* @__PURE__ */ React__default.createElement(ReactSortable, __spreadValues({
-    revertOnSpill: true,
-    list: [{ id: nodeData.id }],
-    setList: () => {
-    },
-    onMove: onDragMove,
-    onEnd: onDragEnd,
-    onStart,
-    onSpill
-  }, {
-    animation: 150,
-    fallbackOnBody: true,
-    swapThreshold: 0.65,
-    ghostClass: "ghost",
-    group: "shared"
-  }), /* @__PURE__ */ React__default.createElement("div", __spreadValues({
-    onMouseEnter,
-    onContextMenu,
-    className: classnames$1(styles$8.treeNode)
-  }, {
-    [DATA_ATTRIBUTE_ID]: nodeData.id,
-    [DATA_ATTRIBUTE_INDEX]: index2
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    style: { width: indent * 18 }
-  }), /* @__PURE__ */ React__default.createElement(TreeCollapse, {
-    hasChildren: Boolean((_a = nodeData.children) == null ? void 0 : _a.length),
-    expand,
-    setExpand
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$8.treeNodeTitle,
-    onClick: onSelect
-  }, renderTitle(nodeData)), /* @__PURE__ */ React__default.createElement(IconFont, {
-    iconName: "icon-drag",
-    style: { cursor: "grab", fontSize: 12 }
-  }))), /* @__PURE__ */ React__default.createElement("ul", {
-    ref: ulRef,
-    style: { overflow: "hidden" },
-    className: styles$8.treeNodeList
-  }, (_b = nodeData.children) == null ? void 0 : _b.map((item2, index22) => {
-    return /* @__PURE__ */ React__default.createElement(BlockTreeItem, {
-      key: index22,
-      index: index22,
-      onSelect: handleSelect,
-      onMouseEnter: handleMouseEnter,
-      onContextMenu: handleContextMenu,
-      nodeData: item2,
-      renderTitle,
-      indent: indent + 1,
-      defaultExpandAll,
-      onDragStart,
-      onDragMove,
-      onDragEnd,
-      onSpill
-    });
-  })));
-}
-const getCurrenTreeNode = (ele, rootEle) => {
-  if (ele.classList.contains(styles$8.treeNode))
-    return ele;
-  if (ele.parentElement && rootEle && rootEle.contains(ele.parentElement))
-    return getCurrenTreeNode(ele.parentElement, rootEle);
-  return null;
-};
-function BlockTree(props) {
-  const [eleRef, setEleRef] = useState(null);
-  const [selectedId, setSelectedId] = useState(props.selectedId);
-  const dropDataRef = useRef(null);
-  const {
-    treeData,
-    allowDrop,
-    onDrop,
-    onSelect,
-    onMouseEnter,
-    onMouseLeave,
-    onContextMenu
-  } = props;
-  const treeDataMap = useMemo(() => {
-    const map2 = {};
-    const loop2 = (node) => {
-      if (map2[node.id]) {
-        console.warn(`have same id ${node.id}`);
-      }
-      map2[node.id] = node;
-      if (node.children) {
-        node.children.forEach((item2) => {
-          loop2(item2);
-        });
-      }
-    };
-    treeData.forEach((item2) => {
-      loop2(item2);
-    });
-    return map2;
-  }, [treeData]);
-  useEffect(() => {
-    setSelectedId(props.selectedId);
-  }, [props.selectedId]);
-  useEffect(() => {
-    if (!eleRef)
-      return;
-    if (selectedId) {
-      const node = eleRef.querySelector("." + styles$8.treeNodeSelected);
-      if (node) {
-        node.classList.remove(styles$8.treeNodeSelected);
-      }
-      setTimeout(() => {
-        const selectedNode = eleRef.querySelector(`[${DATA_ATTRIBUTE_ID}="${selectedId}"]`);
-        if (selectedNode) {
-          selectedNode.classList.add(styles$8.treeNodeSelected);
-          selectedNode.scrollIntoView({
-            block: "center",
-            behavior: "smooth"
-          });
-        }
-      }, 50);
-    }
-  }, [eleRef, selectedId]);
-  const onDragStart = useCallback((evt, sortable, store) => {
-  }, []);
-  const onDragMove = useCallback((evt, originalEvent) => {
-    const dragEle = getCurrenTreeNode(evt.dragged);
-    const dropEle = getCurrenTreeNode(evt.related);
-    if (dropEle && dragEle) {
-      const dragId = dragEle.getAttribute(DATA_ATTRIBUTE_ID);
-      const dragIndex = dragEle.getAttribute(DATA_ATTRIBUTE_INDEX);
-      const dropId = dropEle.getAttribute(DATA_ATTRIBUTE_ID);
-      const dropIndex = dropEle.getAttribute(DATA_ATTRIBUTE_INDEX);
-      const currentDropData = {
-        dragNode: treeDataMap[dragId],
-        dragIndex: Number(dragIndex),
-        dropIndex: Number(dropIndex),
-        dropNode: treeDataMap[dropId],
-        willInsertAfter: evt.willInsertAfter,
-        event: originalEvent
-      };
-      const isAllowDrop = allowDrop(currentDropData);
-      if (isAllowDrop) {
-        dropEle.classList.add(styles$8.treeNodeDrop);
-        dropDataRef.current = currentDropData;
-        return true;
-      }
-    }
-    return false;
-  }, [allowDrop, treeDataMap]);
-  const onDragEnd = useCallback((evt) => {
-    if (dropDataRef.current) {
-      onDrop(dropDataRef.current);
-    }
-    dropDataRef.current = null;
-  }, [dropDataRef, , onDrop]);
-  const onSpill = useCallback((evt) => {
-    dropDataRef.current = null;
-  }, []);
-  return useMemo(() => /* @__PURE__ */ React__default.createElement("div", {
-    ref: setEleRef,
-    className: styles$8.tree,
-    onMouseLeave
-  }, props.treeData.map((item2) => /* @__PURE__ */ React__default.createElement("ul", {
-    key: item2.id,
-    className: styles$8.treeNodeList
-  }, /* @__PURE__ */ React__default.createElement(BlockTreeItem, {
-    nodeData: item2,
-    renderTitle: props.renderTitle,
-    indent: 0,
-    index: 0,
-    onSelect,
-    onMouseEnter,
-    onContextMenu,
-    defaultExpandAll: Boolean(props.defaultExpandAll),
-    onDragStart,
-    onDragMove,
-    onDragEnd,
-    onSpill
-  })))), [
-    onContextMenu,
-    onDragEnd,
-    onDragMove,
-    onDragStart,
-    onMouseEnter,
-    onMouseLeave,
-    onSelect,
-    onSpill,
-    props.defaultExpandAll,
-    props.renderTitle,
-    props.treeData
-  ]);
-}
-const wrap$1 = "_wrap_aul3a_1";
-const listItem = "_listItem_aul3a_13";
-const contextmenuMark = "_contextmenuMark_aul3a_23";
-var styles$7 = {
-  wrap: wrap$1,
-  listItem,
-  contextmenuMark
-};
 function _extends$f() {
   _extends$f = Object.assign || function(target2) {
     for (var i2 = 1; i2 < arguments.length; i2++) {
@@ -21735,7 +21427,7 @@ var __assign$y = globalThis && globalThis.__assign || function() {
   };
   return __assign$y.apply(this, arguments);
 };
-function wrapper$1(picker, displayName) {
+function wrapper(picker, displayName) {
   var _a;
   return _a = function(_super) {
     __extends$5(PickerWrapper, _super);
@@ -21748,11 +21440,11 @@ function wrapper$1(picker, displayName) {
     return PickerWrapper;
   }(React__default.Component), _a.displayName = displayName, _a;
 }
-var DatePicker = wrapper$1(React__default.createElement(DatePicker$2, null), "DatePicker");
-var MonthPicker = wrapper$1(React__default.createElement(MonthPicker$1, null), "MonthPicker");
-var YearPicker = wrapper$1(React__default.createElement(YearPicker$1, null), "YearPicker");
-var WeekPicker = wrapper$1(React__default.createElement(WeekPicker$1, null), "WeekPicker");
-var QuarterPicker = wrapper$1(React__default.createElement(QuarterPicker$1, null), "QuarterPicker");
+var DatePicker = wrapper(React__default.createElement(DatePicker$2, null), "DatePicker");
+var MonthPicker = wrapper(React__default.createElement(MonthPicker$1, null), "MonthPicker");
+var YearPicker = wrapper(React__default.createElement(YearPicker$1, null), "YearPicker");
+var WeekPicker = wrapper(React__default.createElement(WeekPicker$1, null), "WeekPicker");
+var QuarterPicker = wrapper(React__default.createElement(QuarterPicker$1, null), "QuarterPicker");
 var RangePicker = PickerRange;
 Object.assign(DatePicker, { MonthPicker, YearPicker, WeekPicker, QuarterPicker, RangePicker });
 var DatePicker$1 = DatePicker;
@@ -27893,7 +27585,7 @@ var __rest$2 = globalThis && globalThis.__rest || function(s, e) {
     }
   return t;
 };
-function TabPane$2(props, ref) {
+function TabPane$1(props, ref) {
   var shouldRender = useRef(false);
   var getPrefixCls = useContext(ConfigContext).getPrefixCls;
   var children = props.children, className = props.className, style = props.style, lazyload = props.lazyload, isActive = props.isActive, rest = __rest$2(props, ["children", "className", "style", "lazyload", "isActive"]);
@@ -27901,10 +27593,10 @@ function TabPane$2(props, ref) {
   shouldRender.current = lazyload ? shouldRender.current || isActive : true;
   return shouldRender.current && React__default.createElement("div", __assign$b({ ref }, omit$1(rest, ["destroyOnHide", "title", "closable"]), { className: cs(prefixCls2 + "-pane", className), style }), children);
 }
-var TabPaneRef = React__default.forwardRef(TabPane$2);
+var TabPaneRef = React__default.forwardRef(TabPane$1);
 TabPaneRef.displayName = "TabPane";
 TabPaneRef.isTabPane = true;
-var TabPane$3 = TabPaneRef;
+var TabPane$2 = TabPaneRef;
 function DropdownIcon(props) {
   var prefixCls2 = props.prefixCls, currentOffset = props.currentOffset, headerSize = props.headerSize, headerWrapperSize = props.headerWrapperSize, getTitleRef = props.getTitleRef, paneChildren = props.paneChildren, direction = props.direction;
   var paneKeys = paneChildren.map(function(child) {
@@ -28609,7 +28301,7 @@ function Tabs(baseProps, ref) {
 var ForwardRefTabs = React__default.forwardRef(Tabs);
 var TabsComponent = ForwardRefTabs;
 TabsComponent.displayName = "Tabs";
-TabsComponent.TabPane = TabPane$3;
+TabsComponent.TabPane = TabPane$2;
 var Tabs$1 = TabsComponent;
 function ownKeys$3(object, enumerableOnly) {
   var keys2 = Object.keys(object);
@@ -30501,10 +30193,10 @@ function TreeList(props, ref) {
       treeRef.current.handleCheck && treeRef.current.handleCheck(!checked, node.props._key, e);
     }
   }, []);
-  var handleLoadMore = useCallback(function(treeNode2) {
+  var handleLoadMore = useCallback(function(treeNode) {
     if (isFunction$5(loadMore)) {
-      var dataRef = treeNode2.props.dataRef;
-      return loadMore(treeNode2, dataRef);
+      var dataRef = treeNode.props.dataRef;
+      return loadMore(treeNode, dataRef);
     }
     return [];
   }, [loadMore]);
@@ -30942,6 +30634,138 @@ IconUpload.defaultProps = {
 };
 IconUpload.displayName = "IconUpload";
 var IconUpload$1 = IconUpload;
+const transparentImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==";
+const img = new Image();
+img.width = 0;
+img.height = 0;
+img.src = transparentImage;
+function BlockTree(props) {
+  const [blockTreeRef, setBlockTreeRef] = useState(null);
+  const [selectedId, setSelectedId] = useState(props.selectedId);
+  const dragNode = useRef(null);
+  const { treeData, allowDrop, onContextMenu } = props;
+  useEffect(() => {
+    setSelectedId(props.selectedId);
+  }, [props.selectedId]);
+  const onDragStart = useCallback((e, node) => {
+    var _a;
+    e.dataTransfer.dropEffect = "none";
+    const dragNodeData = node.props.dataRef;
+    dragNode.current = {
+      dataRef: dragNodeData,
+      parent: node.props.parent,
+      key: node.props._key,
+      parentKey: node.props.parentKey
+    };
+    (_a = props.onDragStart) == null ? void 0 : _a.call(props);
+  }, [props.onDragStart]);
+  const onDragMove = useCallback((option) => {
+    if (!dragNode.current)
+      return false;
+    const dropData = option.dropNode.props.dataRef;
+    const dropId = option.dropNode.props._key;
+    const currentDropData = {
+      dragNode: { key: dragNode.current.key },
+      dropNode: {
+        dataRef: dropData,
+        parent: option.dropNode.props.parent,
+        key: dropId
+      },
+      dropPosition: option.dropPosition
+    };
+    const isAllowDrop = allowDrop(currentDropData);
+    if (isAllowDrop) {
+      return true;
+    }
+    return false;
+  }, [dragNode]);
+  const onDrop = useCallback((info2) => {
+    const { dropNode, dropPosition, e } = info2;
+    e.dataTransfer.dropEffect = "move";
+    if (!dragNode.current || !dropNode)
+      return;
+    const dropData = dropNode.props.dataRef;
+    const currentDropData = {
+      dragNode: dragNode.current,
+      dropNode: {
+        dataRef: dropData,
+        parent: dropNode.props.parent,
+        key: dropNode.props._key,
+        parentKey: dropNode.props.parentKey
+      },
+      dropPosition
+    };
+    props.onDrop(currentDropData);
+  }, []);
+  const renderTitle = useCallback((nodeData) => {
+    return /* @__PURE__ */ React__default.createElement("div", {
+      style: { display: "inline-flex", width: "100%" },
+      onContextMenu: (ev) => onContextMenu && onContextMenu(nodeData, ev)
+    }, props.renderTitle(nodeData));
+  }, [onContextMenu]);
+  const onDragEnd = useCallback(() => {
+    var _a;
+    dragNode.current = null;
+    (_a = props.onDragEnd) == null ? void 0 : _a.call(props);
+  }, [props.onDragEnd]);
+  const onSelect = useCallback((selectedKeys2) => {
+    props.onSelect(selectedKeys2[0]);
+  }, [props.onSelect]);
+  useEffect(() => {
+    if (blockTreeRef) {
+      blockTreeRef.addEventListener("dragover", (e) => {
+        if (e.dataTransfer) {
+          e.dataTransfer.dropEffect = "move";
+        }
+      });
+    }
+  }, [blockTreeRef]);
+  const selectedKeys = useMemo(() => selectedId ? [selectedId] : [], [selectedId]);
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ref: setBlockTreeRef,
+    onMouseLeave: props.onMouseLeave
+  }, /* @__PURE__ */ React__default.createElement(CacheTree, {
+    selectedKeys,
+    draggable: true,
+    size: "small",
+    treeData,
+    blockNode: true,
+    fieldNames: {
+      key: "id"
+    },
+    onDragEnd,
+    onDragStart,
+    onDrop,
+    allowDrop: onDragMove,
+    onSelect,
+    renderTitle
+  }));
+}
+function CacheTree(props) {
+  const [cacheProps, setCacheProps] = useState(props);
+  const lastProps = useRef(props);
+  const debounceCallback = useCallback(lodash.exports.debounce((data) => {
+    setCacheProps(data);
+  }, 300), []);
+  useEffect(() => {
+    if (lastProps.current.treeData !== props.treeData) {
+      lastProps.current = props;
+      debounceCallback(props);
+    } else {
+      lastProps.current = props;
+      setCacheProps(props);
+    }
+  }, [props]);
+  return useMemo(() => /* @__PURE__ */ React__default.createElement(Tree$1, __spreadValues({}, cacheProps)), [cacheProps]);
+}
+const wrap$1 = "_wrap_aul3a_1";
+const listItem = "_listItem_aul3a_13";
+const contextmenuMark = "_contextmenuMark_aul3a_23";
+var styles$5 = {
+  wrap: wrap$1,
+  listItem,
+  contextmenuMark
+};
 var rngBrowser = { exports: {} };
 var getRandomValues = typeof crypto != "undefined" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto != "undefined" && typeof window.msCrypto.getRandomValues == "function" && msCrypto.getRandomValues.bind(msCrypto);
 if (getRandomValues) {
@@ -31150,7 +30974,7 @@ const btnWrap = "_btn-wrap_jzksr_43";
 const upload = "_upload_jzksr_68";
 const wrap = "_wrap_jzksr_80";
 const urlInput = "_urlInput_jzksr_80";
-var styles$6 = {
+var styles$4 = {
   container: container$1,
   error,
   item,
@@ -31312,16 +31136,16 @@ class Uploader {
     this.handler[event2] = handles.filter((item2) => item2 !== fn);
   }
 }
-function classnames(...rest) {
+function classnames$1(...rest) {
   return rest.filter((item2) => typeof item2 === "string").join(" ");
 }
 function previewLoadImage(url) {
   return new Promise((resolve) => {
-    const img = new Image();
-    img.setAttribute("crossOrigin", "Anonymous");
-    img.src = url;
-    img.onload = () => resolve(img);
-    img.onerror = () => resolve(img);
+    const img2 = new Image();
+    img2.setAttribute("crossOrigin", "Anonymous");
+    img2.src = url;
+    img2.onload = () => resolve(img2);
+    img2.onerror = () => resolve(img2);
   });
 }
 const defaultImagesMap$1 = {
@@ -31392,30 +31216,30 @@ function ImageUploader(props) {
   const content = useMemo(() => {
     if (isUploading) {
       return /* @__PURE__ */ React__default.createElement("div", {
-        className: styles$6["item"]
+        className: styles$4["item"]
       }, /* @__PURE__ */ React__default.createElement("div", {
-        className: classnames(styles$6["info"])
+        className: classnames$1(styles$4["info"])
       }, /* @__PURE__ */ React__default.createElement("img", {
         src: getImg$1("AttributePanel_03"),
         alt: "Loading..."
       }), /* @__PURE__ */ React__default.createElement("div", {
-        className: styles$6["btn-wrap"]
+        className: styles$4["btn-wrap"]
       })));
     }
     if (!props.value) {
       return /* @__PURE__ */ React__default.createElement("div", {
-        className: styles$6["upload"],
+        className: styles$4["upload"],
         onClick: onUpload
       }, /* @__PURE__ */ React__default.createElement(IconPlus$1, null), /* @__PURE__ */ React__default.createElement("div", null, "Upload"));
     }
     return /* @__PURE__ */ React__default.createElement("div", {
-      className: styles$6["item"]
+      className: styles$4["item"]
     }, /* @__PURE__ */ React__default.createElement("div", {
-      className: classnames(styles$6["info"])
+      className: classnames$1(styles$4["info"])
     }, /* @__PURE__ */ React__default.createElement("img", {
       src: props.value
     }), /* @__PURE__ */ React__default.createElement("div", {
-      className: styles$6["btn-wrap"]
+      className: styles$4["btn-wrap"]
     }, /* @__PURE__ */ React__default.createElement("a", {
       title: "Preview",
       onClick: () => setPreview(true)
@@ -31431,9 +31255,9 @@ function ImageUploader(props) {
     });
   }
   return /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$6.wrap
+    className: styles$4.wrap
   }, /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$6["container"]
+    className: styles$4["container"]
   }, content, /* @__PURE__ */ React__default.createElement(Input$5, {
     onPaste,
     value: props.value,
@@ -38385,7 +38209,7 @@ function ColorPicker(props) {
       height: 32,
       width: 32,
       padding: 4,
-      border: "1px solid #e6e6e6",
+      border: "1px solid var(--color-neutral-3, rgb(229, 230, 235))",
       borderRadius: showInput ? void 0 : 4,
       fontSize: 0,
       borderRight: showInput ? "none" : void 0,
@@ -38396,7 +38220,7 @@ function ColorPicker(props) {
     style: {
       position: "relative",
       display: "block",
-      border: "1px solid #999",
+      border: "1px solid var(--color-neutral-3, rgb(229, 230, 235))",
       borderRadius: 2,
       width: "100%",
       height: "100%",
@@ -38443,7 +38267,7 @@ function RadioGroup(props) {
 const helperText = "_helperText_cmm2s_1";
 const labelHidden = "_label-hidden_cmm2s_9";
 const editTab = "_editTab_cmm2s_20";
-var styles$5 = {
+var styles$3 = {
   helperText,
   "label-hidden": "_label-hidden_cmm2s_9",
   labelHidden,
@@ -38532,7 +38356,7 @@ function enhancer(Component2, changeAdapter) {
         alignment: alignment ? alignment : inline ? "center" : void 0,
         distribution
       }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, null, /* @__PURE__ */ React__default.createElement("label", {
-        className: labelHidden2 ? styles$5["label-hidden"] : void 0,
+        className: labelHidden2 ? styles$3["label-hidden"] : void 0,
         htmlFor: id
       }, /* @__PURE__ */ React__default.createElement("span", {
         style: { whiteSpace: "pre" }
@@ -38551,7 +38375,7 @@ function enhancer(Component2, changeAdapter) {
         value: valueAdapter ? valueAdapter(currentValue) : currentValue,
         onChange: onFieldChange
       })))), /* @__PURE__ */ React__default.createElement("div", {
-        className: styles$5.helperText
+        className: styles$3.helperText
       }, /* @__PURE__ */ React__default.createElement("small", null, helpText))));
     });
   };
@@ -38603,7 +38427,10 @@ function CheckBoxGroup(props) {
     value: item2.value
   }, item2.label))));
 }
-const { TabPane: TabPane$1 } = Tabs$1;
+function classnames(...rest) {
+  return rest.filter((item2) => typeof item2 === "string").join(" ");
+}
+const { TabPane } = Tabs$1;
 function EditTab(props) {
   const { value, additionItem } = props;
   const onAddTab = () => {
@@ -38613,14 +38440,14 @@ function EditTab(props) {
     props.onChange(value.filter((_, vIndex) => Number(index2) !== vIndex));
   };
   return /* @__PURE__ */ React__default.createElement(Tabs$1, {
-    className: classnames$1(styles$5.editTab),
+    className: classnames(styles$3.editTab),
     style: { border: "none" },
     type: "card",
     tabPosition: props.tabPosition,
     editable: true,
     onAddTab,
     onDeleteTab
-  }, (Array.isArray(value) ? value : []).map((item2, index2) => /* @__PURE__ */ React__default.createElement(TabPane$1, {
+  }, (Array.isArray(value) ? value : []).map((item2, index2) => /* @__PURE__ */ React__default.createElement(TabPane, {
     style: { paddingLeft: 12 },
     title: `${props.label || "Tab"} ${index2 + 1}`,
     key: index2
@@ -38655,92 +38482,51 @@ function InlineText({ idx, onChange, children }) {
   const {
     mutators: { setFieldTouched }
   } = useForm$1();
-  const [isFocus, setIsFocus] = useState(false);
   const [textContainer, setTextContainer] = useState(null);
   useField(idx);
   const { focusBlock: focusBlock2 } = useBlock();
   useEffect(() => {
-    const promiseObj = awaitForElement$1(idx);
-    promiseObj.promise.then((blockNode) => {
-      setTextContainer(blockNode);
-    });
+    let promiseObj;
+    const getTextBlock = () => {
+      promiseObj = awaitForElement$1(idx);
+      promiseObj.promise.then((blockNode) => {
+        if (blockNode.querySelector('[contenteditable="true"]')) {
+          setTextContainer(blockNode);
+        } else {
+          setTimeout(() => {
+            getTextBlock();
+          }, 50);
+        }
+      });
+    };
+    getTextBlock();
     return () => {
       promiseObj.cancel();
     };
   }, [idx, focusBlock2]);
-  const onTextChange = useCallback((text) => {
-    if ((focusBlock2 == null ? void 0 : focusBlock2.data.value.content) !== text) {
-      onChange(text);
-    }
-  }, [focusBlock2 == null ? void 0 : focusBlock2.data.value.content, onChange]);
   useEffect(() => {
     if (!textContainer)
       return;
     const container2 = getEditNode(textContainer);
     if (container2) {
-      container2.focus();
-      let focusTarget = null;
-      const root2 = getShadowRoot();
-      const onClick = (ev) => {
-        ev.stopPropagation();
-        focusTarget = ev.target;
-        const fixedContainer = document.getElementById(FIXED_CONTAINER_ID);
-        if (textContainer == null ? void 0 : textContainer.contains(focusTarget))
-          return;
-        if (fixedContainer && fixedContainer.contains(focusTarget))
-          return;
-        if (fixedContainer == null ? void 0 : fixedContainer.contains(document.activeElement))
-          return;
-        onTextChange(getEditContent(textContainer));
-      };
       const onPaste = (e) => {
         var _a;
         e.preventDefault();
         const text = ((_a = e.clipboardData) == null ? void 0 : _a.getData("text/plain")) || "";
         document.execCommand("insertHTML", false, text);
-      };
-      const stopDrag = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
+        onChange(getEditContent(textContainer));
       };
       const onInput = () => {
-        setFieldTouched(idx, true);
+        onChange(getEditContent(textContainer));
       };
       container2.addEventListener("paste", onPaste, true);
-      container2.addEventListener("dragstart", stopDrag);
       container2.addEventListener("input", onInput);
-      document.addEventListener("mousedown", onClick);
-      root2.addEventListener("mousedown", onClick);
       return () => {
         container2.removeEventListener("paste", onPaste, true);
-        container2.removeEventListener("dragstart", stopDrag);
         container2.removeEventListener("input", onInput);
-        document.removeEventListener("mousedown", onClick);
-        root2.removeEventListener("mousedown", onClick);
       };
     }
-  }, [idx, onTextChange, setFieldTouched, textContainer]);
-  useEffect(() => {
-    const onFocus3 = (ev) => {
-      ev.stopPropagation();
-      if (document.activeElement === getEditorRoot()) {
-        setIsFocus(true);
-      } else {
-        setIsFocus(false);
-      }
-    };
-    const root2 = getShadowRoot();
-    root2.addEventListener("click", onFocus3);
-    root2.addEventListener("focusin", onFocus3);
-    window.addEventListener("focusin", onFocus3);
-    return () => {
-      root2.addEventListener("click", onFocus3);
-      root2.removeEventListener("focusin", onFocus3);
-      window.removeEventListener("focusin", onFocus3);
-    };
-  }, []);
-  if (!isFocus)
-    return null;
+  }, [onChange, setFieldTouched, textContainer]);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
 }
 function AutoComplete(props) {
@@ -39304,20 +39090,28 @@ function RichTextToolBar() {
     }
   }))), blockNode));
 }
-const TEXT_BAR_LOCATION_KEY = "TEXT_BAR_LOCATION_KEY";
-const RichTextFieldItem = (props) => {
-  useLocalStorage$1(TEXT_BAR_LOCATION_KEY, { left: 0, top: 0 });
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(RichTextToolBar, null), /* @__PURE__ */ React__default.createElement(InlineTextField, __spreadValues({}, props)));
-};
 const RichTextField = (props) => {
   const { focusBlock: focusBlock2 } = useBlock();
   const { focusIdx: focusIdx2 } = useFocusIdx();
   if ((focusBlock2 == null ? void 0 : focusBlock2.type) !== BasicType.TEXT)
     return null;
-  return /* @__PURE__ */ React__default.createElement(RichTextFieldItem, __spreadValues({
-    key: focusIdx2
-  }, props));
+  const 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);
@@ -39444,46 +39238,46 @@ function ContextMenu({
       left,
       top
     },
-    className: styles$7.wrap,
+    className: styles$5.wrap,
     onClick: (e) => e.stopPropagation()
   }, !isFirst && /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$7.listItem,
+    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$7.listItem,
+    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$7.listItem,
+    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$7.listItem,
+    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$7.listItem,
+    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$7.listItem,
+    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$7.contextmenuMark,
+    className: styles$5.contextmenuMark,
     onClick: onClose,
     onContextMenu: (e) => {
       e.preventDefault();
@@ -39491,6 +39285,173 @@ function ContextMenu({
     }
   }), 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;
+  }
+  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
+  };
+}
+function getDirectionFormDropPosition(position) {
+  if (position === -1)
+    return "top";
+  if (position === 1)
+    return "bottom";
+  return "";
+}
 function BlockLayer() {
   const {
     pageData: pageData2,
@@ -39498,8 +39459,14 @@ function BlockLayer() {
   } = useEditorContext();
   const { onUploadImage, onAddCollection } = useEditorProps();
   const { focusIdx: focusIdx2, setFocusIdx } = useFocusIdx();
-  const { setHoverIdx } = useHoverIdx();
+  const { setHoverIdx, setIsDragging, setDirection } = useHoverIdx();
   const { moveBlock, setValueByIdx: setValueByIdx2, copyBlock, removeBlock } = useBlock();
+  const {
+    setBlockLayerRef,
+    allowDrop,
+    blockLayerRef,
+    removeHightLightClassName
+  } = useAvatarWrapperDrop();
   const [contextMenuData, setContextMenuData] = useState(null);
   const onToggleVisible = useCallback(({ id }, e) => {
     e.stopPropagation();
@@ -39511,12 +39478,14 @@ function BlockLayer() {
   }, [setValueByIdx2, values2]);
   const renderTitle = useCallback((data) => {
     const block2 = BlockManager.getBlockByType(data.type);
+    const isPage = data.type === BasicType.PAGE;
     return /* @__PURE__ */ React__default.createElement("div", {
-      className: styles$9.title
+      "data-tree-idx": data.id,
+      className: classnames(styles$6.title, !isPage && getNodeIdxClassName(data.id), !isPage && "email-block")
     }, /* @__PURE__ */ React__default.createElement(TextStyle, {
       size: "smallest"
     }, block2 == null ? void 0 : block2.name), /* @__PURE__ */ React__default.createElement("div", {
-      className: styles$9.eyeIcon
+      className: styles$6.eyeIcon
     }, /* @__PURE__ */ React__default.createElement(EyeIcon$1, {
       blockData: data,
       onToggleVisible
@@ -39549,35 +39518,63 @@ function BlockLayer() {
   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 onDragStart = useCallback(() => {
+    setIsDragging(true);
+  }, [setIsDragging]);
+  const onDragEnd = useCallback(() => {
+    setIsDragging(false);
+  }, [setIsDragging]);
   const onDrop = useCallback((params) => {
-    const { dragNode, dropNode, willInsertAfter } = params;
-    const dragBlock = BlockManager.getBlockByType(dragNode.type);
+    const { dragNode, dropNode, dropPosition } = params;
+    const dragBlock = BlockManager.getBlockByType(dragNode.dataRef.type);
     if (!dragBlock)
-      return;
-    if (dragBlock.validParentType.includes(dropNode.type) && willInsertAfter) {
-      moveBlock(dragNode.id, getChildIdx(dropNode.id, 0));
+      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.id, willInsertAfter ? getSiblingIdx(dropNode.id, 1) : dropNode.id);
+      moveBlock(dragNode.key, getChildIdx(dropNode.parentKey, dropPosition > 0 ? dropIndex + 1 : dropIndex));
     }
   }, [moveBlock]);
+  useEffect(() => {
+    if (!blockLayerRef)
+      return;
+    if (focusIdx2) {
+      setTimeout(() => {
+        const selectedNode = blockLayerRef.querySelector(`[${DATA_ATTRIBUTE_ID}="${focusIdx2}"]`);
+        if (selectedNode) {
+          selectedNode.scrollIntoView({
+            block: "center",
+            behavior: "smooth"
+          });
+        }
+      }, 50);
+    }
+  }, [blockLayerRef, focusIdx2]);
+  const blockTreeAllowDrop = useCallback((data) => {
+    var _a, _b;
+    const dropResult = allowDrop(data);
+    if (dropResult) {
+      const node = (_b = (_a = document.querySelector(`[data-tree-idx="${dropResult.key}"]`)) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.parentNode;
+      if (node instanceof HTMLElement) {
+        removeHightLightClassName();
+        node.classList.add("arco-tree-node-title-gap-bottom");
+      }
+      setDirection(getDirectionFormDropPosition(dropResult.position));
+      setHoverIdx(dropResult.key);
+    }
+    return dropResult;
+  }, [allowDrop]);
   const hasFocus = Boolean(focusIdx2);
   return useMemo(() => {
     if (!hasFocus)
       return null;
     return /* @__PURE__ */ React__default.createElement("div", __spreadValues({
+      ref: setBlockLayerRef,
       id: "BlockLayerManager"
     }, {
       [DATA_ATTRIBUTE_DROP_CONTAINER]: "true"
@@ -39586,9 +39583,11 @@ function BlockLayer() {
       defaultExpandAll: true,
       treeData,
       renderTitle,
-      allowDrop,
+      allowDrop: blockTreeAllowDrop,
       onContextMenu,
       onDrop,
+      onDragStart,
+      onDragEnd,
       onSelect,
       onMouseEnter,
       onMouseLeave
@@ -39616,7 +39615,9 @@ function BlockLayer() {
     onAddCollection,
     moveBlock,
     copyBlock,
-    removeBlock
+    removeBlock,
+    onDragEnd,
+    onDragStart
   ]);
 }
 function Help(props) {
@@ -39848,10 +39849,6 @@ const MergeTags = React__default.memo((props) => {
     onSelect: (vals) => onSelect(vals[0])
   }));
 });
-const wrapper = "_wrapper_j840r_1";
-var styles$4 = {
-  wrapper
-};
 const AttributesPanelWrapper = (props) => {
   const { focusBlock: focusBlock2, setFocusBlock } = useBlock();
   const { mergeTags } = useEditorProps();
@@ -39864,11 +39861,9 @@ const AttributesPanelWrapper = (props) => {
   }, [focusBlock2, setFocusBlock]);
   if (!focusBlock2 || !block2)
     return null;
-  return /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$4.wrapper
-  }, /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", {
     style: {
-      border: "1px solid #f0f0f0",
+      border: "1px solid var(--color-neutral-3, rgb(229, 230, 235))",
       borderBottom: "none",
       padding: "12px 24px"
     }
@@ -39883,7 +39878,10 @@ const AttributesPanelWrapper = (props) => {
   }, /* @__PURE__ */ React__default.createElement(Stack$6, {
     spacing: "extraTight",
     alignment: "center"
-  }, /* @__PURE__ */ React__default.createElement(EyeIcon, null), /* @__PURE__ */ React__default.createElement(TextStyle, null, `${block2.name} attributes`)), /* @__PURE__ */ React__default.createElement(Stack$6.Item, null, props.extra))), Boolean(focusBlock2.data.hidden) && mergeTags && /* @__PURE__ */ React__default.createElement(Stack$6, {
+  }, /* @__PURE__ */ React__default.createElement(EyeIcon, null), /* @__PURE__ */ React__default.createElement(TextStyle, {
+    variation: "strong",
+    size: "large"
+  }, `${block2.name} attributes`)), /* @__PURE__ */ React__default.createElement(Stack$6.Item, null, props.extra))), Boolean(focusBlock2.data.hidden) && mergeTags && /* @__PURE__ */ React__default.createElement(Stack$6, {
     spacing: "extraTight"
   }, /* @__PURE__ */ React__default.createElement(TextStyle, null, "Hide if"), /* @__PURE__ */ React__default.createElement(MergeTags, {
     isSelect: true,
@@ -39910,8 +39908,10 @@ function EyeIcon() {
   if (focusBlock2.type === BasicType.PAGE)
     return null;
   return focusBlock2.data.hidden ? /* @__PURE__ */ React__default.createElement(IconEyeInvisible$1, {
+    style: { cursor: "pointer", fontSize: 18 },
     onClick: onToggleVisible
   }) : /* @__PURE__ */ React__default.createElement(IconEye$1, {
+    style: { cursor: "pointer", fontSize: 18 },
     onClick: onToggleVisible
   });
 }
@@ -40038,10 +40038,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 },
@@ -41748,10 +41748,7 @@ function AttributePanel() {
   }, "No matching components")), /* @__PURE__ */ React__default.createElement("div", {
     style: { position: "absolute" }
   }, /* @__PURE__ */ React__default.createElement(RichTextField, {
-    idx: focusIdx2,
-    name: `${focusIdx2}.data.value.content`,
-    label: "",
-    labelHidden: true
+    idx: focusIdx2
   })), shadowRoot && ReactDOM.createPortal(/* @__PURE__ */ React__default.createElement("style", null, `
               .email-block [contentEditable="true"],
               .email-block [contentEditable="true"] * {
@@ -41857,7 +41854,7 @@ function Margin() {
 const BlocksPanel$1 = "_BlocksPanel_15fho_1";
 const blockItem = "_blockItem_15fho_5";
 const closeBtn = "_closeBtn_15fho_12";
-var styles$3 = {
+var styles$2 = {
   BlocksPanel: BlocksPanel$1,
   blockItem,
   closeBtn
@@ -41915,7 +41912,7 @@ __publicField(BlockMarketManager, "category", []);
 __publicField(BlockMarketManager, "subscriptHandles", []);
 const mask = "_mask_1a0xw_1";
 const drag = "_drag_1a0xw_12";
-var styles$2 = {
+var styles$1 = {
   mask,
   drag
 };
@@ -41925,7 +41922,7 @@ const BlockMaskWrapper = (props) => {
   const { type, payload } = props;
   const onMouseDown = useCallback(() => {
     if (ref.current) {
-      ref.current.classList.add(styles$2.drag);
+      ref.current.classList.add(styles$1.drag);
     }
   }, []);
   const onMaskMouseDown = useCallback((ev) => {
@@ -41937,7 +41934,7 @@ const BlockMaskWrapper = (props) => {
   useEffect(() => {
     const mouseup = () => {
       if (ref.current) {
-        ref.current.classList.remove(styles$2.drag);
+        ref.current.classList.remove(styles$1.drag);
       }
     };
     document.addEventListener("mouseup", mouseup);
@@ -41948,7 +41945,7 @@ const BlockMaskWrapper = (props) => {
   return /* @__PURE__ */ React__default.createElement("div", {
     style: { position: "relative" }
   }, props.children, /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$2.wrapper,
+    className: styles$1.wrapper,
     style: {
       position: "absolute",
       height: "100%",
@@ -41963,7 +41960,7 @@ const BlockMaskWrapper = (props) => {
     payload
   }, /* @__PURE__ */ React__default.createElement("div", {
     ref,
-    className: styles$2.mask,
+    className: styles$1.mask,
     onMouseDown: onMaskMouseDown
   }, /* @__PURE__ */ React__default.createElement("div", {
     ref: dragRef,
@@ -44009,13 +44006,13 @@ const BlocksPanel = (props) => {
   }, /* @__PURE__ */ React__default.createElement("div", {
     onClick: toggleVisible
   }, props.children), ele && visible && createPortal(/* @__PURE__ */ React__default.createElement("div", {
-    className: styles$3.BlocksPanel,
+    className: styles$2.BlocksPanel,
     style: {
       pointerEvents: isDragging ? "none" : void 0,
       position: "fixed",
       width: isDragging ? 0 : 650,
+      backgroundColor: "var(--color-bg-2)",
       zIndex: 200,
-      top: 0,
       left: 60,
       maxHeight: "85vh",
       transition: "width .5s",
@@ -44025,7 +44022,7 @@ const BlocksPanel = (props) => {
     bodyStyle: { padding: 0 },
     title: "Drag block",
     extra: /* @__PURE__ */ React__default.createElement("div", {
-      className: styles$3.closeBtn
+      className: styles$2.closeBtn
     }, /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-close",
       onClick: toggleVisible
@@ -44036,7 +44033,8 @@ const BlocksPanel = (props) => {
   }, filterCategories.map((category, index2) => /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
     style: {
       padding: 0,
-      overflow: "auto"
+      overflow: "auto",
+      height: 500
     },
     key: category.title,
     title: /* @__PURE__ */ React__default.createElement("div", {
@@ -44051,17 +44049,16 @@ const BlocksPanel = (props) => {
 };
 const BlockPanelItem = React__default.memo((props) => {
   return /* @__PURE__ */ React__default.createElement(Tabs$1, {
-    style: { padding: "20px 0" },
     tabPosition: "left"
   }, props.category.blocks.map((block2, index2) => {
     return /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
-      style: { padding: 0 },
+      style: { padding: 0, height: 500 },
       key: block2.title,
       title: /* @__PURE__ */ React__default.createElement(Stack$6, {
         alignment: "center",
         spacing: "extraTight"
       }, /* @__PURE__ */ React__default.createElement("div", {
-        className: styles$3.blockItem
+        className: styles$2.blockItem
       }, block2.title), block2.description && /* @__PURE__ */ React__default.createElement(Help, {
         title: block2.description
       }))
@@ -44078,11 +44075,14 @@ const BlockPanelItem = React__default.memo((props) => {
   }));
 });
 function ShortcutToolbar() {
+  const blocksPanelRef = useRef(null);
   return /* @__PURE__ */ React__default.createElement(Stack$6, {
     vertical: true,
     alignment: "center",
     distribution: "center"
-  }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, null), /* @__PURE__ */ React__default.createElement(BlockAvatarWrapper, {
+  }, /* @__PURE__ */ React__default.createElement(BlocksPanel, null, /* @__PURE__ */ React__default.createElement("div", {
+    ref: blocksPanelRef
+  })), /* @__PURE__ */ React__default.createElement(BlockAvatarWrapper, {
     type: BasicType.TEXT
   }, /* @__PURE__ */ React__default.createElement(IconFont, {
     title: "Text",
@@ -44126,22 +44126,25 @@ function ShortcutToolbar() {
       cursor: "move",
       color: "#e5afe5"
     }
-  })), /* @__PURE__ */ React__default.createElement(BlocksPanel, null, /* @__PURE__ */ React__default.createElement(IconFont, {
+  })), /* @__PURE__ */ React__default.createElement(IconFont, {
+    onClick: () => {
+      var _a;
+      return (_a = blocksPanelRef.current) == null ? void 0 : _a.click();
+    },
     iconName: "icon-more",
     style: {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      color: "#000",
       width: 30,
       height: 30,
       borderRadius: "50%",
-      boxShadow: "0 0 12px -3px rgb(0 0 0 / 20%), 0 2px 7px -1px rgb(0 0 0 / 14%), 0 2px 4px -1px rgb(0 0 0 / 20%)",
+      color: "var(--color-text-2)",
+      boxShadow: "0 0 12px -3px var(--color-text-2)",
       fontSize: 18
     }
-  })));
+  }));
 }
-var styles$1 = {};
 function SourceCodePanel() {
   const { setValueByIdx, focusBlock, values } = useBlock();
   const { focusIdx } = useFocusIdx();
@@ -44152,7 +44155,7 @@ function SourceCodePanel() {
       return "";
     return JSON.stringify(focusBlock, null, 2) || "";
   }, [focusBlock]);
-  const onChaneCode = useCallback((event) => {
+  const onChangeCode = useCallback((event) => {
     try {
       const parseValue = JSON.parse(JSON.stringify(eval("(" + event.target.value + ")")));
       const block = BlockManager.getBlockByType(parseValue.type);
@@ -44197,9 +44200,7 @@ function SourceCodePanel() {
   }, [focusBlock, focusIdx, pageData]);
   if (!focusBlock)
     return null;
-  return /* @__PURE__ */ React__default.createElement(Collapse$1, {
-    className: styles$1.wrapper
-  }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+  return /* @__PURE__ */ React__default.createElement(Collapse$1, null, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "json",
     header: "Json source",
     contentStyle: { padding: "8px 13px" }
@@ -44207,7 +44208,7 @@ function SourceCodePanel() {
     key: code,
     defaultValue: code,
     autoSize: { maxRows: 25 },
-    onBlur: onChaneCode
+    onBlur: onChangeCode
   })), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "mjml",
     header: "MJML source",
@@ -44261,7 +44262,7 @@ function Toolbar({
   }, /* @__PURE__ */ React__default.createElement("div", {
     style: {
       color: "#ffffff",
-      backgroundColor: "#1890ff",
+      backgroundColor: "var(--selected-color)",
       height: "22px",
       display: "inline-flex",
       padding: "1px 5px",
@@ -44301,7 +44302,7 @@ function ToolItem(props) {
     onClick: props.onClick,
     style: {
       color: "#ffffff",
-      backgroundColor: "#1890ff",
+      backgroundColor: "var(--selected-color)",
       height: 22,
       fontSize: props.width || 14,
       lineHeight: "22px",
@@ -44311,7 +44312,7 @@ function ToolItem(props) {
       cursor: "pointer",
       justifyContent: "center"
     },
-    className: classnames$1("iconfont", props.iconName)
+    className: classnames("iconfont", props.iconName)
   });
 }
 function FocusTooltip() {
@@ -44656,10 +44657,9 @@ var styles = {
   container,
   customScrollBar
 };
-const { TabPane } = Tabs$1;
 const SimpleLayout = (props) => {
   const { height: containerHeight } = useEditorProps();
-  return /* @__PURE__ */ React__default.createElement(Layout$1, null, /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ React__default.createElement(Layout$1, {
     style: {
       display: "flex",
       width: "100vw",
@@ -44667,40 +44667,38 @@ const SimpleLayout = (props) => {
       minWidth: 1400
     }
   }, /* @__PURE__ */ React__default.createElement(Layout$1.Sider, {
-    theme: "light",
-    width: 60,
-    style: { border: "1px solid #f0f0f0" }
-  }, /* @__PURE__ */ React__default.createElement(ShortcutToolbar, null)), /* @__PURE__ */ React__default.createElement(Layout$1.Sider, {
     style: {
-      borderLeft: "none",
+      width: 360
+    }
+  }, /* @__PURE__ */ React__default.createElement(Card$1, {
+    bodyStyle: { padding: 0 },
+    style: { border: "none" }
+  }, /* @__PURE__ */ React__default.createElement(Card$1.Grid, {
+    style: { width: 60 }
+  }, /* @__PURE__ */ React__default.createElement(ShortcutToolbar, null)), /* @__PURE__ */ React__default.createElement(Card$1.Grid, {
+    className: styles.customScrollBar,
+    style: {
+      width: 300,
+      paddingBottom: 50,
+      border: "none",
       height: containerHeight,
       overflow: "auto"
-    },
-    className: styles.customScrollBar,
-    theme: "light",
-    width: 300
+    }
   }, /* @__PURE__ */ React__default.createElement(Card$1, {
-    bodyStyle: { padding: 0, paddingBottom: 50 },
-    style: { borderBottom: "none" }
-  }, /* @__PURE__ */ React__default.createElement(Tabs$1, {
-    style: { borderLeft: "none" },
-    defaultActiveTab: "Layout"
-  }, /* @__PURE__ */ React__default.createElement(TabPane, {
-    style: { paddingTop: 10 },
-    key: "Layout",
-    title: "Layout"
+    title: "Layout",
+    style: { border: "none" }
   }, /* @__PURE__ */ React__default.createElement(BlockLayer, null))))), /* @__PURE__ */ React__default.createElement(Layout$1, {
     style: { height: containerHeight }
   }, props.children), /* @__PURE__ */ React__default.createElement(Layout$1.Sider, {
     style: { height: containerHeight },
-    theme: "light",
     width: 350
   }, /* @__PURE__ */ React__default.createElement(Card$1, {
     size: "small",
     id: "rightSide",
     style: {
       maxHeight: "100%",
-      height: "100%"
+      height: "100%",
+      borderLeft: "none"
     },
     bodyStyle: { padding: 0 },
     className: styles.customScrollBar
@@ -44711,7 +44709,7 @@ const SimpleLayout = (props) => {
   }, /* @__PURE__ */ React__default.createElement(AttributePanel, null)), /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
     key: "Source code",
     title: "Source code"
-  }, /* @__PURE__ */ React__default.createElement(SourceCodePanel, null)))))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null));
+  }, /* @__PURE__ */ React__default.createElement(SourceCodePanel, null))))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null));
 };
 export { EditTabField as $, AttributePanel as A, BlockLayer as B, Color as C, Decoration as D, TextAreaField as E, FontFamily as F, NumberField as G, Height as H, InteractivePrompt as I, SliderField as J, ColorPickerField as K, LetterSpacing as L, Margin as M, NavbarLinkPadding as N, ImageUploaderField as O, Padding as P, SelectField as Q, AutoCompleteField as R, ShortcutToolbar as S, TextAlign as T, UploadField as U, VerticalAlign as V, Width as W, RadioGroupField as X, SwitchField as Y, DatePickerField as Z, CheckboxField as _, BlockAttributeConfigurationManager as a, InlineTextField as a0, enhancer as a1, RichTextField as a2, Align as b, commonjsGlobal as c, AttributesPanelWrapper as d, ContainerBackgroundColor as e, TextDecoration as f, Background as g, LineHeight as h, TextTransform as i, BackgroundColor as j, Direction as k, Link as l, Border as m, BorderColor as n, FontSize as o, MergeTags as p, BorderStyle as q, FontStyle as r, BorderWidth as s, FontWeight as t, BlockMarketManager as u, BlockMaskWrapper as v, SourceCodePanel as w, SimpleLayout as x, TextField as y, SearchField as z };
 //# sourceMappingURL=index2.js.map