easy-email-extensions 3.1.0 → 3.1.1

package/lib/index2.js

@@ -55,8 +55,8 @@ var __async = (__this, __arguments, generator) => {
 };
 import * as React from "react";
 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 { IconFont, Stack as Stack$6, TextStyle, getBlockNodeByIdx, useBlock, getEditNode, getEditContent, useEditorProps, useFocusIdx, useEditorContext, getShadowRoot, FIXED_CONTAINER_ID, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_ID, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, getEditorRoot, useActiveTab, ActiveTabKeys } from "easy-email-editor";
+import { BasicType, ImageManager, BlockManager, createBlockDataByType, getParentByIdx, getValueByIdx, getIndexByIdx, getSiblingIdx, getNodeIdxFromClassName, getParentIdx, getNodeIdxClassName, getPageIdx, getChildIdx, MjmlToJson, JsonToMjml, getNodeTypeFromClassName } from "easy-email-core";
 import ReactDOM, { findDOMNode, createPortal } from "react-dom";
 import { useField, Field, useForm as useForm$1, Form as Form$3, version as version$2, useFormState } from "react-final-form";
 var index$2 = "";
@@ -38732,14 +38732,204 @@ function FontFamily$1(props) {
     key: item2.value
   }, item2.label))));
 }
-const MergeTags$1 = React__default.memo((props) => {
-  const { mergeTags = {} } = useEditorProps();
+var styleText$1 = ".easy-email-extensions-Tools-Popover .arco-popover-content{padding:0}.easy-email-extensions-Tools-Popover .arco-popover-content-inner *::-webkit-scrollbar{-webkit-appearance:none;width:5px}.easy-email-extensions-Tools-Popover .arco-popover-content-inner *::-webkit-scrollbar-thumb{border-radius:5px;background-color:#00000080;box-shadow:0 0 1px #ffffff80;-webkit-box-shadow:0 0 1px rgba(255,255,255,.5)}\n";
+function Help(props) {
+  return /* @__PURE__ */ React__default.createElement(Tooltip$1, __spreadProps(__spreadValues({}, __spreadProps(__spreadValues({}, props), { style: void 0 })), {
+    content: props.title
+  }), /* @__PURE__ */ React__default.createElement("span", {
+    style: { cursor: "pointer" }
+  }, /* @__PURE__ */ React__default.createElement(IconQuestionCircle$1, {
+    style: props.style
+  })));
+}
+var ARRAY_ERROR = "FINAL_FORM/array-error";
+var fieldSubscriptionItems = ["active", "data", "dirty", "dirtySinceLastSubmit", "error", "initial", "invalid", "length", "modified", "modifiedSinceLastSubmit", "pristine", "submitError", "submitFailed", "submitSucceeded", "submitting", "touched", "valid", "value", "visited", "validating"];
+var version$1 = "4.20.4";
+function renderComponent(props, name) {
+  var render3 = props.render, children = props.children, component = props.component, rest = _objectWithoutPropertiesLoose(props, ["render", "children", "component"]);
+  if (component) {
+    return /* @__PURE__ */ createElement(component, _extends$f({}, rest, {
+      children,
+      render: render3
+    }));
+  }
+  if (render3) {
+    return render3(children === void 0 ? rest : _extends$f({}, rest, {
+      children
+    }));
+  }
+  if (typeof children !== "function") {
+    throw new Error("Must specify either a render prop, a render function as children, or a component prop to " + name);
+  }
+  return children(rest);
+}
+var defaultIsEqual = function defaultIsEqual2(aArray, bArray) {
+  return aArray === bArray || Array.isArray(aArray) && Array.isArray(bArray) && aArray.length === bArray.length && !aArray.some(function(a, index2) {
+    return a !== bArray[index2];
+  });
+};
+function useConstant(init) {
+  var ref = React__default.useRef();
+  if (!ref.current) {
+    ref.current = init();
+  }
+  return ref.current;
+}
+var all = fieldSubscriptionItems.reduce(function(result, key) {
+  result[key] = true;
+  return result;
+}, {});
+var useFieldArray = function useFieldArray2(name, _temp) {
+  var _ref2 = _temp === void 0 ? {} : _temp, _ref$subscription = _ref2.subscription, subscription = _ref$subscription === void 0 ? all : _ref$subscription, defaultValue = _ref2.defaultValue, initialValue = _ref2.initialValue, _ref$isEqual = _ref2.isEqual, isEqual2 = _ref$isEqual === void 0 ? defaultIsEqual : _ref$isEqual, validateProp = _ref2.validate;
+  var form = useForm$1("useFieldArray");
+  var formMutators = form.mutators;
+  var hasMutators = !!(formMutators && formMutators.push && formMutators.pop);
+  if (!hasMutators) {
+    throw new Error("Array mutators not found. You need to provide the mutators from final-form-arrays to your form");
+  }
+  var mutators = useConstant(function() {
+    return Object.keys(formMutators).reduce(function(result, key) {
+      result[key] = function() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        return formMutators[key].apply(formMutators, [name].concat(args));
+      };
+      return result;
+    }, {});
+  });
+  var validate3 = useConstant(function() {
+    return function(value, allValues, meta2) {
+      if (!validateProp)
+        return void 0;
+      var error2 = validateProp(value, allValues, meta2);
+      if (!error2 || Array.isArray(error2)) {
+        return error2;
+      } else {
+        var arrayError = [];
+        arrayError[ARRAY_ERROR] = error2;
+        return arrayError;
+      }
+    };
+  });
+  var _useField = useField(name, {
+    subscription: _extends$f({}, subscription, {
+      length: true
+    }),
+    defaultValue,
+    initialValue,
+    isEqual: isEqual2,
+    validate: validate3,
+    format: function format(v) {
+      return v;
+    }
+  }), _useField$meta = _useField.meta, length = _useField$meta.length, meta = _objectWithoutPropertiesLoose(_useField$meta, ["length"]), input = _useField.input, fieldState = _objectWithoutPropertiesLoose(_useField, ["meta", "input"]);
+  var forEach2 = function forEach3(iterator) {
+    var len = length || 0;
+    for (var i2 = 0; i2 < len; i2++) {
+      iterator(name + "[" + i2 + "]", i2);
+    }
+  };
+  var map2 = function map3(iterator) {
+    var len = length || 0;
+    var results = [];
+    for (var i2 = 0; i2 < len; i2++) {
+      results.push(iterator(name + "[" + i2 + "]", i2));
+    }
+    return results;
+  };
+  return {
+    fields: _extends$f({
+      name,
+      forEach: forEach2,
+      length: length || 0,
+      map: map2
+    }, mutators, fieldState, {
+      value: input.value
+    }),
+    meta
+  };
+};
+var version = "3.1.2";
+var versions = {
+  "final-form": version$1,
+  "react-final-form": version$2,
+  "react-final-form-arrays": version
+};
+var FieldArray = function FieldArray2(_ref2) {
+  var name = _ref2.name, subscription = _ref2.subscription, defaultValue = _ref2.defaultValue, initialValue = _ref2.initialValue, isEqual2 = _ref2.isEqual, validate3 = _ref2.validate, rest = _objectWithoutPropertiesLoose(_ref2, ["name", "subscription", "defaultValue", "initialValue", "isEqual", "validate"]);
+  var _useFieldArray = useFieldArray(name, {
+    subscription,
+    defaultValue,
+    initialValue,
+    isEqual: isEqual2,
+    validate: validate3
+  }), fields = _useFieldArray.fields, meta = _useFieldArray.meta;
+  return renderComponent(_extends$f({
+    fields,
+    meta: _extends$f({}, meta, {
+      __versions: versions
+    })
+  }, rest), "FieldArray(" + name + ")");
+};
+function AddFont() {
+  const { focusBlock: focusBlock2 } = useBlock();
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  const value = focusBlock2 == null ? void 0 : focusBlock2.data.value;
+  return /* @__PURE__ */ React__default.createElement(FieldArray, {
+    name: `${focusIdx2}.data.value.fonts`,
+    render: (arrayHelpers) => {
+      var _a;
+      return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Stack$6, {
+        vertical: true,
+        spacing: "tight"
+      }, /* @__PURE__ */ React__default.createElement(Stack$6, {
+        distribution: "equalSpacing"
+      }, /* @__PURE__ */ React__default.createElement(TextStyle, {
+        variation: "strong"
+      }, "Import font ", /* @__PURE__ */ React__default.createElement(Help, {
+        title: "Points to a hosted css file"
+      })), /* @__PURE__ */ React__default.createElement(Stack$6, null, /* @__PURE__ */ React__default.createElement(Button$4, {
+        size: "small",
+        icon: /* @__PURE__ */ React__default.createElement(IconPlus$1, null),
+        onClick: () => arrayHelpers.fields.push({ name: "", href: "" })
+      }))), /* @__PURE__ */ React__default.createElement(Stack$6, {
+        vertical: true,
+        spacing: "extraTight"
+      }, (_a = value.fonts) == null ? void 0 : _a.map((item2, index2) => {
+        return /* @__PURE__ */ React__default.createElement("div", {
+          key: index2
+        }, /* @__PURE__ */ React__default.createElement(Stack$6, {
+          alignment: "center",
+          wrap: false
+        }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+          fill: true
+        }, /* @__PURE__ */ React__default.createElement(TextField, {
+          inline: true,
+          name: `${focusIdx2}.data.value.fonts.${index2}.name`,
+          label: "Name"
+        })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+          fill: true
+        }, /* @__PURE__ */ React__default.createElement(TextField, {
+          inline: true,
+          name: `${focusIdx2}.data.value.fonts.${index2}.href`,
+          label: "Href"
+        })), /* @__PURE__ */ React__default.createElement(Button$4, {
+          icon: /* @__PURE__ */ React__default.createElement(IconDelete$1, null),
+          onClick: () => arrayHelpers.fields.remove(index2)
+        })));
+      }))));
+    }
+  });
+}
+const MergeTags = React__default.memo((props) => {
+  const { mergeTags = {}, mergeTagGenerate } = useEditorProps();
   const treeOptions = useMemo(() => {
     const treeData = [];
     const deep = (key, title2, parent2, mapData = []) => {
       const currentMapData = {
-        key: `{{${key}}}`,
-        value: `{{${key}}}`,
+        key: mergeTagGenerate(key),
+        value: mergeTagGenerate(key),
         title: title2,
         children: []
       };
@@ -38764,7 +38954,7 @@ const MergeTags$1 = React__default.memo((props) => {
     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 },
     selectedKeys: [],
@@ -38772,1700 +38962,623 @@ const MergeTags$1 = React__default.memo((props) => {
     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 AttributesPanelWrapper = (props) => {
+  const { focusBlock: focusBlock2, setFocusBlock } = useBlock();
   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 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"
+      border: "1px solid var(--color-neutral-3, rgb(229, 230, 235))",
+      borderBottom: "none",
+      padding: "12px 24px"
     }
-  }, /* @__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"
-  })));
+  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
+    vertical: true
+  }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+    fill: true
+  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
+    wrap: false,
+    distribution: "equalSpacing",
+    alignment: "center"
+  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
+    spacing: "extraTight",
+    alignment: "center"
+  }, /* @__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,
+    onChange: onChangeHidden,
+    value: String(focusBlock2.data.hidden)
+  })))), /* @__PURE__ */ React__default.createElement("div", {
+    style: __spreadValues({ padding: "0px" }, props.style)
+  }, props.children));
+};
+function EyeIcon() {
+  const { setFocusBlock, focusBlock: focusBlock2 } = useBlock();
+  const onToggleVisible = useCallback((e) => {
+    if (!focusBlock2)
+      return null;
+    e.stopPropagation();
+    setFocusBlock(__spreadProps(__spreadValues({}, focusBlock2), {
+      data: __spreadProps(__spreadValues({}, focusBlock2.data), {
+        hidden: !focusBlock2.data.hidden
+      })
+    }));
+  }, [focusBlock2, setFocusBlock]);
+  if (!focusBlock2)
+    return null;
+  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
+  });
 }
-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();
+function FontFamily() {
+  const { fontList: fontList2 = [] } = useEditorProps();
   const { focusIdx: focusIdx2 } = useFocusIdx();
-  const pageWidth = +(pageData2.attributes.width || "600").replace("px", "");
-  useEffect(() => {
-    const promiseObj = awaitForElement(focusIdx2);
-    promiseObj.promise.then((blockNode2) => {
-      setBlockNode(blockNode2);
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(AutoCompleteField, {
+      style: { minWidth: 100, flex: 1 },
+      showSearch: true,
+      label: "Font family",
+      name: `${focusIdx2}.attributes.font-family`,
+      options: fontList2
     });
-    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));
+  }, [focusIdx2, fontList2]);
 }
-const RichTextField = (props) => {
-  const { focusBlock: focusBlock2 } = useBlock();
+function Page() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
-  if ((focusBlock2 == null ? void 0 : focusBlock2.type) !== BasicType.TEXT)
+  if (!focusIdx2)
     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)
+  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, {
+    style: { padding: 0 }
+  }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+    fill: true
+  }, /* @__PURE__ */ React__default.createElement(Collapse$1, {
+    defaultActiveKey: ["0", "1"]
+  }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "0",
+    header: "Email Setting"
   }, /* @__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
-  };
+    vertical: true,
+    spacing: "tight"
+  }, /* @__PURE__ */ React__default.createElement(TextField, {
+    label: "Subject",
+    name: "subject",
+    inline: true
+  }), /* @__PURE__ */ React__default.createElement(TextField, {
+    label: "SubTitle",
+    name: "subTitle",
+    inline: true
+  }), /* @__PURE__ */ React__default.createElement(TextField, {
+    label: "Width",
+    name: `${focusIdx2}.attributes.width`,
+    inline: true
+  }), /* @__PURE__ */ React__default.createElement(Stack$6, {
+    alignment: "center"
+  }, /* @__PURE__ */ React__default.createElement(TextField, {
+    label: /* @__PURE__ */ React__default.createElement(Stack$6, {
+      spacing: "extraTight"
+    }, /* @__PURE__ */ React__default.createElement(TextStyle, null, "Breakpoint"), /* @__PURE__ */ React__default.createElement(Help, {
+      title: "Allows you to control on which breakpoint the layout should go desktop/mobile."
+    })),
+    quickchange: true,
+    name: `${focusIdx2}.data.value.breakpoint`,
+    inline: true
+  })), /* @__PURE__ */ React__default.createElement(SwitchField, {
+    inline: true,
+    label: "Responsive",
+    name: `${focusIdx2}.data.value.responsive`,
+    checkedText: "True",
+    uncheckedText: "False"
+  }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "1",
+    header: "Theme Setting"
+  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
+    vertical: true,
+    spacing: "tight"
+  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
+    wrap: false
+  }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+    fill: true
+  }, /* @__PURE__ */ React__default.createElement(FontFamily, null)), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+    fill: true
+  }, /* @__PURE__ */ React__default.createElement(TextField, {
+    label: "Font size",
+    quickchange: true,
+    name: `${focusIdx2}.data.value.font-size`
+  }))), /* @__PURE__ */ React__default.createElement(Stack$6, {
+    wrap: false
+  }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+    fill: true
+  }, /* @__PURE__ */ React__default.createElement(ColorPickerField, {
+    label: "Text color",
+    name: `${focusIdx2}.data.value.text-color`
+  })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+    fill: true
+  }, /* @__PURE__ */ React__default.createElement(TextField, {
+    label: "Line height",
+    quickchange: true,
+    name: `${focusIdx2}.data.value.line-height`
+  }))), /* @__PURE__ */ React__default.createElement(Stack$6, {
+    wrap: false
+  }, /* @__PURE__ */ React__default.createElement(ColorPickerField, {
+    label: "Background color",
+    name: `${focusIdx2}.attributes.background-color`
+  }), /* @__PURE__ */ React__default.createElement(ColorPickerField, {
+    label: "Content background color",
+    name: `${focusIdx2}.data.value.content-background-color`
+  })), /* @__PURE__ */ React__default.createElement(TextAreaField, {
+    label: "User style",
+    name: `${focusIdx2}.data.value.user-style.content`
+  }), /* @__PURE__ */ React__default.createElement(AddFont, null))))));
 }
