@seafile/sea-email-editor 0.0.1

package/dist/extension/plugins/table/context-menu/insert-table-element/index.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactstrap = require("reactstrap");
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _constant = require("../../constant");
+var _constants = require("@/constants");
+var _option = _interopRequireDefault(require("../../../../../components/options-editor/options/option"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+class InsertTableElement extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.insertTableElement = event => {
+      if (event) {
+        event.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation();
+      }
+      const {
+        type,
+        position
+      } = this.props;
+      const {
+        count
+      } = this.state;
+      this.props.insertTableElement(type, position, count);
+    };
+    this.getTip = () => {
+      const {
+        type,
+        position
+      } = this.props;
+      if (type === _constant.TABLE_ELEMENT.ROW) {
+        return position === _constant.TABLE_ELEMENT_POSITION.AFTER ? (0, _constants.gettext)('Insert below') : (0, _constants.gettext)('Insert above');
+      }
+      return position === _constant.TABLE_ELEMENT_POSITION.AFTER ? (0, _constants.gettext)('Insert on the right') : (0, _constants.gettext)('Insert on the left');
+    };
+    this.onClick = event => {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+    };
+    this.onKeyDown = event => {
+      if ((0, _isHotkey.default)('enter', event)) {
+        event.preventDefault();
+        this.insertTableElement();
+        return;
+      }
+    };
+    this.onChange = event => {
+      const value = event.target.value || '0';
+      const newValue = value ? value.replace(/[^\d,]/g, '') : value;
+      if (newValue === this.state.count) return;
+      const {
+        currentCount
+      } = this.props;
+      const numberValue = parseInt(newValue);
+      if (currentCount + numberValue > this.maxCount) {
+        this.setState({
+          count: this.maxCount - currentCount
+        });
+        return;
+      }
+      this.setState({
+        count: numberValue
+      });
+    };
+    this.state = {
+      count: props.count || 1
+    };
+    this.maxCount = props.type === _constant.TABLE_ELEMENT.ROW ? _constant.TABLE_MAX_ROWS : _constant.TABLE_MAX_COLUMNS;
+  }
+  render() {
+    const {
+      count
+    } = this.state;
+    const {
+      type,
+      currentCount
+    } = this.props;
+    const disabled = currentCount >= this.maxCount;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_option.default, {
+      disabled: disabled,
+      className: "sea-email-insert-table-element-option",
+      isShowSelectedStatus: false,
+      onChange: this.insertTableElement,
+      option: {
+        value: '',
+        label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [this.getTip(), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "sea-email-insert-table-element-count-container",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Input, {
+              className: "sea-email-insert-table-element-count-input",
+              value: count,
+              disabled: disabled,
+              onClick: this.onClick,
+              onKeyDown: this.onKeyDown,
+              onChange: this.onChange
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: type === _constant.TABLE_ELEMENT.ROW ? (0, _constants.gettext)('Row(s)') : (0, _constants.gettext)('Column(s)')
+            })]
+          })]
+        })
+      }
+    });
+  }
+}
+var _default = exports.default = InsertTableElement;

package/dist/extension/plugins/table/helper.js

