easy-email-extensions 3.1.26 → 3.1.30

package/lib/index2.js

@@ -55,12 +55,12 @@ 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, Fragment, createElement, Suspense } from "react";
-import { IconFont, useEditorProps, Stack as Stack$6, getBlockNodeByIdx, useBlock, getEditNode, getEditContent, useFocusIdx, TextStyle, useEditorContext, getShadowRoot, FIXED_CONTAINER_ID, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, getEditorRoot, useActiveTab, ActiveTabKeys } from "easy-email-editor";
+import { IconFont, useEditorProps, Stack as Stack$6, getBlockNodeByIdx, useBlock, getEditNode, getEditContent, TextStyle, useFocusIdx, useEditorContext, getShadowRoot, FIXED_CONTAINER_ID, useFocusBlockLayout, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, useRefState, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, getEditorRoot, useActiveTab, ActiveTabKeys } from "easy-email-editor";
 import { BasicType, ImageManager, BlockManager, getParentIdx, createBlockDataByType, getParentByIdx, getValueByIdx, getIndexByIdx, getSiblingIdx, getNodeIdxFromClassName, 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 = "";
-const title = "_title_pteer_1";
+const title = "_title_15yi1_1";
 var styles$6 = {
   title
 };
@@ -5497,8 +5497,8 @@ function EyeIcon$1({
     iconName: "icon-eye"
   });
 }