-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: {
+function Padding(props = {}) {
+  const { title: title2 = "Padding", attributeName = "padding" } = props;
+  const { focusBlock: focusBlock2, change } = useBlock();
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  const type = focusBlock2 && focusBlock2.type;
+  const defaultConfig = useMemo(() => type ? createBlockDataByType(type) : void 0, [type]);
+  const paddingValue = focusBlock2 == null ? void 0 : focusBlock2.attributes[attributeName];
+  const defaultPaddingValue = defaultConfig == null ? void 0 : defaultConfig.attributes[attributeName];
+  const paddingList = paddingValue == null ? void 0 : paddingValue.split(" ");
+  const defaultPaddingList = defaultPaddingValue == null ? void 0 : defaultPaddingValue.split(" ");
+  const paddingFormValues = useMemo(() => {
+    const paddingList2 = paddingValue == null ? void 0 : paddingValue.split(" ");
+    const defaultPaddingList2 = defaultPaddingValue == null ? void 0 : defaultPaddingValue.split(" ");
+    const top = paddingList2 ? paddingList2[0] : (defaultPaddingList2 == null ? void 0 : defaultPaddingList2[0]) || "";
+    const right = paddingList2 ? paddingList2[1] : (defaultPaddingList2 == null ? void 0 : defaultPaddingList2[1]) || "";
+    const bottom = paddingList2 ? paddingList2[2] : (defaultPaddingList2 == null ? void 0 : defaultPaddingList2[2]) || "";
+    const left = paddingList2 ? paddingList2[3] : (defaultPaddingList2 == null ? void 0 : defaultPaddingList2[3]) || "";
+    return {
+      top,
       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);
+      bottom,
+      right
+    };
+  }, [paddingList, defaultPaddingList, defaultPaddingValue, paddingValue]);
+  const onChancePadding = useCallback((val) => {
+    change(focusIdx2 + `.attributes[${attributeName}]`, val);
+  }, [focusIdx2, attributeName, change]);
+  return /* @__PURE__ */ React__default.createElement(Form$3, {
+    initialValues: paddingFormValues,
+    subscription: { submitting: true, pristine: true },
+    enableReinitialize: true,
+    onSubmit: () => {
     }
-  }), modal);
+  }, () => {
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Stack$6, {
+      vertical: true,
+      spacing: "extraTight"
+    }, /* @__PURE__ */ React__default.createElement(TextStyle, {
+      variation: "strong"
+    }, title2), /* @__PURE__ */ React__default.createElement(Stack$6, {
+      wrap: false
+    }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+      fill: true
+    }, /* @__PURE__ */ React__default.createElement(TextField, {
+      label: /* @__PURE__ */ React__default.createElement("span", null, "Top\xA0"),
+      quickchange: true,
+      name: "top",
+      inline: true
+    })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+      fill: true
+    }, /* @__PURE__ */ React__default.createElement(TextField, {
+      label: "Bottom",
+      quickchange: true,
+      name: "bottom",
+      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: /* @__PURE__ */ React__default.createElement("span", null, "Left"),
+      quickchange: true,
+      name: "left",
+      inline: true
+    })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+      fill: true
+    }, /* @__PURE__ */ React__default.createElement(TextField, {
+      label: /* @__PURE__ */ React__default.createElement("span", null, "Right\xA0"),
+      quickchange: true,
+      name: "right",
+      inline: true
+    })))), /* @__PURE__ */ React__default.createElement(PaddingChangeWrapper, {
+      onChange: onChancePadding
+    }));
+  });
 }
