easy-email-extensions 4.17.0 → 4.17.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, 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 { IconFont, useEditorProps, Stack as Stack$4, useRefState, getShadowRoot, DATA_CONTENT_EDITABLE_TYPE, ContentEditableType, TextStyle, useEditorContext, useBlock, useFocusIdx, DATA_CONTENT_EDITABLE_IDX, useFocusBlockLayout, MergeTagBadge, AvailableTools, 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, getChildIdx, getPageIdx, JsonToMjml, getNodeTypeFromClassName } from "easy-email-core";
+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",
@@ -33131,7 +33131,6 @@ const ToolItem$1 = (props) => {
   }, /* @__PURE__ */ React__default.createElement("button", {
     tabIndex: -1,
     className: classnames("easy-email-extensions-emailToolItem", props.isActive && "easy-email-extensions-emailToolItem-active"),
-    title: props.title,
     onClick: props.onClick,
     style: props.style
   }, props.icon));
@@ -33304,15 +33303,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
     }));
   }
@@ -36408,11 +36407,56 @@ const getMaxTdCount = (tableData) => {
   });
   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}\n";
+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>',
+    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;
@@ -36450,7 +36494,7 @@ const MENU_CONFIG = {
   },
   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>',
+    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;
@@ -36474,7 +36518,7 @@ const MENU_CONFIG = {
             tr[index2].colSpan = (tr[index2].colSpan || 1) + 1;
             break;
           }
