@seafile/sea-email-editor 0.0.1

package/dist/extension/plugins/p/plugin.js

@@ -0,0 +1,141 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slate = require("slate");
+var _core = require("../../core");
+var _elementTypes = require("../../constants/element-types");
+var _constants = require("../../constants");
+const isSelectionAtLineEnd = (editor, path) => {
+  const {
+    selection
+  } = editor;
+  if (!selection) return false;
+  const isAtLineEnd = _slate.Editor.isEnd(editor, selection.anchor, path) || _slate.Editor.isEnd(editor, selection.focus, path);
+  return isAtLineEnd;
+};
+const isSelectionAtLineStart = (editor, path) => {
+  const {
+    selection
+  } = editor;
+  if (!selection) return false;
+  const isAtLineEnd = _slate.Editor.isStart(editor, selection.anchor, path) || _slate.Editor.isStart(editor, selection.focus, path);
+  return isAtLineEnd;
+};
+const withP = editor => {
+  const {
+    deleteBackward,
+    insertBreak,
+    insertFragment
+  } = editor;
+  const newEditor = editor;
+  newEditor.insertBreak = () => {
+    if (!newEditor.selection) {
+      insertBreak();
+      return;
+    }
+    const [node] = _slate.Editor.nodes(newEditor, {
+      mode: 'lowest'
+    });
+    if (node && node[0].code) {
+      const aboveNode = (0, _core.getAboveBlockNode)(newEditor, {
+        match: n => _slate.Element.isElement(n),
+        mode: 'highest'
+      });
+      if (isSelectionAtLineStart(editor, node[1]) && _slate.Node.string(node[0]).length !== 0) {
+        _slate.Transforms.insertNodes(newEditor, (0, _core.generateDefaultParagraph)(), {
+          at: aboveNode[1],
+          select: true
+        });
+        const startPosition = _slate.Editor.start(editor, _slate.Path.next(aboveNode[1]));
+        const range = {
+          anchor: startPosition,
+          focus: startPosition
+        };
+        (0, _core.focusEditor)(newEditor, range);
+        return;
+      }
+      if (isSelectionAtLineEnd(editor, node[1])) {
+        const nextPath = _slate.Path.next(aboveNode[1]);
+        _slate.Transforms.insertNodes(newEditor, (0, _core.generateDefaultParagraph)(), {
+          at: nextPath,
+          select: true
+        });
+        return;
+      }
+    }
+    insertBreak();
+  };
+  newEditor.deleteBackward = unit => {
+    const {
+      selection
+    } = newEditor;
+    if (!selection) {
+      deleteBackward(unit);
+      return;
+    }
+    const selectedParagraphNodeEntry = (0, _core.getSelectedNodeEntryByType)(newEditor, _elementTypes.P);
+    if (selectedParagraphNodeEntry) {
+      if (_slate.Node.string(selectedParagraphNodeEntry[0]) === '') {
+        const previousNodeEntry = (0, _core.getPrevNode)(newEditor);
+        if (previousNodeEntry && previousNodeEntry[0].type === _elementTypes.TABLE_CELL) {
+          _slate.Transforms.removeNodes(newEditor, {
+            at: selectedParagraphNodeEntry[1]
+          });
+          return;
+        }
+      }
+    }
+    return deleteBackward(unit);
+  };
+  newEditor.insertFragment = fragment => {
+    const match = {
+      type: [_elementTypes.P]
+    };
+    const [paragraphEntry] = (0, _core.getNodeEntries)(newEditor, {
+      match
+    });
+    if (!paragraphEntry) return insertFragment(fragment);
+    const firstChild = fragment[0];
+    if (fragment.length === 1 && _constants.LIST_TYPE_ARRAY.includes(firstChild.type)) {
+      // insert text
+      if (firstChild.children.length === 1) {
+        const text = _slate.Node.string(fragment[0]);
+        (0, _slate.insertText)(text);
+        return;
+      }
+
+      // insert list at current path
+      if ((0, _core.isSelectionAtBlockStart)(editor)) {
+        _slate.Transforms.insertNodes(newEditor, fragment);
+        return;
+      }
+
+      // insert list at next path
+      const nextPath = _slate.Path.next(paragraphEntry[1]);
+      _slate.Transforms.insertNodes(newEditor, fragment, {
+        at: nextPath
+      });
+      return;
+    }
+    if (fragment.length === 1 && firstChild.type === _elementTypes.TABLE) {
+      const hasVoidNode = paragraphEntry[0].children.some(item => _slate.Editor.isVoid(newEditor, item));
+      if (_slate.Node.string(paragraphEntry[0]).length === 0 && !hasVoidNode) {
+        _slate.Transforms.insertNodes(newEditor, fragment, {
+          at: paragraphEntry[1]
+        });
+        return;
+      }
+      const nextPath = _slate.Path.next(paragraphEntry[1]);
+      _slate.Transforms.insertNodes(newEditor, fragment, {
+        at: nextPath
+      });
+      return;
+    }
+    return insertFragment(fragment);
+  };
+  return newEditor;
+};
+var _default = exports.default = withP;