-function useAvatarWrapperDrop() {
-  const [blockLayerRef, setBlockLayerRef] = useState(null);
-  const { setHoverIdx, setDirection } = useHoverIdx();
-  const { dataTransfer, setDataTransfer } = useDataTransfer();
+const PaddingChangeWrapper = (props) => {
   const {
-    formState: { values: values2 }
-  } = useEditorContext();
-  const valuesRef = useRef(values2);
-  const dataTransferRef = useRef(dataTransfer);
-  useEffect(() => {
-    valuesRef.current = values2;
-  }, [values2]);
+    values: { top, right, bottom, left }
+  } = useFormState();
   useEffect(() => {
-    dataTransferRef.current = dataTransfer;
-  }, [dataTransfer]);
-  function isKeyObject(o) {
-    return o.key !== void 0;
+    props.onChange([top, right, bottom, left].join(" "));
+  }, [top, right, bottom, left]);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
+};
+function BackgroundColor({
+  title: title2 = "Background color"
+}) {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(ColorPickerField, {
+      label: title2,
+      name: `${focusIdx2}.attributes.background-color`,
+      inline: true,
+      alignment: "center"
+    });
+  }, [focusIdx2, title2]);
+}
+const backgroundRepeatOptions = [
+  {
+    value: "no-repeat",
+    label: "No repeat"
+  },
+  {
+    value: "repeat",
+    label: "Repeat"
+  },
+  {
+    value: "repeat-x",
+    label: "Repeat X"
+  },
+  {
+    value: "repeat-y",
+    label: "Repeat Y"
   }
-  const removeHightLightClassName = useCallback(() => {
-    if (!blockLayerRef)
+];
+function Background() {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  const { onUploadImage } = useEditorProps();
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(Stack$6, {
+      key: focusIdx2,
+      vertical: true,
+      spacing: "extraTight"
+    }, /* @__PURE__ */ React__default.createElement(ImageUploaderField, {
+      label: "Background image",
+      name: `${focusIdx2}.attributes.background-url`,
+      helpText: "The image suffix should be .jpg, jpeg, png, gif, etc. Otherwise, the picture may not be displayed normally.",
+      uploadHandler: onUploadImage
+    }), /* @__PURE__ */ React__default.createElement(BackgroundColor, null), /* @__PURE__ */ React__default.createElement(Stack$6, {
+      wrap: false
+    }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+      fill: true
+    }, /* @__PURE__ */ React__default.createElement(TextField, {
+      label: "Background size",
+      name: `${focusIdx2}.attributes.background-size`
+    })), /* @__PURE__ */ React__default.createElement(SelectField, {
+      label: "Background repeat",
+      name: `${focusIdx2}.attributes.background-repeat`,
+      options: backgroundRepeatOptions
+    })));
+  }, [focusIdx2, onUploadImage]);
+}
+function Border() {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(Stack$6, {
+      vertical: true,
+      spacing: "tight"
+    }, /* @__PURE__ */ React__default.createElement(TextField, {
+      label: "Border",
+      name: `${focusIdx2}.attributes.border`,
+      inline: true
+    }), /* @__PURE__ */ React__default.createElement(TextField, {
+      label: "Border radius",
+      name: `${focusIdx2}.attributes.border-radius`,
+      inline: true
+    }));
+  }, [focusIdx2]);
+}
+function Section() {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  const { focusBlock: focusBlock2, setFocusBlock } = useBlock();
+  const noWrap = focusBlock2 == null ? void 0 : focusBlock2.data.value.noWrap;
+  const changeNoWrap = useCallback((noWrap2) => {
+    var _a;
+    if (!focusBlock2)
       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
-        };
+    if (noWrap2) {
+      const children = [...focusBlock2.children];
+      for (let i2 = 0; i2 < children.length; i2++) {
+        const child = children[i2];
+        if (!child)
+          continue;
+        if (child.type === BasicType.GROUP) {
+          children.splice(i2, 1, ...child.children);
+        }
       }
+      focusBlock2.children = [
+        BlockManager.getBlockByType(BasicType.GROUP).create({
+          children
+        })
+      ];
     } else {
-      if (dropNode.parent && dragBlock.validParentType.includes(dropNode.parent.type)) {
-        return {
-          position: dropPosition,
-          key: dropNode.key
-        };
+      if (focusBlock2.children.length === 1 && focusBlock2.children[0].type === BasicType.GROUP) {
+        focusBlock2.children = ((_a = focusBlock2.children[0]) == null ? void 0 : _a.children) || [];
       }
     }
-    setDirection("");
-    setHoverIdx("");
-    return false;
-  }, [setDirection, setHoverIdx, removeHightLightClassName]);
+    setFocusBlock(__spreadValues({}, focusBlock2));
+  }, [focusBlock2, setFocusBlock]);
   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 "";
+    changeNoWrap(noWrap);
+  }, [noWrap]);
+  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, {
+    style: { padding: 0 }
+  }, /* @__PURE__ */ React__default.createElement(Collapse$1, {
+    defaultActiveKey: ["0", "1", "2"]
+  }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "0",
+    header: "Dimension"
+  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
+    vertical: true
+  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
+    vertical: true,
+    spacing: "none"
+  }, /* @__PURE__ */ React__default.createElement(TextStyle, {
+    variation: "strong"
+  }, "Group"), /* @__PURE__ */ React__default.createElement(Stack$6, {
+    wrap: false,
+    alignment: "trailing"
+  }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+    fill: true
+  }, /* @__PURE__ */ React__default.createElement(TextStyle, null, "Prevent columns from stacking on mobile.")), /* @__PURE__ */ React__default.createElement(SwitchField, {
+    label: "",
+    labelHidden: true,
+    name: `${focusIdx2}.data.value.noWrap`,
+    checkedText: "True",
+    uncheckedText: "False",
+    inline: true
+  }))), /* @__PURE__ */ React__default.createElement(Padding, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "1",
+    header: "Background"
+  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
+    vertical: true,
+    spacing: "tight"
+  }, /* @__PURE__ */ React__default.createElement(Background, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "2",
+    header: "Border"
+  }, /* @__PURE__ */ React__default.createElement(Border, null))));
 }
