easy-email-extensions 3.0.8 → 3.0.12

package/lib/index2.js

@@ -55,10 +55,10 @@ var __async = (__this, __arguments, generator) => {
 };
 import * as React from "react";
 import React__default, { useCallback, useState, useRef, useEffect, useMemo, Children, isValidElement, cloneElement, createContext, useContext, Component, memo, forwardRef, useLayoutEffect, createRef, useImperativeHandle, PureComponent, useReducer, createElement, Suspense } from "react";
-import { IconFont, Stack as Stack$6, TextStyle, getBlockNodeByIdx, useBlock, getEditNode, getShadowRoot, FIXED_CONTAINER_ID, getEditContent, getEditorRoot, useEditorProps, useFocusIdx, useActiveTab, scrollBlockEleIntoView, useEditorContext, useHoverIdx, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, ActiveTabKeys } from "easy-email-editor";
+import { IconFont, Stack as Stack$6, TextStyle, getBlockNodeByIdx, useBlock, getEditNode, getShadowRoot, FIXED_CONTAINER_ID, getEditContent, getEditorRoot, useEditorProps, useEditorContext, useFocusIdx, scrollBlockEleIntoView, useHoverIdx, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, useActiveTab, ActiveTabKeys } from "easy-email-editor";
 import { BasicType, ImageManager, getIndexByIdx, getSiblingIdx, BlockManager, getPageIdx, getChildIdx, createBlockDataByType, getParentByIdx, getValueByIdx, MjmlToJson, JsonToMjml, getParentIdx, getNodeTypeFromClassName } from "easy-email-core";
 import { ReactSortable } from "react-sortablejs";
-import { useField, useForm as useForm$1, Form as Form$3, version as version$2 } from "react-final-form";
+import { useField, Field, useForm as useForm$1, Form as Form$3, version as version$2, useFormState } from "react-final-form";
 import ReactDOM, { findDOMNode, createPortal } from "react-dom";
 var arco = "";
 const title = "_title_1gyaq_1";
@@ -38484,75 +38484,76 @@ function enhancer(Component2, changeAdapter) {
       "debounceTime"
     ]);
     const {
-      input: { value, onBlur: onBlur3 },
-      meta: { touched, error: error2 }
+      input: { value, onChange }
     } = useField(name, {
       validate: validate3
     });
     const [currentValue, setCurrentValue] = useState(value);
-    const id = useMemo(() => {
-      return `enhancer-${primaryId++}`;
-    }, []);
-    const { change, mutators } = useForm$1();
     const debounceCallbackChange = useCallback(lodash.exports.debounce((val) => {
-      change(name, val);
-    }, 60, {
-      maxWait: 60
-    }), [change, name]);
+      onChange(val);
+    }, 100, {
+      maxWait: 500
+    }), []);
     useEffect(() => {
       setCurrentValue(value);
     }, [value]);