package/dist/extension/plugins/p/render-elem.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _constants = require("../../constants");
+var _jsxRuntime = require("react/jsx-runtime");
+const renderP = _ref => {
+  let {
+    element,
+    attributes,
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+    "data-id": element.id,
+    "data-root": "true",
+    className: element.className,
+    ...attributes,
+    style: {
+      ...(_constants.ELEMENT_DEFAULT_STYLE[element.type] || {}),
+      ...((element === null || element === void 0 ? void 0 : element.style) || {})
+    },
+    children: children
+  });
+};
+var _default = exports.default = renderP;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformToParagraph = void 0;
+var _slate = require("slate");
+var _elementTypes = require("../../constants/element-types");
+var _core = require("../../core");
+const transformToParagraph = (editor, focusLocation) => {
+  if (!editor.selection) return;
+  _slate.Transforms.setNodes(editor, {
+    type: _elementTypes.PARAGRAPH
+  });
+  (0, _core.focusEditor)(editor, focusLocation);
+};
+exports.transformToParagraph = transformToParagraph;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+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 _plugin = _interopRequireDefault(require("./plugin"));
+var _renderElem = _interopRequireDefault(require("./render-elem"));
+const ParagraphPlugin = {
+  type: _elementTypes.PARAGRAPH,
+  nodeType: 'element',
+  editorPlugin: _plugin.default,
+  renderElements: [_renderElem.default]
+};
+var _default = exports.default = ParagraphPlugin;

package/dist/extension/plugins/paragraph/plugin.js