-function BlockLayer() {
-  const {
-    pageData: pageData2,
-    formState: { values: values2 }
-  } = useEditorContext();
-  const { onUploadImage, onAddCollection } = useEditorProps();
-  const { focusIdx: focusIdx2, setFocusIdx } = useFocusIdx();
-  const { setHoverIdx, setIsDragging, setDirection } = useHoverIdx();
-  const { moveBlock, setValueByIdx: setValueByIdx2, copyBlock, removeBlock } = useBlock();
-  const {
-    setBlockLayerRef,
-    allowDrop,
-    blockLayerRef,
-    removeHightLightClassName
-  } = useAvatarWrapperDrop();
-  const [contextMenuData, setContextMenuData] = useState(null);
-  const onToggleVisible = useCallback(({ id }, e) => {
-    e.stopPropagation();
-    const blockData = lodash.exports.get(values2, id);
-    if (blockData) {
-      blockData.data.hidden = !Boolean(blockData.data.hidden);
-      setValueByIdx2(id, blockData);
-    }
-  }, [setValueByIdx2, values2]);
-  const renderTitle = useCallback((data) => {
-    const block2 = BlockManager.getBlockByType(data.type);
-    const isPage = data.type === BasicType.PAGE;
-    return /* @__PURE__ */ React__default.createElement("div", {
-      "data-tree-idx": data.id,
-      className: classnames(styles$6.title, !isPage && getNodeIdxClassName(data.id), !isPage && "email-block")
-    }, /* @__PURE__ */ React__default.createElement(TextStyle, {
-      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);
+function Width({ inline = false }) {
+  var _a;
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  const { focusBlock: focusBlock2, values: values2 } = useBlock();
+  const parentType = (_a = getParentByIdx(values2, focusIdx2)) == null ? void 0 : _a.type;
+  const validate3 = useCallback((val) => {
+    if ((focusBlock2 == null ? void 0 : focusBlock2.type) === BasicType.COLUMN && parentType === BasicType.GROUP) {
+      return /(\d)*%/.test(val) ? void 0 : "Column inside a group must have a width in percentage, not in pixel";
     }
-    return dropResult;
-  }, [allowDrop]);
-  const hasFocus = Boolean(focusIdx2);
+    return void 0;
+  }, [focusBlock2 == null ? void 0 : focusBlock2.type, parentType]);
   return useMemo(() => {
-    if (!hasFocus)
-      return null;
-    return /* @__PURE__ */ React__default.createElement("div", __spreadValues({
-      ref: setBlockLayerRef,
-      id: "BlockLayerManager"
-    }, {
-      [DATA_ATTRIBUTE_DROP_CONTAINER]: "true"
-    }), /* @__PURE__ */ React__default.createElement(BlockTree, {
-      selectedId: focusIdx2,
-      defaultExpandAll: true,
-      treeData,
-      renderTitle,
-      allowDrop: blockTreeAllowDrop,
-      onContextMenu,
-      onDrop,
-      onDragStart,
-      onDragEnd,
-      onSelect,
-      onMouseEnter,
-      onMouseLeave
-    }), contextMenuData && /* @__PURE__ */ React__default.createElement(ContextMenu, {
-      onClose: onCloseContextMenu,
-      moveBlock,
-      copyBlock,
-      removeBlock,
-      contextMenuData
-    }));
-  }, [
-    hasFocus,
-    focusIdx2,
-    treeData,
-    renderTitle,
-    allowDrop,
-    onContextMenu,
-    onDrop,
-    onSelect,
-    onMouseEnter,
-    onMouseLeave,
-    contextMenuData,
-    onCloseContextMenu,
-    onUploadImage,
-    onAddCollection,
-    moveBlock,
-    copyBlock,
-    removeBlock,
-    onDragEnd,
-    onDragStart
-  ]);
-}
-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
-  })));
+    return /* @__PURE__ */ React__default.createElement(Stack$6, {
+      wrap: false
+    }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+      fill: true
+    }, /* @__PURE__ */ React__default.createElement(TextField, {
+      validate: validate3,
+      label: "Width",
+      inline,
+      name: `${focusIdx2}.attributes.width`,
+      quickchange: true
+    })));
+  }, [focusIdx2, inline, validate3]);
 }
-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
-    }));
+const options$a = [
+  {
+    value: "top",
+    label: "top"
+  },
+  {
+    value: "middle",
+    label: "middle"
+  },
+  {
+    value: "bottom",
+    label: "bottom"
   }
-  if (render3) {
-    return render3(children === void 0 ? rest : _extends$f({}, rest, {
-      children
+];
+function VerticalAlign({
+  attributeName = "vertical-align"
+}) {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(Stack$6, null, /* @__PURE__ */ React__default.createElement(SelectField, {
+      style: { width: 120 },
+      label: "Vertical align",
+      name: `${focusIdx2}.attributes.${attributeName}`,
+      options: options$a
     }));
-  }
-  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);
+  }, [attributeName, focusIdx2]);
 }
-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;
+function Column() {
+  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(Collapse$1, {
+    defaultActiveKey: ["0", "1", "2"]
+  }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "0",
+    header: "Dimension"
+  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
+    vertical: true,
+    spacing: "tight"
+  }, /* @__PURE__ */ React__default.createElement(Padding, null), /* @__PURE__ */ React__default.createElement(Stack$6, {
+    wrap: false
+  }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+    fill: true
+  }, /* @__PURE__ */ React__default.createElement(Width, null)), /* @__PURE__ */ React__default.createElement(VerticalAlign, null)))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "1",
+    header: "Background"
+  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
+    vertical: true,
+    spacing: "tight"
+  }, /* @__PURE__ */ React__default.createElement(Background, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "2",
+    header: "Border"
+  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
+    vertical: true,
+    spacing: "tight"
+  }, /* @__PURE__ */ React__default.createElement(Border, null)))));
 }
-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");
+const options$9 = [
+  {
+    value: "",
+    label: "None"
+  },
+  {
+    value: "underline",
+    label: "Underline"
+  },
+  {
+    value: "overline",
+    label: "Overline"
+  },
+  {
+    value: "line-through",
+    label: "Line through"
+  },
+  {
+    value: "blink",
+    label: "Blink"
+  },
+  {
+    value: "inherit",
+    label: "Inherit"
   }
-  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();
+];
+function TextDecoration() {
   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 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", null, /* @__PURE__ */ React__default.createElement("div", {
-    style: {
-      border: "1px solid var(--color-neutral-3, rgb(229, 230, 235))",
-      borderBottom: "none",
-      padding: "12px 24px"
-    }
-  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
-    vertical: true
-  }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-    fill: true
-  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
-    wrap: false,
-    distribution: "equalSpacing",
-    alignment: "center"
-  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
-    spacing: "extraTight",
-    alignment: "center"
-  }, /* @__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,
-    onChange: onChangeHidden,
-    value: String(focusBlock2.data.hidden)
-  })))), /* @__PURE__ */ React__default.createElement("div", {
-    style: __spreadValues({ padding: "0px" }, props.style)
-  }, props.children));
-};
-function EyeIcon() {
-  const { setFocusBlock, focusBlock: focusBlock2 } = useBlock();
-  const onToggleVisible = useCallback((e) => {
-    if (!focusBlock2)
-      return null;
-    e.stopPropagation();
-    setFocusBlock(__spreadProps(__spreadValues({}, focusBlock2), {
-      data: __spreadProps(__spreadValues({}, focusBlock2.data), {
-        hidden: !focusBlock2.data.hidden
-      })
-    }));
-  }, [focusBlock2, setFocusBlock]);
-  if (!focusBlock2)
-    return null;
-  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
-  });
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(SelectField, {
+      label: "Text decoration",
+      name: `${focusIdx2}.attributes.text-decoration`,
+      options: options$9
+    });
+  }, [focusIdx2]);
 }
-function FontFamily() {
-  const { fontList: fontList2 = [] } = useEditorProps();
+const options$8 = [
+  {
+    value: "normal",
+    label: "Normal"
+  },
+  {
+    value: "bold",
+    label: "Bold"
+  },
+  {
+    value: "100",
+    label: "100"
+  },
+  {
+    value: "200",
+    label: "200"
+  },
+  {
+    value: "300",
+    label: "300"
+  },
+  {
+    value: "400",
+    label: "400"
+  },
+  {
+    value: "500",
+    label: "500"
+  },
+  {
+    value: "600",
+    label: "600"
+  },
+  {
+    value: "700",
+    label: "700"
+  },
+  {
+    value: "800",
+    label: "800"
+  },
+  {
+    value: "900",
+    label: "900"
+  }
+];
+function FontWeight() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(AutoCompleteField, {
-      style: { minWidth: 100, flex: 1 },
-      showSearch: true,
-      label: "Font family",
-      name: `${focusIdx2}.attributes.font-family`,
-      options: fontList2
+    return /* @__PURE__ */ React__default.createElement(SelectField, {
+      label: "Font weight",
+      name: `${focusIdx2}.attributes.font-weight`,
+      options: options$8
     });
-  }, [focusIdx2, fontList2]);
+  }, [focusIdx2]);
 }