-          if (tdLeft > left && (!tr[index2 - 1] || (tr[index2 - 1].right || 0) + 1 === left)) {
+          if (tdLeft > left && tr[index2 - 1] && (tr[index2 - 1].right || 0) + 1 === left) {
             tr.splice(index2, 0, { content: "-" });
             break;
           }
@@ -36488,7 +36532,7 @@ const MENU_CONFIG = {
   },
   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>',
+    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;
@@ -36512,7 +36556,7 @@ const MENU_CONFIG = {
   },
   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>',
+    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;
@@ -36542,7 +36586,7 @@ const MENU_CONFIG = {
   },
   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>',
+    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;
@@ -36575,7 +36619,7 @@ const MENU_CONFIG = {
   },
   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>',
+    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;
@@ -36616,7 +36660,7 @@ const MENU_CONFIG = {
   },
   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>',
+    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;
@@ -36650,6 +36694,36 @@ const MENU_CONFIG = {
       _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;
@@ -36733,8 +36807,8 @@ class TableOperationMenu {
     for (let name2 in this.menuItems) {
       const itemOption = this.menuItems[name2];
       if (itemOption) {
-        this.domNode.appendChild(this.menuItemCreator(Object.assign({}, itemOption)));
-        if (["insertRowDown"].indexOf(name2) > -1) {
+        this.domNode.appendChild(itemOption.render ? itemOption.render(this) : this.menuItemCreator(Object.assign({}, itemOption)));
+        if (["insertRowDown", "deleteRow"].indexOf(name2) > -1) {
           this.domNode.appendChild(dividingCreator());
         }
       }
@@ -36839,7 +36913,7 @@ class TableColumnTool {
         "background-color": "rgb(65, 68, 77)",
         left: `${left}px`,
         top: `${top}px`,
-        width: "2px",
+        width: `2px`,
         height: `${Math.abs(height)}px`,
         position: "absolute",
         "z-index": 10
@@ -36848,7 +36922,7 @@ class TableColumnTool {
         "background-color": "rgb(65, 68, 77)",
         left: `${left + width}px`,
         top: `${top}px`,
-        width: "2px",
+        width: `2px`,
         height: `${Math.abs(height)}px`,
         position: "absolute",
         "z-index": 10
@@ -36907,12 +36981,13 @@ class TableColumnTool {
     document.addEventListener("keydown", this.hideBorderByKeyDown);
   }
   destroy() {
-    var _a, _b;
+    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;
@@ -37453,11 +37528,12 @@ function FontSize(props) {
   }));
 }
 function Tools(props) {
-  const { mergeTags: mergeTags2, enabledMergeTagsBadge } = useEditorProps();
+  var _a, _b;
+  const { mergeTags: mergeTags2, enabledMergeTagsBadge, toolbar } = useEditorProps();
   const { focusBlockNode } = useFocusBlockLayout();
   const { selectionRange, restoreRange, setRangeByElement } = useSelectionRange();
   const execCommand = useCallback((cmd, val) => {
-    var _a;
+    var _a2;
     if (!selectionRange) {
       console.error(t("No selectionRange"));
       return;
@@ -37495,12 +37571,18 @@ function Tools(props) {
         insertMergeTagEle.focus();
         setRangeByElement(insertMergeTagEle);
       }
+    } else if (cmd === "foreColor") {
+      document.execCommand(cmd, false, val);
+      let linkNode = getLinkNode$1(selectionRange);
+      if (linkNode) {
+        linkNode.style.color = "inherit";
+      }
     } else {
       document.execCommand(cmd, false, val);
     }
     const contenteditableElement = getShadowRoot().activeElement;
     if ((contenteditableElement == null ? void 0 : contenteditableElement.getAttribute("contenteditable")) === "true") {
-      const html = ((_a = getShadowRoot().activeElement) == null ? void 0 : _a.innerHTML) || "";
+      const html = ((_a2 = getShadowRoot().activeElement) == null ? void 0 : _a2.innerHTML) || "";
       props.onChange(html);
     }
   }, [
@@ -37512,15 +37594,194 @@ function Tools(props) {
     setRangeByElement
   ]);
   const execCommandWithRange = useCallback((cmd, val) => {
-    var _a;
+    var _a2;
     document.execCommand(cmd, false, val);
     const contenteditableElement = getShadowRoot().activeElement;
     if ((contenteditableElement == null ? void 0 : contenteditableElement.getAttribute("contenteditable")) === "true") {
-      const html = ((_a = getShadowRoot().activeElement) == null ? void 0 : _a.innerHTML) || "";
+      const html = ((_a2 = getShadowRoot().activeElement) == null ? void 0 : _a2.innerHTML) || "";
       props.onChange(html);
     }
   }, [props.onChange]);
   const getPopoverMountNode = () => document.getElementById(FIXED_CONTAINER_ID);
+  const enabledTools = (_a = toolbar == null ? void 0 : toolbar.tools) != null ? _a : [
+    AvailableTools.MergeTags,
+    AvailableTools.FontFamily,
+    AvailableTools.FontSize,
+    AvailableTools.Bold,
+    AvailableTools.Italic,
+    AvailableTools.StrikeThrough,
+    AvailableTools.Underline,
+    AvailableTools.IconFontColor,
+    AvailableTools.IconBgColor,
+    AvailableTools.Link,
+    AvailableTools.Justify,
+    AvailableTools.Lists,
+    AvailableTools.HorizontalRule,
+    AvailableTools.RemoveFormat
+  ];
+  const tools = enabledTools.flatMap((tool) => {
+    switch (tool) {
+      case AvailableTools.MergeTags:
+        if (!mergeTags2)
+          return [];
+        return [
+          /* @__PURE__ */ React__default.createElement(MergeTags, {
+            key: tool,
+            execCommand,
+            getPopupContainer: getPopoverMountNode
+          })
+        ];
+      case AvailableTools.FontFamily:
+        return [
+          /* @__PURE__ */ React__default.createElement(FontFamily$1, {
+            key: tool,
+            execCommand,
+            getPopupContainer: getPopoverMountNode
+          })
+        ];
+      case AvailableTools.FontSize:
+        return [
+          /* @__PURE__ */ React__default.createElement(FontSize, {
+            key: tool,
+            execCommand,
+            getPopupContainer: getPopoverMountNode
+          })
+        ];
+      case AvailableTools.Bold:
+        return [
+          /* @__PURE__ */ React__default.createElement(Bold, {
+            key: tool,
+            currentRange: selectionRange,
+            onChange: () => execCommandWithRange("bold")
+          })
+        ];
+      case AvailableTools.Italic:
+        return [
+          /* @__PURE__ */ React__default.createElement(Italic, {
+            key: tool,
+            currentRange: selectionRange,
+            onChange: () => execCommandWithRange("italic")
+          })
+        ];
+      case AvailableTools.StrikeThrough:
+        return [
+          /* @__PURE__ */ React__default.createElement(StrikeThrough, {
+            key: tool,
+            currentRange: selectionRange,
+            onChange: () => execCommandWithRange("strikeThrough")
+          })
+        ];
+      case AvailableTools.Underline:
+        return [
+          /* @__PURE__ */ React__default.createElement(Underline, {
+            key: tool,
+            currentRange: selectionRange,
+            onChange: () => execCommandWithRange("underline")
+          })
+        ];
+      case AvailableTools.IconFontColor:
+        return [
+          /* @__PURE__ */ React__default.createElement(IconFontColor, {
+            selectionRange,
+            execCommand,
+            getPopoverMountNode
+          })
+        ];
+      case AvailableTools.IconBgColor:
+        return [
+          /* @__PURE__ */ React__default.createElement(IconBgColor, {
+            selectionRange,
+            execCommand,
+            getPopoverMountNode
+          })
+        ];
+      case AvailableTools.Link:
+        return [
+          /* @__PURE__ */ React__default.createElement(Link$1, {
+            key: `${tool}-link`,
+            currentRange: selectionRange,
+            onChange: (values2) => execCommand("createLink", values2),
+            getPopupContainer: getPopoverMountNode
+          }),
+          /* @__PURE__ */ React__default.createElement(Unlink, {
+            key: `${tool}-unlink`,
+            currentRange: selectionRange,
+            onChange: () => execCommand("")
+          })
+        ];
+      case "justify":
+        return [
+          /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+            key: `${tool}-justify-left`,
+            onClick: () => execCommand("justifyLeft"),
+            icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+              iconName: "icon-align-left"
+            }),
+            title: t("Align left")
+          }),
+          /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+            key: `${tool}-justify-center`,
+            onClick: () => execCommand("justifyCenter"),
+            icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+              iconName: "icon-align-center"
+            }),
+            title: t("Align center")
+          }),
+          /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+            key: `${tool}-justify-right`,
+            onClick: () => execCommand("justifyRight"),
+            icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+              iconName: "icon-align-right"
+            }),
+            title: t("Align right")
+          })
+        ];
+      case AvailableTools.Lists:
+        return [
+          /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+            key: `${tool}-ordered-list`,
+            onClick: () => execCommand("insertOrderedList"),
+            icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+              iconName: "icon-list-ol"
+            }),
+            title: t("Orderlist")
+          }),
+          /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+            key: `${tool}-unordered-list`,
+            onClick: () => execCommand("insertUnorderedList"),
+            icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+              iconName: "icon-list-ul"
+            }),
+            title: t("Unorderlist")
+          })
+        ];
+      case AvailableTools.HorizontalRule:
+        return [
+          /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+            key: tool,
+            onClick: () => execCommand("insertHorizontalRule"),
+            icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+              iconName: "icon-line"
+            }),
+            title: t("Line")
+          })
+        ];
+      case AvailableTools.RemoveFormat:
+        return [
+          /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+            key: tool,
+            onClick: () => execCommand("removeFormat"),
+            icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+              iconName: "icon-close"
+            }),
+            title: t("Remove format")
+          })
+        ];
+      default:
+        console.error("Not existing tool", tool);
+        throw new Error(`Not existing tool ${tool}`);
+    }
+  });
   return /* @__PURE__ */ React__default.createElement("div", {
     id: RICH_TEXT_TOOL_BAR,
     style: { display: "flex", flexWrap: "nowrap" }
@@ -37529,117 +37790,13 @@ function Tools(props) {
       display: "flex",
       alignItems: "center"
     }
-  }, /* @__PURE__ */ React__default.createElement(BasicTools, null), mergeTags2 && /* @__PURE__ */ React__default.createElement(MergeTags, {
-    execCommand,
-    getPopupContainer: getPopoverMountNode
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(FontFamily$1, {
-    execCommand,
-    getPopupContainer: getPopoverMountNode
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(FontSize, {
-    execCommand,
-    getPopupContainer: getPopoverMountNode
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(Bold, {
-    currentRange: selectionRange,
-    onChange: () => execCommandWithRange("bold")
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(Italic, {
-    currentRange: selectionRange,
-    onChange: () => execCommandWithRange("italic")
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(StrikeThrough, {
-    currentRange: selectionRange,
-    onChange: () => execCommandWithRange("strikeThrough")
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(Underline, {
-    currentRange: selectionRange,
-    onChange: () => execCommandWithRange("underline")
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(IconFontColor, {
-    selectionRange,
-    execCommand,
-    getPopoverMountNode
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(IconBgColor, {
-    selectionRange,
-    execCommand,
-    getPopoverMountNode
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(Link$1, {
-    currentRange: selectionRange,
-    onChange: (values2) => execCommand("createLink", values2),
-    getPopupContainer: getPopoverMountNode
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(Unlink, {
-    currentRange: selectionRange,
-    onChange: () => execCommand("")
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("justifyLeft"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-align-left"
-    }),
-    title: t("Align left")
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("justifyCenter"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-align-center"
-    }),
-    title: t("Align center")
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("justifyRight"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-align-right"
-    }),
-    title: t("Align right")
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("insertOrderedList"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-list-ol"
-    }),
-    title: t("Orderlist")
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("insertUnorderedList"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-list-ul"
-    }),
-    title: t("Unorderlist")
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("insertHorizontalRule"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-line"
-    }),
-    title: t("Line")
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("removeFormat"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-close"
-    }),
-    title: t("Remove format")
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  })));
+  }, /* @__PURE__ */ React__default.createElement(BasicTools, null), tools.flatMap((tool, index2) => [
+    tool,
+    /* @__PURE__ */ React__default.createElement("div", {
+      className: "easy-email-extensions-divider",
+      key: `divider-${index2}`
+    })
+  ])), (_b = toolbar == null ? void 0 : toolbar.suffix) == null ? void 0 : _b.call(toolbar, execCommand));
 }
 var styleText = ".easy-email-extensions-emailToolItem{display:inline-flex;align-items:center;justify-content:center;position:relative;outline:none;font-weight:400;appearance:none;cursor:pointer!important;white-space:nowrap;transition:all .1s linear;box-sizing:border-box;border-radius:2px;border:none;background-color:transparent;color:#fff;width:28px;height:27px}.easy-email-extensions-emailToolItem:hover,.easy-email-extensions-emailToolItem-active{background-color:#f2f3f5;color:#4e5969}.easy-email-extensions-divider{position:relative;display:inline-flex;width:1px;height:16px;background-color:#808080e6}\n";
 function RichTextToolBar(props) {
@@ -38090,7 +38247,7 @@ function getDirectionFormDropPosition(position) {
     return "bottom";
   return "";
 }
-const iconsMap = {
+let iconsMap = {
   [BasicType.TEXT]: "icon-text",
   [BasicType.SECTION]: "icon-section",
   [BasicType.COLUMN]: "icon-column",
@@ -38124,6 +38281,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;
@@ -38181,8 +38341,8 @@ function BlockLayer(props) {
       blockData: data,
       onToggleVisible
     })));
-  }, [onToggleVisible, propsRenderTitle]);
-  const treeData = useMemo(() => {
+  }, [onToggleVisible, propsRenderTitle, values2]);
+  const getTreeData = () => {
     const copyData = lodash.exports.cloneDeep(pageData2);
     const loop = (item2, id, parent2) => {
       item2.id = id;
@@ -38191,7 +38351,8 @@ function BlockLayer(props) {
     };
     loop(copyData, getPageIdx(), null);
     return [copyData];
-  }, [pageData2]);
+  };
+  const treeData = getTreeData();
   const onSelect = useCallback((selectedId) => {
     setFocusIdx(selectedId);
     setTimeout(() => {
@@ -46923,7 +47084,7 @@ function EditPanel({
   mjmlReadOnly: mjmlReadOnly2
 }) {
   const { height } = useEditorProps();
-  const { compact = true } = useExtensionProps();
+  const { compact = true, showBlockLayer = true } = useExtensionProps();
   return /* @__PURE__ */ React__default.createElement(Layout$1.Sider, {
     className: styles$1.blocksPanel,
     style: { paddingRight: 0, minWidth: 360 },
@@ -46943,7 +47104,7 @@ function EditPanel({
     title: t("Block")
   }, /* @__PURE__ */ React__default.createElement(FullHeightOverlayScrollbars, {
     height: `calc(${height} - 60px)`
-  }, /* @__PURE__ */ React__default.createElement(Blocks, null))), /* @__PURE__ */ React__default.createElement(TabPane, {
+  }, /* @__PURE__ */ React__default.createElement(Blocks, null))), showBlockLayer && /* @__PURE__ */ React__default.createElement(TabPane, {
     key: "1",
     title: t("Layer")
   }, /* @__PURE__ */ React__default.createElement(FullHeightOverlayScrollbars, {
@@ -47090,5 +47251,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