@@ -0,0 +1,333 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectCellByGrid = exports.pasteContentIntoTable = exports.jumpOutTableInEditor = exports.isSelectingMultipleTables = exports.isInTable = exports.isDisabled = exports.insertTable = exports.getTableFocusingInfos = exports.getTableEntry = exports.getSelectedTableCells = exports.getSelectGrid = exports.getContextMenuPosition = void 0;
+var _slate = require("slate");
+var _slateReact = require("slate-react");
+var _isUrl = _interopRequireDefault(require("is-url"));
+var _model = require("./model");
+var _elementTypes = require("../../constants/element-types");
+var _core = require("../../core");
+var _getEventTransfer = _interopRequireDefault(require("../../event-transfer/get-event-transfer"));
+var _deserializeHtml = require("../../../utils/deserialize-html");
+var _common = require("../../../utils/common");
+var _helper = require("../link/helper");
+var _helper2 = require("../image/helper");
+const isDisabled = (editor, readonly) => {
+  const {
+    selection
+  } = editor;
+  if (readonly || !selection) return true;
+  const disableTypes = [_elementTypes.TABLE, _elementTypes.TABLE_ROW, _elementTypes.TABLE_CELL, _elementTypes.FORMULA, _elementTypes.CODE_BLOCK, _elementTypes.BLOCKQUOTE, _elementTypes.UNORDERED_LIST, _elementTypes.ORDERED_LIST, _elementTypes.LIST_ITEM];
+  const [nodeEntry] = _slate.Editor.nodes(editor, {
+    match: n => disableTypes.includes(n.type),
+    mode: 'highest'
+  });
+  if (nodeEntry) return true;
+  return false;
+};
+exports.isDisabled = isDisabled;
+const isInTable = editor => {
+  const {
+    selection
+  } = editor;
+  if (!selection) return false;
+  const [nodeEntry] = getTableEntry(editor);
+  if (!nodeEntry) return false;
+  return true;
+};
+exports.isInTable = isInTable;
+const insertTable = (editor, rowNum, columnNum) => {
+  const table = (0, _model.generateTable)({
+    rowNum,
+    columnNum
+  });
+  console.log(table);
+  const {
+    selection
+  } = editor;
+  _slate.Editor.insertNode(editor, table, {
+    select: false
+  });
+  if (_slate.Range.isCollapsed(selection)) {
+    const [paragraphNodeEntry] = _slate.Editor.nodes(editor, {
+      at: selection.anchor.path,
+      match: n => (n.type === _elementTypes.PARAGRAPH || n.type === _elementTypes.P) && _slate.Node.string(n).length === 0
+    });
+    if (paragraphNodeEntry) {
+      const paragraphPath = paragraphNodeEntry[1];
+      if (paragraphPath.length === 1 && paragraphPath[0] !== 0) {
+        _slate.Transforms.removeNodes(editor, {
+          at: paragraphPath
+        });
+      }
+    }
+  }
+
+  // Auto focus at the first cell in table
+  const [nodeEntry] = _slate.Editor.nodes(editor, {
+    match: node => node.id === table.id,
+    mode: 'highest'
+  });
+  const focusPoint = _slate.Editor.start(editor, nodeEntry[1]);
+  (0, _core.focusEditor)(editor, focusPoint);
+};
+exports.insertTable = insertTable;
+const getTableFocusingInfos = editor => {
+  if (!isInTable(editor)) return null;
+  const nodeEntries = _slate.Editor.nodes(editor, {
+    match: n => [_elementTypes.TABLE, _elementTypes.TABLE_ROW, _elementTypes.TABLE_CELL].includes(n.type)
+  });
+  const nodeEntryList = Array.from(nodeEntries);
+  const [tableEntry, rowEntry, cellEntry] = nodeEntryList;
+  const columnIndex = cellEntry[1].at(-1);
+  const rowIndex = cellEntry[1].at(-2);
+  return {
+    cellEntry,
+    tableEntry,
+    rowEntry,
+    columnIndex,
+    rowIndex
+  };
+};
+exports.getTableFocusingInfos = getTableFocusingInfos;
+const selectCellByGrid = (editor, rowIndex, colIndex) => {
+  const {
+    tableEntry: [, tablePath]
+  } = getTableFocusingInfos(editor);
+  const selectRange = _slate.Editor.range(editor, tablePath.concat(rowIndex, colIndex));
+  (0, _core.focusEditor)(editor, selectRange);
+};
+exports.selectCellByGrid = selectCellByGrid;
+const getSelectedTableCells = editor => {
+  const [tableEntry] = getTableEntry(editor);
+  if (!tableEntry) return null;
+  const [tableNode] = tableEntry;
+  const tableRows = tableNode.children;
+  const selectGrid = getSelectGrid(editor);
+  if (!selectGrid) return null;
+  const {
+    startRowIndex,
+    endRowIndex,
+    startColIndex,
+    endColIndex
+  } = selectGrid;
+  const selectedTableRows = [];
+  for (let rowIndex = startRowIndex; rowIndex <= endRowIndex; rowIndex++) {
+    const currentRow = tableRows[rowIndex];
+    let selectedTableCells = [];
+    for (let colIndex = startColIndex; colIndex <= endColIndex; colIndex++) {
+      const currentCell = currentRow.children[colIndex];
+      selectedTableCells.push(currentCell);
+    }
+    selectedTableRows.push((0, _model.generateTableRow)({
+      childrenOrText: selectedTableCells
+    }));
+    selectedTableCells = [];
+  }
+  return [(0, _model.generateTable)({
+    childrenOrText: selectedTableRows
+  })];
+};
+exports.getSelectedTableCells = getSelectedTableCells;
+const getSelectGrid = editor => {
+  const [tableEntry] = getTableEntry(editor);
+  if (!tableEntry) return null;
+  const selectedTableCells = document.querySelectorAll('.selected-cell');
+  if (selectedTableCells.length === 0) return null;
+  const node = _slateReact.ReactEditor.toSlateNode(editor, selectedTableCells[0]);
+  const nodePath = _slateReact.ReactEditor.findPath(editor, node);
+  if (!_slate.Path.isAncestor(tableEntry[1], nodePath)) return null;
+  const selectGrid = Array.from(selectedTableCells).reduce((grid, cell) => {
+    const {
+      startRowIndex,
+      endRowIndex,
+      startColIndex,
+      endColIndex
+    } = grid;
+    const {
+      cellIndex: colIndex
+    } = cell;
+    const {
+      rowIndex
+    } = cell.parentNode;
+    if (endRowIndex === -1 || rowIndex > endRowIndex) grid.endRowIndex = rowIndex;
+    if (startRowIndex === -1 || rowIndex < startRowIndex) grid.startRowIndex = rowIndex;
+    if (endColIndex === -1 || colIndex > endColIndex) grid.endColIndex = colIndex;
+    if (startColIndex === -1 || colIndex < startColIndex) grid.startColIndex = colIndex;
+    return {
+      ...grid
+    };
+  }, {
+    startRowIndex: -1,
+    endRowIndex: -1,
+    startColIndex: -1,
+    endColIndex: -1
+  });
+  return selectGrid;
+};
+exports.getSelectGrid = getSelectGrid;
+const pasteContentIntoTable = (editor, content) => {
+  const data = content;
+  let {
+    fragment,
+    text,
+    type,
+    html
+  } = (0, _getEventTransfer.default)(data);
+  const newText = text.replace(/\r\n|\n/g, ' ');
+  if (!fragment && type === 'text') {
+    if ((0, _isUrl.default)(text) && !(0, _common.isImage)(text)) {
+      const link = (0, _helper.generateLinkNode)(text, text);
+      _slate.Editor.insertFragment(editor, [link], {
+        select: true
+      });
+      return;
+    } else if ((0, _isUrl.default)(text) && (0, _common.isImage)(text)) {
+      (0, _helper2.insertImage)(editor, text);
+      return;
+    }
+    _slate.Transforms.insertText(editor, newText);
+    return;
+  }
+  if (type === 'html') {
+    fragment = (0, _deserializeHtml.htmlDeserializer)(html);
+  }
+  if (fragment.length === 1) {
+    if (fragment[0].type === _elementTypes.TABLE) {
+      const clipboardTable = fragment[0];
+      const {
+        tableEntry: [tableNode, tablePath],
+        rowEntry: [rowNode],
+        rowIndex,
+        columnIndex
+      } = getTableFocusingInfos(editor);
+      const tableWidth = rowNode.children.length;
+      const tableHeight = tableNode.children.length;
+      clipboardTable.children.some((clipRow, clipRowIndex) => {
+        const currentInsertPath = tablePath.concat(rowIndex + clipRowIndex + rowIndex);
+        // Out of table
+        if (rowIndex + clipRowIndex >= tableHeight + 1) return true;
+        clipRow.children.some((clipCol, clipColIndex) => {
+          // Out of table
+          if (columnIndex + clipColIndex >= tableWidth + 1) return true;
+          const currentCellPath = currentInsertPath.concat(columnIndex + clipColIndex);
+          const currentCellChildPath = currentCellPath.concat(0);
+          _slate.Transforms.removeNodes(editor, {
+            at: currentCellChildPath
+          });
+          if (clipCol.children.type !== _elementTypes.PARAGRAPH) {
+            const text = _slate.Node.string(clipCol);
+            const newChild = (0, _core.generateElement)(_elementTypes.PARAGRAPH, {
+              childrenOrText: text
+            });
+            _slate.Transforms.insertNodes(editor, newChild, {
+              at: currentCellChildPath
+            });
+          } else {
+            _slate.Transforms.insertNodes(editor, clipCol.children, {
+              at: currentCellChildPath
+            });
+          }
+          return false;
+        });
+        return false;
+      });
+    } else if (fragment[0].type === _elementTypes.PARAGRAPH) {
+      (0, _slate.insertFragment)(editor, fragment);
+    } else {
+      _slate.Transforms.insertText(editor, text.replace(/\r\n|\n/g, ' '));
+    }
+  }
+};
+exports.pasteContentIntoTable = pasteContentIntoTable;
+const jumpOutTableInEditor = editor => {
+  const [tableEntry] = getTableEntry(editor);
+  if (!tableEntry) return;
+  const [, tablePath] = tableEntry;
+  const tableParentPath = _slate.Path.parent(tablePath);
+  const insertPath = tableParentPath.concat(tablePath.at(-1) + 1);
+  _slate.Transforms.insertNodes(editor, (0, _core.generateElement)(_elementTypes.PARAGRAPH), {
+    at: insertPath
+  });
+  _slate.Transforms.select(editor, {
+    path: insertPath.concat(0),
+    offset: 0
+  });
+};
+exports.jumpOutTableInEditor = jumpOutTableInEditor;
+const getTableEntry = editor => {
+  return _slate.Editor.nodes(editor, {
+    match: n => n.type === _elementTypes.TABLE,
+    mode: 'highest'
+  });
+};
+exports.getTableEntry = getTableEntry;
+const isSelectingMultipleTables = editor => {
+  let selectedTableCount = 0;
+  const selectedElems = (0, _core.getSelectedElems)(editor);
+  const isSelectedMultiple = selectedElems.some(elem => {
+    if (elem.type === _elementTypes.TABLE) selectedTableCount++;
+    if (selectedTableCount > 1) return true;
+    return false;
+  });
+  return isSelectedMultiple;
+};
+exports.isSelectingMultipleTables = isSelectingMultipleTables;
+const getContextMenuPosition = (event, tableRef) => {
+  const menuHeight = 240;
+  const menuWidth = 350;
+  const {
+    clientHeight,
+    clientWidth
+  } = document.body; // page
+  const {
+    x,
+    y
+  } = tableRef.current.getBoundingClientRect(); // table
+  const {
+    clientY,
+    clientX
+  } = event; // cursor
+
+  const isBeyondBottom = clientY + menuHeight > clientHeight;
+  const isBeyondRight = clientX + menuWidth > clientWidth;
+  const defaultTop = clientY - y;
+  const defaultLeft = clientX - x;
+  let top = 0;
+  let left = 0;
+  if (isBeyondBottom) {
+    const hiddenHeight = menuHeight - (clientHeight - clientY);
+    top = defaultTop - hiddenHeight;
+  }
+  if (isBeyondRight) {
+    const hiddenWidth = menuWidth - (clientWidth - clientX);
+    left = defaultLeft - hiddenWidth;
+  }
+  if (!isBeyondBottom && !isBeyondRight) {
+    return {
+      top: defaultTop,
+      left: defaultLeft
+    };
+  }
+  if (isBeyondBottom && isBeyondRight) {
+    return {
+      top,
+      left
+    };
+  }
+  if (isBeyondBottom) {
+    return {
+      top,
+      left: defaultLeft
+    };
+  }
+  return {
+    top: defaultTop,
+    left
+  };
+};
+exports.getContextMenuPosition = getContextMenuPosition;