-function Page() {
+const options$7 = [
+  {
+    value: "normal",
+    label: "Normal"
+  },
+  {
+    value: "italic",
+    label: "Italic"
+  }
+];
+function FontStyle({ inline = true }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
-  if (!focusIdx2)
-    return null;
-  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, {
-    style: { padding: 0 }
-  }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-    fill: true
-  }, /* @__PURE__ */ React__default.createElement(Collapse$1, {
-    defaultActiveKey: ["0", "1"]
-  }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "0",
-    header: "Email Setting"
-  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
-    vertical: true,
-    spacing: "tight"
-  }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Subject",
-    name: "subject",
-    inline: true
-  }), /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "SubTitle",
-    name: "subTitle",
-    inline: true
-  }), /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Width",
-    name: `${focusIdx2}.attributes.width`,
-    inline: true
-  }), /* @__PURE__ */ React__default.createElement(Stack$6, {
-    alignment: "center"
-  }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: /* @__PURE__ */ React__default.createElement(Stack$6, {
-      spacing: "extraTight"
-    }, /* @__PURE__ */ React__default.createElement(TextStyle, null, "Breakpoint"), /* @__PURE__ */ React__default.createElement(Help, {
-      title: "Allows you to control on which breakpoint the layout should go desktop/mobile."
-    })),
-    quickchange: true,
-    name: `${focusIdx2}.data.value.breakpoint`,
-    inline: true
-  })), /* @__PURE__ */ React__default.createElement(SwitchField, {
-    inline: true,
-    label: "Responsive",
-    name: `${focusIdx2}.data.value.responsive`,
-    checkedText: "True",
-    uncheckedText: "False"
-  }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "1",
-    header: "Theme Setting"
-  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
-    vertical: true,
-    spacing: "tight"
-  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
-    wrap: false
-  }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-    fill: true
-  }, /* @__PURE__ */ React__default.createElement(FontFamily, null)), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-    fill: true
-  }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Font size",
-    quickchange: true,
-    name: `${focusIdx2}.data.value.font-size`
-  }))), /* @__PURE__ */ React__default.createElement(Stack$6, {
-    wrap: false
-  }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-    fill: true
-  }, /* @__PURE__ */ React__default.createElement(ColorPickerField, {
-    label: "Text color",
-    name: `${focusIdx2}.data.value.text-color`
-  })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-    fill: true
-  }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: "Line height",
-    quickchange: true,
-    name: `${focusIdx2}.data.value.line-height`
-  }))), /* @__PURE__ */ React__default.createElement(Stack$6, {
-    wrap: false
-  }, /* @__PURE__ */ React__default.createElement(ColorPickerField, {
-    label: "Background color",
-    name: `${focusIdx2}.attributes.background-color`
-  }), /* @__PURE__ */ React__default.createElement(ColorPickerField, {
-    label: "Content background color",
-    name: `${focusIdx2}.data.value.content-background-color`
-  })), /* @__PURE__ */ React__default.createElement(TextAreaField, {
-    label: "User style",
-    name: `${focusIdx2}.data.value.user-style.content`
-  }), /* @__PURE__ */ React__default.createElement(AddFont, null))))));
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(RadioGroupField, {
+      label: "Font style",
+      name: `${focusIdx2}.attributes.font-style`,
+      options: options$7,
+      inline
+    });
+  }, [focusIdx2, inline]);
 }
-function Padding(props = {}) {
-  const { title: title2 = "Padding", attributeName = "padding" } = props;
-  const { focusBlock: focusBlock2, change } = useBlock();
+function Height({ inline }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
-  const type = focusBlock2 && focusBlock2.type;
-  const defaultConfig = useMemo(() => type ? createBlockDataByType(type) : void 0, [type]);
-  const paddingValue = focusBlock2 == null ? void 0 : focusBlock2.attributes[attributeName];
-  const defaultPaddingValue = defaultConfig == null ? void 0 : defaultConfig.attributes[attributeName];
-  const paddingList = paddingValue == null ? void 0 : paddingValue.split(" ");
-  const defaultPaddingList = defaultPaddingValue == null ? void 0 : defaultPaddingValue.split(" ");
-  const paddingFormValues = useMemo(() => {
-    const paddingList2 = paddingValue == null ? void 0 : paddingValue.split(" ");
-    const defaultPaddingList2 = defaultPaddingValue == null ? void 0 : defaultPaddingValue.split(" ");
-    const top = paddingList2 ? paddingList2[0] : (defaultPaddingList2 == null ? void 0 : defaultPaddingList2[0]) || "";
-    const right = paddingList2 ? paddingList2[1] : (defaultPaddingList2 == null ? void 0 : defaultPaddingList2[1]) || "";
-    const bottom = paddingList2 ? paddingList2[2] : (defaultPaddingList2 == null ? void 0 : defaultPaddingList2[2]) || "";
-    const left = paddingList2 ? paddingList2[3] : (defaultPaddingList2 == null ? void 0 : defaultPaddingList2[3]) || "";
-    return {
-      top,
-      left,
-      bottom,
-      right
-    };
-  }, [paddingList, defaultPaddingList, defaultPaddingValue, paddingValue]);
-  const onChancePadding = useCallback((val) => {
-    change(focusIdx2 + `.attributes[${attributeName}]`, val);
-  }, [focusIdx2, attributeName, change]);
-  return /* @__PURE__ */ React__default.createElement(Form$3, {
-    initialValues: paddingFormValues,
-    subscription: { submitting: true, pristine: true },
-    enableReinitialize: true,
-    onSubmit: () => {
-    }
-  }, () => {
-    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Stack$6, {
-      vertical: true,
-      spacing: "extraTight"
-    }, /* @__PURE__ */ React__default.createElement(TextStyle, {
-      variation: "strong"
-    }, title2), /* @__PURE__ */ React__default.createElement(Stack$6, {
-      wrap: false
-    }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: true
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: /* @__PURE__ */ React__default.createElement("span", null, "Top\xA0"),
-      quickchange: true,
-      name: "top",
-      inline: true
-    })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: true
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Bottom",
-      quickchange: true,
-      name: "bottom",
-      inline: true
-    }))), /* @__PURE__ */ React__default.createElement(Stack$6, {
+  return useMemo(() => {
+    return /* @__PURE__ */ React__default.createElement(Stack$6, {
       wrap: false
     }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
       fill: true
     }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: /* @__PURE__ */ React__default.createElement("span", null, "Left"),
-      quickchange: true,
-      name: "left",
-      inline: true
-    })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: true
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: /* @__PURE__ */ React__default.createElement("span", null, "Right\xA0"),
+      label: "Height",
+      name: `${focusIdx2}.attributes.height`,
       quickchange: true,
-      name: "right",
-      inline: true
-    })))), /* @__PURE__ */ React__default.createElement(PaddingChangeWrapper, {
-      onChange: onChancePadding
-    }));
-  });
+      inline
+    })));
+  }, [focusIdx2, inline]);
 }
