easy-email-extensions 4.15.0 → 4.17.0

package/lib/index2.js

@@ -56,7 +56,7 @@ 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 { Field, useForm as useForm$1, useField, Form as Form$3, version as version$2, useFormState } from "react-final-form";
@@ -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,
@@ -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,769 @@ 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}\n";
+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);
+    }
+  }
+};
+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(this.menuItemCreator(Object.assign({}, itemOption)));
+        if (["insertRowDown"].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;
+    (_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);
+  }
+  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 +37012,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 +37429,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,