-    const onFieldChange = useCallback((e) => {
-      const newVal = onChangeAdapter ? onChangeAdapter(changeAdapter(e)) : changeAdapter(e);
-      setCurrentValue(newVal);
-      debounceCallbackChange(newVal);
-      onBlur3();
-    }, [onBlur3, onChangeAdapter, debounceCallbackChange]);
-    if (!wrapper2)
-      return /* @__PURE__ */ React__default.createElement(Component2, __spreadProps(__spreadValues({}, rest), {
-        mutators,
+    const id = useMemo(() => {
+      return `enhancer-${primaryId++}`;
+    }, []);
+    return /* @__PURE__ */ React__default.createElement(Field, {
+      name,
+      validate: validate3
+    }, ({ input: { onBlur: onBlur3 }, meta: { touched, error: error2 } }) => {
+      const onFieldChange = useCallback((e) => {
+        const newVal = onChangeAdapter ? onChangeAdapter(changeAdapter(e)) : changeAdapter(e);
+        setCurrentValue(newVal);
+        debounceCallbackChange(newVal);
+        onBlur3();
+      }, [onBlur3, onChangeAdapter, debounceCallbackChange]);
+      if (!wrapper2)
+        return /* @__PURE__ */ React__default.createElement(Component2, __spreadProps(__spreadValues({}, rest), {
+          id,
+          name,
+          checked: valueAdapter ? valueAdapter(currentValue) : currentValue,
+          value: valueAdapter ? valueAdapter(currentValue) : currentValue,
+          onChange: onFieldChange
+        }));
+      return /* @__PURE__ */ React__default.createElement(Form.Item, {
+        noStyle: true,
+        validateStatus: touched && error2 ? "error" : void 0,
+        help: touched && error2
+      }, /* @__PURE__ */ React__default.createElement(Stack$6, {
+        vertical: true,
+        spacing: "extraTight"
+      }, /* @__PURE__ */ React__default.createElement(Stack$6, {
+        spacing: inline ? void 0 : "extraTight",
+        wrap: false,
+        vertical: !inline,
+        alignment: alignment ? alignment : inline ? "center" : void 0,
+        distribution
+      }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, null, /* @__PURE__ */ React__default.createElement("label", {
+        className: labelHidden2 ? styles$5["label-hidden"] : void 0,
+        htmlFor: id
+      }, /* @__PURE__ */ React__default.createElement("span", {
+        style: { whiteSpace: "pre" }
+      }, required && /* @__PURE__ */ React__default.createElement("span", {
+        style: { color: "#ff4d4f" }
+      }, "* "), /* @__PURE__ */ React__default.createElement(TextStyle, {
+        size: size === "small" ? "smallest" : "small"
+      }, label)))), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
+        fill: inline
+      }, /* @__PURE__ */ React__default.createElement(Component2, __spreadProps(__spreadValues({
+        size
+      }, rest), {
         id,
         name,
         checked: valueAdapter ? valueAdapter(currentValue) : currentValue,
         value: valueAdapter ? valueAdapter(currentValue) : currentValue,
         onChange: onFieldChange
-      }));
-    return /* @__PURE__ */ React__default.createElement(Form.Item, {
-      noStyle: true,
-      validateStatus: touched && error2 ? "error" : void 0,
-      help: touched && error2
-    }, /* @__PURE__ */ React__default.createElement(Stack$6, {
-      vertical: true,
-      spacing: "extraTight"
-    }, /* @__PURE__ */ React__default.createElement(Stack$6, {
-      spacing: inline ? void 0 : "extraTight",
-      wrap: false,
-      vertical: !inline,
-      alignment: alignment ? alignment : inline ? "center" : void 0,
-      distribution
-    }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, null, /* @__PURE__ */ React__default.createElement("label", {
-      className: labelHidden2 ? styles$5["label-hidden"] : void 0,
-      htmlFor: id
-    }, /* @__PURE__ */ React__default.createElement("span", {
-      style: { whiteSpace: "pre" }
-    }, required && /* @__PURE__ */ React__default.createElement("span", {
-      style: { color: "#ff4d4f" }
-    }, "* "), /* @__PURE__ */ React__default.createElement(TextStyle, {
-      size: size === "small" ? "smallest" : "small"
-    }, label)))), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
-      fill: inline
-    }, /* @__PURE__ */ React__default.createElement(Component2, __spreadProps(__spreadValues({
-      size
-    }, rest), {
-      mutators,
-      id,
-      name,
-      checked: valueAdapter ? valueAdapter(currentValue) : currentValue,
-      value: valueAdapter ? valueAdapter(currentValue) : currentValue,
-      onChange: onFieldChange
-    })))), /* @__PURE__ */ React__default.createElement("div", {
-      className: styles$5.helperText
-    }, /* @__PURE__ */ React__default.createElement("small", null, helpText))));
+      })))), /* @__PURE__ */ React__default.createElement("div", {
+        className: styles$5.helperText
+      }, /* @__PURE__ */ React__default.createElement("small", null, helpText))));
+    });
   };
 }
 function Input(props) {
@@ -38650,12 +38651,10 @@ function awaitForElement$1(idx) {
   });
   return promiseObj;
 }