-const PaddingChangeWrapper = (props) => {
-  const {
-    values: { top, right, bottom, left }
-  } = useFormState();
-  useEffect(() => {
-    props.onChange([top, right, bottom, left].join(" "));
-  }, [top, right, bottom, left]);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
-};
-function BackgroundColor({
-  title: title2 = "Background color"
+function ContainerBackgroundColor({
+  title: title2 = "Container background color"
 }) {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return useMemo(() => {
     return /* @__PURE__ */ React__default.createElement(ColorPickerField, {
       label: title2,
-      name: `${focusIdx2}.attributes.background-color`,
+      name: `${focusIdx2}.attributes.container-background-color`,
       inline: true,
       alignment: "center"
     });
   }, [focusIdx2, title2]);
 }
-const backgroundRepeatOptions = [
-  {
-    value: "no-repeat",
-    label: "No repeat"
-  },
-  {
-    value: "repeat",
-    label: "Repeat"
-  },
-  {
-    value: "repeat-x",
-    label: "Repeat X"
-  },
-  {
-    value: "repeat-y",
-    label: "Repeat Y"
-  }
-];
-function Background() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  const { onUploadImage } = useEditorProps();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(Stack$6, {
-      key: focusIdx2,
-      vertical: true,
-      spacing: "extraTight"
-    }, /* @__PURE__ */ React__default.createElement(ImageUploaderField, {
-      label: "Background image",
-      name: `${focusIdx2}.attributes.background-url`,
-      helpText: "The image suffix should be .jpg, jpeg, png, gif, etc. Otherwise, the picture may not be displayed normally.",
-      uploadHandler: onUploadImage
-    }), /* @__PURE__ */ React__default.createElement(BackgroundColor, null), /* @__PURE__ */ React__default.createElement(Stack$6, {
-      wrap: false
-    }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: true
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Background size",
-      name: `${focusIdx2}.attributes.background-size`
-    })), /* @__PURE__ */ React__default.createElement(SelectField, {
-      label: "Background repeat",
-      name: `${focusIdx2}.attributes.background-repeat`,
-      options: backgroundRepeatOptions
-    })));
-  }, [focusIdx2, onUploadImage]);
-}
-function Border() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(Stack$6, {
-      vertical: true,
-      spacing: "tight"
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Border",
-      name: `${focusIdx2}.attributes.border`,
-      inline: true
-    }), /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Border radius",
-      name: `${focusIdx2}.attributes.border-radius`,
-      inline: true
-    }));
-  }, [focusIdx2]);
-}
-function Section() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  const { focusBlock: focusBlock2, setFocusBlock } = useBlock();
-  const noWrap = focusBlock2 == null ? void 0 : focusBlock2.data.value.noWrap;
-  const changeNoWrap = useCallback((noWrap2) => {
-    var _a;
-    if (!focusBlock2)
-      return;
-    if (noWrap2) {
-      const children = [...focusBlock2.children];
-      for (let i2 = 0; i2 < children.length; i2++) {
-        const child = children[i2];
-        if (!child)
-          continue;
-        if (child.type === BasicType.GROUP) {
-          children.splice(i2, 1, ...child.children);
-        }
-      }
-      focusBlock2.children = [
-        BlockManager.getBlockByType(BasicType.GROUP).create({
-          children
-        })
-      ];
-    } else {
-      if (focusBlock2.children.length === 1 && focusBlock2.children[0].type === BasicType.GROUP) {
-        focusBlock2.children = ((_a = focusBlock2.children[0]) == null ? void 0 : _a.children) || [];
-      }
-    }
-    setFocusBlock(__spreadValues({}, focusBlock2));
-  }, [focusBlock2, setFocusBlock]);
-  useEffect(() => {
-    changeNoWrap(noWrap);
-  }, [noWrap]);
-  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, {
-    style: { padding: 0 }
-  }, /* @__PURE__ */ React__default.createElement(Collapse$1, {
-    defaultActiveKey: ["0", "1", "2"]
-  }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "0",
-    header: "Dimension"
-  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
-    vertical: true
-  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
-    vertical: true,
-    spacing: "none"
-  }, /* @__PURE__ */ React__default.createElement(TextStyle, {
-    variation: "strong"
-  }, "Group"), /* @__PURE__ */ React__default.createElement(Stack$6, {
-    wrap: false,
-    alignment: "trailing"
-  }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-    fill: true
-  }, /* @__PURE__ */ React__default.createElement(TextStyle, null, "Prevent columns from stacking on mobile.")), /* @__PURE__ */ React__default.createElement(SwitchField, {
-    label: "",
-    labelHidden: true,
-    name: `${focusIdx2}.data.value.noWrap`,
-    checkedText: "True",
-    uncheckedText: "False",
-    inline: true
-  }))), /* @__PURE__ */ React__default.createElement(Padding, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "1",
-    header: "Background"
-  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
-    vertical: true,
-    spacing: "tight"
-  }, /* @__PURE__ */ React__default.createElement(Background, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "2",
-    header: "Border"
-  }, /* @__PURE__ */ React__default.createElement(Border, null))));
-}
-function Width({ inline = false }) {
-  var _a;
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  const { focusBlock: focusBlock2, values: values2 } = useBlock();
-  const parentType = (_a = getParentByIdx(values2, focusIdx2)) == null ? void 0 : _a.type;
-  const validate3 = useCallback((val) => {
-    if ((focusBlock2 == null ? void 0 : focusBlock2.type) === BasicType.COLUMN && parentType === BasicType.GROUP) {
-      return /(\d)*%/.test(val) ? void 0 : "Column inside a group must have a width in percentage, not in pixel";
-    }
-    return void 0;
-  }, [focusBlock2 == null ? void 0 : focusBlock2.type, parentType]);
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(Stack$6, {
-      wrap: false
-    }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: true
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      validate: validate3,
-      label: "Width",
-      inline,
-      name: `${focusIdx2}.attributes.width`,
-      quickchange: true
-    })));
-  }, [focusIdx2, inline, validate3]);
-}
-const options$a = [
-  {
-    value: "top",
-    label: "top"
-  },
-  {
-    value: "middle",
-    label: "middle"
-  },
-  {
-    value: "bottom",
-    label: "bottom"
-  }
-];
-function VerticalAlign({
-  attributeName = "vertical-align"
-}) {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(Stack$6, null, /* @__PURE__ */ React__default.createElement(SelectField, {
-      style: { width: 120 },
-      label: "Vertical align",
-      name: `${focusIdx2}.attributes.${attributeName}`,
-      options: options$a
-    }));
-  }, [attributeName, focusIdx2]);
-}
-function Column() {
-  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(Collapse$1, {
-    defaultActiveKey: ["0", "1", "2"]
-  }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "0",
-    header: "Dimension"
-  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
-    vertical: true,
-    spacing: "tight"
-  }, /* @__PURE__ */ React__default.createElement(Padding, null), /* @__PURE__ */ React__default.createElement(Stack$6, {
-    wrap: false
-  }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-    fill: true
-  }, /* @__PURE__ */ React__default.createElement(Width, null)), /* @__PURE__ */ React__default.createElement(VerticalAlign, null)))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "1",
-    header: "Background"
-  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
-    vertical: true,
-    spacing: "tight"
-  }, /* @__PURE__ */ React__default.createElement(Background, null))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "2",
-    header: "Border"
-  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
-    vertical: true,
-    spacing: "tight"
-  }, /* @__PURE__ */ React__default.createElement(Border, null)))));
-}
-const options$9 = [
-  {
-    value: "",
-    label: "None"
-  },
-  {
-    value: "underline",
-    label: "Underline"
-  },
-  {
-    value: "overline",
-    label: "Overline"
-  },
-  {
-    value: "line-through",
-    label: "Line through"
-  },
-  {
-    value: "blink",
-    label: "Blink"
-  },
-  {
-    value: "inherit",
-    label: "Inherit"
-  }
-];
-function TextDecoration() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(SelectField, {
-      label: "Text decoration",
-      name: `${focusIdx2}.attributes.text-decoration`,
-      options: options$9
-    });
-  }, [focusIdx2]);
-}
-const options$8 = [
-  {
-    value: "normal",
-    label: "Normal"
-  },
-  {
-    value: "bold",
-    label: "Bold"
-  },
-  {
-    value: "100",
-    label: "100"
-  },
-  {
-    value: "200",
-    label: "200"
-  },
-  {
-    value: "300",
-    label: "300"
-  },
-  {
-    value: "400",
-    label: "400"
-  },
-  {
-    value: "500",
-    label: "500"
-  },
-  {
-    value: "600",
-    label: "600"
-  },
-  {
-    value: "700",
-    label: "700"
-  },
-  {
-    value: "800",
-    label: "800"
-  },
-  {
-    value: "900",
-    label: "900"
-  }
-];
-function FontWeight() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(SelectField, {
-      label: "Font weight",
-      name: `${focusIdx2}.attributes.font-weight`,
-      options: options$8
-    });
-  }, [focusIdx2]);
-}
-const options$7 = [
-  {
-    value: "normal",
-    label: "Normal"
-  },
-  {
-    value: "italic",
-    label: "Italic"
-  }
-];
-function FontStyle({ inline = true }) {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(RadioGroupField, {
-      label: "Font style",
-      name: `${focusIdx2}.attributes.font-style`,
-      options: options$7,
-      inline
-    });
-  }, [focusIdx2, inline]);
-}
-function Height({ inline }) {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(Stack$6, {
-      wrap: false
-    }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: true
-    }, /* @__PURE__ */ React__default.createElement(TextField, {
-      label: "Height",
-      name: `${focusIdx2}.attributes.height`,
-      quickchange: true,
-      inline
-    })));
-  }, [focusIdx2, inline]);
-}
-function ContainerBackgroundColor({
-  title: title2 = "Container background color"
-}) {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(ColorPickerField, {
-      label: title2,
-      name: `${focusIdx2}.attributes.container-background-color`,
-      inline: true,
-      alignment: "center"
-    });
-  }, [focusIdx2, title2]);
-}
-function FontSize() {
+function FontSize() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   return useMemo(() => {
     return /* @__PURE__ */ React__default.createElement(TextField, {
@@ -41851,6 +40964,854 @@ function Margin() {
     }))));
   }, [focusIdx2]);
 }