@@ -0,0 +1,141 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slate = require("slate");
+var _core = require("../../core");
+var _elementTypes = require("../../constants/element-types");
+var _constants = require("../../constants");
+const isSelectionAtLineEnd = (editor, path) => {
+  const {
+    selection
+  } = editor;
+  if (!selection) return false;
+  const isAtLineEnd = _slate.Editor.isEnd(editor, selection.anchor, path) || _slate.Editor.isEnd(editor, selection.focus, path);
+  return isAtLineEnd;
+};
+const isSelectionAtLineStart = (editor, path) => {
+  const {
+    selection
+  } = editor;
+  if (!selection) return false;
+  const isAtLineEnd = _slate.Editor.isStart(editor, selection.anchor, path) || _slate.Editor.isStart(editor, selection.focus, path);
+  return isAtLineEnd;
+};
+const withParagraph = editor => {
+  const {
+    deleteBackward,
+    insertBreak,
+    insertFragment
+  } = editor;
+  const newEditor = editor;
+  newEditor.insertBreak = () => {
+    if (!newEditor.selection) {
+      insertBreak();
+      return;
+    }
+    const [node] = _slate.Editor.nodes(newEditor, {
+      mode: 'lowest'
+    });
+    if (node && node[0].code) {
+      const aboveNode = (0, _core.getAboveBlockNode)(newEditor, {
+        match: n => _slate.Element.isElement(n),
+        mode: 'highest'
+      });
+      if (isSelectionAtLineStart(editor, node[1]) && _slate.Node.string(node[0]).length !== 0) {
+        _slate.Transforms.insertNodes(newEditor, (0, _core.generateDefaultParagraph)(), {
+          at: aboveNode[1],
+          select: true
+        });
+        const startPosition = _slate.Editor.start(editor, _slate.Path.next(aboveNode[1]));
+        const range = {
+          anchor: startPosition,
+          focus: startPosition
+        };
+        (0, _core.focusEditor)(newEditor, range);
+        return;
+      }
+      if (isSelectionAtLineEnd(editor, node[1])) {
+        const nextPath = _slate.Path.next(aboveNode[1]);
+        _slate.Transforms.insertNodes(newEditor, (0, _core.generateDefaultParagraph)(), {
+          at: nextPath,
+          select: true
+        });
+        return;
+      }
+    }
+    insertBreak();
+  };
+  newEditor.deleteBackward = unit => {
+    const {
+      selection
+    } = newEditor;
+    if (!selection) {
+      deleteBackward(unit);
+      return;
+    }
+    const selectedParagraphNodeEntry = (0, _core.getSelectedNodeEntryByType)(newEditor, _elementTypes.PARAGRAPH);
+    if (selectedParagraphNodeEntry) {
+      if (_slate.Node.string(selectedParagraphNodeEntry[0]) === '') {
+        const previousNodeEntry = (0, _core.getPrevNode)(newEditor);
+        if (previousNodeEntry && previousNodeEntry[0].type === _elementTypes.TABLE_CELL) {
+          _slate.Transforms.removeNodes(newEditor, {
+            at: selectedParagraphNodeEntry[1]
+          });
+          return;
+        }
+      }
+    }
+    return deleteBackward(unit);
+  };
+  newEditor.insertFragment = fragment => {
+    const match = {
+      type: [_elementTypes.PARAGRAPH]
+    };
+    const [paragraphEntry] = (0, _core.getNodeEntries)(newEditor, {
+      match
+    });
+    if (!paragraphEntry) return insertFragment(fragment);
+    const firstChild = fragment[0];
+    if (fragment.length === 1 && _constants.LIST_TYPE_ARRAY.includes(firstChild.type)) {
+      // insert text
+      if (firstChild.children.length === 1) {
+        const text = _slate.Node.string(fragment[0]);
+        (0, _slate.insertText)(text);
+        return;
+      }
+
+      // insert list at current path
+      if ((0, _core.isSelectionAtBlockStart)(editor)) {
+        _slate.Transforms.insertNodes(newEditor, fragment);
+        return;
+      }
+
+      // insert list at next path
+      const nextPath = _slate.Path.next(paragraphEntry[1]);
+      _slate.Transforms.insertNodes(newEditor, fragment, {
+        at: nextPath
+      });
+      return;
+    }
+    if (fragment.length === 1 && firstChild.type === _elementTypes.TABLE) {
+      const hasVoidNode = paragraphEntry[0].children.some(item => _slate.Editor.isVoid(newEditor, item));
+      if (_slate.Node.string(paragraphEntry[0]).length === 0 && !hasVoidNode) {
+        _slate.Transforms.insertNodes(newEditor, fragment, {
+          at: paragraphEntry[1]
+        });
+        return;
+      }
+      const nextPath = _slate.Path.next(paragraphEntry[1]);
+      _slate.Transforms.insertNodes(newEditor, fragment, {
+        at: nextPath
+      });
+      return;
+    }
+    return insertFragment(fragment);
+  };
+  return newEditor;
+};
+var _default = exports.default = withParagraph;

package/dist/extension/plugins/paragraph/render-elem.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _constants = require("../../constants");
+var _jsxRuntime = require("react/jsx-runtime");
+const renderParagraph = _ref => {
+  let {
+    element,
+    attributes,
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    "data-id": element.id,
+    "data-root": "true",
+    className: element.className,
+    ...attributes,
+    style: {
+      ...(_constants.ELEMENT_DEFAULT_STYLE[element.type] || {}),
+      ...((element === null || element === void 0 ? void 0 : element.style) || {})
+    },
+    children: children
+  });
+};
+var _default = exports.default = renderParagraph;

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TABLE_ROW_NODE_NAME = exports.TABLE_MAX_ROWS = exports.TABLE_MAX_COLUMNS = exports.TABLE_ELEMENT_POSITION = exports.TABLE_ELEMENT = exports.TABLE_CELL_STYLE = exports.TABLE_CELL_NODE_NAME = exports.TABLE_BODY_NODE_NAME = void 0;
+const TABLE_CELL_NODE_NAME = exports.TABLE_CELL_NODE_NAME = 'td';
+const TABLE_ROW_NODE_NAME = exports.TABLE_ROW_NODE_NAME = 'tr';
+const TABLE_BODY_NODE_NAME = exports.TABLE_BODY_NODE_NAME = 'tbody';
+const TABLE_MAX_ROWS = exports.TABLE_MAX_ROWS = 500;
+const TABLE_MAX_COLUMNS = exports.TABLE_MAX_COLUMNS = 50;
+const TABLE_ELEMENT = exports.TABLE_ELEMENT = {
+  TABLE: 'table',
+  ROW: 'row',
+  COLUMN: 'column',
+  CELL: 'cell'
+};
+const TABLE_ELEMENT_POSITION = exports.TABLE_ELEMENT_POSITION = {
+  AFTER: 'after',
+  BEFORE: 'before'
+};
+const TABLE_CELL_STYLE = exports.TABLE_CELL_STYLE = {
+  TEXT_ALIGN: 'textAlign'
+};

