easy-email-extensions 4.15.0 → 4.16.1

package/lib/index2.js

@@ -56,9 +56,9 @@ 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, useImperativeHandle, PureComponent, useCallback, useReducer, createRef, Fragment, createElement, Suspense } from "react";
-import { IconFont, useEditorProps, Stack as Stack$4, useRefState, getShadowRoot, DATA_CONTENT_EDITABLE_TYPE, ContentEditableType, TextStyle, useEditorContext, useBlock, useFocusIdx, useFocusBlockLayout, MergeTagBadge, FIXED_CONTAINER_ID, getPluginElement, RICH_TEXT_BAR_ID, CONTENT_EDITABLE_CLASS_NAME, getEditorRoot, DATA_CONTENT_EDITABLE_IDX, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, isTextBlock, getBlockNodeByIdx, useLazyState, useActiveTab, ActiveTabKeys } from "easy-email-editor";
+import { IconFont, useEditorProps, Stack as Stack$4, useRefState, getShadowRoot, DATA_CONTENT_EDITABLE_TYPE, ContentEditableType, TextStyle, useEditorContext, useBlock, useFocusIdx, DATA_CONTENT_EDITABLE_IDX, useFocusBlockLayout, MergeTagBadge, FIXED_CONTAINER_ID, getPluginElement, RICH_TEXT_BAR_ID, CONTENT_EDITABLE_CLASS_NAME, getEditorRoot, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, isTextBlock, getBlockNodeByIdx, useLazyState, useActiveTab, ActiveTabKeys } from "easy-email-editor";
 import { BasicType, ImageManager, EMAIL_BLOCK_CLASS_NAME, BlockManager, createBlockDataByType, AdvancedType, Operator, OperatorSymbol, isAdvancedBlock, getParentByIdx, getParentIdx, getIndexByIdx, getSiblingIdx, getNodeIdxFromClassName, getNodeIdxClassName, getPageIdx, getChildIdx, JsonToMjml, getNodeTypeFromClassName } from "easy-email-core";
-import ReactDOM, { findDOMNode, createPortal } from "react-dom";
+import ReactDOM, { findDOMNode, render, createPortal } from "react-dom";
 import { Field, useForm as useForm$1, useField, Form as Form$3, version as version$2, useFormState } from "react-final-form";
 import { v4 } from "uuid";
 import mjml from "mjml-browser";
@@ -5814,7 +5814,7 @@ var Transition = /* @__PURE__ */ function(_React$Component) {
       setTimeout(this.nextCallback, timeout);
     }
   };
-  _proto.render = function render() {
+  _proto.render = function render2() {
     var status = this.state.status;
     if (status === UNMOUNTED) {
       return null;
@@ -5984,7 +5984,7 @@ var CSSTransition = /* @__PURE__ */ function(_React$Component) {
       removeClass(node, doneClassName);
     }
   };
-  _proto.render = function render() {
+  _proto.render = function render2() {
     var _this$props = this.props;
     _this$props.classNames;
     var props = _objectWithoutPropertiesLoose(_this$props, ["classNames"]);
@@ -6166,7 +6166,7 @@ var TransitionGroup = /* @__PURE__ */ function(_React$Component) {
       });
     }
   };
-  _proto.render = function render() {
+  _proto.render = function render2() {
     var _this$props = this.props, Component2 = _this$props.component, childFactory2 = _this$props.childFactory, props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);
     var contextValue = this.state.contextValue;
     var children = values(this.state.children).map(childFactory2);
@@ -6297,7 +6297,7 @@ var SwitchTransition = /* @__PURE__ */ function(_React$Component) {
       })
     };
   };