+function Tools(props) {
+  const { container: container2 } = props;
+  const { mergeTags } = useEditorProps();
+  const [selectionRange, setSelectionRange] = useState(null);
+  useEffect(() => {
+    const onSelectionChange = () => {
+      try {
+        const range2 = getShadowRoot().getSelection().getRangeAt(0);
+        if (range2) {
+          setSelectionRange(range2);
+        }
+      } catch (error2) {
+      }
+    };
+    document.addEventListener("selectionchange", onSelectionChange);
+    return () => {
+      document.removeEventListener("selectionchange", onSelectionChange);
+    };
+  }, []);
+  const restoreRange = useCallback((range2) => {
+    const selection = getShadowRoot().getSelection();
+    selection.removeAllRanges();
+    const newRange = document.createRange();
+    newRange.setStart(range2.startContainer, range2.startOffset);
+    newRange.setEnd(range2.endContainer, range2.endOffset);
+    selection.addRange(newRange);
+  }, []);
+  const execCommand = (cmd, val) => {
+    if (!container2) {
+      console.error("No container");
+      return;
+    }
+    if (!selectionRange) {
+      console.error("No selectionRange");
+      return;
+    }
+    if (!(container2 == null ? void 0 : container2.contains(selectionRange == null ? void 0 : selectionRange.commonAncestorContainer)) && container2 !== (selectionRange == null ? void 0 : selectionRange.commonAncestorContainer)) {
+      console.error("Not commonAncestorContainer");
+      return;
+    }
+    restoreRange(selectionRange);
+    if (cmd === "createLink") {
+      const linkData = val;
+      const target2 = linkData.blank ? "_blank" : "";
+      let link;
+      if (linkData.linkNode) {
+        link = linkData.linkNode;
+      } else {
+        const uuid2 = (+new Date()).toString();
+        document.execCommand(cmd, false, uuid2);
+        link = getShadowRoot().querySelector(`a[href="${uuid2}"`);
+      }
+      if (target2) {
+        link.setAttribute("target", target2);
+      }
+      link.style.color = "inherit";
+      link.style.textDecoration = linkData.underline ? "underline" : "none";
+      link.setAttribute("href", linkData.link);
+    } else {
+      document.execCommand(cmd, false, val);
+    }
+    const html = container2.innerHTML;
+    props.onChange(html);
+  };
+  const getPopoverMountNode = () => document.getElementById(FIXED_CONTAINER_ID);
+  return /* @__PURE__ */ React__default.createElement("div", {
+    id: "Tools",
+    style: { display: "flex", flexWrap: "nowrap" }
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center"
+    }
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(Popover$1, {
+    className: "easy-email-extensions-Tools-Popover",
+    trigger: "click",
+    content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$1), /* @__PURE__ */ React__default.createElement(FontFamily$1, {
+      onChange: (val) => execCommand("fontName", val)
+    })),
+    getPopupContainer: getPopoverMountNode
+  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    title: "font family",
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-font-family"
+    })
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(Popover$1, {
+    className: "easy-email-extensions-Tools-Popover",
+    color: "#fff",
+    trigger: "click",
+    content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$1), /* @__PURE__ */ React__default.createElement(FontSizeList, {
+      onChange: (val) => execCommand("fontSize", val)
+    })),
+    getPopupContainer: getPopoverMountNode
+  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    title: "line-height",
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-line-height"
+    })
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    onClick: () => execCommand("bold"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-bold"
+    }),
+    title: "Bold"
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    onClick: () => execCommand("italic"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-italic"
+    }),
+    title: "Italic"
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(ColorPicker, {
+    label: "",
+    position: "tl",
+    onChange: (color) => execCommand("foreColor", color),
+    getPopupContainer: getPopoverMountNode,
+    showInput: false
+  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-font-color"
+    }),
+    title: "Text color"
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(ColorPicker, {
+    label: "",
+    showInput: false,
+    position: "tl",
+    onChange: (color) => execCommand("hiliteColor", color),
+    getPopupContainer: getPopoverMountNode
+  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-bg-colors"
+    }),
+    title: "Background color"
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(Link$1, {
+    currentRange: selectionRange,
+    onChange: (values2) => execCommand("createLink", values2),
+    getPopupContainer: getPopoverMountNode
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), mergeTags && /* @__PURE__ */ React__default.createElement(Popover$1, {
+    trigger: "click",
+    color: "#fff",
+    position: "bottom",
+    content: /* @__PURE__ */ React__default.createElement(MergeTags, {
+      value: "",
+      onChange: (val) => execCommand("insertHTML", val)
+    }),
+    getPopupContainer: getPopoverMountNode
+  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    title: "Merge tag",
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-merge-tags"
+    })
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    onClick: () => execCommand("justifyLeft"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-align-left"
+    }),
+    title: "Align left"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    onClick: () => execCommand("justifyCenter"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-align-center"
+    }),
+    title: "Align center"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    onClick: () => execCommand("justifyRight"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-align-right"
+    }),
+    title: "Align right"
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    onClick: () => execCommand("insertOrderedList"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-list-ol"
+    }),
+    title: "Orderlist"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    onClick: () => execCommand("insertUnorderedList"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-list-ul"
+    }),
+    title: "Unorderlist"
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    onClick: () => execCommand("strikeThrough"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-strikethrough"
+    }),
+    title: "StrikethroughOutlined"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    onClick: () => execCommand("underline"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-underline"
+    }),
+    title: "UnderlineOutlined"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    onClick: () => execCommand("insertHorizontalRule"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-line"
+    }),
+    title: "Line"
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    onClick: () => execCommand("removeFormat"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-close"
+    }),
+    title: "Remove format"
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  })));
+}
+var styleText = ".easy-email-extensions-emailToolItem{display:inline-flex;position:relative;outline:none;font-weight:400;appearance:none;cursor:pointer!important;white-space:nowrap;transition:all .1s linear;box-sizing:border-box;line-height:1.5715;border:none;background-color:transparent;color:#fff}.easy-email-extensions-divider{position:relative;display:inline-flex;width:1px;height:16px;background-color:#808080e6}\n";
+function RichTextToolBar() {
+  const [direction, setDirection] = useState("top");
+  const [blockNode, setBlockNode] = useState(null);
+  const [offsetX, setOffsetX] = useState(0);
+  const { focusBlock: focusBlock2 } = useBlock();
+  const { pageData: pageData2 } = useEditorContext();
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  const pageWidth = +(pageData2.attributes.width || "600").replace("px", "");
+  useEffect(() => {
+    const promiseObj = awaitForElement(focusIdx2);
+    promiseObj.promise.then((blockNode2) => {
+      setBlockNode(blockNode2);
+    });
+    return () => {
+      promiseObj.cancel();
+    };
+  }, [focusIdx2, focusBlock2]);
+  useEffect(() => {
+    if (blockNode) {
+      const options2 = {
+        rootMargin: "-84px 0px 0px 0px",
+        root: getShadowRoot().firstChild,
+        threshold: [0, 1e-3, 0.1, 0.999, 0.8, 0.9, 1]
+      };
+      const checkDirection = (ev) => {
+        const [current] = ev;
+        const { top } = current.intersectionRect;
+        const boundingClientRect = current.boundingClientRect;
+        const rootBounds = current.rootBounds;
+        const intersectionRatio = current.intersectionRatio;
+        if (!rootBounds)
+          return;
+        const paddingLeft = (rootBounds.width - pageWidth) / 2;
+        const offsetLeft = boundingClientRect.left - rootBounds.left;
+        setOffsetX(paddingLeft - offsetLeft);
+        if (intersectionRatio === 1) {
+          setDirection("top");
+        } else {
+          if (top) {
+            if (top > rootBounds.top) {
+              setDirection("top");
+            } else {
+              setDirection("bottom");
+            }
+          }
+        }
+      };
+      const observer = new IntersectionObserver(checkDirection, options2);
+      observer.observe(blockNode);
+      return () => {
+        observer.unobserve(blockNode);
+      };
+    }
+  }, [blockNode, pageWidth]);
+  if (!blockNode)
+    return null;
+  const editorContainer = blockNode && getEditNode(blockNode);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, createPortal(/* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", {
+    dangerouslySetInnerHTML: { __html: styleText }
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    style: {
+      transform: direction === "top" ? "translate(0,-100%)" : void 0,
+      padding: "4px 8px",
+      boxSizing: "border-box",
+      position: "absolute",
+      zIndex: 100,
+      top: direction === "top" ? -40 : "calc(100% + 40px)",
+      left: offsetX,
+      width: pageWidth
+    }
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    style: {
+      position: "absolute",
+      backgroundColor: "#41444d",
+      height: "100%",
+      width: "100%",
+      left: 0,
+      top: 0
+    }
+  }), /* @__PURE__ */ React__default.createElement(Tools, {
+    container: editorContainer,
+    onChange: () => {
+    }
+  }))), blockNode));
+}
+const RichTextField = (props) => {
+  const { focusBlock: focusBlock2 } = useBlock();
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  if ((focusBlock2 == null ? void 0 : focusBlock2.type) !== BasicType.TEXT)
+    return null;
+  const name = `${focusIdx2}.data.value.content`;
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(RichTextToolBar, null), /* @__PURE__ */ React__default.createElement(Field, {
+    name,
+    parse: (v) => v
+  }, ({ input }) => /* @__PURE__ */ React__default.createElement(FieldWrapper, __spreadProps(__spreadValues({}, props), {
+    input
+  }))));
+};
+function FieldWrapper(props) {
+  const _a = props, { input } = _a, rest = __objRest(_a, ["input"]);
+  const debounceCallbackChange = useCallback(lodash.exports.debounce((val) => {
+    input.onChange(val);
+  }, 500), [input]);
+  return /* @__PURE__ */ React__default.createElement(InlineText, __spreadProps(__spreadValues({}, rest), {
+    onChange: debounceCallbackChange
+  }));
+}
+const TextField = enhancer(Input, (value) => value);
+const SearchField = enhancer(Input$5.Search, (val) => val);
+const TextAreaField = enhancer(Input$5.TextArea, (val) => val);
+const NumberField = enhancer(InputNumber$1, (e) => e);
+const SliderField = enhancer(Slider$2, (e) => e);
+const ColorPickerField = enhancer(ColorPicker, (e) => e);
+const UploadField = enhancer(UploadField$1, (val) => val);
+const ImageUploaderField = enhancer(ImageUploader, (url) => url);
+const SelectField = enhancer(Select, (e) => e);
+const AutoCompleteField = enhancer(AutoComplete, (e) => e);
+const RadioGroupField = enhancer(RadioGroup, (value) => value);
+const SwitchField = enhancer(Switch$1, (e) => e);
+const DatePickerField = enhancer(DatePicker$1, (date) => date);
+const CheckboxField = enhancer(CheckBoxGroup, (e) => e);
+const EditTabField = enhancer(EditTab, (e) => e);
+const InlineTextField = enhancer(InlineText, (value) => value);
+const AddToCollection = ({ visible, setVisible }) => {
+  const { focusBlock: focusBlockData } = useBlock();
+  const { onAddCollection, onUploadImage } = useEditorProps();
+  const onSubmit = (values2) => {
+    if (!values2.label)
+      return;
+    const uuid2 = uuid_1.v4();
+    onAddCollection == null ? void 0 : onAddCollection({
+      label: values2.label,
+      helpText: values2.helpText,
+      data: focusBlockData,
+      thumbnail: values2.thumbnail,
+      id: uuid2
+    });
+    setVisible(false);
+  };
+  return /* @__PURE__ */ React__default.createElement(Form$3, {
+    initialValues: { label: "", helpText: "", thumbnail: "" },
+    onSubmit
+  }, ({ handleSubmit }) => /* @__PURE__ */ React__default.createElement(Modal$1, {
+    maskClosable: false,
+    style: { zIndex: 2e3 },
+    visible,
+    title: "Add to collection",
+    onOk: () => handleSubmit(),
+    onCancel: () => setVisible(false)
+  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
+    vertical: true
+  }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, null), /* @__PURE__ */ React__default.createElement(TextField, {
+    label: "Title",
+    name: "label",
+    validate: (val) => {
+      if (!val)
+        return "Title required!";
+      return void 0;
+    }
+  }), /* @__PURE__ */ React__default.createElement(TextAreaField, {
+    label: "Description",
+    name: "helpText"
+  }), /* @__PURE__ */ React__default.createElement(ImageUploaderField, {
+    label: "Thumbnail",
+    name: "thumbnail",
+    uploadHandler: onUploadImage,
+    validate: (val) => {
+      if (!val)
+        return "Thumbnail required!";
+      return void 0;
+    }
+  }))));
+};
+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;
+  }
+  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,
+    formState: { values: values2 }
+  } = useEditorContext();
+  const { onUploadImage, onAddCollection } = useEditorProps();
+  const { focusIdx: focusIdx2, setFocusIdx } = useFocusIdx();
+  const { setHoverIdx, setIsDragging, setDirection } = useHoverIdx();
+  const { moveBlock, setValueByIdx: setValueByIdx2, copyBlock, removeBlock } = useBlock();
+  const {
+    setBlockLayerRef,
+    allowDrop,
+    blockLayerRef,
+    removeHightLightClassName
+  } = useAvatarWrapperDrop();
+  const [contextMenuData, setContextMenuData] = useState(null);
+  const onToggleVisible = useCallback(({ id }, e) => {
+    e.stopPropagation();
+    const blockData = lodash.exports.get(values2, id);
+    if (blockData) {
+      blockData.data.hidden = !Boolean(blockData.data.hidden);
+      setValueByIdx2(id, blockData);
+    }
+  }, [setValueByIdx2, values2]);
+  const renderTitle = useCallback((data) => {
+    const block2 = BlockManager.getBlockByType(data.type);
+    const isPage = data.type === BasicType.PAGE;
+    return /* @__PURE__ */ React__default.createElement("div", {
+      "data-tree-idx": data.id,
+      className: classnames(styles$6.title, !isPage && getNodeIdxClassName(data.id), !isPage && "email-block")
+    }, /* @__PURE__ */ React__default.createElement(TextStyle, {
+      size: "smallest"
+    }, block2 == null ? void 0 : block2.name), /* @__PURE__ */ React__default.createElement("div", {
+      className: styles$6.eyeIcon
+    }, /* @__PURE__ */ React__default.createElement(EyeIcon$1, {
+      blockData: data,
+      onToggleVisible
+    })));
+  }, [onToggleVisible]);
+  const treeData = useMemo(() => {
+    const copyData = lodash.exports.cloneDeep(pageData2);
+    const loop2 = (item2, id, parent2) => {
+      item2.id = id;
+      item2.parent = parent2;
+      item2.children.map((child, index2) => loop2(child, getChildIdx(id, index2), item2));
+    };
+    loop2(copyData, getPageIdx(), null);
+    return [copyData];
+  }, [pageData2]);
+  const onSelect = useCallback((selectedId) => {
+    setFocusIdx(selectedId);
+    scrollBlockEleIntoView({ idx: selectedId });
+  }, [setFocusIdx]);
+  const onContextMenu = useCallback((blockData, ev) => {
+    ev.preventDefault();
+    setContextMenuData({ blockData, left: ev.clientX, top: ev.clientY });
+  }, []);
+  const onCloseContextMenu = useCallback((ev) => {
+    setContextMenuData(null);
+  }, []);
+  const onMouseEnter = useCallback((id) => {
+    setHoverIdx(id);
+  }, [setHoverIdx]);
+  const onMouseLeave = useCallback(() => {
+    setHoverIdx("");
+  }, [setHoverIdx]);
+  const onDragStart = useCallback(() => {
+    setIsDragging(true);
+  }, [setIsDragging]);
+  const onDragEnd = useCallback(() => {
+    setIsDragging(false);
+  }, [setIsDragging]);
+  const onDrop = useCallback((params) => {
+    const { dragNode, dropNode, dropPosition } = params;
+    const dragBlock = BlockManager.getBlockByType(dragNode.dataRef.type);
+    if (!dragBlock)
+      return false;
+    const dropIndex = getIndexByIdx(dropNode.key);
+    if (dropPosition === 0) {
+      if (dragBlock.validParentType.includes(dropNode.dataRef.type) && dropNode.dataRef.children.length === 0) {
+        moveBlock(dragNode.key, getChildIdx(dropNode.key, 0));
+      } else if (dropNode.parent && dragBlock.validParentType.includes(dropNode.parent.type)) {
+        moveBlock(dragNode.key, getChildIdx(dropNode.parentKey, dropIndex));
+      }
+    } else {
+      moveBlock(dragNode.key, getChildIdx(dropNode.parentKey, dropPosition > 0 ? dropIndex + 1 : dropIndex));
+    }
+  }, [moveBlock]);
+  useEffect(() => {
+    if (!blockLayerRef)
+      return;
+    if (focusIdx2) {
+      setTimeout(() => {
+        const selectedNode = blockLayerRef.querySelector(`[${DATA_ATTRIBUTE_ID}="${focusIdx2}"]`);
+        if (selectedNode) {
+          selectedNode.scrollIntoView({
+            block: "center",
+            behavior: "smooth"
+          });
+        }
+      }, 50);
+    }
+  }, [blockLayerRef, focusIdx2]);
+  const blockTreeAllowDrop = useCallback((data) => {
+    var _a, _b;
+    const dropResult = allowDrop(data);
+    if (dropResult) {
+      const node = (_b = (_a = document.querySelector(`[data-tree-idx="${dropResult.key}"]`)) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.parentNode;
+      if (node instanceof HTMLElement) {
+        removeHightLightClassName();
+        node.classList.add("arco-tree-node-title-gap-bottom");
+      }
+      setDirection(getDirectionFormDropPosition(dropResult.position));
+      setHoverIdx(dropResult.key);
+    }
+    return dropResult;
+  }, [allowDrop]);
+  const hasFocus = Boolean(focusIdx2);
+  return useMemo(() => {
+    if (!hasFocus)
+      return null;
+    return /* @__PURE__ */ React__default.createElement("div", __spreadValues({
+      ref: setBlockLayerRef,
+      id: "BlockLayerManager"
+    }, {
+      [DATA_ATTRIBUTE_DROP_CONTAINER]: "true"
+    }), /* @__PURE__ */ React__default.createElement(BlockTree, {
+      selectedId: focusIdx2,
+      defaultExpandAll: true,
+      treeData,
+      renderTitle,
+      allowDrop: blockTreeAllowDrop,
+      onContextMenu,
+      onDrop,
+      onDragStart,
+      onDragEnd,
+      onSelect,
+      onMouseEnter,
+      onMouseLeave
+    }), contextMenuData && /* @__PURE__ */ React__default.createElement(ContextMenu, {
+      onClose: onCloseContextMenu,
+      moveBlock,
+      copyBlock,
+      removeBlock,
+      contextMenuData
+    }));
+  }, [
+    hasFocus,
+    focusIdx2,
+    treeData,
+    renderTitle,
+    allowDrop,
+    onContextMenu,
+    onDrop,
+    onSelect,
+    onMouseEnter,
+    onMouseLeave,
+    contextMenuData,
+    onCloseContextMenu,
+    onUploadImage,
+    onAddCollection,
+    moveBlock,
+    copyBlock,
+    removeBlock,
+    onDragEnd,
+    onDragStart
+  ]);
+}
 const BlocksPanel$1 = "_BlocksPanel_15fho_1";
 const blockItem = "_blockItem_15fho_5";
 const closeBtn = "_closeBtn_15fho_12";