package/dist/extension/plugins/table/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _elementTypes = require("../../constants/element-types");
+var _menu = _interopRequireDefault(require("./menu"));
+var _tableOperator = require("./menu/table-operator");
+var _plugin = _interopRequireDefault(require("./plugin"));
+var _renderElem = _interopRequireWildcard(require("./render-elem"));
+const TablePlugin = {
+  type: _elementTypes.TABLE,
+  nodeType: 'element',
+  editorMenus: [_menu.default, _tableOperator.AlignmentDropDown, _tableOperator.ColumnOperationDropDownList, _tableOperator.RowOperationDropDownList, _tableOperator.RemoveTableMenu],
+  editorPlugin: _plugin.default,
+  renderElements: [_renderElem.RenderTableCell, _renderElem.RenderTableRow, _renderElem.default]
+};
+var _default = exports.default = TablePlugin;

package/dist/extension/plugins/table/menu/index.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _constants = require("../../../constants");
+var _elementTypes = require("../../../constants/element-types");
+var _helper = require("../helper");
+var _tableSizeSelector = _interopRequireDefault(require("./table-size-selector"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _constants2 = require("@/constants");
+var _components = require("@/components");
+var _jsxRuntime = require("react/jsx-runtime");
+const menuConfig = _constants.MENUS_CONFIG_MAP[_elementTypes.TABLE];
+const TableMenu = _ref => {
+  let {
+    editor,
+    readonly,
+    toggle
+  } = _ref;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const disabled = (0, _react.useMemo)(() => (0, _helper.isDisabled)(editor, readonly), [editor.selection, readonly]);
+  const domRef = (0, _react.useRef)(null);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)('sea-email-option-editor-option', {
+        'disabled': disabled
+      }),
+      ref: domRef,
+      id: menuConfig.id,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
+        icon: menuConfig.icon,
+        className: "no-hover-bg sea-email-option-editor-option-icon",
+        style: {
+          marginLeft: 0,
+          marginRight: 8
+        },
+        size: 16
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "text-truncate",
+        title: (0, _constants2.gettext)(menuConfig.text),
+        children: (0, _constants2.gettext)(menuConfig.text)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
+        icon: disabled ? '' : 'arrow-right',
+        className: "sea-email-option-editor-option-check-btn no-hover-bg",
+        style: {
+          marginLeft: 12
+        }
+      })]
+    }), !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tableSizeSelector.default, {
+      target: domRef,
+      editor: editor,
+      onHideSelector: toggle
+    })]
+  });
+};
+var _default = exports.default = TableMenu;