-function InlineText({
-  idx,
-  onChange,
-  children,
-  mutators: { setFieldTouched }
-}) {
+function InlineText({ idx, onChange, children }) {
+  const {
+    mutators: { setFieldTouched }
+  } = useForm$1();
   const [isFocus, setIsFocus] = useState(false);
   const [textContainer, setTextContainer] = useState(null);
   useField(idx);
@@ -38755,56 +38754,37 @@ function AutoComplete(props) {
     data: options2
   }));
 }
-const isMouseEvent = (event2) => !!(event2.type.indexOf("mouse") !== -1);
-const onDrag = ({
-  event: event2,
-  onMove,
-  onEnd
-}) => {
-  event2.preventDefault();
-  event2.stopPropagation();
-  let initX = 0;
-  let initY = 0;
-  if (isMouseEvent(event2)) {
-    initX = event2.clientX;
-    initY = event2.clientY;
-  } else {
-    initX = event2.touches[0].clientX;
-    initY = event2.touches[0].clientY;
-  }
-  const onDragMove = lodash.exports.debounce((mEvt) => {
-    let movX = 0;
-    let movY = 0;
-    if (isMouseEvent(mEvt)) {
-      movX = mEvt.clientX;
-      movY = mEvt.clientY;
-    } else {
-      movX = mEvt.touches[0].clientX;
-      movY = mEvt.touches[0].clientY;
+function awaitForElement(idx) {
+  let promiseObj = {
+    cancel: () => {
+    },
+    promise: Promise.resolve()
+  };
+  promiseObj.promise = new Promise((resolve) => {
+    const ele = getBlockNodeByIdx(idx);
+    if (ele) {
+      resolve(ele);
+      return;
     }
-    const diffX = movX - initX;
-    const diffY = movY - initY;
-    onMove(diffX, diffY);
+    const timer = setInterval(() => {
+      const ele2 = getBlockNodeByIdx(idx);
+      if (ele2) {
+        resolve(ele2);
+        clearInterval(timer);
+      }
+    }, 50);
+    promiseObj.cancel = () => {
+      clearInterval(timer);
+    };
   });
-  const onDragEnd = () => {
-    onEnd && onEnd();
-    document.removeEventListener("touchmove", onDragMove);
-    document.removeEventListener("touchend", onDragEnd);
-    document.removeEventListener("mousemove", onDragMove);
-    document.removeEventListener("mousemove", onDragEnd);
-  };
-  document.addEventListener("touchmove", onDragMove);
-  document.addEventListener("touchend", onDragEnd);
-  document.addEventListener("mousemove", onDragMove);
-  document.addEventListener("mouseup", onDragEnd);
-};
+  return promiseObj;
+}
 const ToolItem$1 = (props) => {
-  return /* @__PURE__ */ React__default.createElement(Button$4, {
+  return /* @__PURE__ */ React__default.createElement("button", {
+    className: "easy-email-extensions-emailToolItem",
     title: props.title,
-    size: "mini",
-    icon: props.icon,
     onClick: props.onClick
-  });
+  }, props.icon);
 };
 function getAnchorElement(node, matchLength) {
   var _a, _b;
@@ -38837,7 +38817,7 @@ function Link$1(props) {
   const initialValues = useMemo(() => {
     let link = "";
     let blank = true;
-    let underline = false;
+    let underline = true;
     let linkNode = getLinkNode(props.currentRange);
     if (linkNode) {
       link = linkNode.href;
@@ -38889,9 +38869,8 @@ function Link$1(props) {
         uncheckedText: "on",
         inline: true
       }))))
-    }), /* @__PURE__ */ React__default.createElement(Button$4, {
+    }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
       title: "Link",
-      size: "mini",
       icon: /* @__PURE__ */ React__default.createElement(IconFont, {
         iconName: "icon-link"
       })
@@ -38929,7 +38908,14 @@ function FontSizeList(props) {
       label: "48px"
     }
   ];
-  return /* @__PURE__ */ React__default.createElement(Menu$1, {
+  return /* @__PURE__ */ React__default.createElement("div", {
+    style: {
+      maxWidth: 150,
+      maxHeight: 350,
+      overflowY: "auto",
+      overflowX: "hidden"
+    }
+  }, /* @__PURE__ */ React__default.createElement(Menu$1, {
     onClickMenuItem: (item2) => {
       props.onChange(item2);
     },
@@ -38938,13 +38924,13 @@ function FontSizeList(props) {
   }, list2.map((item2) => /* @__PURE__ */ React__default.createElement(Menu$1.Item, {
     style: { lineHeight: "30px", height: 30 },
     key: item2.value
-  }, item2.label)));
+  }, item2.label))));
 }
 function FontFamily$1(props) {
   const { fontList: fontList2 = [] } = useEditorProps();
   return /* @__PURE__ */ React__default.createElement("div", {
     style: {
-      width: 100,
+      maxWidth: 150,
       maxHeight: 350,
       overflowY: "auto",
       overflowX: "hidden"
@@ -38954,7 +38940,7 @@ function FontFamily$1(props) {
       props.onChange(item2);
     },
     selectedKeys: [],
-    style: { border: "none" }
+    style: { border: "none", padding: 0 }
   }, fontList2.map((item2) => /* @__PURE__ */ React__default.createElement(Menu$1.Item, {
     style: { lineHeight: "30px", height: 30 },
     key: item2.value
@@ -39000,7 +38986,8 @@ const MergeTags$1 = React__default.memo((props) => {
     onSelect: (vals) => onSelect(vals[0])
   }));
 });
-function TextToolbar(props) {
+var styleText$1 = ".easy-email-extensions-Tools-Popover .arco-popover-content{padding:0}.easy-email-extensions-Tools-Popover .arco-popover-content-inner *::-webkit-scrollbar{-webkit-appearance:none;width:5px}.easy-email-extensions-Tools-Popover .arco-popover-content-inner *::-webkit-scrollbar-thumb{border-radius:5px;background-color:#00000080;box-shadow:0 0 1px #ffffff80;-webkit-box-shadow:0 0 1px rgba(255,255,255,.5)}\n";
+function Tools(props) {
   const { container: container2 } = props;
   const { mergeTags } = useEditorProps();
   const [selectionRange, setSelectionRange] = useState(null);
@@ -39066,47 +39053,60 @@ function TextToolbar(props) {
   };
   const getPopoverMountNode = () => document.getElementById(FIXED_CONTAINER_ID);
   return /* @__PURE__ */ React__default.createElement("div", {
-    id: "TextToolbar",
+    id: "Tools",
     style: { display: "flex", flexWrap: "nowrap" }
-  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
-    vertical: true,
-    spacing: "extraTight"
-  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
-    spacing: "extraTight"
-  }, /* @__PURE__ */ React__default.createElement(Tooltip$1, {
-    color: "#fff",
-    content: /* @__PURE__ */ React__default.createElement(FontFamily$1, {
+  }, /* @__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(Button$4, {
-    size: "mini",
+  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    title: "font family",
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-font-family"
     })
-  })), /* @__PURE__ */ React__default.createElement(Tooltip$1, {
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(Popover$1, {
+    className: "easy-email-extensions-Tools-Popover",
     color: "#fff",
-    content: /* @__PURE__ */ React__default.createElement(FontSizeList, {
+    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(Button$4, {
-    size: "mini",
+  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    title: "line-height",
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-line-height"
     })
-  })), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+  })), /* @__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",
@@ -39118,7 +39118,9 @@ function TextToolbar(props) {
       iconName: "icon-font-color"
     }),
     title: "Text color"
-  })), /* @__PURE__ */ React__default.createElement(ColorPicker, {
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-extensions-divider"
+  }), /* @__PURE__ */ React__default.createElement(ColorPicker, {
     label: "",
     showInput: false,
     position: "tl",
@@ -39129,10 +39131,14 @@ function TextToolbar(props) {
       iconName: "icon-bg-colors"
     }),
     title: "Background color"
-  })), /* @__PURE__ */ React__default.createElement(Link$1, {
+  })), /* @__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",
@@ -39141,21 +39147,14 @@ function TextToolbar(props) {
       onChange: (val) => execCommand("insertHTML", val)
     }),
     getPopupContainer: getPopoverMountNode
-  }, /* @__PURE__ */ React__default.createElement(Button$4, {
-    size: "mini",
+  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
     title: "Merge tag",
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-merge-tags"
     })
-  })), /* @__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(Stack$6, {
-    spacing: "extraTight"
-  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+  })), /* @__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"
@@ -39173,6 +39172,8 @@ function TextToolbar(props) {
       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, {
@@ -39185,6 +39186,8 @@ function TextToolbar(props) {
       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, {
@@ -39203,77 +39206,108 @@ function TextToolbar(props) {
       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"
+  })));
 }
-const TEXT_BAR_LOCATION_KEY = "TEXT_BAR_LOCATION_KEY";
-const RichTextFieldItem = (props) => {
-  const { activeTab } = useActiveTab();
-  const isActive = activeTab === "EDIT";
-  const [position, setPosition] = useState({ top: 0, left: 0 });
-  const [locationState, setLocationState] = useLocalStorage$1(TEXT_BAR_LOCATION_KEY, { left: 0, top: 0 });
-  const { idx } = props;
-  const container2 = getBlockNodeByIdx(idx);
+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 fixContainer = getEditorRoot();
-    if (fixContainer && idx) {
-      const { left, top } = fixContainer.getBoundingClientRect();
-      setPosition({
-        left: (locationState == null ? void 0 : locationState.left) || left,
-        top: (locationState == null ? void 0 : locationState.top) || top - 46
-      });
-    }
-  }, [idx, locationState == null ? void 0 : locationState.left, locationState == null ? void 0 : locationState.top]);
-  const onChange = useCallback(() => {
-  }, []);
-  const editorContainer = container2 && getEditNode(container2);
-  const textToolbar = useMemo(() => {
-    const onMoveTextToolbar = (event2) => {
-      onDrag({
-        event: event2,
-        onMove(x, y) {
-          setPosition({
-            left: position.left + x,
-            top: position.top + y
-          });
-          setLocationState({
-            left: position.left + x,
-            top: position.top + y
-          });
-        },
-        onEnd() {
-        }
-      });
+    const promiseObj = awaitForElement(focusIdx2);
+    promiseObj.promise.then((blockNode2) => {
+      setBlockNode(blockNode2);
+    });
+    return () => {
+      promiseObj.cancel();
     };
-    return createPortal(/* @__PURE__ */ React__default.createElement("div", {
-      key: idx,
-      style: __spreadProps(__spreadValues({
-        position: "fixed"
-      }, position), {
-        transform: "translate(0,-100%)",
-        padding: 16,
-        boxSizing: "border-box",
-        zIndex: 100,
-        display: Boolean(isActive) ? void 0 : "none"
-      })
-    }, /* @__PURE__ */ React__default.createElement("div", {
-      style: {
-        position: "absolute",
-        backgroundColor: "#41444d",
-        height: "100%",
-        width: "100%",
-        left: 0,
-        top: 0,
-        cursor: "move"
-      },
-      onMouseDown: onMoveTextToolbar
-    }), /* @__PURE__ */ React__default.createElement("div", {
-      style: { position: "relative", zIndex: 1 }
-    }, /* @__PURE__ */ React__default.createElement(TextToolbar, {
-      container: editorContainer,
-      onChange
-    }))), document.getElementById(FIXED_CONTAINER_ID));
-  }, [idx, position, isActive, editorContainer, onChange, setLocationState]);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(InlineTextField, __spreadValues({}, props)), editorContainer && textToolbar);
+  }, [focusIdx2, focusBlock2]);
+  useEffect(() => {
+    if (blockNode) {
+      const options2 = {
+        rootMargin: "-84px 0px 0px 0px",
+        root: getShadowRoot().firstChild,
+        threshold: [0, 1e-3, 0.1, 0.999, 0.8, 0.9, 1]
+      };
+      const checkDirection = (ev) => {
+        const [current] = ev;
+        const { top } = current.intersectionRect;
+        const boundingClientRect = current.boundingClientRect;
+        const rootBounds = current.rootBounds;
+        const intersectionRatio = current.intersectionRatio;
+        if (!rootBounds)
+          return;
+        const paddingLeft = (rootBounds.width - pageWidth) / 2;
+        const offsetLeft = boundingClientRect.left - rootBounds.left;
+        setOffsetX(paddingLeft - offsetLeft);
+        if (intersectionRatio === 1) {
+          setDirection("top");
+        } else {
+          if (top) {
+            if (top > rootBounds.top) {
+              setDirection("top");
+            } else {
+              setDirection("bottom");
+            }
+          }
+        }
+      };
+      const observer = new IntersectionObserver(checkDirection, options2);
+      observer.observe(blockNode);
+      return () => {
+        observer.unobserve(blockNode);
+      };
+    }
+  }, [blockNode, pageWidth]);
+  if (!blockNode)
+    return null;
+  const editorContainer = blockNode && getEditNode(blockNode);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, createPortal(/* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", {
+    dangerouslySetInnerHTML: { __html: styleText }
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    style: {
+      transform: direction === "top" ? "translate(0,-100%)" : void 0,
+      padding: "4px 8px",
+      boxSizing: "border-box",
+      position: "absolute",
+      zIndex: 100,
+      top: direction === "top" ? -40 : "calc(100% + 40px)",
+      left: offsetX,
+      width: pageWidth
+    }
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    style: {
+      position: "absolute",
+      backgroundColor: "#41444d",
+      height: "100%",
+      width: "100%",
+      left: 0,
+      top: 0
+    }
+  }), /* @__PURE__ */ React__default.createElement(Tools, {
+    container: editorContainer,
+    onChange: () => {
+    }
+  }))), blockNode));
+}
+const TEXT_BAR_LOCATION_KEY = "TEXT_BAR_LOCATION_KEY";
+const RichTextFieldItem = (props) => {
+  useLocalStorage$1(TEXT_BAR_LOCATION_KEY, { left: 0, top: 0 });
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(RichTextToolBar, null), /* @__PURE__ */ React__default.createElement(InlineTextField, __spreadValues({}, props)));
 };
 const RichTextField = (props) => {
   const { focusBlock: focusBlock2 } = useBlock();
@@ -39983,32 +40017,39 @@ function Page() {
 }
 function Padding(props = {}) {
   const { title: title2 = "Padding", attributeName = "padding" } = props;
-  const { focusBlock: focusBlock2 } = useBlock();
+  const { focusBlock: focusBlock2, change } = useBlock();
   const { focusIdx: focusIdx2 } = useFocusIdx();
-  const defaultConfig = useMemo(() => focusBlock2 && createBlockDataByType(focusBlock2.type), [focusBlock2]);
-  const getVal = useCallback((index2) => {
-    return () => {
-      var _a, _b;
-      return ((_a = focusBlock2 == null ? void 0 : focusBlock2.attributes[attributeName]) == null ? void 0 : _a.split(" ")[index2]) || ((_b = defaultConfig == null ? void 0 : defaultConfig.attributes[attributeName]) == null ? void 0 : _b.split(" ")[index2]);
-    };
-  }, [attributeName, defaultConfig == null ? void 0 : defaultConfig.attributes, focusBlock2 == null ? void 0 : focusBlock2.attributes]);
-  const setVal = useCallback((index2) => {
-    return (newVal) => {
-      if (newVal === "") {
-        newVal = "0px";
-      }
-      const vals = [
-        getVal(0)(),
-        getVal(1)(),
-        getVal(2)(),
-        getVal(3)()
-      ];
-      vals[index2] = newVal;
-      return vals.join(" ");
+  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
     };
-  }, [getVal]);
-  return useMemo(() => {
-    return /* @__PURE__ */ React__default.createElement(Stack$6, {
+  }, [paddingList, defaultPaddingList]);
+  const onChancePadding = useCallback((val) => {
+    change(focusIdx2 + `.attributes[${attributeName}]`, val);
+  }, [focusIdx2, attributeName]);
+  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, {
@@ -40020,18 +40061,14 @@ function Padding(props = {}) {
     }, /* @__PURE__ */ React__default.createElement(TextField, {
       label: /* @__PURE__ */ React__default.createElement("span", null, "Top\xA0"),
       quickchange: true,
-      name: `${focusIdx2}.attributes.${attributeName}`,
-      valueAdapter: getVal(0),
-      onChangeAdapter: setVal(0),
+      name: "top",
       inline: true
     })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
       fill: true
     }, /* @__PURE__ */ React__default.createElement(TextField, {
       label: "Bottom",
       quickchange: true,
-      name: `${focusIdx2}.attributes.${attributeName}`,
-      valueAdapter: getVal(2),
-      onChangeAdapter: setVal(2),
+      name: "bottom",
       inline: true
     }))), /* @__PURE__ */ React__default.createElement(Stack$6, {
       wrap: false
@@ -40040,22 +40077,29 @@ function Padding(props = {}) {
     }, /* @__PURE__ */ React__default.createElement(TextField, {
       label: /* @__PURE__ */ React__default.createElement("span", null, "Left"),
       quickchange: true,
-      name: `${focusIdx2}.attributes.${attributeName}`,
-      valueAdapter: getVal(3),
-      onChangeAdapter: setVal(3),
+      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: `${focusIdx2}.attributes.${attributeName}`,
-      valueAdapter: getVal(1),
-      onChangeAdapter: setVal(1),
+      name: "right",
       inline: true
-    }))));
-  }, [attributeName, focusIdx2, getVal, setVal, title2]);
+    })))), /* @__PURE__ */ React__default.createElement(PaddingChangeWrapper, {
+      onChange: onChancePadding
+    }));
+  });
 }