-function _extends$g() {
-  _extends$g = Object.assign || function(target2) {
+function _extends$f() {
+  _extends$f = Object.assign || function(target2) {
     for (var i2 = 1; i2 < arguments.length; i2++) {
       var source = arguments[i2];
       for (var key in source) {
@@ -5509,7 +5509,7 @@ function _extends$g() {
     }
     return target2;
   };
-  return _extends$g.apply(this, arguments);
+  return _extends$f.apply(this, arguments);
 }
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null)
@@ -5987,7 +5987,7 @@ var CSSTransition = /* @__PURE__ */ function(_React$Component) {
     var _this$props = this.props;
     _this$props.classNames;
     var props = _objectWithoutPropertiesLoose(_this$props, ["classNames"]);
-    return /* @__PURE__ */ React__default.createElement(Transition$1, _extends$g({}, props, {
+    return /* @__PURE__ */ React__default.createElement(Transition$1, _extends$f({}, props, {
       onEnter: this.onEnter,
       onEntered: this.onEntered,
       onEntering: this.onEntering,
@@ -6157,7 +6157,7 @@ var TransitionGroup = /* @__PURE__ */ function(_React$Component) {
     }
     if (this.mounted) {
       this.setState(function(state) {
-        var children = _extends$g({}, state.children);
+        var children = _extends$f({}, state.children);
         delete children[child.key];
         return {
           children
@@ -6328,21 +6328,7 @@ SwitchTransition.defaultProps = {
   mode: modes.out
 };
 var SwitchTransition$1 = SwitchTransition;
-function _extends$f() {
-  _extends$f = Object.assign || function(target2) {
-    for (var i2 = 1; i2 < arguments.length; i2++) {
-      var source = arguments[i2];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target2[key] = source[key];
-        }
-      }
-    }
-    return target2;
-  };
-  return _extends$f.apply(this, arguments);
-}
-function _defineProperty$3(obj, key, value) {
+function _defineProperty$2(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -6376,7 +6362,7 @@ function _objectSpread$x(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$x(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -6440,7 +6426,7 @@ function _objectSpread$w(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$w(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -6504,7 +6490,7 @@ function _objectSpread$v(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$v(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -6568,7 +6554,7 @@ function _objectSpread$u(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$u(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -6632,7 +6618,7 @@ function _objectSpread$t(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$t(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -7144,7 +7130,7 @@ function _objectSpread$s(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$s(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -7635,7 +7621,7 @@ function _objectSpread$r(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$r(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -9263,7 +9249,7 @@ function _objectSpread$q(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$q(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -9706,7 +9692,7 @@ function _objectSpread$p(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$p(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -9769,7 +9755,7 @@ function _objectSpread$o(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$o(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -11655,7 +11641,7 @@ function _objectSpread$n(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$n(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -11715,7 +11701,7 @@ function _objectSpread$m(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$m(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -14436,7 +14422,7 @@ function _objectSpread$l(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$l(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -15161,7 +15147,7 @@ function _objectSpread$k(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$k(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -15475,7 +15461,7 @@ function _objectSpread$j(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$j(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -15535,7 +15521,7 @@ function _objectSpread$i(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$i(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -15599,7 +15585,7 @@ function _objectSpread$h(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$h(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -16362,7 +16348,7 @@ function _objectSpread$g(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$g(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -16422,7 +16408,7 @@ function _objectSpread$f(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$f(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -16710,8 +16696,8 @@ var defineProperty$4 = function() {
   } catch (e) {
   }
 }();
-var _defineProperty$2 = defineProperty$4;
-var defineProperty$3 = _defineProperty$2;
+var _defineProperty$1 = defineProperty$4;
+var defineProperty$3 = _defineProperty$1;
 function baseAssignValue$4(object, key, value) {
   if (key == "__proto__" && defineProperty$3) {
     defineProperty$3(object, key, {
@@ -17144,7 +17130,7 @@ function constant$2(value) {
   };
 }
 var constant_1 = constant$2;
-var constant$1 = constant_1, defineProperty$2 = _defineProperty$2, identity$4 = identity_1;
+var constant$1 = constant_1, defineProperty$2 = _defineProperty$1, identity$4 = identity_1;
 var baseSetToString$3 = !defineProperty$2 ? identity$4 : function(func, string) {
   return defineProperty$2(func, "toString", {
     "configurable": true,
@@ -18070,7 +18056,7 @@ function _objectSpread$e(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$e(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -18130,7 +18116,7 @@ function _objectSpread$d(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$d(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -18387,7 +18373,7 @@ function _objectSpread$c(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$c(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -18912,7 +18898,7 @@ function _objectSpread$b(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$b(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -18974,7 +18960,7 @@ function _objectSpread$a(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$a(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -19208,7 +19194,7 @@ function _objectSpread$9(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$9(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -19268,7 +19254,7 @@ function _objectSpread$8(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$8(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -19359,7 +19345,7 @@ function _objectSpread$7(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$7(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -21698,7 +21684,7 @@ var FocusLock$1 = /* @__PURE__ */ React.forwardRef(function FocusLockUI2(props,
       setObserved(newObserved);
     }
   }, []);
-  var lockProps = _extends$g((_extends2 = {}, _extends2[FOCUS_DISABLED] = disabled && "disabled", _extends2[FOCUS_GROUP] = group, _extends2), containerProps);
+  var lockProps = _extends$f((_extends2 = {}, _extends2[FOCUS_DISABLED] = disabled && "disabled", _extends2[FOCUS_GROUP] = group, _extends2), containerProps);
   var hasLeadingGuards = noFocusGuards !== true;
   var hasTailingGuards = hasLeadingGuards && noFocusGuards !== "tail";
   var mergedRef = useMergeRefs([parentRef, setObserveNode]);
@@ -21728,7 +21714,7 @@ var FocusLock$1 = /* @__PURE__ */ React.forwardRef(function FocusLockUI2(props,
     onActivation,
     onDeactivation,
     returnFocus
-  }), /* @__PURE__ */ React.createElement(Container, _extends$g({
+  }), /* @__PURE__ */ React.createElement(Container, _extends$f({
     ref: mergedRef
   }, lockProps, {
     className,
@@ -21760,19 +21746,6 @@ FocusLock$1.defaultProps = {
   onDeactivation: void 0
 };
 var FocusLockUI = FocusLock$1;
-function _defineProperty$1(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 function withSideEffect(reducePropsToState2, handleStateChangeOnClient2) {
   function getDisplayName(WrappedComponent) {
     return WrappedComponent.displayName || WrappedComponent.name || "Component";
@@ -21812,7 +21785,7 @@ function withSideEffect(reducePropsToState2, handleStateChangeOnClient2) {
       };
       return SideEffect2;
     }(PureComponent);
-    _defineProperty$1(SideEffect, "displayName", "SideEffect(" + getDisplayName(WrappedComponent) + ")");
+    _defineProperty$2(SideEffect, "displayName", "SideEffect(" + getDisplayName(WrappedComponent) + ")");
     return SideEffect;
   };
 }
@@ -22412,7 +22385,7 @@ mediumEffect.assignMedium(function(cb) {
 });
 var FocusTrap = withSideEffect(reducePropsToState, handleStateChangeOnClient)(FocusWatcher);
 var FocusLockCombination = /* @__PURE__ */ React.forwardRef(function FocusLockUICombination(props, ref) {
-  return /* @__PURE__ */ React.createElement(FocusLockUI, _extends$g({
+  return /* @__PURE__ */ React.createElement(FocusLockUI, _extends$f({
     sideCar: FocusTrap,
     ref
   }, props));
@@ -25919,7 +25892,7 @@ function _objectSpread$6(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$6(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -25979,7 +25952,7 @@ function _objectSpread$5(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$5(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -27634,7 +27607,7 @@ function _objectSpread$4(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$4(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -28438,7 +28411,7 @@ function _objectSpread$3(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$3(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -28498,7 +28471,7 @@ function _objectSpread$2(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$2(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -30709,7 +30682,7 @@ function _objectSpread$1(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys$1(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -31072,7 +31045,7 @@ function _objectSpread(target2) {
     var source = arguments[i2] != null ? arguments[i2] : {};
     if (i2 % 2) {
       ownKeys(Object(source), true).forEach(function(key) {
-        _defineProperty$3(target2, key, source[key]);
+        _defineProperty$2(target2, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
@@ -38796,36 +38769,13 @@ function AutoComplete(props) {
     data: options2
   }));
 }
-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;
-}
 const ToolItem$1 = (props) => {
   return /* @__PURE__ */ React__default.createElement(Tooltip$1, {
     mini: true,
+    position: "bottom",
     content: props.title
   }, /* @__PURE__ */ React__default.createElement("button", {
+    tabIndex: -1,
     className: "easy-email-extensions-emailToolItem",
     title: props.title,
     onClick: props.onClick
@@ -38893,27 +38843,46 @@ function Link$1(props) {
         style: { color: "#333" }
       }, /* @__PURE__ */ React__default.createElement(Stack$6, {
         vertical: true,
-        spacing: "tight"
-      }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, null), /* @__PURE__ */ React__default.createElement(SearchField, {
+        spacing: "none"
+      }, /* @__PURE__ */ React__default.createElement(SearchField, {
+        size: "small",
         name: "link",
         label: "Link",
         labelHidden: true,
         searchButton: "Apply",
         placeholder: "https://www.example.com",
         onSearch: () => handleSubmit()
-      }), /* @__PURE__ */ React__default.createElement(Stack$6, null, /* @__PURE__ */ React__default.createElement(SwitchField, {
+      })), /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
+        span: 12
+      }, /* @__PURE__ */ React__default.createElement(Space$1, {
+        align: "center",
+        size: "mini"
+      }, /* @__PURE__ */ React__default.createElement(TextStyle, {
+        size: "smallest"
+      }, "Target"), /* @__PURE__ */ React__default.createElement(SwitchField, {
+        size: "small",
         label: "Target",
+        labelHidden: true,
         name: "blank",
         checkedText: "blank",
         uncheckedText: "self",
         inline: true
-      }), /* @__PURE__ */ React__default.createElement(SwitchField, {
+      }))), /* @__PURE__ */ React__default.createElement(Grid.Col, {
+        span: 12
+      }, /* @__PURE__ */ React__default.createElement(Space$1, {
+        align: "center",
+        size: "mini"
+      }, /* @__PURE__ */ React__default.createElement(TextStyle, {
+        size: "smallest"
+      }, "Underline"), /* @__PURE__ */ React__default.createElement(SwitchField, {
+        size: "small",
         label: "Underline",
+        labelHidden: true,
         name: "underline",
         checkedText: "off",
         uncheckedText: "on",
         inline: true
-      }))))
+      })))))
     }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
       title: "Link",
       icon: /* @__PURE__ */ React__default.createElement(IconFont, {
@@ -38998,13 +38967,13 @@ 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$g({}, rest, {
+    return /* @__PURE__ */ createElement(component, _extends$f({}, rest, {
       children,
       render: render3
     }));
   }
   if (render3) {
-    return render3(children === void 0 ? rest : _extends$g({}, rest, {
+    return render3(children === void 0 ? rest : _extends$f({}, rest, {
       children
     }));
   }
@@ -39063,7 +39032,7 @@ var useFieldArray = function useFieldArray2(name, _temp) {
     };
   });
   var _useField = useField(name, {
-    subscription: _extends$g({}, subscription, {
+    subscription: _extends$f({}, subscription, {
       length: true
     }),
     defaultValue,
@@ -39089,7 +39058,7 @@ var useFieldArray = function useFieldArray2(name, _temp) {
     return results;
   };
   return {
-    fields: _extends$g({
+    fields: _extends$f({
       name,
       forEach: forEach2,
       length: length || 0,
@@ -39115,9 +39084,9 @@ var FieldArray = function FieldArray2(_ref2) {
     isEqual: isEqual2,
     validate: validate3
   }), fields = _useFieldArray.fields, meta = _useFieldArray.meta;
-  return renderComponent(_extends$g({
+  return renderComponent(_extends$f({
     fields,
-    meta: _extends$g({}, meta, {
+    meta: _extends$f({}, meta, {
       __versions: versions
     })
   }, rest), "FieldArray(" + name + ")");
@@ -39253,11 +39222,11 @@ const MergeTags = React__default.memo((props) => {
   }, [props]);
   const mergeTagContent = useMemo(() => renderMergeTagContent ? renderMergeTagContent({
     onChange: props.onChange,
-    isSelect: props.isSelect,
+    isSelect: Boolean(props.isSelect),
     value: props.value
   }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null), [renderMergeTagContent, props.onChange, props.isSelect, props.value]);
   if (renderMergeTagContent) {
-    return mergeTagContent;
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, mergeTagContent);
   }
   return /* @__PURE__ */ React__default.createElement("div", {
     style: { color: "#333" }
@@ -41436,7 +41405,23 @@ function Tools(props) {
       display: "flex",
       alignItems: "center"
     }
-  }, /* @__PURE__ */ React__default.createElement("div", {
+  }, mergeTags2 && /* @__PURE__ */ React__default.createElement(Popover$1, {
+    trigger: "click",
+    color: "#fff",
+    position: "left",
+    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("div", {
     className: "easy-email-extensions-divider"
   }), /* @__PURE__ */ React__default.createElement(Popover$1, {
     className: "easy-email-extensions-Tools-Popover",
@@ -41515,22 +41500,6 @@ function Tools(props) {
     getPopupContainer: getPopoverMountNode
   }), /* @__PURE__ */ React__default.createElement("div", {
     className: "easy-email-extensions-divider"
-  }), mergeTags2 && /* @__PURE__ */ React__default.createElement(Popover$1, {
-    trigger: "click",
-    color: "#fff",
-    position: "bottom",
-    content: /* @__PURE__ */ React__default.createElement(MergeTags, {
-      value: "",
-      onChange: (val) => execCommand("insertHTML", val)
-    }),
-    getPopupContainer: getPopoverMountNode
-  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    title: "Merge tag",
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-merge-tags"
-    })
-  })), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
   }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
     onClick: () => execCommand("justifyLeft"),
     icon: /* @__PURE__ */ React__default.createElement(IconFont, {
@@ -41597,41 +41566,10 @@ function Tools(props) {
 }
 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(props) {
-  const [position, setPosition] = useState({ top: 0, left: 0 });
-  const [blockNode, setBlockNode] = useState(null);
-  const { focusBlock: focusBlock2 } = useBlock();
-  const { pageData: pageData2 } = useEditorContext();
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  +(pageData2.attributes.width || "600").replace("px", "");
-  useEffect(() => {
-    const promiseObj = awaitForElement(focusIdx2);
-    promiseObj.promise.then((blockNode2) => {
-      setBlockNode(blockNode2);
-    });
-    return () => {
-      promiseObj.cancel();
-    };
-  }, [focusIdx2, focusBlock2]);
-  useEffect(() => {
-    const ele = getShadowRoot().querySelector(".shadow-container");
-    if (!blockNode || !ele)
-      return;
-    const check = () => {
-      const { top, left } = blockNode.getBoundingClientRect();
-      setPosition({ top, left });
-    };
-    const onScroll = () => {
-      check();
-    };
-    check();
-    ele.addEventListener("scroll", onScroll, true);
-    return () => {
-      ele.removeEventListener("scroll", onScroll, true);
-    };
-  }, [blockNode]);
-  if (!blockNode)
+  const { focusBlockNode, focusBlockRect } = useFocusBlockLayout();
+  if (!focusBlockNode || !focusBlockRect)
     return null;
-  const editorContainer = blockNode && getEditNode(blockNode);
+  const editorContainer = getEditNode(focusBlockNode);
   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", {
@@ -41641,8 +41579,8 @@ function RichTextToolBar(props) {
       boxSizing: "border-box",
       position: "fixed",
       zIndex: 100,
-      top: position.top - 24,
-      left: position.left
+      top: focusBlockRect.top - 24,
+      left: focusBlockRect.left
     }
   }, /* @__PURE__ */ React__default.createElement("div", {
     style: {
@@ -41656,7 +41594,7 @@ function RichTextToolBar(props) {
   }), /* @__PURE__ */ React__default.createElement(Tools, {
     container: editorContainer,
     onChange: props.onChange
-  }))), blockNode));
+  }))), focusBlockNode));
 }
 const RichTextField = (props) => {
   const { focusBlock: focusBlock2 } = useBlock();
@@ -41675,7 +41613,7 @@ function FieldWrapper(props) {
   const _a = props, { input } = _a, rest = __objRest(_a, ["input"]);
   const debounceCallbackChange = useCallback(lodash.exports.debounce((val) => {
     input.onChange(val);
-  }, 500), [input]);
+  }, 100), [input]);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(RichTextToolBar, {
     onChange: debounceCallbackChange
   }), /* @__PURE__ */ React__default.createElement(InlineText, __spreadProps(__spreadValues({}, rest), {
@@ -41864,14 +41802,8 @@ function useAvatarWrapperDrop() {
   const {
     formState: { values: values2 }
   } = useEditorContext();
-  const valuesRef = useRef(values2);
-  const dataTransferRef = useRef(dataTransfer);
-  useEffect(() => {
-    valuesRef.current = values2;
-  }, [values2]);
-  useEffect(() => {
-    dataTransferRef.current = dataTransfer;
-  }, [dataTransfer]);
+  const valuesRef = useRefState(values2);
+  const dataTransferRef = useRefState(dataTransfer);
   function isKeyObject(o) {
     return o.key !== void 0;
   }
@@ -42044,21 +41976,25 @@ const iconsMap = {
 function getIconNameByBlockType(type) {
   return lodash.exports.get(iconsMap, type) || "icon-number";
 }
+const tempEle = document.createElement("div");
+function getBlockTitle(blockData, isFromContent = true) {
+  var _a;
+  if (blockData.title)
+    return blockData.title;
+  if (isFromContent && (blockData.type === BasicType.TEXT || blockData.type === BasicType.BUTTON)) {
+    tempEle.innerHTML = blockData.data.value.content;
+    return tempEle.innerText;
+  }
+  const blockName = (_a = BlockManager.getBlockByType(blockData.type)) == null ? void 0 : _a.name;
+  return blockName;
+}
 function BlockLayer() {
   const { pageData: pageData2 } = useEditorContext();
   const { focusIdx: focusIdx2, setFocusIdx } = useFocusIdx();
   const { setHoverIdx, setIsDragging, setDirection } = useHoverIdx();
   const { moveBlock, setValueByIdx: setValueByIdx2, copyBlock, removeBlock, values: values2 } = useBlock();
-  const {
-    setBlockLayerRef,
-    allowDrop,
-    blockLayerRef,
-    removeHightLightClassName
-  } = useAvatarWrapperDrop();
-  const valueRef = useRef(values2);
-  useEffect(() => {
-    valueRef.current = values2;
-  }, [values2]);
+  const { setBlockLayerRef, allowDrop, removeHightLightClassName } = useAvatarWrapperDrop();
+  const valueRef = useRefState(values2);
   const [contextMenuData, setContextMenuData] = useState(null);
   const onToggleVisible = useCallback(({ id }, e) => {
     e.stopPropagation();
@@ -42069,8 +42005,8 @@ function BlockLayer() {
     }
   }, [setValueByIdx2]);
   const renderTitle = useCallback((data) => {
-    const block2 = BlockManager.getBlockByType(data.type);
     const isPage = data.type === BasicType.PAGE;
+    const title2 = getBlockTitle(data);
     return /* @__PURE__ */ React__default.createElement("div", {
       "data-tree-idx": data.id,
       className: classnames(styles$6.title, !isPage && getNodeIdxClassName(data.id), !isPage && "email-block")
@@ -42080,9 +42016,12 @@ function BlockLayer() {
     }, /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: getIconNameByBlockType(data.type),
       style: { fontSize: 12, color: "#999" }
-    }), /* @__PURE__ */ React__default.createElement(TextStyle, {
+    }), /* @__PURE__ */ React__default.createElement("div", {
+      title: title2,
+      style: { overflow: "hidden", whiteSpace: "nowrap", width: "5em" }
+    }, /* @__PURE__ */ React__default.createElement(TextStyle, {
       size: "smallest"
-    }, block2 == null ? void 0 : block2.name)), /* @__PURE__ */ React__default.createElement("div", {
+    }, title2))), /* @__PURE__ */ React__default.createElement("div", {
       className: styles$6.eyeIcon
     }, /* @__PURE__ */ React__default.createElement(EyeIcon$1, {
       blockData: data,
@@ -44600,33 +44539,12 @@ function SourceCodePanel() {
     onBlur: onMjmlChange
   })));
 }
-function Toolbar({
-  block: block2,
-  blockNode
-}) {
-  const { moveBlock, copyBlock, removeBlock } = useBlock();
+function Toolbar() {
+  const { moveBlock, copyBlock, removeBlock, focusBlock: focusBlock2 } = useBlock();
   const { focusIdx: focusIdx2, setFocusIdx } = useFocusIdx();
-  const { initialized } = useEditorContext();
+  const { focusBlockRect } = useFocusBlockLayout();
   const { modal, setModalVisible } = useAddToCollection();
-  const [position, setPosition] = useState({ top: 0, left: 0 });
-  const isPage = block2.type === BasicType.PAGE;
-  useEffect(() => {
-    const check = () => {
-      const { top, left } = blockNode.getBoundingClientRect();
-      setPosition({ top, left });
-    };
-    const ele = getShadowRoot().querySelector(".shadow-container");
-    if (!ele || !initialized)
-      return;
-    check();
-    const onScroll = () => {
-      check();
-    };
-    ele.addEventListener("scroll", onScroll, true);
-    return () => {
-      ele.removeEventListener("scroll", onScroll, true);
-    };
-  }, [blockNode, initialized]);
+  const isPage = (focusBlock2 == null ? void 0 : focusBlock2.type) === BasicType.PAGE;
   const handleAddToCollection = () => {
     if (document.activeElement instanceof HTMLElement) {
       document.activeElement.blur();
@@ -44651,13 +44569,15 @@ function Toolbar({
     }
     setFocusIdx(getParentIdx(focusIdx2));
   };
+  if (!focusBlockRect)
+    return null;
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
     id: "easy-email-extensions-InteractivePrompt-Toolbar",
     style: {
       position: "fixed",
-      left: position.left,
+      left: focusBlockRect.left,
       height: 0,
-      top: position.top,
+      top: focusBlockRect.top,
       zIndex: 100
     }
   }, /* @__PURE__ */ React__default.createElement("div", {
@@ -44677,9 +44597,11 @@ function Toolbar({
       display: "inline-flex",
       padding: "1px 5px",
       boxSizing: "border-box",
-      whiteSpace: "nowrap"
+      whiteSpace: "nowrap",
+      maxWidth: 300,
+      overflow: "hidden"
     }
-  }, block2.name), /* @__PURE__ */ React__default.createElement("div", {
+  }, focusBlock2 && getBlockTitle(focusBlock2, false)), /* @__PURE__ */ React__default.createElement("div", {
     onClick: (e) => {
       e.stopPropagation();
     },
@@ -44726,25 +44648,11 @@ function ToolItem(props) {
   });
 }
 function FocusTooltip() {
-  const [blockNode, setBlockNode] = useState(null);
   const { focusBlock: focusBlock2 } = useBlock();
   const { focusIdx: focusIdx2 } = useFocusIdx();
+  const { focusBlockNode } = useFocusBlockLayout();
   const isPage = (focusBlock2 == null ? void 0 : focusBlock2.type) === BasicType.PAGE;
-  useEffect(() => {
-    const promiseObj = awaitForElement(focusIdx2);
-    promiseObj.promise.then((blockNode2) => {
-      setBlockNode(blockNode2);
-    });
-    return () => {
-      promiseObj.cancel();
-    };
-  }, [focusIdx2, focusBlock2]);
-  const block2 = useMemo(() => {
-    if (!focusBlock2)
-      return null;
-    return BlockManager.getBlockByType(focusBlock2.type);
-  }, [focusBlock2]);
-  if (!block2 || !blockNode)
+  if (!focusBlockNode || !focusBlock2)
     return null;
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, createPortal(/* @__PURE__ */ React__default.createElement("div", {
     id: "easy-email-extensions-InteractivePrompt-FocusTooltip",
@@ -44772,7 +44680,7 @@ function FocusTooltip() {
     }
   }, /* @__PURE__ */ React__default.createElement(BlockAvatarWrapper, {
     idx: focusIdx2,
-    type: block2.type,
+    type: focusBlock2.type,
     action: "move"
   }, /* @__PURE__ */ React__default.createElement("div", {
     style: {
@@ -44805,10 +44713,32 @@ function FocusTooltip() {
       outlineOffset: "-2px",
       outline: "2px solid var(--selected-color)"
     }
-  }), /* @__PURE__ */ React__default.createElement(Toolbar, {
-    block: block2,
-    blockNode
-  })), blockNode));
+  }), /* @__PURE__ */ React__default.createElement(Toolbar, null)), focusBlockNode));
+}
+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 HoverTooltip() {
   const { hoverIdx, direction, isDragging } = useHoverIdx();
@@ -44917,9 +44847,7 @@ function TipNode(props) {
     }
   }, type === "hover" && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
     style: {
-      position: "absolute",
-      left: 0,
-      top: 0,
+      position: "fixed",
       backgroundColor: color,
       color: "#ffffff",
       height: "22px",
@@ -45253,5 +45181,5 @@ const SimpleLayout = (props) => {
     title: "Source code"
   }, /* @__PURE__ */ React__default.createElement(SourceCodePanel, null))))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null)));
 };
-export { SwitchField as $, AttributePanel as A, BlockLayer as B, Color as C, Decoration as D, InputWithUnitField as E, FontFamily as F, SearchField as G, Height as H, InteractivePrompt as I, TextAreaField as J, NumberField as K, LetterSpacing as L, Margin as M, NavbarLinkPadding as N, SliderField as O, Padding as P, ColorPickerField as Q, ImageUploaderField as R, ShortcutToolbar as S, TextAlign as T, UploadField as U, VerticalAlign as V, Width as W, SelectField as X, TreeSelectField as Y, AutoCompleteField as Z, RadioGroupField as _, BlockAttributeConfigurationManager as a, DatePickerField as a0, CheckboxField as a1, EditTabField as a2, InlineTextField as a3, enhancer as a4, RichTextField as a5, Align as b, commonjsGlobal as c, AttributesPanelWrapper as d, ContainerBackgroundColor as e, TextDecoration as f, getContextMergeTags as g, Background as h, LineHeight as i, TextTransform as j, BackgroundColor as k, Direction as l, Link as m, Border as n, BorderColor as o, FontSize as p, MergeTags as q, BorderStyle as r, FontStyle as s, BorderWidth as t, FontWeight as u, BlockMarketManager as v, BlockMaskWrapper as w, SourceCodePanel as x, SimpleLayout as y, TextField as z };
+export { RadioGroupField as $, AttributePanel as A, BlockLayer as B, Color as C, Decoration as D, TextField as E, FontFamily as F, InputWithUnitField as G, Height as H, InteractivePrompt as I, SearchField as J, TextAreaField as K, LetterSpacing as L, Margin as M, NavbarLinkPadding as N, NumberField as O, Padding as P, SliderField as Q, ColorPickerField as R, ShortcutToolbar as S, TextAlign as T, UploadField as U, VerticalAlign as V, Width as W, ImageUploaderField as X, SelectField as Y, TreeSelectField as Z, AutoCompleteField as _, getIconNameByBlockType as a, SwitchField as a0, DatePickerField as a1, CheckboxField as a2, EditTabField as a3, InlineTextField as a4, enhancer as a5, RichTextField as a6, BlockAttributeConfigurationManager as b, commonjsGlobal as c, Align as d, AttributesPanelWrapper as e, ContainerBackgroundColor as f, getContextMergeTags as g, TextDecoration as h, Background as i, LineHeight as j, TextTransform as k, BackgroundColor as l, Direction as m, Link as n, Border as o, BorderColor as p, FontSize as q, MergeTags as r, BorderStyle as s, FontStyle as t, BorderWidth as u, FontWeight as v, BlockMarketManager as w, BlockMaskWrapper as x, SourceCodePanel as y, SimpleLayout as z };
 //# sourceMappingURL=index2.js.map