package/dist/extension/plugins/table/context-menu/horizontal-align-popover/index.css

@@ -0,0 +1,3 @@
+.sea-email-horizontal-align-popover .popover {
+  margin-left: -10px;
+}

package/dist/extension/plugins/table/context-menu/horizontal-align-popover/index.js

@@ -0,0 +1,64 @@
+"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 _reactstrap = require("reactstrap");
+var _core = require("../../../../core");
+var _tableOperations = require("../../table-operations");
+var _container = _interopRequireDefault(require("../../../../../components/options-editor/container"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+const HorizontalAlignPopover = _ref => {
+  let {
+    target,
+    editor,
+    readonly,
+    horizontalAlign
+  } = _ref;
+  const options = (0, _react.useMemo)(() => {
+    return [{
+      value: 'left',
+      label: (0, _constants.gettext)('Left')
+    }, {
+      value: 'center',
+      label: (0, _constants.gettext)('Center')
+    }, {
+      value: 'right',
+      label: (0, _constants.gettext)('Right')
+    }];
+  }, []);
+  const setTextAlignStyle = (0, _react.useCallback)(textAlign => {
+    if (readonly) return;
+    (0, _tableOperations.changeColumnAlign)(editor, textAlign);
+    const focusPoint = editor.selection.focus;
+    // prevent select all text in the editor
+    (0, _core.focusEditor)(editor, focusPoint);
+    // Select last focus point
+    setTimeout(() => {
+      (0, _core.focusEditor)(editor, focusPoint);
+    }, 0);
+  }, [editor, readonly]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledPopover, {
+    target: target,
+    trigger: "hover",
+    className: "sea-email-option-editor-popover sea-email-horizontal-align-popover",
+    placement: "right-start",
+    hideArrow: true,
+    fade: false,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_container.default, {
+      isMultiple: false,
+      isSearchEnabled: false,
+      checkPlacement: "left",
+      value: horizontalAlign || 'left',
+      options: options,
+      onChange: v => setTextAlignStyle(v)
+    })
+  });
+};
+var _default = exports.default = HorizontalAlignPopover;

package/dist/extension/plugins/table/context-menu/index.css

@@ -0,0 +1,13 @@
+.sea-email-table-context-menu {
+  height: fit-content;
+  width: fit-content;
+  position: absolute;
+}
+
+.sea-email-table-context-menu .popover {
+  max-width: fit-content;
+}
+
+.sea-email-table-context-menu .sea-email-option-editor-content {
+  max-height: fit-content;
+}

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

@@ -0,0 +1,152 @@
+"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 _tableOperations = require("../table-operations");
+var _insertTableElement = _interopRequireDefault(require("./insert-table-element"));
+var _constant = require("../constant");
+var _core = require("../../../core");
+var _elementTypes = require("../../../constants/element-types");
+var _horizontalAlignPopover = _interopRequireDefault(require("./horizontal-align-popover"));
+var _option = _interopRequireDefault(require("../../../../components/options-editor/options/option"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+const ContextMenu = _ref => {
+  var _getSelectedNodeByTyp, _cellDom$style;
+  let {
+    element,
+    position,
+    editor,
+    handleCloseContextMenu
+  } = _ref;
+  const [contextMenuStyle, setContextMenuStyle] = (0, _react.useState)({});
+  const contextMenuRef = (0, _react.useRef)(null);
+  const horizontalAlignRef = (0, _react.useRef)(null);
+  const tableCellNodeId = (_getSelectedNodeByTyp = (0, _core.getSelectedNodeByType)(editor, _elementTypes.TABLE_CELL)) === null || _getSelectedNodeByTyp === void 0 ? void 0 : _getSelectedNodeByTyp.id;
+  const cellDom = document.querySelector(`td[data-id="${tableCellNodeId}"]`);
+  const horizontalAlign = cellDom === null || cellDom === void 0 ? void 0 : (_cellDom$style = cellDom.style) === null || _cellDom$style === void 0 ? void 0 : _cellDom$style[_constant.TABLE_CELL_STYLE.TEXT_ALIGN];
+  const currentRowsCount = (0, _react.useMemo)(() => {
+    const rows = element.children;
+    return rows.length;
+  }, [element.children]);
+  const currentColumnsCount = (0, _react.useMemo)(() => {
+    const rows = element.children;
+    const cols = rows[0].children;
+    return cols.length;
+  }, [element.children]);
+  (0, _react.useLayoutEffect)(() => {
+    const {
+      top,
+      left
+    } = position;
+    setContextMenuStyle({
+      top,
+      left,
+      zIndex: '1071',
+      display: 'block'
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [position]);
+  const handleClickOperationBtn = function (callback) {
+    for (var _len = arguments.length, arg = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      arg[_key - 1] = arguments[_key];
+    }
+    callback && callback(editor, ...arg);
+    handleCloseContextMenu();
+  };
+  const _insertTableChildren = (type, position, count) => {
+    (0, _tableOperations.insertTableElement)(editor, type, position, count);
+    handleCloseContextMenu();
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    contentEditable: false,
+    ref: contextMenuRef,
+    style: contextMenuStyle,
+    className: "sea-email-option-editor-popover show sea-email-table-context-menu",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "popover show bs-popover-auto",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "popover-inner",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "sea-email-option-editor-container",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "sea-email-option-editor-content",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_insertTableElement.default, {
+                type: _constant.TABLE_ELEMENT.ROW,
+                count: 1,
+                currentCount: currentRowsCount,
+                position: _constant.TABLE_ELEMENT_POSITION.BEFORE,
+                insertTableElement: _insertTableChildren
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_insertTableElement.default, {
+                type: _constant.TABLE_ELEMENT.ROW,
+                count: 1,
+                currentCount: currentRowsCount,
+                position: _constant.TABLE_ELEMENT_POSITION.AFTER,
+                insertTableElement: _insertTableChildren
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_insertTableElement.default, {
+                type: _constant.TABLE_ELEMENT.COLUMN,
+                count: 1,
+                currentCount: currentColumnsCount,
+                position: _constant.TABLE_ELEMENT_POSITION.BEFORE,
+                insertTableElement: _insertTableChildren
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_insertTableElement.default, {
+                type: _constant.TABLE_ELEMENT.COLUMN,
+                count: 1,
+                currentCount: currentColumnsCount,
+                position: _constant.TABLE_ELEMENT_POSITION.AFTER,
+                insertTableElement: _insertTableChildren
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "sea-email-option-editor-option-divider"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_option.default, {
+                option: {
+                  value: '',
+                  label: (0, _constants.gettext)('Delete row')
+                },
+                isShowSelectedStatus: false,
+                onChange: () => handleClickOperationBtn(_tableOperations.removeRow)
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_option.default, {
+                option: {
+                  value: '',
+                  label: (0, _constants.gettext)('Delete column')
+                },
+                isShowSelectedStatus: false,
+                onChange: () => handleClickOperationBtn(_tableOperations.removeColumn)
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "sea-email-option-editor-option-divider"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_option.default, {
+                option: {
+                  value: '',
+                  label: (0, _constants.gettext)('Delete table')
+                },
+                isShowSelectedStatus: false,
+                onChange: () => handleClickOperationBtn(_tableOperations.removeTable)
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "sea-email-option-editor-option-divider"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_option.default, {
+                innerRef: horizontalAlignRef,
+                option: {
+                  value: '',
+                  label: (0, _constants.gettext)('Delete table'),
+                  selectedIcon: 'arrow-right'
+                },
+                onChange: () => {}
+              }), horizontalAlignRef.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_horizontalAlignPopover.default, {
+                target: horizontalAlignRef,
+                editor: editor,
+                horizontalAlign: horizontalAlign
+              })]
+            })
+          })
+        })
+      })
+    })
+  });
+};
+var _default = exports.default = ContextMenu;

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

@@ -0,0 +1,27 @@
+.sea-email-insert-table-element-option .sea-email-insert-table-element-count-container {
+  align-items: center;
+  display: flex;
+  margin-left: 50px;
+}
+
+.sea-email-insert-table-element-option .sea-email-insert-table-element-count-container {
+  align-items: center;
+  display: flex;
+  margin-left: 50px;
+}
+
+.sea-email-insert-table-element-option .sea-email-insert-table-element-count-input {
+  height: 20px;
+  margin-right: .25rem;
+  padding-left: 4px;
+  padding-right: 4px;
+  text-align: center;
+  transition: none;
+  width: 36px;
+}
+
+.sea-email-insert-table-element-option.sea-email-option-editor-option .sea-email-option-editor-option-content {
+  width: 100%;
+  justify-content: space-between;
+  white-space: nowrap;
+}