package/dist/extension/plugins/table/menu/table-operator.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RowOperationDropDownList = exports.RemoveTableMenu = exports.ColumnOperationDropDownList = exports.AlignmentDropDown = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _menuDropDown = _interopRequireDefault(require("../../../commons/menu/menu-drop-down"));
+var _constants = require("../../../constants");
+var _components = require("../../../../components");
+var _tableOperations = require("../table-operations");
+var _jsxRuntime = require("react/jsx-runtime");
+const AlignmentDropDown = _ref => {
+  let {
+    editor,
+    readonly
+  } = _ref;
+  const alignmentOperationDropDownList = (0, _react.useMemo)(() => [{
+    ..._constants.MENUS_CONFIG_MAP[_constants.TABLE_SUBMENU_MAP.TABLE_ALIGN_LEFT],
+    handleClick: item => (0, _tableOperations.changeColumnAlign)(editor, _constants.TEXT_ALIGN.LEFT)
+  }, {
+    ..._constants.MENUS_CONFIG_MAP[_constants.TABLE_SUBMENU_MAP.TABLE_ALIGN_CENTER],
+    handleClick: item => (0, _tableOperations.changeColumnAlign)(editor, _constants.TEXT_ALIGN.CENTER)
+  }, {
+    ..._constants.MENUS_CONFIG_MAP[_constants.TABLE_SUBMENU_MAP.TABLE_ALIGN_RIGHT],
+    handleClick: item => (0, _tableOperations.changeColumnAlign)(editor, _constants.TEXT_ALIGN.RIGHT)
+  }], [editor]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_menuDropDown.default, {
+    editor: editor,
+    readonly: readonly,
+    isDisabled: false,
+    dropDownList: alignmentOperationDropDownList,
+    isShowListItemIcon: true,
+    ..._constants.MENUS_CONFIG_MAP[_constants.TABLE_SUBMENU_MAP.TABLE_ALIGN_LEFT]
+  });
+};
+exports.AlignmentDropDown = AlignmentDropDown;
+const ColumnOperationDropDownList = _ref2 => {
+  let {
+    editor,
+    readonly
+  } = _ref2;
+  const columnOperationDropDownList = (0, _react.useMemo)(() => [{
+    ..._constants.MENUS_CONFIG_MAP[_constants.TABLE_SUBMENU_MAP.TABLE_INSERT_COLUMN],
+    handleClick: item => (0, _tableOperations.insertColumn)(editor)
+  }, {
+    ..._constants.MENUS_CONFIG_MAP[_constants.TABLE_SUBMENU_MAP.TABLE_DELETE_COLUMN],
+    handleClick: item => (0, _tableOperations.removeColumn)(editor)
+  }], [editor]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_menuDropDown.default, {
+    editor: editor,
+    readonly: readonly,
+    isDisabled: false,
+    dropDownList: columnOperationDropDownList,
+    ..._constants.MENUS_CONFIG_MAP[_constants.TABLE_SUBMENU_MAP.TABLE_INSERT_COLUMN]
+  });
+};
+exports.ColumnOperationDropDownList = ColumnOperationDropDownList;
+const RowOperationDropDownList = _ref3 => {
+  let {
+    editor,
+    readonly
+  } = _ref3;
+  const rowOperationDropDownList = (0, _react.useMemo)(() => [{
+    ..._constants.MENUS_CONFIG_MAP[_constants.TABLE_SUBMENU_MAP.TABLE_INSERT_ROW],
+    handleClick: item => (0, _tableOperations.insertRow)(editor)
+  }, {
+    ..._constants.MENUS_CONFIG_MAP[_constants.TABLE_SUBMENU_MAP.TABLE_DELETE_ROW],
+    handleClick: item => (0, _tableOperations.removeRow)(editor)
+  }], [editor]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_menuDropDown.default, {
+    editor: editor,
+    readonly: readonly,
+    isDisabled: false,
+    dropDownList: rowOperationDropDownList,
+    ..._constants.MENUS_CONFIG_MAP[_constants.TABLE_SUBMENU_MAP.TABLE_INSERT_ROW]
+  });
+};
+exports.RowOperationDropDownList = RowOperationDropDownList;
+const RemoveTableMenu = _ref4 => {
+  let {
+    editor,
+    readonly,
+    className
+  } = _ref4;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarItem, {
+    className: className,
+    disabled: false,
+    isActive: false,
+    onClick: () => (0, _tableOperations.removeTable)(editor),
+    editor: editor,
+    ..._constants.MENUS_CONFIG_MAP[_constants.TABLE_SUBMENU_MAP.TABLE_DELETE_TABLE]
+  });
+};
+exports.RemoveTableMenu = RemoveTableMenu;

package/dist/extension/plugins/table/menu/table-size-selector/index.css

@@ -0,0 +1,27 @@
+.sea-email-table-size-selector-popover .popover {
+  margin-left: -10px;
+}
+
+.sea-email-table-size-selector-card {
+  padding: 8px;
+}
+
+.sea-email-table-size-selector-card .sea-email-table-grid-info {
+  margin-bottom: 5px;
+  width: 100%;
+  text-align: center;
+}
+
+.sea-email-table-size-selector-card .sea-email-table-cell {
+  height: 15px;
+  width: 20px;
+  border: 1px solid #ccc;
+}
+
+.sea-email-table-size-selector-card .sea-email-table-row {
+  display: flex;
+}
+
+.sea-email-table-size-selector-card .sea-email-table-cell.selected {
+  background-color: #ffa94d;
+}