-  _proto.render = function render() {
+  _proto.render = function render2() {
     var _this$props = this.props, children = _this$props.children, mode = _this$props.mode, _this$state = this.state, status = _this$state.status, current = _this$state.current;
     var data = {
       children,
@@ -9152,7 +9152,7 @@ var ResizeObserverSPI = function() {
   return ResizeObserverSPI2;
 }();
 var observers = typeof WeakMap !== "undefined" ? new WeakMap() : new MapShim();
-var ResizeObserver$1 = function() {
+var ResizeObserver$2 = function() {
   function ResizeObserver2(callback) {
     if (!(this instanceof ResizeObserver2)) {
       throw new TypeError("Cannot call a class as a function.");
@@ -9171,7 +9171,7 @@ var ResizeObserver$1 = function() {
   "unobserve",
   "disconnect"
 ].forEach(function(method) {
-  ResizeObserver$1.prototype[method] = function() {
+  ResizeObserver$2.prototype[method] = function() {
     var _a;
     return (_a = observers.get(this))[method].apply(_a, arguments);
   };
@@ -9180,7 +9180,7 @@ var index$1 = function() {
   if (typeof global$1.ResizeObserver !== "undefined") {
     return global$1.ResizeObserver;
   }
-  return ResizeObserver$1;
+  return ResizeObserver$2;
 }();
 var __extends$6 = globalThis && globalThis.__extends || function() {
   var extendStatics = function(d, b) {
@@ -9242,7 +9242,7 @@ var ResizeObserverComponent = function(_super) {
   };
   return ResizeObserverComponent2;
 }(React__default.Component);
-var ResizeObserver = ResizeObserverComponent;
+var ResizeObserver$1 = ResizeObserverComponent;
 var useIsomorphicLayoutEffect = isServerRendering ? useEffect : useLayoutEffect;
 var useIsomorphicLayoutEffect$1 = useIsomorphicLayoutEffect;
 var __read$1d = globalThis && globalThis.__read || function(o, n) {
@@ -10190,7 +10190,7 @@ var InputComponent = React__default.forwardRef(function(props, ref) {
     onMouseDown: function(e) {
       e.preventDefault();
     }
-  })) : null) : React__default.createElement("input", __assign$1n({ ref: refInput }, inputProps, { style: hasParent ? {} : __assign$1n(__assign$1n({}, style), "height" in props ? { height } : {}) })), autoFitWidth && React__default.createElement(ResizeObserver, { onResize: function() {
+  })) : null) : React__default.createElement("input", __assign$1n({ ref: refInput }, inputProps, { style: hasParent ? {} : __assign$1n(__assign$1n({}, style), "height" in props ? { height } : {}) })), autoFitWidth && React__default.createElement(ResizeObserver$1, { onResize: function() {
     var inputWidth = refInputMirror.current.offsetWidth;
     if (typeof autoFitWidth === "object") {
       var delay = typeof autoFitWidth.delay === "function" ? autoFitWidth.delay(inputWidth, refPrevInputWidth.current) : autoFitWidth.delay;
@@ -11389,7 +11389,7 @@ var Trigger = function(_super) {
     }
     var prefixCls2 = getPrefixCls("trigger");
     var popupClassName = cs$1(prefixCls2, childrenPrefix, prefixCls2 + "-position-" + position, className);
-    var childrenComponent = isExistChildren && React__default.createElement(ResizeObserver, { onResize: this.onResize }, React__default.cloneElement(child, __assign$1i({}, mergeProps2)));
+    var childrenComponent = isExistChildren && React__default.createElement(ResizeObserver$1, { onResize: this.onResize }, React__default.cloneElement(child, __assign$1i({}, mergeProps2)));
     var portalContent = React__default.createElement(CSSTransition$1, { in: !!popupVisible, timeout: duration2, classNames, unmountOnExit, appear: true, mountOnEnter: true, onEnter: function(e) {
       e.style.display = "initial";
       e.style.pointerEvents = "none";
@@ -11411,7 +11411,7 @@ var Trigger = function(_super) {
         _this.triggerRef = null;
       }
       _this.setState({ popupStyle: {} });
-    } }, React__default.createElement(ResizeObserver, { onResize: this.onResize }, React__default.createElement("span", __assign$1i({ ref: function(node) {
+    } }, React__default.createElement(ResizeObserver$1, { onResize: this.onResize }, React__default.createElement("span", __assign$1i({ ref: function(node) {
       return _this.triggerRef = node;
     }, "trigger-placement": this.realPosition, style: __assign$1i(__assign$1i(__assign$1i({ width: autoAlignPopupWidth && (style === null || style === void 0 ? void 0 : style.width) === void 0 ? (_c = this.childrenDomSize) === null || _c === void 0 ? void 0 : _c.width : "" }, popupStyle), { position: "absolute", zIndex: zIndex || "" }), style) }, popupEventProps, { className: popupClassName }), React__default.createElement(popupChildren.type, __assign$1i({ ref: popupChildren.ref }, popupChildren.props, { style: __assign$1i(__assign$1i({}, popupChildren.props.style), dropdownPopupStyle) })), (showArrow || arrowProps) && React__default.createElement("div", { className: cs$1(prefixCls2 + "-arrow-container", (_a = {}, _a[childrenPrefix + "-arrow-container"] = childrenPrefix, _a)) }, React__default.createElement("div", __assign$1i({}, arrowProps, { className: cs$1(prefixCls2 + "-arrow", (_b = {}, _b[childrenPrefix + "-arrow"] = childrenPrefix, _b), arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.className), style: __assign$1i(__assign$1i({}, this.arrowStyle), arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.style) }))))));
     var portal = popupVisible || this.triggerRef ? React__default.createElement(Portal$4, { getContainer: this.getContainer }, portalContent) : null;
@@ -13472,7 +13472,7 @@ var VirtualList = React__default.forwardRef(function(props, ref) {
     }
     return null;
   };
-  return React__default.createElement(ResizeObserver, { onResize: function() {
+  return React__default.createElement(ResizeObserver$1, { onResize: function() {
     if (refList.current && !isNumber$2(styleListMaxHeight)) {
       var clientHeight = refList.current.clientHeight;
       setStateHeight(clientHeight);
@@ -14540,7 +14540,7 @@ function Select$1(baseProps, ref) {
       }
     };
   }, [hotkeyHandler, optionInfoMap, valueActive]);
-  return React__default.createElement(ResizeObserver, { onResize: function() {
+  return React__default.createElement(ResizeObserver$1, { onResize: function() {
     return refTrigger.current.updatePopupPosition();
   } }, React__default.createElement(Trigger$1, __assign$18({ ref: function(ref2) {
     return refTrigger.current = ref2;
@@ -16442,7 +16442,7 @@ function ResizeTrigger(props) {
   if (!resizable) {
     return React__default.createElement("div", { className: classNames }, isFunction$5(renderChildren) ? renderChildren(prev, trigger, next) : children || renderIcon());
   }
-  return React__default.createElement(ResizeObserver, { onResize }, React__default.createElement("div", { className: classNames, onMouseDown }, isFunction$5(renderChildren) ? renderChildren(prev, trigger, next) : children || renderIcon()));
+  return React__default.createElement(ResizeObserver$1, { onResize }, React__default.createElement("div", { className: classNames, onMouseDown }, isFunction$5(renderChildren) ? renderChildren(prev, trigger, next) : children || renderIcon()));
 }
 var __read$O = globalThis && globalThis.__read || function(o, n) {
   var m = typeof Symbol === "function" && o[Symbol.iterator];
@@ -19687,7 +19687,7 @@ function withSideEffect(reducePropsToState2, handleStateChangeOnClient2) {
         mountedInstances.splice(index2, 1);
         emitChange();
       };
-      _proto.render = function render() {
+      _proto.render = function render2() {
         return /* @__PURE__ */ React__default.createElement(WrappedComponent, this.props);
       };
       return SideEffect2;
@@ -24419,7 +24419,7 @@ var defaultProps$7 = {
 function List(baseProps, ref) {
   var _a = useContext(ConfigContext), getPrefixCls = _a.getPrefixCls, loadingElement = _a.loadingElement, ctxSize = _a.size, renderEmpty2 = _a.renderEmpty, componentConfig2 = _a.componentConfig;
   var props = useMergeProps(baseProps, defaultProps$7, componentConfig2 === null || componentConfig2 === void 0 ? void 0 : componentConfig2.List);
-  var style = props.style, wrapperStyle = props.wrapperStyle, className = props.className, wrapperClassName = props.wrapperClassName, _b = props.children, children = _b === void 0 ? [] : _b, _c = props.dataSource, dataSource = _c === void 0 ? [] : _c, propSize = props.size, footer = props.footer, header = props.header, pagination = props.pagination, bordered = props.bordered, split = props.split, render = props.render, grid = props.grid, loading = props.loading, hoverable = props.hoverable, scrollLoading = props.scrollLoading, paginationInFooter = props.paginationInFooter, offsetBottom = props.offsetBottom, throttleDelay = props.throttleDelay, defaultCurrent = props.defaultCurrent, noDataElement = props.noDataElement, listRef = props.listRef, onReachBottom = props.onReachBottom, onListScroll = props.onListScroll;
+  var style = props.style, wrapperStyle = props.wrapperStyle, className = props.className, wrapperClassName = props.wrapperClassName, _b = props.children, children = _b === void 0 ? [] : _b, _c = props.dataSource, dataSource = _c === void 0 ? [] : _c, propSize = props.size, footer = props.footer, header = props.header, pagination = props.pagination, bordered = props.bordered, split = props.split, render2 = props.render, grid = props.grid, loading = props.loading, hoverable = props.hoverable, scrollLoading = props.scrollLoading, paginationInFooter = props.paginationInFooter, offsetBottom = props.offsetBottom, throttleDelay = props.throttleDelay, defaultCurrent = props.defaultCurrent, noDataElement = props.noDataElement, listRef = props.listRef, onReachBottom = props.onReachBottom, onListScroll = props.onListScroll;
   var size = propSize || (SizeList.indexOf(ctxSize) > -1 ? ctxSize : "default");
   var prefixCls2 = getPrefixCls("list");
   var refDom = useRef(null);
@@ -24477,11 +24477,11 @@ function List(baseProps, ref) {
       var startIndex = (current - 1) * pageSize2;
       return pagination && items.length > startIndex ? items.slice(startIndex, startIndex + pageSize2) : items;
     };
-    var getItems = function(originItems, render2) {
+    var getItems = function(originItems, render3) {
       var currentPageItems = getCurrentPageItems(originItems);
-      return render2 ? currentPageItems.map(render2) : currentPageItems;
+      return render3 ? currentPageItems.map(render3) : currentPageItems;
     };
-    var getGrid = function(originItems, render2) {
+    var getGrid = function(originItems, render3) {
       var currentPageItems = getCurrentPageItems(originItems);
       if (grid.column || grid.span) {
         var items = [];
@@ -24493,7 +24493,7 @@ function List(baseProps, ref) {
           var nextStartNum = startNum_1 + rowSize;
           var currentRow = ~~(startNum_1 / rowSize);
           items.push(React__default.createElement(Row$2, { key: currentRow, className: prefixCls2 + "-row", gutter, justify, align }, currentPageItems.slice(startNum_1, nextStartNum).map(function(item2, index2) {
-            return React__default.createElement(Col$2, __assign$r({ key: currentRow + "_" + index2, className: prefixCls2 + "-row-col" }, colProps_1, { span: span_1 }), render2 ? render2(item2, startNum_1 + index2) : item2);
+            return React__default.createElement(Col$2, __assign$r({ key: currentRow + "_" + index2, className: prefixCls2 + "-row-col" }, colProps_1, { span: span_1 }), render3 ? render3(item2, startNum_1 + index2) : item2);
           })));
           startNum_1 = nextStartNum;
         };
@@ -24503,11 +24503,11 @@ function List(baseProps, ref) {
         return items;
       }
       return React__default.createElement(Row$2, { className: prefixCls2 + "-row", gutter: grid.gutter }, currentPageItems.map(function(item2, index2) {
-        return React__default.createElement(Col$2, __assign$r({ className: prefixCls2 + "-row-col" }, omit$1(grid, ["gutter"]), { key: index2 }), render2 ? render2(item2, index2) : item2);
+        return React__default.createElement(Col$2, __assign$r({ className: prefixCls2 + "-row-col" }, omit$1(grid, ["gutter"]), { key: index2 }), render3 ? render3(item2, index2) : item2);
       }));
     };
-    if (dataSource.length > 0 && render) {
-      return grid ? getGrid(dataSource, render) : getItems(dataSource, render);
+    if (dataSource.length > 0 && render2) {
+      return grid ? getGrid(dataSource, render2) : getItems(dataSource, render2);
     }
     if (childrenCount > 0) {
       return grid ? getGrid(children) : getItems(children);
@@ -24593,10 +24593,10 @@ function confirm(config2, renderFunc) {
   var div = document.createElement("div");
   document.body.appendChild(div);
   var configProviderProps = getConfigProviderProps();
-  function render(props) {
+  function render2(props) {
     ReactDOM.render(React__default.createElement(ConfigProvider, __assign$q({}, configProviderProps), React__default.createElement(ConfirmModal, __assign$q({}, props, { onCancel }))), div);
   }
-  var renderFunction = renderFunc || render;
+  var renderFunction = renderFunc || render2;
   var modalConfig2 = __assign$q(__assign$q({}, config2), { visible: false });
   var onOk = function() {
     var ret;
@@ -26287,7 +26287,7 @@ var __assign$g = globalThis && globalThis.__assign || function() {
 var TabHeaderTitle = function(_a, ref) {
   var _b;
   var prefixCls2 = _a.prefixCls, onDeleteTab = _a.onDeleteTab, tabKey = _a.tabKey, isActive = _a.isActive, onClickTab = _a.onClickTab, _c = _a.disabled, disabled = _c === void 0 ? false : _c, title2 = _a.title, editable = _a.editable, renderTitle = _a.renderTitle, deleteIcon = _a.deleteIcon, deleteButton = _a.deleteButton, getIdPrefix = _a.getIdPrefix, index2 = _a.index;
-  var render = isFunction$5(renderTitle) ? renderTitle : function(node) {
+  var render2 = isFunction$5(renderTitle) ? renderTitle : function(node) {
     return node;
   };
   var handleDeleteTab = function(e) {
@@ -26301,7 +26301,7 @@ var TabHeaderTitle = function(_a, ref) {
       return;
     onClickTab(e);
   };
-  return render(React__default.createElement("div", { ref, key: tabKey, className: cs$1(prefixCls2 + "-header-title", (_b = {}, _b[prefixCls2 + "-header-title-active"] = isActive, _b[prefixCls2 + "-header-title-editable"] = editable, _b[prefixCls2 + "-header-title-disabled"] = disabled, _b)), role: "tab", "aria-selected": isActive, tabIndex: disabled ? -1 : 0, "aria-disabled": disabled || void 0, id: getIdPrefix(index2).tab, "aria-controls": getIdPrefix(index2).tabpane, onClick: handleTabClick, onKeyDown: function(event2) {
+  return render2(React__default.createElement("div", { ref, key: tabKey, className: cs$1(prefixCls2 + "-header-title", (_b = {}, _b[prefixCls2 + "-header-title-active"] = isActive, _b[prefixCls2 + "-header-title-editable"] = editable, _b[prefixCls2 + "-header-title-disabled"] = disabled, _b)), role: "tab", "aria-selected": isActive, tabIndex: disabled ? -1 : 0, "aria-disabled": disabled || void 0, id: getIdPrefix(index2).tab, "aria-controls": getIdPrefix(index2).tabpane, onClick: handleTabClick, onKeyDown: function(event2) {
     var keyCode = event2.keyCode || event2.which;
     if (keyCode === Enter.code) {
       handleTabClick(event2);
@@ -26716,7 +26716,7 @@ var TabHeader = React__default.forwardRef(function(props, ref) {
     direction,
     align,
     onChange: updateHeaderOffset
-  }), React__default.createElement(ResizeObserver, { onResize: onWrapperResize }, React__default.createElement("div", { className: prefixCls2 + "-header-wrapper", ref: headerWrapperRef }, React__default.createElement(ResizeObserver, { onResize: onHeaderResize }, React__default.createElement("div", { className: cs$1(prefixCls2 + "-header", (_b = {}, _b[prefixCls2 + "-header-no-padding"] = !props.headerPadding && direction === "horizontal" && ["line", "text"].indexOf(type) > -1, _b)), ref: headerRef, style: headerStyle }, paneChildren.map(function(child, index2) {
+  }), React__default.createElement(ResizeObserver$1, { onResize: onWrapperResize }, React__default.createElement("div", { className: prefixCls2 + "-header-wrapper", ref: headerWrapperRef }, React__default.createElement(ResizeObserver$1, { onResize: onHeaderResize }, React__default.createElement("div", { className: cs$1(prefixCls2 + "-header", (_b = {}, _b[prefixCls2 + "-header-no-padding"] = !props.headerPadding && direction === "horizontal" && ["line", "text"].indexOf(type) > -1, _b)), ref: headerRef, style: headerStyle }, paneChildren.map(function(child, index2) {
     return React__default.createElement(TabHeaderTitle$1, __assign$f({ key: index2, ref: function(node) {
       titleRef.current[child.key] = node;
     }, tabKey: child.key }, child.props, { prefixCls: prefixCls2, onDeleteTab: function() {
@@ -30056,7 +30056,7 @@ function Base(props) {
     } else if (componentType === "Text") {
       TextComponent = ellipsis ? "div" : "span";
     }
-    var node = React__default.createElement(ResizeObserver, { onResize: handleResize }, React__default.createElement(TextComponent, __assign$3({ className: cs$1(prefixCls2, componentClassName, className) }, baseProps, omit$1(rest, [
+    var node = React__default.createElement(ResizeObserver$1, { onResize: handleResize }, React__default.createElement(TextComponent, __assign$3({ className: cs$1(prefixCls2, componentClassName, className) }, baseProps, omit$1(rest, [
       "spacing",
       "type",
       "close",
@@ -33258,7 +33258,7 @@ function useFontFamily() {
     fontList: fontList2
   };
 }
-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";
+var styleText$2 = ".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 FontFamily$1(props) {
   const { fontList: fontList2 } = useFontFamily();
   const { execCommand } = props;
@@ -33277,7 +33277,7 @@ function FontFamily$1(props) {
     className: "easy-email-extensions-Tools-Popover",
     popupVisible: visible,
     onVisibleChange,
-    content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$1), /* @__PURE__ */ React__default.createElement("div", {
+    content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$2), /* @__PURE__ */ React__default.createElement("div", {
       style: {
         maxWidth: 150,
         maxHeight: 350,
@@ -33304,15 +33304,15 @@ 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, name2) {
-  var render = props.render, children = props.children, component = props.component, rest = _objectWithoutPropertiesLoose(props, ["render", "children", "component"]);
+  var render2 = props.render, children = props.children, component = props.component, rest = _objectWithoutPropertiesLoose(props, ["render", "children", "component"]);
   if (component) {
     return /* @__PURE__ */ createElement(component, _extends({}, rest, {
       children,
-      render
+      render: render2
     }));
   }
-  if (render) {
-    return render(children === void 0 ? rest : _extends({}, rest, {
+  if (render2) {
+    return render2(children === void 0 ? rest : _extends({}, rest, {
       children
     }));
   }
@@ -34518,14 +34518,135 @@ function Direction() {
     }));
   }, [focusIdx2]);
 }
+function getContextMergeTags(mergeTags2, context, idx) {
+  const loop = (currentIdx, combineMergeTags) => {
+    var _a, _b;
+    const parentBlockData = lodash.exports.get(context, currentIdx);
+    if (!parentBlockData)
+      return combineMergeTags;
+    const dataSource = (_b = (_a = parentBlockData.data) == null ? void 0 : _a.value) == null ? void 0 : _b.dataSource;
+    if (!dataSource)
+      return combineMergeTags;
+    Object.keys(dataSource).forEach((key) => {
+      let formatKey = dataSource[key];
+      const loopFormatKey = (currentLoopKeyIdx) => {
+        const currentParentIdx = getParentIdx(currentLoopKeyIdx);
+        if (currentParentIdx) {
+          const currentBlockData = lodash.exports.get(context, currentParentIdx);
+          if (!currentBlockData)
+            return formatKey;
+          currentBlockData.data.value.dataSource && Object.keys(currentBlockData.data.value.dataSource).forEach((item2) => {
+            formatKey = formatKey.replace(item2, currentBlockData.data.value.dataSource[item2].replace(/{{([^}}]+)}}/g, "$1"));
+          });
+          loopFormatKey(currentParentIdx);
+        }
+      };
+      loopFormatKey(currentIdx);
+      const dataSourcePath = formatKey.replace(/{{([^}}]+)}}/g, "$1");
+      combineMergeTags = __spreadValues({
+        [key]: lodash.exports.get(combineMergeTags, dataSourcePath)
+      }, combineMergeTags);
+    });
+    const parentIdx = getParentIdx(currentIdx);
+    if (!parentIdx)
+      return combineMergeTags;
+    return loop(parentIdx, combineMergeTags);
+  };
+  return loop(idx, lodash.exports.cloneDeep(mergeTags2));
+}
+const MergeTags$1 = React__default.memo((props) => {
+  const [expandedKeys, setExpandedKeys] = useState([]);
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  const {
+    mergeTags: mergeTags2 = {},
+    mergeTagGenerate,
+    renderMergeTagContent
+  } = useEditorProps();
+  const { values: values2 } = useBlock();
+  const contextMergeTags = useMemo(() => getContextMergeTags(mergeTags2, values2, focusIdx2), [mergeTags2, values2, focusIdx2]);
+  const treeOptions = useMemo(() => {
+    const treeData = [];
+    const deep = (key, title2, parent2, mapData = []) => {
+      const currentMapData = {
+        key,
+        value: key,
+        title: title2,
+        children: []
+      };
+      mapData.push(currentMapData);
+      const current = parent2[title2];
+      if (current && typeof current === "object") {
+        Object.keys(current).map((childKey) => deep(key + "." + childKey, childKey, current, currentMapData.children));
+      }
+    };
+    Object.keys(contextMergeTags).map((key) => deep(key, key, contextMergeTags, treeData));
+    return treeData;
+  }, [contextMergeTags]);
+  const onSelect = useCallback((key) => {
+    const value = lodash.exports.get(contextMergeTags, key);
+    if (lodash.exports.isObject(value)) {
+      setExpandedKeys((keys2) => {
+        if (keys2.includes(key)) {
+          return keys2.filter((k) => k !== key);
+        } else {
+          return [...keys2, key];
+        }
+      });
+      return;
+    }
+    return props.onChange(mergeTagGenerate(key));
+  }, [contextMergeTags, props, mergeTagGenerate]);
+  const mergeTagContent = useMemo(() => renderMergeTagContent ? renderMergeTagContent({
+    onChange: props.onChange,
+    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 /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, mergeTagContent);
+  }
+  return /* @__PURE__ */ React__default.createElement("div", {
+    style: { color: "#333" }
+  }, props.isSelect ? /* @__PURE__ */ React__default.createElement(TreeSelect$1, {
+    value: props.value,
+    size: "small",
+    dropdownMenuStyle: { maxHeight: 400, overflow: "auto" },
+    placeholder: t("Please select"),
+    treeData: treeOptions,
+    onChange: (val) => onSelect(val)
+  }) : /* @__PURE__ */ React__default.createElement(Tree$1, {
+    expandedKeys,
+    onExpand: setExpandedKeys,
+    selectedKeys: [],
+    treeData: treeOptions,
+    onSelect: (vals) => onSelect(vals[0]),
+    style: {
+      maxHeight: 400,
+      overflow: "auto"
+    }
+  }));
+});
 function Link() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
+  const { input } = useField(`${focusIdx2}.attributes.href`, {
+    parse: (v) => v
+  });
   return useMemo(() => {
     return /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, {
       span: 11
     }, /* @__PURE__ */ React__default.createElement(TextField, {
       prefix: /* @__PURE__ */ React__default.createElement(IconLink$1, null),
-      label: /* @__PURE__ */ React__default.createElement("span", null, t("Href"), "\xA0\xA0\xA0"),
+      label: /* @__PURE__ */ React__default.createElement(Space$1, null, /* @__PURE__ */ React__default.createElement("span", null, t("Href"), "\xA0\xA0\xA0"), /* @__PURE__ */ React__default.createElement(Popover$1, {
+        trigger: "click",
+        content: /* @__PURE__ */ React__default.createElement(MergeTags$1, {
+          value: input.value,
+          onChange: input.onChange
+        })
+      }, /* @__PURE__ */ React__default.createElement(Button$4, {
+        type: "text",
+        icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+          iconName: "icon-merge-tags"
+        })
+      }))),
       name: `${focusIdx2}.attributes.href`
     })), /* @__PURE__ */ React__default.createElement(Grid.Col, {
       offset: 1,
@@ -34607,116 +34728,6 @@ function FontSize$1() {
     autoComplete: "off"
   });
 }
-function getContextMergeTags(mergeTags2, context, idx) {
-  const loop = (currentIdx, combineMergeTags) => {
-    var _a, _b;
-    const parentBlockData = lodash.exports.get(context, currentIdx);
-    if (!parentBlockData)
-      return combineMergeTags;
-    const parentBlock = BlockManager.getBlockByType(parentBlockData.type);
-    if (parentBlock && parentBlock.render) {
-      const dataSource = (_b = (_a = parentBlockData.data) == null ? void 0 : _a.value) == null ? void 0 : _b.dataSource;
-      if (!dataSource)
-        return combineMergeTags;
-      Object.keys(dataSource).forEach((key) => {
-        let formatKey = dataSource[key];
-        const loopFormatKey = (currentLoopKeyIdx) => {
-          const currentParentIdx = getParentIdx(currentLoopKeyIdx);
-          if (currentParentIdx) {
-            const currentBlockData = lodash.exports.get(context, currentParentIdx);
-            if (!currentBlockData)
-              return formatKey;
-            currentBlockData.data.value.dataSource && Object.keys(currentBlockData.data.value.dataSource).forEach((item2) => {
-              formatKey = formatKey.replace(item2, currentBlockData.data.value.dataSource[item2].replace(/{{([^}}]+)}}/g, "$1"));
-            });
-            loopFormatKey(currentParentIdx);
-          }
-        };
-        loopFormatKey(currentIdx);
-        const dataSourcePath = formatKey.replace(/{{([^}}]+)}}/g, "$1");
-        combineMergeTags = __spreadValues({
-          [key]: lodash.exports.get(combineMergeTags, dataSourcePath)
-        }, combineMergeTags);
-      });
-    }
-    const parentIdx = getParentIdx(currentIdx);
-    if (!parentIdx)
-      return combineMergeTags;
-    return loop(parentIdx, combineMergeTags);
-  };
-  return loop(idx, lodash.exports.cloneDeep(mergeTags2));
-}
-const MergeTags$1 = React__default.memo((props) => {
-  const [expandedKeys, setExpandedKeys] = useState([]);
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  const {
-    mergeTags: mergeTags2 = {},
-    mergeTagGenerate,
-    renderMergeTagContent
-  } = useEditorProps();
-  const { values: values2 } = useBlock();
-  const contextMergeTags = useMemo(() => getContextMergeTags(mergeTags2, values2, focusIdx2), [mergeTags2, values2, focusIdx2]);
-  const treeOptions = useMemo(() => {
-    const treeData = [];
-    const deep = (key, title2, parent2, mapData = []) => {
-      const currentMapData = {
-        key,
-        value: key,
-        title: title2,
-        children: []
-      };
-      mapData.push(currentMapData);
-      const current = parent2[title2];
-      if (current && typeof current === "object") {
-        Object.keys(current).map((childKey) => deep(key + "." + childKey, childKey, current, currentMapData.children));
-      }
-    };
-    Object.keys(contextMergeTags).map((key) => deep(key, key, contextMergeTags, treeData));
-    return treeData;
-  }, [contextMergeTags]);
-  const onSelect = useCallback((key) => {
-    const value = lodash.exports.get(contextMergeTags, key);
-    if (lodash.exports.isObject(value)) {
-      setExpandedKeys((keys2) => {
-        if (keys2.includes(key)) {
-          return keys2.filter((k) => k !== key);
-        } else {
-          return [...keys2, key];
-        }
-      });
-      return;
-    }
-    return props.onChange(mergeTagGenerate(key));
-  }, [contextMergeTags, props, mergeTagGenerate]);
-  const mergeTagContent = useMemo(() => renderMergeTagContent ? renderMergeTagContent({
-    onChange: props.onChange,
-    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 /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, mergeTagContent);
-  }
-  return /* @__PURE__ */ React__default.createElement("div", {
-    style: { color: "#333" }
-  }, props.isSelect ? /* @__PURE__ */ React__default.createElement(TreeSelect$1, {
-    value: props.value,
-    size: "small",
-    dropdownMenuStyle: { maxHeight: 400, overflow: "auto" },
-    placeholder: t("Please select"),
-    treeData: treeOptions,
-    onChange: (val) => onSelect(val)
-  }) : /* @__PURE__ */ React__default.createElement(Tree$1, {
-    expandedKeys,
-    onExpand: setExpandedKeys,
-    selectedKeys: [],
-    treeData: treeOptions,
-    onSelect: (vals) => onSelect(vals[0]),
-    style: {
-      maxHeight: 400,
-      overflow: "auto"
-    }
-  }));
-});
 const borderStyleOptions = [
   {
     value: "dashed",
@@ -36097,6 +36108,40 @@ function Table() {
     setVisible
   }));
 }
+function AdvancedTable() {
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, null, /* @__PURE__ */ React__default.createElement(CollapseWrapper, {
+    defaultActiveKey: ["-1", "0", "1", "2", "3"]
+  }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "1",
+    header: t("Dimension")
+  }, /* @__PURE__ */ React__default.createElement(Stack$4, null, /* @__PURE__ */ React__default.createElement(Width, null), /* @__PURE__ */ React__default.createElement(Stack$4.Item, null)), /* @__PURE__ */ React__default.createElement(Stack$4, {
+    vertical: true
+  }, /* @__PURE__ */ React__default.createElement(Padding, null)), /* @__PURE__ */ React__default.createElement(NumberField, {
+    label: "Cell padding (px)",
+    name: `${focusIdx2}.attributes.cellPadding`,
+    config: pixelAdapter,
+    max: 20,
+    min: 0,
+    step: 1
+  })), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "2",
+    header: t("Decoration")
+  }, /* @__PURE__ */ React__default.createElement(Color, null), /* @__PURE__ */ React__default.createElement(ContainerBackgroundColor, null), /* @__PURE__ */ React__default.createElement(TextField, {
+    label: "Table border",
+    name: `${focusIdx2}.attributes.border`
+  }), /* @__PURE__ */ React__default.createElement(ColorPickerField, {
+    label: "Cell border color",
+    name: `${focusIdx2}.attributes.cellBorderColor`
+  })), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
+    name: "2",
+    header: t("Typography")
+  }, /* @__PURE__ */ React__default.createElement(FontFamily, null), /* @__PURE__ */ React__default.createElement(FontSize$1, null), /* @__PURE__ */ React__default.createElement(InputWithUnitField, {
+    label: t("Line height"),
+    unitOptions: "percent",
+    name: `${focusIdx2}.attributes.line-height`
+  }), /* @__PURE__ */ React__default.createElement(FontStyle, null), /* @__PURE__ */ React__default.createElement(TextAlign, null))));
+}
 const blocks = {
   [BasicType.PAGE]: Page,
   [BasicType.SECTION]: Section,
@@ -36127,6 +36172,7 @@ const blocks = {
   [AdvancedType.CAROUSEL]: Carousel,
   [AdvancedType.NAVBAR]: Navbar,
   [AdvancedType.SOCIAL]: Social,
+  [AdvancedType.TABLE]: AdvancedTable,
   [AdvancedType.HERO]: Hero,
   [AdvancedType.WRAPPER]: Wrapper,
   [AdvancedType.SECTION]: Section,
@@ -36185,6 +36231,845 @@ const SelectionRangeProvider = (props) => {
     }, props.children);
   }, [props.children, value]);
 };
+const getEditorElementClientRect = (target2) => {
+  let left = target2.offsetLeft;
+  let top = target2.offsetTop;
+  const width = target2.clientWidth;
+  const height = target2.clientHeight;
+  let parentNode = target2.offsetParent;
+  while (parentNode && parentNode.offsetParent) {
+    if (parentNode.classList.contains("shadow-container")) {
+      return { left, top, height, width };
+    }
+    left += parentNode.offsetLeft;
+    top += parentNode.offsetTop;
+    parentNode = parentNode.offsetParent;
+  }
+  return { left, top, height, width };
+};
+const getBoundaryFromRects = (startRect, endRect) => {
+  let left = Math.min(startRect.left, endRect.left, startRect.left + startRect.width, endRect.left + endRect.width);
+  let right = Math.max(startRect.left, endRect.left, startRect.left + startRect.width, endRect.left + endRect.width);
+  let top = Math.min(startRect.top, endRect.top, startRect.top + startRect.height, endRect.top + endRect.height);
+  let bottom = Math.max(startRect.top, endRect.top, startRect.top + startRect.height, endRect.top + endRect.height);
+  let width = right - left;
+  let height = bottom - top;
+  return { top, bottom, left, right, width, height };
+};
+const ERROR_LIMIT = 2;
+const getCorrectBoundary = (el, currentBoundary) => {
+  var _a, _b;
+  const tableEl = (_b = (_a = el.parentElement) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement;
+  if (!tableEl) {
+    return null;
+  }
+  let leftTopCell = el;
+  let bottomRightCell = el;
+  let leftTopRect = getEditorElementClientRect(el);
+  let bottomRightRect = leftTopRect;
+  const tableCells = tableEl.querySelectorAll("td");
+  const tableCellRects = [];
+  tableCells.forEach((tableCell) => {
+    const { left, top, height, width } = getEditorElementClientRect(tableCell);
+    tableCellRects.push({ left, top, height, width });
+    let isIntersected = (left + ERROR_LIMIT >= currentBoundary.left && left + ERROR_LIMIT <= currentBoundary.right || left - ERROR_LIMIT + width >= currentBoundary.left && left - ERROR_LIMIT + width <= currentBoundary.right) && (top + ERROR_LIMIT >= currentBoundary.top && top + ERROR_LIMIT <= currentBoundary.bottom || top - ERROR_LIMIT + height >= currentBoundary.top && top - ERROR_LIMIT + height <= currentBoundary.bottom);
+    if (isIntersected) {
+      currentBoundary = getBoundaryFromRects(currentBoundary, {
+        left,
+        top,
+        height,
+        width
+      });
+    }
+  });
+  tableCells.forEach((tableCell, index2) => {
+    const { left, top, height, width } = tableCellRects[index2];
+    let isIntersected = (left + ERROR_LIMIT >= currentBoundary.left && left + ERROR_LIMIT <= currentBoundary.right || left - ERROR_LIMIT + width >= currentBoundary.left && left - ERROR_LIMIT + width <= currentBoundary.right) && (top + ERROR_LIMIT >= currentBoundary.top && top + ERROR_LIMIT <= currentBoundary.bottom || top - ERROR_LIMIT + height >= currentBoundary.top && top - ERROR_LIMIT + height <= currentBoundary.bottom);
+    if (!isIntersected) {
+      return;
+    }
+    if (top <= leftTopRect.top && left <= leftTopRect.left) {
+      leftTopRect = tableCellRects[index2];
+      leftTopCell = tableCell;
+    }
+    if (top === leftTopRect.top + ERROR_LIMIT || top === leftTopRect.top && left <= leftTopRect.left) {
+      leftTopRect = tableCellRects[index2];
+      leftTopCell = tableCell;
+    }
+    if (top + height > bottomRightRect.top + bottomRightRect.height + ERROR_LIMIT || top + height === bottomRightRect.top + bottomRightRect.height && left + width >= bottomRightRect.left + bottomRightRect.width) {
+      bottomRightRect = tableCellRects[index2];
+      bottomRightCell = tableCell;
+    }
+  });
+  return { leftTopCell, bottomRightCell, boundary: currentBoundary };
+};
+const getBoundaryRectAndElement = (el1, el2) => {
+  const rect1 = getEditorElementClientRect(el1);
+  const rect2 = getEditorElementClientRect(el2);
+  const boundary = getBoundaryFromRects(rect1, rect2);
+  return getCorrectBoundary(el1, boundary);
+};
+function setStyle(domNode, rules) {
+  if (typeof rules === "object") {
+    for (let prop in rules) {
+      domNode.style[prop] = rules[prop];
+    }
+  }
+}
+const getCurrentTable = (target2) => {
+  let parentNode = target2.parentNode;
+  while (parentNode) {
+    if (parentNode.nodeName === "TABLE") {
+      return parentNode;
+    }
+    parentNode = parentNode.parentNode;
+  }
+  return parentNode;
+};
+const getElementsBoundary = (el1, el2) => {
+  const rect1 = el1.getBoundingClientRect();
+  const rect2 = el2.getBoundingClientRect();
+  const left = Math.min(rect1.left, rect2.left);
+  const right = Math.max(rect1.right, rect2.right);
+  const bottom = Math.max(rect1.bottom, rect2.bottom);
+  const top = Math.min(rect1.top, rect2.top);
+  return { left, top, right, bottom };
+};
+const checkEventInBoundingRect = (rect, { x, y }) => {
+  return x >= rect.left && x <= rect.right && y <= rect.bottom && y >= rect.top;
+};
+const getCellIndex = (cellElement) => {
+  let idxName = cellElement.getAttribute(DATA_CONTENT_EDITABLE_IDX);
+  idxName = idxName.split("data.value.tableSource.")[1].split(".content")[0];
+  return idxName.split(".").map((e) => Number(e));
+};
+const getTdBoundaryIndex = (leftTopCell, bottomRightCell) => {
+  const idx1 = getCellIndex(leftTopCell);
+  const idx2 = getCellIndex(bottomRightCell);
+  const top = idx1[0];
+  const left = idx1[1];
+  const right = idx2[1];
+  const bottom = idx2[0];
+  return { left, top, right, bottom };
+};
+const getCorrectTableIndexBoundary = (tableIndexBoundary, tableData) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  let { left, right, top, bottom } = tableIndexBoundary;
+  tableData.forEach((tr, trIndex) => {
+    tr.forEach((td) => {
+      td.top = trIndex;
+      td.bottom = trIndex + (td.rowSpan || 1) - 1;
+    });
+  });
+  const maxTdCount = getMaxTdCount(tableData);
+  const mergedCells = [];
+  Array.from({ length: maxTdCount }).forEach((_, tdIndex) => {
+    tableData.forEach((tr, trIndex) => {
+      const mergedCell = mergedCells.find((e) => e[0] === trIndex && e[1] === tdIndex);
+      if (mergedCell) {
+        return;
+      }
+      const mergedTds = mergedCells.filter((e) => e[0] === trIndex && e[1] < tdIndex);
+      const _tdIndex = tdIndex - mergedTds.length;
+      const td = tr[_tdIndex];
+      if (!td) {
+        console.log("error case, should fix this error.");
+        return;
+      }
+      const rowSpan = td.rowSpan || 1;
+      const colSpan = td.colSpan || 1;
+      td.left = tdIndex;
+      td.right = tdIndex + colSpan - 1;
+      if (rowSpan > 1 || colSpan > 1) {
+        Array.from({ length: rowSpan }).forEach((_2, rowSpanIndex) => {
+          Array.from({ length: colSpan }).forEach((_3, colSpanIndex) => {
+            if (rowSpanIndex === 0 && colSpanIndex === 0) {
+              return;
+            }
+            mergedCells.push([trIndex + rowSpanIndex, tdIndex + colSpanIndex]);
+          });
+        });
+      }
+    });
+  });
+  tableIndexBoundary.left = ((_b = (_a = tableData == null ? void 0 : tableData[top]) == null ? void 0 : _a[left]) == null ? void 0 : _b.left) || 0;
+  tableIndexBoundary.right = ((_d = (_c = tableData == null ? void 0 : tableData[bottom]) == null ? void 0 : _c[right]) == null ? void 0 : _d.right) || 0;
+  tableIndexBoundary.bottom = ((_f = (_e = tableData == null ? void 0 : tableData[bottom]) == null ? void 0 : _e[right]) == null ? void 0 : _f.bottom) || 0;
+  tableIndexBoundary.top = ((_h = (_g = tableData == null ? void 0 : tableData[top]) == null ? void 0 : _g[left]) == null ? void 0 : _h.top) || 0;
+  return tableIndexBoundary;
+};
+const getMaxTdCount = (tableData) => {
+  let tdCount = 1;
+  tableData.forEach((tr) => {
+    let _tdCount = tr.reduce((count, td) => count + (td.colSpan || 1), 0);
+    if (_tdCount > tdCount) {
+      tdCount = _tdCount;
+    }
+  });
+  return tdCount;
+};
+var styleText$1 = ".easy-email-table-operation-menu{background-color:#fff;box-shadow:0 2px 8px #00000026;font-size:14px;z-index:100;overflow:hidden;border-radius:4px;padding:4px 0}.easy-email-table-operation-menu .easy-email-table-operation-menu-dividing{height:1px;background-color:#efefef}.easy-email-table-operation-menu .easy-email-table-operation-color-picker{display:flex;align-items:center;flex-wrap:wrap;padding:0 16px 10px;background-color:#fff;overflow:hidden}.easy-email-table-operation-menu .easy-email-table-operation-color-picker .easy-email-table-operation-color-picker-item{width:20px;height:20px;border:1px solid #595959;margin-right:5px;margin-bottom:5px;cursor:pointer}.easy-email-table-operation-menu .easy-email-table-operation-menu-item{display:flex;align-items:center;padding:10px 16px;line-height:18px;background-color:#fff;cursor:pointer;color:#595959;overflow:hidden;text-overflow:ellipsis}.easy-email-table-operation-menu .easy-email-table-operation-menu-item:hover{background-color:#efefef}.easy-email-table-operation-menu .easy-email-table-operation-menu-item .easy-email-table-operation-menu-icon{margin-right:8px;height:20px;width:20px;font-size:0}.easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item{padding:10px 16px;background-color:#fff;color:#595959}.easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item>div:nth-child(2){margin-top:4px;display:flex;align-items:center;flex-shrink:0}.easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item>div:nth-child(2) .arco-input-inner-wrapper{box-shadow:none}.easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item>div:nth-child(2) .arco-btn-size-default{padding:0 12px}.easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item>div:nth-child(2) .arco-input-group{display:flex}.easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item>div:nth-child(2) .arco-input-group .arco-input-inner-wrapper{flex:1}.easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item>div:nth-child(2) .arco-input-group .arco-input-group-addafter{height:100%;width:auto}.easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item-color{height:28px;width:28px;flex-shrink:0;border:1px solid var(--color-neutral-3, #e5e6eb);border-right:none;padding:4px;cursor:pointer;position:relative}.easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item-color>div{height:100%;width:100%;border:1px solid var(--color-neutral-3, #e5e6eb);border-radius:2px}.easy-email-table-operation-menu .easy-email-table-operation-menu-bg-item-color input{cursor:pointer;position:absolute;width:100%;height:100%;z-index:1;left:0;top:0;opacity:0}\n";
+const CellBackgroundSelector = ({
+  bgColorHandler,
+  rootDom
+}) => {
+  const [color2, setColor] = useState("#ffffff");
+  useEffect(() => {
+    if (!rootDom) {
+      return;
+    }
+    const observer = new ResizeObserver((e) => {
+      setColor("#ffffff");
+    });
+    observer.observe(rootDom);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  return /* @__PURE__ */ React__default.createElement("div", {
+    onClick: (e) => e.stopPropagation(),
+    className: "easy-email-table-operation-menu-bg-item"
+  }, /* @__PURE__ */ React__default.createElement("div", null, "Set Background Color"), /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", {
+    className: "easy-email-table-operation-menu-bg-item-color"
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    style: { backgroundColor: color2 }
+  }), /* @__PURE__ */ React__default.createElement("input", {
+    type: "color",
+    value: color2,
+    onChange: (e) => setColor(e.target.value)
+  })), /* @__PURE__ */ React__default.createElement(Input$4.Search, {
+    height: 28,
+    searchButton: "Set",
+    onSearch: () => bgColorHandler(color2),
+    value: color2,
+    onKeyDown: (e) => e.stopPropagation(),
+    onChange: (e) => setColor(e)
+  })));
+};
+const getCellBackgroundSelectorRoot = (bgColorHandler, rootDom) => {
+  const node = document.createElement("div");
+  render(/* @__PURE__ */ React__default.createElement(CellBackgroundSelector, {
+    bgColorHandler,
+    rootDom
+  }), node);
+  return node;
+};
+const MENU_CONFIG = {
+  insertColumnRight: {
+    text: "Insert column right",
+    icon: `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="20px" height="20px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#595959" d="M73.142857 336.64h526.628572v43.885714H73.142857zM73.142857 643.657143h526.628572v43.885714H73.142857zM336.457143 117.028571h43.885714v789.942858h-43.885714zM204.8 73.142857h614.4a131.657143 131.657143 0 0 1 131.657143 131.657143v614.4a131.657143 131.657143 0 0 1-131.657143 131.657143H204.8A131.657143 131.657143 0 0 1 73.142857 819.2V204.8A131.84 131.84 0 0 1 204.8 73.142857z m0 43.885714a87.771429 87.771429 0 0 0-87.771429 87.771429v614.4a87.771429 87.771429 0 0 0 87.771429 87.771429h614.4a87.771429 87.771429 0 0 0 87.771429-87.771429V204.8a87.771429 87.771429 0 0 0-87.771429-87.771429zM819.2 73.142857h-219.428571v877.714286h219.428571a131.657143 131.657143 0 0 0 131.657143-131.657143V204.8A131.84 131.84 0 0 0 819.2 73.142857z m44.068571 460.982857h-65.828571v65.828572H753.371429v-65.828572h-65.828572V490.057143h65.828572v-65.828572h44.068571v65.828572h65.828571z" /></svg>`,
+    handler() {
+      var _a;
+      const _this = this;
+      const right = _this.tableIndexBoundary.right;
+      _this.tableData.forEach((tr) => {
+        if (right === _this.maxTdCount - 1) {
+          tr.push({ content: "-" });
+          return;
+        }
+        if (tr.length === 0) {
+          return tr.push({ content: "-" });
+        }
+        for (let index2 = 0; index2 < tr.length; index2++) {
+          const tdLeft = tr[index2].left || 0;
+          const tdRight = tr[index2].right || 0;
+          if (tdRight === right) {
+            tr.splice(index2 + 1, 0, { content: "-" });
+            break;
+          }
+          if (tdLeft <= right && tdRight > right && tr[index2].colSpan) {
+            tr[index2].colSpan = (tr[index2].colSpan || 1) + 1;
+            break;
+          }
+          if (tdLeft > right && tdLeft - 1 === right) {
+            tr.splice(index2, 0, { content: "-" });
+            break;
+          }
+          if (tdLeft > right) {
+            break;
+          }
+        }
+      });
+      (_a = _this.changeTableData) == null ? void 0 : _a.call(_this, _this.tableData);
+    }
+  },
+  insertColumnLeft: {
+    text: "Insert column left",
+    icon: `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="20px" height="20.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#595959" d="M380.342857 336.457143h526.811429v43.885714H380.342857z m0 307.2h526.811429v43.885714H380.342857zM643.657143 117.028571h43.885714v789.942858h-43.885714zM204.8 73.142857h614.582857A131.474286 131.474286 0 0 1 950.857143 204.8v614.4a131.657143 131.657143 0 0 1-131.657143 131.657143H204.8A131.657143 131.657143 0 0 1 73.142857 819.2V204.8A131.657143 131.657143 0 0 1 204.8 73.142857z m0 43.885714a87.588571 87.588571 0 0 0-87.588571 87.771429v614.4a87.588571 87.588571 0 0 0 87.588571 87.771429h614.582857a87.771429 87.771429 0 0 0 87.771429-87.771429V204.8a87.771429 87.771429 0 0 0-87.771429-87.771429zM204.8 73.142857A131.657143 131.657143 0 0 0 73.142857 204.8v614.4a131.657143 131.657143 0 0 0 131.657143 131.657143h219.428571V73.142857z m131.84 460.8h-65.828571v65.828572h-43.885715v-65.828572h-65.828571v-43.885714h65.828571v-65.828572h43.885715v65.828572h65.828571z" /></svg>`,
+    handler() {
+      var _a;
+      const _this = this;
+      const left = _this.tableIndexBoundary.left;
+      _this.tableData.forEach((tr) => {
+        if (left === 0) {
+          tr.unshift({ content: "-" });
+          return;
+        }
+        if (tr.length === 0) {
+          return tr.push({ content: "-" });
+        }
+        for (let index2 = 0; index2 < tr.length; index2++) {
+          const tdLeft = tr[index2].left || 0;
+          const tdRight = tr[index2].right || 0;
+          if (tdLeft === left) {
+            tr.splice(index2, 0, { content: "-" });
+            break;
+          }
+          if (tdLeft < left && tdRight >= left && tr[index2].colSpan) {
+            tr[index2].colSpan = (tr[index2].colSpan || 1) + 1;
+            break;
+          }
+          if (tdLeft > left && tr[index2 - 1] && (tr[index2 - 1].right || 0) + 1 === left) {
+            tr.splice(index2, 0, { content: "-" });
+            break;
+          }
+          if (tdLeft > left) {
+            break;
+          }
+        }
+      });
+      (_a = _this.changeTableData) == null ? void 0 : _a.call(_this, _this.tableData);
+    }
+  },
+  insertRowUp: {
+    text: "Insert row up",
+    icon: `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="20px" height="20.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#595959" d="M73.142857 599.771429h877.714286v43.885714H73.142857zM336.457143 380.342857h43.885714v526.628572h-43.885714z m307.2 0h43.885714v526.628572h-43.885714zM204.8 73.142857h614.4a131.657143 131.657143 0 0 1 131.657143 131.657143v614.4a131.657143 131.657143 0 0 1-131.657143 131.657143H204.8A131.657143 131.657143 0 0 1 73.142857 819.2V204.8A131.657143 131.657143 0 0 1 204.8 73.142857z m0 43.885714a87.771429 87.771429 0 0 0-87.771429 87.771429v614.4a87.588571 87.588571 0 0 0 87.771429 87.771429h614.4a87.588571 87.588571 0 0 0 87.771429-87.771429V204.8a87.771429 87.771429 0 0 0-87.771429-87.771429zM819.2 73.142857H204.8A131.657143 131.657143 0 0 0 73.142857 204.8v219.428571h877.714286v-219.428571A131.657143 131.657143 0 0 0 819.2 73.142857z m-219.428571 197.485714h-65.828572v65.828572h-43.885714v-65.828572h-65.828572v-43.885714h65.828572V160.914286h43.885714v65.828571h65.828572z" /></svg>`,
+    handler() {
+      const _this = this;
+      const top = _this.tableIndexBoundary.top;
+      let maxTdCount = _this.maxTdCount;
+      if (_this.tableData[top].length < maxTdCount) {
+        for (let index2 = top - 1; index2 > -1; index2--) {
+          const tr = _this.tableData[index2];
+          tr.forEach((td, _index) => {
+            if (td.bottom && td.bottom >= top) {
+              td.rowSpan = (td.rowSpan || 1) + 1;
+              maxTdCount -= td.colSpan || 1;
+            }
+          });
+          if (tr.length === maxTdCount) {
+            break;
+          }
+        }
+      }
+      _this.addRow(top, maxTdCount);
+    }
+  },
+  insertRowDown: {
+    text: "Insert row down",
+    icon: `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="20px" height="20.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#595959" d="M204.8 73.142857h614.4a131.657143 131.657143 0 0 1 131.657143 131.657143v614.4a131.657143 131.657143 0 0 1-131.657143 131.657143H204.8A131.657143 131.657143 0 0 1 73.142857 819.2V204.8A131.84 131.84 0 0 1 204.8 73.142857z m0 43.885714a87.771429 87.771429 0 0 0-87.771429 87.771429v614.4a87.771429 87.771429 0 0 0 87.771429 87.771429h614.4a87.771429 87.771429 0 0 0 87.771429-87.771429V204.8a87.771429 87.771429 0 0 0-87.771429-87.771429zM73.142857 336.457143h877.714286v44.068571H73.142857zM336.64 117.028571h43.885714v526.628572h-43.885714z m307.017143 0h44.068571v526.628572H643.657143zM73.142857 599.771429v219.428571a131.657143 131.657143 0 0 0 131.657143 131.657143h614.4a131.657143 131.657143 0 0 0 131.657143-131.657143v-219.428571z m526.628572 197.485714h-65.645715v65.828571H490.057143v-65.828571h-65.828572v-43.885714h65.828572v-65.828572h44.068571v65.828572h65.645715z" /></svg>`,
+    handler() {
+      const _this = this;
+      let addCount = _this.maxTdCount;
+      const bottom = _this.tableIndexBoundary.bottom;
+      if (_this.tableData[bottom].length < _this.maxTdCount) {
+        for (let index2 = bottom - 1; index2 > -1; index2--) {
+          const tr = _this.tableData[index2];
+          if (tr.length === _this.maxTdCount) {
+            break;
+          }
+          tr.forEach((td, _index) => {
+            if (td.bottom && td.bottom > bottom) {
+              td.rowSpan = (td.rowSpan || 1) + 1;
+              addCount -= td.colSpan || 1;
+            }
+          });
+        }
+      }
+      _this.tableData[bottom].forEach((e) => {
+        if (e.rowSpan && e.rowSpan > 1) {
+          e.rowSpan += 1;
+          addCount -= e.colSpan || 1;
+        }
+      });
+      _this.addRow(bottom + 1, addCount);
+    }
+  },
+  mergeCells: {
+    text: "Merge selected cells",
+    icon: `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="20px" height="20.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#595959" d="M925.99596 99.038384c-25.470707-25.6-60.121212-39.822222-96.323233-39.822222H194.19798c-36.072727 0-70.723232 14.351515-96.323233 39.822222-25.6 25.6-39.822222 60.121212-39.822222 96.323232v635.474748c0 36.072727 14.351515 70.723232 39.822222 96.323232C123.474747 952.759596 158.125253 967.111111 194.19798 967.111111h635.474747c36.072727 0 70.723232-14.351515 96.323233-39.951515 25.6-25.6 39.951515-60.121212 39.951515-96.323232V195.361616c0-36.072727-14.351515-70.723232-39.951515-96.323232z m-277.850505 5.559596v226.909091H375.725253V104.59798h272.420202zM103.434343 195.361616c0-24.048485 9.567677-47.191919 26.634344-64.129293 17.066667-17.066667 40.080808-26.634343 64.129293-26.634343h136.145454v226.909091H103.434343V195.361616z m90.763637 726.367677c-24.048485 0-47.191919-9.567677-64.129293-26.634344-17.066667-17.066667-26.634343-40.080808-26.634344-64.129292V649.309091h226.909091v272.420202H194.19798z m181.527273 0V649.309091h272.290909v272.420202H375.725253z m544.711111-90.892929c0 24.048485-9.567677 47.191919-26.634344 64.129293-17.066667 17.066667-40.080808 26.634343-64.129293 26.634343H693.527273V649.309091h226.909091v181.527273zM693.527273 331.507071V104.59798h136.145454c24.048485 0 47.191919 9.567677 64.129293 26.634343 17.066667 17.066667 26.634343 40.080808 26.634344 64.129293v136.145455H693.527273z" /></svg>`,
+    handler() {
+      var _a;
+      const _this = this;
+      const { top, left, bottom, right } = _this.tableIndexBoundary;
+      const leftTopItem = _this.tableData[top].find((e) => e.left === left);
+      leftTopItem.rowSpan = bottom - top + 1;
+      leftTopItem.colSpan = right - left + 1;
+      _this.tableData.forEach((tr, trIndex) => {
+        if (trIndex >= top && trIndex <= bottom) {
+          if (bottom > top && trIndex > top && trIndex <= bottom) {
+            leftTopItem.content += "<br />";
+          }
+          const deletedIndex = [];
+          tr.forEach((td, tdIndex) => {
+            if (top === trIndex && left === td.left) {
+              return;
+            }
+            if (td.left >= left && td.right <= right) {
+              leftTopItem.content += " " + td.content;
+              deletedIndex.push(tdIndex);
+            }
+          });
+          if (deletedIndex.length > 0) {
+            tr.splice(deletedIndex[0], deletedIndex[deletedIndex.length - 1] - deletedIndex[0] + 1);
+          }
+        }
+      });
+      (_a = _this.changeTableData) == null ? void 0 : _a.call(_this, _this.tableData);
+    }
+  },
+  deleteColumn: {
+    text: "Delete selected columns",
+    icon: `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="20px" height="20.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#595959" d="M925.996 99.038c-25.47-25.6-60.121-39.822-96.323-39.822H194.198c-75.12 0.13-136.016 61.026-136.145 136.146v635.345c0 36.073 14.351 70.723 39.822 96.323 25.6 25.73 60.25 40.081 96.323 40.081h635.475c36.072 0 70.723-14.351 96.323-39.951 25.6-25.6 39.951-60.122 39.951-96.324V195.362c0-36.073-14.351-70.724-39.951-96.324z m-365.77 494.287L512 545.228l-48.226 48.097-32.194-31.935 48.355-48.226-48.226-48.097 32.194-32.194L512 480.97l48.097-48.097 32.194 32.194-48.097 48.097 48.226 48.226-32.194 31.935zM103.434 195.362c0-24.049 9.568-47.192 26.635-64.13 17.066-17.066 40.08-26.634 64.129-26.634h136.145v226.91H103.434V195.361z m0 181.656h226.91V649.31h-226.91V377.02z m90.764 544.84c-24.049 0-47.192-9.567-64.13-26.634-17.066-17.066-26.634-40.08-26.634-64.258V694.69h226.91v227.168H194.197z m726.238-90.763c0 24.048-9.438 47.192-26.505 64.259-17.066 17.066-40.21 26.634-64.258 26.505H693.527V694.69h226.91v136.404z m0-181.786H693.527V377.02h226.91v272.29zM693.527 331.507V104.598h136.146c24.048 0 47.192 9.438 64.258 26.505 17.067 17.067 26.635 40.21 26.505 64.259v136.145H693.527z" /></svg>`,
+    handler() {
+      var _a;
+      const _this = this;
+      const { left, right } = _this.tableIndexBoundary;
+      _this.tableData.forEach((tr) => {
+        const deleteIds = [];
+        for (let index2 = 0; index2 < tr.length; index2++) {
+          const td = tr[index2];
+          const tdLeft = tr[index2].left || 0;
+          const tdRight = tr[index2].right || 0;
+          const colSpan = td.colSpan || 1;
+          if (tdLeft > right) {
+            break;
+          }
+          if (tdLeft >= left && tdRight <= right) {
+            deleteIds.push(index2);
+            continue;
+          }
+          if (tdLeft <= left && tdRight >= right) {
+            td.colSpan = colSpan - (right - left) - 1;
+            continue;
+          }
+          if (tdLeft > left && tdRight >= right) {
+            td.colSpan = colSpan - (right - tdLeft) - 1;
+            continue;
+          }
+          if (tdLeft < left && tdRight >= left) {
+            td.colSpan = colSpan - (tdRight - left) - 1;
+            continue;
+          }
+        }
+        if (deleteIds.length) {
+          tr.splice(deleteIds[0], deleteIds[deleteIds.length - 1] - deleteIds[0] + 1);
+        }
+      });
+      (_a = _this.changeTableData) == null ? void 0 : _a.call(_this, _this.tableData);
+    }
+  },
+  deleteRow: {
+    text: "Delete selected rows",
+    icon: `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="20px" height="20.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#595959" d="M925.99596 99.038384c-25.470707-25.6-60.121212-39.822222-96.323233-39.822222H194.19798c-36.072727 0-70.723232 14.351515-96.323233 39.822222-25.6 25.6-39.822222 60.121212-39.822222 96.323232v635.474748c0 36.072727 14.351515 70.723232 39.822222 96.323232C123.474747 952.759596 158.125253 967.111111 194.19798 967.111111h635.474747c36.072727 0 70.723232-14.351515 96.323233-39.951515 25.6-25.6 39.951515-60.121212 39.951515-96.323232V195.361616c0-36.072727-14.351515-70.723232-39.951515-96.323232z m-550.270707 5.559596h272.290909v227.167677H375.725253V104.59798z m56.242424 360.468687l31.935353-32.19394 48.09697 48.226263 48.09697-48.226263 32.193939 32.19394-48.09697 48.096969 48.226263 48.226263-32.193939 31.935354-48.226263-48.09697-48.226263 48.09697-31.935353-31.935354 48.226262-48.226263-48.096969-48.096969zM103.434343 195.361616c0-24.048485 9.567677-47.191919 26.634344-64.129293 17.066667-17.066667 40.080808-26.634343 64.129293-26.634343h136.145454v227.167677H103.434343V195.361616z m817.002021 635.733333c0 24.048485-9.567677 47.191919-26.634344 64.258586-17.066667 17.066667-40.080808 26.634343-64.129293 26.634344H194.19798c-24.048485 0-47.191919-9.567677-64.258586-26.634344C112.872727 878.157576 103.434343 855.014141 103.434343 830.836364V694.690909h226.909091v226.909091h45.381819V694.690909h272.290909v226.909091h45.381818V694.690909h226.909091v136.40404z m0-499.329292H693.527273V104.59798h136.145454c24.048485 0 47.191919 9.567677 64.129293 26.634343 17.066667 17.066667 26.634343 40.080808 26.634344 64.129293v136.404041z" /></svg>`,
+    handler() {
+      var _a;
+      const _this = this;
+      const { top, bottom } = _this.tableIndexBoundary;
+      const deleteCount = bottom - top + 1;
+      for (let index2 = bottom - 1; index2 > -1; index2--) {
+        const tr = _this.tableData[index2];
+        tr.forEach((td, _index) => {
+          if (td.bottom && td.bottom >= top) {
+            const deleteRowSpan = td.bottom >= bottom ? deleteCount : td.bottom - top + 1;
+            td.rowSpan = (td.rowSpan || 1) - deleteRowSpan;
+          }
+        });
+      }
+      for (let index2 = top; index2 <= bottom; index2++) {
+        const tr = _this.tableData[index2];
+        tr.forEach((td, _index) => {
+          const rowSpan = td.rowSpan || 1;
+          if (rowSpan - 1 + top > bottom) {
+            const nextRowCell = __spreadProps(__spreadValues({}, td), { rowSpan: rowSpan - (bottom - top + 1) });
+            const nextRow = _this.tableData[bottom + 1];
+            if (nextRow) {
+              const index22 = Array.from({ length: _this.maxTdCount }).findIndex((_, index3) => index3 === nextRowCell.left);
+              if (index22 > -1) {
+                nextRow.splice(index22, 0, nextRowCell);
+              }
+            }
+          }
+        });
+      }
+      _this.tableData.splice(_this.tableIndexBoundary.top, deleteCount);
+      (_a = _this.changeTableData) == null ? void 0 : _a.call(_this, _this.tableData);
+    }
+  },
+  setCellBg: {
+    text: "Set Background",
+    render(tableOperationMenu) {
+      const bgColorHandler = this.handler.bind(tableOperationMenu);
+      const root2 = getCellBackgroundSelectorRoot(bgColorHandler, tableOperationMenu.domNode);
+      return root2;
+    },
+    handler(color2) {
+      var _a;
+      const _this = this;
+      const { top, bottom, left, right } = _this.tableIndexBoundary;
+      _this.tableData.forEach((tr) => {
+        for (let index2 = 0; index2 < tr.length; index2++) {
+          const td = tr[index2];
+          const tdTop = tr[index2].top || 0;
+          const tdBottom = tr[index2].bottom || 0;
+          const tdLeft = tr[index2].left || 0;
+          const tdRight = tr[index2].right || 0;
+          if (tdLeft > right) {
+            break;
+          }
+          if (top <= tdTop && bottom >= tdBottom && left <= tdLeft && right >= tdRight) {
+            td.backgroundColor = color2;
+          }
+        }
+      });
+      (_a = _this.changeTableData) == null ? void 0 : _a.call(_this, _this.tableData);
+      _this.hide();
+    }
+  }
+};
+const MENU_HEIGHT = 305;
+const MENU_WIDTH = 200;
+class TableOperationMenu {
+  constructor() {
+    __publicField(this, "menuItems", MENU_CONFIG);
+    __publicField(this, "domNode");
+    __publicField(this, "styleDom");
+    __publicField(this, "visible", false);
+    __publicField(this, "changeTableData");
+    __publicField(this, "tableData");
+    __publicField(this, "tableIndexBoundary");
+    __publicField(this, "maxTdCount", 0);
+    this.menuInitial();
+    this.mount();
+  }
+  mount() {
+    if (this.domNode) {
+      document.body.appendChild(this.domNode);
+    }
+    document.body.addEventListener("click", this.hide.bind(this));
+  }
+  destroy() {
+    var _a;
+    (_a = this.domNode) == null ? void 0 : _a.remove();
+    if (this.styleDom) {
+      document.head.removeChild(this.styleDom);
+    }
+    document.body.removeEventListener("click", this.hide.bind(this));
+  }
+  hide() {
+    if (!this.visible) {
+      return;
+    }
+    this.visible = false;
+    setStyle(this.domNode, {
+      display: "none"
+    });
+  }
+  addRow(insertIndex, colCount) {
+    var _a;
+    const newRow = Array.from({ length: colCount }).map(() => ({ content: "-" }));
+    this.tableData.splice(insertIndex, 0, newRow);
+    (_a = this.changeTableData) == null ? void 0 : _a.call(this, this.tableData);
+  }
+  setTableData(tableData) {
+    this.tableData = tableData || [];
+    this.maxTdCount = getMaxTdCount(this.tableData);
+  }
+  setTableIndexBoundary(tableIndexBoundary) {
+    this.tableIndexBoundary = getCorrectTableIndexBoundary(tableIndexBoundary, this.tableData);
+  }
+  showMenu({ x, y }) {
+    this.visible = true;
+    const maxHeight = window.innerHeight;
+    const maxWidth = window.innerWidth;
+    if (maxWidth - MENU_WIDTH < x) {
+      x -= MENU_WIDTH;
+    }
+    if (maxHeight - MENU_HEIGHT < y) {
+      y -= MENU_HEIGHT;
+    }
+    setStyle(this.domNode, {
+      display: "block",
+      position: "absolute",
+      left: `${x}px`,
+      top: `${y}px`,
+      "min-height": "150px",
+      width: `${MENU_WIDTH}px`,
+      Height: `${MENU_HEIGHT}px`
+    });
+  }
+  menuInitial() {
+    this.styleDom = document.createElement("style");
+    this.styleDom.innerText = styleText$1;
+    document.head.appendChild(this.styleDom);
+    this.domNode = document.createElement("div");
+    this.domNode.classList.add("easy-email-table-operation-menu");
+    setStyle(this.domNode, { display: "none" });
+    for (let name2 in this.menuItems) {
+      const itemOption = this.menuItems[name2];
+      if (itemOption) {
+        this.domNode.appendChild(itemOption.render ? itemOption.render(this) : this.menuItemCreator(Object.assign({}, itemOption)));
+        if (["insertRowDown", "deleteRow"].indexOf(name2) > -1) {
+          this.domNode.appendChild(dividingCreator());
+        }
+      }
+    }
+    function dividingCreator() {
+      const dividing = document.createElement("div");
+      dividing.classList.add("easy-email-table-operation-menu-dividing");
+      return dividing;
+    }
+  }
+  menuItemCreator({ text, icon, handler }) {
+    const node = document.createElement("div");
+    node.classList.add("easy-email-table-operation-menu-item");
+    const iconSpan = document.createElement("span");
+    iconSpan.classList.add("easy-email-table-operation-menu-icon");
+    iconSpan.innerHTML = icon;
+    const textSpan = document.createElement("span");
+    textSpan.classList.add("easy-email-table-operation-menu-text");
+    textSpan.innerText = text;
+    node.appendChild(iconSpan);
+    node.appendChild(textSpan);
+    node.addEventListener("click", handler.bind(this), false);
+    return node;
+  }
+}
+class TableColumnTool {
+  constructor(borderTool, root2) {
+    __publicField(this, "borderTool", {});
+    __publicField(this, "dragging", false);
+    __publicField(this, "showBorderTool", false);
+    __publicField(this, "startRect", {});
+    __publicField(this, "startTdTop", 0);
+    __publicField(this, "startTdLeft", 0);
+    __publicField(this, "endTdTop", 0);
+    __publicField(this, "endTdLeft", 0);
+    __publicField(this, "width", 0);
+    __publicField(this, "height", 0);
+    __publicField(this, "selectedLeftTopCell");
+    __publicField(this, "selectedBottomRightCell");
+    __publicField(this, "startDom");
+    __publicField(this, "endDom");
+    __publicField(this, "hoveringTable", null);
+    __publicField(this, "root");
+    __publicField(this, "tableMenu");
+    __publicField(this, "changeTableData");
+    __publicField(this, "tableData", []);
+    __publicField(this, "hideBorder", (e) => {
+      if (e.target.id === "VisualEditorEditMode") {
+        return;
+      }
+      this.visibleBorder(false);
+    });
+    __publicField(this, "hideBorderByKeyDown", () => {
+      this.visibleBorder(false);
+    });
+    __publicField(this, "hideTableMenu", (e) => {
+      var _a;
+      if ((e == null ? void 0 : e.target.id) === "VisualEditorEditMode") {
+        return;
+      }
+      (_a = this.tableMenu) == null ? void 0 : _a.hide();
+    });
+    __publicField(this, "visibleBorder", (show = true) => {
+      if (this.showBorderTool === show) {
+        return;
+      }
+      if (show) {
+        setStyle(this.borderTool.top.parentElement, { display: "block" });
+      } else {
+        setStyle(this.borderTool.top.parentElement, { display: "none" });
+      }
+      this.showBorderTool = show;
+    });
+    __publicField(this, "renderBorder", () => {
+      this.visibleBorder(true);
+      const result = getBoundaryRectAndElement(this.startDom, this.endDom);
+      if (!result) {
+        return;
+      }
+      const { left, top, width, height } = result.boundary;
+      this.selectedLeftTopCell = result.leftTopCell;
+      this.selectedBottomRightCell = result.bottomRightCell;
+      setStyle(this.borderTool.top, {
+        "background-color": "rgb(65, 68, 77)",
+        left: `${left}px`,
+        top: `${top}px`,
+        width: `${Math.abs(width)}px`,
+        height: "2px",
+        position: "absolute",
+        "z-index": 10
+      });
+      setStyle(this.borderTool.bottom, {
+        "background-color": "rgb(65, 68, 77)",
+        left: `${left}px`,
+        top: `${top + height}px`,
+        width: `${Math.abs(width)}px`,
+        height: "2px",
+        position: "absolute",
+        "z-index": 10
+      });
+      setStyle(this.borderTool.left, {
+        "background-color": "rgb(65, 68, 77)",
+        left: `${left}px`,
+        top: `${top}px`,
+        width: `2px`,
+        height: `${Math.abs(height)}px`,
+        position: "absolute",
+        "z-index": 10
+      });
+      setStyle(this.borderTool.right, {
+        "background-color": "rgb(65, 68, 77)",
+        left: `${left + width}px`,
+        top: `${top}px`,
+        width: `2px`,
+        height: `${Math.abs(height)}px`,
+        position: "absolute",
+        "z-index": 10
+      });
+    });
+    __publicField(this, "handleContextmenu", (event2) => {
+      if (this.showBorderTool) {
+        const selectedBoundary = getElementsBoundary(this.selectedLeftTopCell, this.selectedBottomRightCell);
+        if (checkEventInBoundingRect(selectedBoundary, event2)) {
+          event2.preventDefault();
+          return;
+        }
+      }
+      this.hideTableMenu();
+    });
+    __publicField(this, "handleDrag", (e) => {
+      e.preventDefault();
+      if (this.dragging) {
+        let target2 = e.target;
+        while (target2 && target2.parentNode) {
+          if (target2.nodeName === "TD" && target2.getAttribute("data-content_editable-type") === "rich_text") {
+            const hoveringTable = getCurrentTable(target2);
+            if (this.endDom === target2 || this.hoveringTable !== hoveringTable) {
+              return;
+            }
+            this.endDom = target2;
+            this.renderBorder();
+            return;
+          }
+          target2 = target2.parentNode;
+        }
+      }
+    });
+    __publicField(this, "handleMouseup", (e) => {
+      var _a, _b;
+      e.preventDefault();
+      if (this.dragging) {
+        this.dragging = false;
+        (_a = this.root) == null ? void 0 : _a.removeEventListener("mousemove", this.handleDrag);
+        (_b = this.root) == null ? void 0 : _b.removeEventListener("mouseup", this.handleMouseup);
+      }
+    });
+    if (!borderTool || !root2) {
+      return;
+    }
+    this.borderTool = borderTool;
+    this.root = root2;
+    this.initTool();
+  }
+  initTool() {
+    var _a, _b;
+    (_a = this.root) == null ? void 0 : _a.addEventListener("contextmenu", this.handleContextmenu);
+    (_b = this.root) == null ? void 0 : _b.addEventListener("mousedown", this.handleMousedown.bind(this));
+    document.body.addEventListener("click", this.hideBorder, false);
+    document.body.addEventListener("contextmenu", this.hideTableMenu, false);
+    document.addEventListener("keydown", this.hideBorderByKeyDown);
+  }
+  destroy() {
+    var _a, _b, _c;
+    (_a = this.root) == null ? void 0 : _a.removeEventListener("mousedown", this.handleMousedown.bind(this));
+    (_b = this.root) == null ? void 0 : _b.removeEventListener("contextmenu", this.handleContextmenu);
+    document.body.removeEventListener("click", this.hideBorder, false);
+    document.body.removeEventListener("contextmenu", this.hideTableMenu, false);
+    document.removeEventListener("keydown", this.hideBorderByKeyDown);
+    (_c = this.tableMenu) == null ? void 0 : _c.destroy();
+  }
+  handleMousedown(event2) {
+    var _a, _b;
+    let target2 = event2.target;
+    if (event2.button == 0) {
+      while (target2 && target2.parentNode) {
+        if (target2.nodeName === "TD" && target2.getAttribute("data-content_editable-type") === "rich_text") {
+          (_a = this.root) == null ? void 0 : _a.addEventListener("mousemove", this.handleDrag);
+          (_b = this.root) == null ? void 0 : _b.addEventListener("mouseup", this.handleMouseup);
+          this.dragging = true;
+          this.startDom = target2;
+          this.endDom = target2;
+          this.hoveringTable = getCurrentTable(target2);
+          this.renderBorder();
+          return;
+        }
+        target2 = target2.parentNode;
+        if (["TR", "TABLE", "BODY"].includes(target2.nodeName)) {
+          this.visibleBorder(false);
+          return;
+        }
+      }
+    } else if (event2.button == 2) {
+      if (this.showBorderTool) {
+        const selectedBoundary = getElementsBoundary(this.selectedLeftTopCell, this.selectedBottomRightCell);
+        if (checkEventInBoundingRect(selectedBoundary, event2)) {
+          if (!this.tableMenu) {
+            this.tableMenu = new TableOperationMenu();
+          }
+          this.tableMenu.setTableData(this.tableData);
+          this.tableMenu.changeTableData = this.changeTableData;
+          this.tableMenu.setTableIndexBoundary(getTdBoundaryIndex(this.selectedLeftTopCell, this.selectedBottomRightCell));
+          this.tableMenu.showMenu(event2);
+          return;
+        }
+      }
+    }
+    this.visibleBorder(false);
+  }
+}
+function TableOperation() {
+  const shadowRoot = getShadowRoot();
+  const { focusIdx: focusIdx2 } = useFocusIdx();
+  const { focusBlock: focusBlock2, change } = useBlock();
+  const topRef = useRef(null);
+  const bottomRef = useRef(null);
+  const leftRef = useRef(null);
+  const rightRef = useRef(null);
+  const tool = useRef();
+  useEffect(() => {
+    const borderTool = {
+      top: topRef.current,
+      bottom: bottomRef.current,
+      left: leftRef.current,
+      right: rightRef.current
+    };
+    tool.current = new TableColumnTool(borderTool, shadowRoot.querySelector("body"));
+    return () => {
+      var _a;
+      (_a = tool.current) == null ? void 0 : _a.destroy();
+    };
+  }, []);
+  useEffect(() => {
+    var _a, _b;
+    if (tool.current) {
+      tool.current.changeTableData = (data) => {
+        change(`${focusIdx2}.data.value.tableSource`, lodash.exports.cloneDeep(data));
+      };
+      tool.current.tableData = lodash.exports.cloneDeep(((_b = (_a = focusBlock2 == null ? void 0 : focusBlock2.data) == null ? void 0 : _a.value) == null ? void 0 : _b.tableSource) || []);
+    }
+  }, [focusIdx2, focusBlock2]);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, shadowRoot && createPortal(/* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", {
+    ref: topRef
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    ref: bottomRef
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    ref: leftRef
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    ref: rightRef
+  }))), shadowRoot.querySelector("body")));
+}
 function AttributePanel() {
   const { values: values2, focusBlock: focusBlock2 } = useBlock();
   const { initialized } = useEditorContext();
@@ -36203,7 +37088,7 @@ function AttributePanel() {
     style: { position: "absolute" }
   }, /* @__PURE__ */ React__default.createElement(RichTextField, {
     idx: focusIdx2
-  })), /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, shadowRoot && ReactDOM.createPortal(/* @__PURE__ */ React__default.createElement("style", null, `
+  })), /* @__PURE__ */ React__default.createElement(TableOperation, null), /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, shadowRoot && ReactDOM.createPortal(/* @__PURE__ */ React__default.createElement("style", null, `
               .email-block [contentEditable="true"],
               .email-block [contentEditable="true"] * {
                 outline: none;
@@ -36620,7 +37505,7 @@ function FontSize(props) {
     className: "easy-email-extensions-Tools-Popover",
     popupVisible: visible,
     onVisibleChange,
-    content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$1), /* @__PURE__ */ React__default.createElement("div", {
+    content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$2), /* @__PURE__ */ React__default.createElement("div", {
       style: {
         maxWidth: 150,
         maxHeight: 350,
@@ -37281,7 +38166,7 @@ function getDirectionFormDropPosition(position) {
     return "bottom";
   return "";
 }
-const iconsMap = {
+let iconsMap = {
   [BasicType.TEXT]: "icon-text",
   [BasicType.SECTION]: "icon-section",
   [BasicType.COLUMN]: "icon-column",
@@ -37315,6 +38200,9 @@ const iconsMap = {
 function getIconNameByBlockType(type) {
   return lodash.exports.get(iconsMap, type) || "icon-number";
 }
+function setIconsMap(map) {
+  iconsMap = __spreadValues(__spreadValues({}, iconsMap), map);
+}
 const tempEle = document.createElement("div");
 function getBlockTitle(blockData, isFromContent = true) {
   var _a;
@@ -46281,5 +47169,5 @@ const StandardLayout = (props) => {
     style: { width: 0, overflow: "hidden" }
   }))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null), /* @__PURE__ */ React__default.createElement(MergeTagBadgePrompt, null)));
 };
-export { useExtensionProps as $, AttributePanel as A, BlockLayer as B, Color as C, Decoration as D, Padding as E, FontFamily as F, ClassName as G, Height as H, PresetColorsProvider as I, ShortcutToolbar as J, BlockMarketManager as K, LetterSpacing as L, MjmlToJson as M, NavbarLinkPadding as N, BlockMaskWrapper as O, Page as P, SourceCodePanel as Q, InteractivePrompt as R, SelectionRangeProvider as S, TextAlign as T, SimpleLayout as U, VerticalAlign as V, Width as W, StandardLayout as X, MergeTagBadgePrompt as Y, ExtensionContext as Z, ExtensionProvider as _, getIconNameByBlockType as a, RICH_TEXT_TOOL_BAR as a0, TextField as a1, InputWithUnitField as a2, SearchField as a3, TextAreaField as a4, NumberField as a5, SliderField as a6, UploadField as a7, ImageUploaderField as a8, SelectField as a9, TreeSelectField as aa, AutoCompleteField as ab, RadioGroupField as ac, SwitchField as ad, CheckboxField as ae, EditTabField as af, EditGridTabField as ag, InlineTextField as ah, ColorPickerField as ai, enhancer as aj, RichTextField as ak, ShadowDom as al, getBlockTitle as b, commonjsGlobal as c, BlockAttributeConfigurationManager as d, Align as e, AttributesPanelWrapper as f, getContextMergeTags as g, CollapseWrapper as h, Condition as i, ContainerBackgroundColor as j, TextDecoration as k, Background as l, LineHeight as m, TextTransform as n, BackgroundColor as o, Direction as p, Link as q, Border as r, Margin as s, BorderColor as t, FontSize$1 as u, MergeTags$1 as v, BorderStyle as w, FontStyle as x, BorderWidth as y, FontWeight as z };
+export { ExtensionProvider as $, AttributePanel as A, BlockLayer as B, Color as C, Decoration as D, FontWeight as E, FontFamily as F, Padding as G, Height as H, ClassName as I, PresetColorsProvider as J, ShortcutToolbar as K, LetterSpacing as L, MjmlToJson as M, NavbarLinkPadding as N, BlockMarketManager as O, Page as P, BlockMaskWrapper as Q, SourceCodePanel as R, SelectionRangeProvider as S, TextAlign as T, InteractivePrompt as U, VerticalAlign as V, Width as W, SimpleLayout as X, StandardLayout as Y, MergeTagBadgePrompt as Z, ExtensionContext as _, getIconNameByBlockType as a, useExtensionProps as a0, RICH_TEXT_TOOL_BAR as a1, TextField as a2, InputWithUnitField as a3, SearchField as a4, TextAreaField as a5, NumberField as a6, SliderField as a7, UploadField as a8, ImageUploaderField as a9, SelectField as aa, TreeSelectField as ab, AutoCompleteField as ac, RadioGroupField as ad, SwitchField as ae, CheckboxField as af, EditTabField as ag, EditGridTabField as ah, InlineTextField as ai, ColorPickerField as aj, enhancer as ak, RichTextField as al, ShadowDom as am, getBlockTitle as b, commonjsGlobal as c, BlockAttributeConfigurationManager as d, Align as e, AttributesPanelWrapper as f, getContextMergeTags as g, CollapseWrapper as h, Condition as i, ContainerBackgroundColor as j, TextDecoration as k, Background as l, LineHeight as m, TextTransform as n, BackgroundColor as o, Direction as p, Link as q, Border as r, setIconsMap as s, Margin as t, BorderColor as u, FontSize$1 as v, MergeTags$1 as w, BorderStyle as x, FontStyle as y, BorderWidth as z };
 //# sourceMappingURL=index2.js.map