+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"
 }) {
@@ -43990,7 +44034,6 @@ const BlocksPanel = (props) => {
     tabPosition: "left",
     size: "large"
   }, filterCategories.map((category, index2) => /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
-    className: "no-scrollbar",
     style: {
       padding: 0,
       overflow: "auto"
@@ -44177,31 +44220,6 @@ function SourceCodePanel() {
     onBlur: onMjmlChange
   })));
 }
-function awaitForElement(idx) {
-  let promiseObj = {
-    cancel: () => {
-    },
-    promise: Promise.resolve()
-  };
-  promiseObj.promise = new Promise((resolve) => {
-    const ele = getBlockNodeByIdx(idx);
-    if (ele) {
-      resolve(ele);
-      return;
-    }
-    const timer = setInterval(() => {
-      const ele2 = getBlockNodeByIdx(idx);
-      if (ele2) {
-        resolve(ele2);
-        clearInterval(timer);
-      }
-    }, 50);
-    promiseObj.cancel = () => {
-      clearInterval(timer);
-    };
-  });
-  return promiseObj;
-}
 function Toolbar({
   block: block2,
   direction
@@ -44314,22 +44332,27 @@ function FocusTooltip() {
   useEffect(() => {
     if (blockNode) {
       const options2 = {
-        rootMargin: "-24px 0px -24px 0px",
-        root: getShadowRoot().host,
-        threshold: [0, 1e-3, 0.1, 0.999, 0.9, 1]
+        rootMargin: "-24px 0px 0px 0px",
+        root: getShadowRoot().firstChild,
+        threshold: [0, 1e-3, 0.1, 0.5, 0.999, 1]
       };
       const checkDirection = (ev) => {
         const [current] = ev;
-        const { top, bottom } = current.intersectionRect;
+        const { top } = current.intersectionRect;
         const rootBounds = current.rootBounds;
+        const intersectionRatio = current.intersectionRatio;
         if (!rootBounds)
           return;
-        if (rootBounds.bottom === bottom) {
+        if (intersectionRatio === 1) {
           setDirection("top");
-        } else if (rootBounds.top === top) {
-          setDirection("bottom");
         } else {
-          setDirection("top");
+          if (top) {
+            if (top > rootBounds.top) {
+              setDirection("top");
+            } else {
+              setDirection("bottom");
+            }
+          }
         }
       };
       const observer = new IntersectionObserver(checkDirection, options2);