@seafile/sdoc-editor 0.3.15 → 0.3.17

package/dist/assets/css/simple-editor.css

@@ -1,6 +1,6 @@
 /* reset common css */
 .sdoc-editor-page-wrapper .dropdown-item,
-.sdoc-context-menu .dropdown-item {
+.sdoc-context-menu .dropdown-item:not(:disabled) {
   color: #212529;
 }
 

package/dist/basic-sdk/extension/commons/insert-element-dialog/index.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState, useRef } from 'react';
-import CustomTableSizeDialog from '../../plugins/table/dialog/custom-table-size-dialog';
+import { CustomTableSizeDialog, SplitCellSettingDialog } from '../../plugins/table/dialogs';
 import AddLinkDialog from '../../plugins/link/dialog/add-link-dialog';
 import SelectFileDialog from '../select-file-dialog/index.js';
 import EventBus from '../../../utils/event-bus';
@@ -77,6 +77,10 @@ const InsertElementDialog = _ref => {
       {
         return /*#__PURE__*/React.createElement(CustomTableSizeDialog, props);
       }
+    case ELEMENT_TYPE.TABLE_CELL:
+      {
+        return /*#__PURE__*/React.createElement(SplitCellSettingDialog, props);
+      }
     case ELEMENT_TYPE.LINK:
       {
         return /*#__PURE__*/React.createElement(AddLinkDialog, props);

package/dist/basic-sdk/extension/constants/index.js

@@ -5,7 +5,7 @@ export { DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_LIST, DEFAULT_FONT
 export { FONT_SIZE, DEFAULT_FONT, FONT, GOOGLE_FONT_CLASS, RECENT_USED_FONTS_KEY, SDOC_FONT_SIZE } from './font';
 export { DIFF_TYPE, ADDED_STYLE, DELETED_STYLE } from './diff-view';
 export { KEYBOARD, MAC_HOTKEYS, WIN_HOTKEYS } from './keyboard';
-export { UNDO, REDO, TEXT_STYLE, TEXT_STYLE_MAP, TEXT_STYLE_MORE, TEXT_ALIGN, REMOVE_TABLE, CLEAR_FORMAT, MENUS_CONFIG_MAP, SIDE_TRANSFORM_MENUS_CONFIG, SIDE_INSERT_MENUS_CONFIG } from './menus-config';
+export { UNDO, REDO, TEXT_STYLE, TEXT_STYLE_MAP, TEXT_STYLE_MORE, TEXT_ALIGN, REMOVE_TABLE, COMBINE_CELL, CLEAR_FORMAT, MENUS_CONFIG_MAP, SIDE_TRANSFORM_MENUS_CONFIG, SIDE_INSERT_MENUS_CONFIG } from './menus-config';
 export const HEADERS = [HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6];
 export const HEADER_TITLE_MAP = {
   [TITLE]: 'Title',

package/dist/basic-sdk/extension/constants/menus-config.js

@@ -4,6 +4,7 @@ export const UNDO = 'undo';
 export const REDO = 'redo';
 export const CLEAR_FORMAT = 'clear_format';
 export const REMOVE_TABLE = 'remove_table';
+export const COMBINE_CELL = 'combine_cell';
 
 // text style
 export const TEXT_STYLE = 'text_style';
@@ -89,6 +90,11 @@ export const MENUS_CONFIG_MAP = {
     iconClass: 'sdocfont sdoc-delete-table',
     text: 'Delete_table'
   },
+  [COMBINE_CELL]: {
+    id: "sdoc_".concat(COMBINE_CELL),
+    iconClass: 'sdocfont sdoc-merge-cell',
+    text: 'Combine_cell'
+  },
   [TEXT_STYLE]: [{
     id: ITALIC,
     iconClass: 'sdocfont sdoc-italic',

package/dist/basic-sdk/extension/core/queries/index.js

@@ -218,14 +218,17 @@ export const getAboveBlockNode = (editor, options) => {
   }));
 };
 export const getPrevNode = editor => {
-  const [lowerNode, lowerPath] = getAboveNode(editor, {
+  const lowerNodeEntry = getAboveNode(editor, {
     mode: 'lowest',
     match: n => Element.isElement(n) && Editor.isBlock(editor, n)
   });
-  const [heightNode, heightPath] = getAboveNode(editor, {
+  const highNodeEntry = getAboveNode(editor, {
     mode: 'highest',
     match: n => Element.isElement(n) && Editor.isBlock(editor, n)
   });
+  if (!lowerNodeEntry || !highNodeEntry) return null;
+  const [heightNode, heightPath] = highNodeEntry;
+  const [lowerNode, lowerPath] = lowerNodeEntry;
   let prevNode = null;
   try {
     prevNode = Editor.previous(editor, {

package/dist/basic-sdk/extension/plugins/table/constants/index.js

@@ -1,4 +1,4 @@
-export const TABLE_MAX_ROWS = 50;
+export const TABLE_MAX_ROWS = 500;
 export const TABLE_MAX_COLUMNS = 50;
 export const EMPTY_SELECTED_RANGE = {
   minRowIndex: -1,

package/dist/basic-sdk/extension/plugins/table/dialogs/index.js

@@ -0,0 +1,3 @@
+import CustomTableSizeDialog from './custom-table-size-dialog';
+import SplitCellSettingDialog from './split-cell-setting-dialog';
+export { CustomTableSizeDialog, SplitCellSettingDialog };

package/dist/basic-sdk/extension/plugins/table/dialogs/split-cell-setting-dialog.js

@@ -0,0 +1,99 @@
+import React, { useCallback, useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert, Row, Col, FormGroup, Label, Input } from 'reactstrap';
+import { useTranslation } from 'react-i18next';
+import { getSelectedInfo, splitCell } from '../helpers';
+const SplitCellSettingDialog = _ref => {
+  let {
+    editor,
+    closeDialog
+  } = _ref;
+  const {
+    t
+  } = useTranslation();
+  const {
+    cell
+  } = getSelectedInfo(editor);
+  const {
+    rowspan = 1,
+    colspan = 1
+  } = cell;
+  const [rowNumber, setRowNumber] = useState(rowspan);
+  const [columnNumber, setColumnNumber] = useState(colspan);
+  const CELL_SPLIT_MAX_ROWS = rowspan;
+  const CELL_SPLIT_MAX_COLUMNS = colspan;
+  const [errorMessage, setErrorMessage] = useState('');
+  const onRowNumberChange = useCallback(e => {
+    setRowNumber(e.target.value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onColumnNumberChange = useCallback(e => {
+    setColumnNumber(e.target.value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const handleSubmit = useCallback(() => {
+    const parsedRowNumber = parseInt(rowNumber);
+    const parsedColumnNumber = parseInt(columnNumber);
+    if (!parsedRowNumber || !parsedColumnNumber || parsedRowNumber < 0 || parsedColumnNumber < 0) {
+      setErrorMessage(t('Please_enter_a_non-negative_integer'));
+      return false;
+    }
+    let targetRowNumber = parsedRowNumber;
+    let targetColumnNumber = parsedColumnNumber;
+    if (parsedRowNumber > CELL_SPLIT_MAX_ROWS) {
+      targetRowNumber = CELL_SPLIT_MAX_ROWS;
+      setRowNumber(targetRowNumber);
+      setErrorMessage(t('The_maximum_row_number_is_{number}').replace('{number}', CELL_SPLIT_MAX_ROWS));
+      return false;
+    }
+    if (parsedColumnNumber > CELL_SPLIT_MAX_COLUMNS) {
+      targetColumnNumber = CELL_SPLIT_MAX_COLUMNS;
+      setColumnNumber(targetColumnNumber);
+      setErrorMessage(t('The_maximum_column_number_is_{number}').replace('{number}', CELL_SPLIT_MAX_COLUMNS));
+      return false;
+    }
+    splitCell(editor, targetRowNumber, targetColumnNumber);
+    closeDialog();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rowNumber, columnNumber]);
+  return /*#__PURE__*/React.createElement(Modal, {
+    isOpen: true,
+    autoFocus: false,
+    toggle: closeDialog,
+    zIndex: 1071,
+    returnFocusAfterClose: true
+  }, /*#__PURE__*/React.createElement(ModalHeader, {
+    toggle: closeDialog
+  }, t('Split_cell')), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+    md: 6
+  }, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, {
+    for: "row-number"
+  }, t('Row_number')), /*#__PURE__*/React.createElement(Input, {
+    id: "row-number",
+    name: "row-number",
+    type: "number",
+    min: 1,
+    value: rowNumber,
+    onChange: onRowNumberChange
+  }))), /*#__PURE__*/React.createElement(Col, {
+    md: 6
+  }, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, {
+    for: "column-number"
+  }, t('Column_number')), /*#__PURE__*/React.createElement(Input, {
+    id: "column-number",
+    name: "column-number",
+    type: "number",
+    min: 1,
+    value: columnNumber,
+    onChange: onColumnNumberChange
+  })))), errorMessage && /*#__PURE__*/React.createElement(Alert, {
+    className: "mt-2 mb-0",
+    color: "danger"
+  }, t(errorMessage))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    color: "secondary",
+    onClick: closeDialog
+  }, t('Cancel')), /*#__PURE__*/React.createElement(Button, {
+    color: "primary",
+    onClick: handleSubmit
+  }, t('Submit'))));
+};
+export default SplitCellSettingDialog;

package/dist/basic-sdk/extension/plugins/table/helpers.js

@@ -41,6 +41,18 @@ export const isTableMenuDisabled = (editor, readonly) => {
   if (match) return true;
   return false;
 };
+export const isCombineCellsDisabled = (editor, readonly) => {
+  if (readonly) return true;
+  const {
+    selection,
+    tableSelectedRange
+  } = editor;
+  if (!selection) return true;
+  if (!ObjectUtils.isSameObject(tableSelectedRange, EMPTY_SELECTED_RANGE)) {
+    return false;
+  }
+  return true;
+};
 export const generateTableCell = () => {
   return {
     id: slugid.nice(),
@@ -99,9 +111,13 @@ export const generateEmptyTable = (editor, tableProps) => {
     type: ELEMENT_TYPE.TABLE,
     children: children,
     columns,
-    style: {
+    ui: {
       alternate_highlight,
       alternate_highlight_color
+    },
+    style: {
+      gridTemplateColumns: "repeat(".concat(colsCount, ", ").concat(columnWidth, "px)"),
+      gridAutoRows: "minmax(".concat(TABLE_ROW_MIN_HEIGHT, "px, auto)")
     }
   };
 };
@@ -219,6 +235,61 @@ export const insertTableRow = function (editor, table, rowIndex) {
   });
   const focusPath = [...targetPath, 0];
   focusEditor(editor, focusPath);
+
+  // handle cells with the rowspan > 1
+  if (position === TABLE_ELEMENT_POSITION.AFTER) {
+    handleCombinedCellsAfterInsertTableRow(editor, tablePath, table, rowIndex);
+  }
+};
+export const handleCombinedCellsAfterInsertTableRow = (editor, tablePath, table, rowIndex) => {
+  // important background info: the new row is inserted after rowIndex
+  const cells = table.children[rowIndex].children;
+  for (let i = 0, len = cells.length; i < len; i++) {
+    const {
+      is_combined,
+      rowspan,
+      colspan
+    } = cells[i];
+    if (is_combined) {
+      for (let ri = rowIndex - 1; ri >= 0; ri--) {
+        const {
+          is_combined: ri_is_combined,
+          rowspan: ri_rowspan,
+          colspan: ri_colspan
+        } = table.children[ri].children[i];
+        if (!ri_is_combined && ri + ri_rowspan - 1 > rowIndex) {
+          Transforms.setNodes(editor, {
+            rowspan: ri_rowspan + 1
+          }, {
+            at: [...tablePath, ri, i]
+          });
+          for (let j = 0; j < ri_colspan; j++) {
+            Transforms.setNodes(editor, {
+              'is_combined': true
+            }, {
+              at: [...tablePath, rowIndex + 1, i + j]
+            });
+          }
+          break;
+        }
+      }
+    } else {
+      if (rowspan > 1) {
+        Transforms.setNodes(editor, {
+          rowspan: rowspan + 1
+        }, {
+          at: [...tablePath, rowIndex, i]
+        });
+        for (let j = 0; j < colspan; j++) {
+          Transforms.setNodes(editor, {
+            'is_combined': true
+          }, {
+            at: [...tablePath, rowIndex + 1, i + j]
+          });
+        }
+      }
+    }
+  }
 };
 export const insertTableColumn = function (editor, table, columnIndex) {
   let position = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : TABLE_ELEMENT_POSITION.AFTER;
@@ -238,6 +309,60 @@ export const insertTableColumn = function (editor, table, columnIndex) {
   }
   const focusPath = [...tablePath, 0, newCellIndex, 0];
   focusEditor(editor, focusPath);
+
+  // handle cells with the colspan > 1
+  if (position === TABLE_ELEMENT_POSITION.AFTER) {
+    handleCombinedCellsAfterInsertTableColumn(editor, tablePath, table, columnIndex);
+  }
+};
+export const handleCombinedCellsAfterInsertTableColumn = (editor, tablePath, table, columnIndex) => {
+  // important background info: the new column is inserted after columnIndex
+  for (let i = 0, len = table.children.length; i < len; i++) {
+    const {
+      is_combined,
+      rowspan,
+      colspan
+    } = table.children[i].children[columnIndex];
+    if (is_combined) {
+      for (let ci = columnIndex - 1; ci >= 0; ci--) {
+        const {
+          is_combined: ci_is_combined,
+          rowspan: ci_rowspan,
+          colspan: ci_colspan
+        } = table.children[i].children[ci];
+        if (!ci_is_combined && ci + ci_colspan - 1 > columnIndex) {
+          Transforms.setNodes(editor, {
+            colspan: ci_colspan + 1
+          }, {
+            at: [...tablePath, i, ci]
+          });
+          for (let j = 0; j < ci_rowspan; j++) {
+            Transforms.setNodes(editor, {
+              'is_combined': true
+            }, {
+              at: [...tablePath, i + j, columnIndex + 1]
+            });
+          }
+          break;
+        }
+      }
+    } else {
+      if (colspan > 1) {
+        Transforms.setNodes(editor, {
+          colspan: colspan + 1
+        }, {
+          at: [...tablePath, i, columnIndex]
+        });
+        for (let j = 0; j < rowspan; j++) {
+          Transforms.setNodes(editor, {
+            'is_combined': true
+          }, {
+            at: [...tablePath, i + j, columnIndex + 1]
+          });
+        }
+      }
+    }
+  }
 };
 export const insertTableElement = function (editor, type) {
   let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : TABLE_ELEMENT_POSITION.AFTER;
@@ -260,6 +385,12 @@ export const insertTableElement = function (editor, type) {
       Transforms.insertNodes(editor, row, {
         at: targetPath
       });
+      // handle combined cells
+      if (!(rowIndex == 0 && position === TABLE_ELEMENT_POSITION.BEFORE)) {
+        const targetRowIndex = position === TABLE_ELEMENT_POSITION.AFTER ? rowIndex : rowIndex - 1;
+        const currentTable = getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE);
+        handleCombinedCellsAfterInsertTableRow(editor, tablePath, currentTable, targetRowIndex);
+      }
     }
     const focusPath = [...targetPath, cellIndex];
     focusEditor(editor, focusPath);
@@ -279,12 +410,121 @@ export const insertTableElement = function (editor, type) {
           at: newCellPath
         });
       }
+      // handle combined cells
+      if (!(cellIndex == 0 && position === TABLE_ELEMENT_POSITION.BEFORE)) {
+        const targetColumnIndex = position === TABLE_ELEMENT_POSITION.AFTER ? cellIndex : cellIndex - 1;
+        const currentTable = getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE);
+        handleCombinedCellsAfterInsertTableColumn(editor, tablePath, currentTable, targetColumnIndex);
+      }
     }
     const focusPath = [...tablePath, rowIndex, cellIndex + 1, 0];
     focusEditor(editor, focusPath);
     return;
   }
 };
+export const combineCells = editor => {
+  const {
+    tablePath
+  } = getSelectedInfo(editor);
+  const {
+    minColIndex,
+    maxColIndex,
+    minRowIndex,
+    maxRowIndex
+  } = editor.tableSelectedRange;
+  let newCellContent = [];
+  for (let i = minRowIndex; i < maxRowIndex + 1; i++) {
+    for (let j = minColIndex; j < maxColIndex + 1; j++) {
+      let nodePath = [...tablePath, i, j];
+      let node = Editor.node(editor, nodePath);
+      if (node[0].is_combined) {
+        continue;
+      }
+      Transforms.setNodes(editor, {
+        'is_combined': true
+      }, {
+        at: nodePath
+      });
+      newCellContent = newCellContent.concat(node[0].children);
+    }
+  }
+  const targetCellPath = [...tablePath, minRowIndex, minColIndex];
+  const newCell = generateTableCell();
+  newCell.children = newCellContent;
+  newCell.rowspan = maxRowIndex - minRowIndex + 1;
+  newCell.colspan = maxColIndex - minColIndex + 1;
+  // keep row.chilren.length not changed
+  Transforms.removeNodes(editor, {
+    at: targetCellPath
+  });
+  Transforms.insertNodes(editor, newCell, {
+    at: targetCellPath
+  });
+  focusEditor(editor, targetCellPath);
+
+  // for clicking the 'combine cell' icon in the toolbar
+  const eventBus = EventBus.getInstance();
+  eventBus.dispatch(INTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE);
+};
+export const splitCell = (editor, rowNumber, columnNumber) => {
+  if (rowNumber == 1 && columnNumber == 1) {
+    return;
+  }
+  const {
+    cell,
+    rowIndex,
+    cellIndex,
+    cellPath,
+    tablePath
+  } = getSelectedInfo(editor);
+  const {
+    rowspan,
+    colspan
+  } = cell;
+  const rowspanBase = Math.floor(rowspan / rowNumber);
+  const rowspanLeft = rowspan % rowNumber;
+  const colspanBase = Math.floor(colspan / columnNumber);
+  const colspanLeft = colspan % columnNumber;
+  const cellNumber = rowNumber * columnNumber;
+  const dataBlockNumber = Math.ceil(cell.children.length / cellNumber);
+  let firstNewCell;
+  let rowspanSum = 0;
+  for (let i = 0; i < rowNumber; i++) {
+    let newRowSpan = rowspanBase + (i + 1 <= rowspanLeft ? 1 : 0);
+    let colspanSum = 0;
+    for (let j = 0; j < columnNumber; j++) {
+      const newCell = generateTableCell();
+      let startIndex = (i * columnNumber + j) * dataBlockNumber;
+      if (startIndex < cell.children.length) {
+        let endIndex = Math.min(startIndex + dataBlockNumber, cell.children.length);
+        newCell.children = cell.children.slice(startIndex, endIndex);
+      }
+      newCell.rowspan = newRowSpan;
+      newCell.colspan = colspanBase + (j + 1 <= colspanLeft ? 1 : 0);
+      const newRowIndex = rowIndex + rowspanSum;
+      const newCellIndex = cellIndex + colspanSum;
+      const targetCellPath = [...tablePath, newRowIndex, newCellIndex];
+      if (i == 0 && j == 0) {
+        firstNewCell = newCell;
+      } else {
+        Transforms.removeNodes(editor, {
+          at: targetCellPath
+        });
+        Transforms.insertNodes(editor, newCell, {
+          at: targetCellPath
+        });
+      }
+      colspanSum += newCell.colspan;
+    }
+    rowspanSum += newRowSpan;
+  }
+  Transforms.removeNodes(editor, {
+    at: cellPath
+  });
+  Transforms.insertNodes(editor, firstNewCell, {
+    at: cellPath
+  });
+};
 export const removeTable = (editor, path) => {
   let validPath = path;
   if (!validPath) {
@@ -336,6 +576,7 @@ export const removeTableElement = (editor, type) => {
       focusEditor(editor, focusPath);
       return;
     }
+    handleCombinedCellsBeforeDeleteTableRow(editor, tablePath, table, rowIndex);
     Transforms.removeNodes(editor, {
       at: rowPath
     });
@@ -378,6 +619,7 @@ export const removeTableElement = (editor, type) => {
     const newColumns = columns.slice(0);
     newColumns.splice(cellIndex, 1);
     updateColumnWidth(editor, table, newColumns);
+    handleCombinedCellsBeforeDeleteTableColumn(editor, tablePath, table, cellIndex);
     for (let i = 0; i < tableSize[0]; i++) {
       const cellPath = [...tablePath, i, cellIndex];
       Transforms.removeNodes(editor, {
@@ -390,6 +632,87 @@ export const removeTableElement = (editor, type) => {
     return;
   }
 };
+
+// handle combined cells before deleting a row
+export const handleCombinedCellsBeforeDeleteTableRow = (editor, tablePath, table, rowIndex) => {
+  const cells = table.children[rowIndex].children;
+  for (let i = 0, len = cells.length; i < len; i++) {
+    const {
+      is_combined,
+      rowspan,
+      colspan
+    } = cells[i];
+    if (is_combined) {
+      for (let ri = rowIndex - 1; ri >= 0; ri--) {
+        const {
+          is_combined: ri_is_combined,
+          rowspan: ri_rowspan
+        } = table.children[ri].children[i];
+        if (!ri_is_combined && ri + ri_rowspan - 1 >= rowIndex) {
+          Transforms.setNodes(editor, {
+            rowspan: ri_rowspan - 1
+          }, {
+            at: [...tablePath, ri, i]
+          });
+          break;
+        }
+      }
+    } else {
+      if (rowspan > 1) {
+        const targetCellPath = [...tablePath, rowIndex + 1, i];
+        const newCell = generateTableCell();
+        newCell.rowspan = rowspan - 1;
+        newCell.colspan = colspan;
+        Transforms.removeNodes(editor, {
+          at: targetCellPath
+        });
+        Transforms.insertNodes(editor, newCell, {
+          at: targetCellPath
+        });
+      }
+    }
+  }
+};
+
+// handle combined cells before deleting a column
+export const handleCombinedCellsBeforeDeleteTableColumn = (editor, tablePath, table, columnIndex) => {
+  for (let i = 0, len = table.children.length; i < len; i++) {
+    const {
+      is_combined,
+      rowspan,
+      colspan
+    } = table.children[i].children[columnIndex];
+    if (is_combined) {
+      for (let ci = columnIndex - 1; ci >= 0; ci--) {
+        const {
+          is_combined: ci_is_combined,
+          colspan: ci_colspan
+        } = table.children[i].children[ci];
+        if (!ci_is_combined && ci + ci_colspan - 1 >= columnIndex) {
+          Transforms.setNodes(editor, {
+            colspan: ci_colspan - 1
+          }, {
+            at: [...tablePath, i, ci]
+          });
+          break;
+        }
+      }
+    } else {
+      if (colspan > 1) {
+        const targetCellPath = [...tablePath, i, columnIndex + 1];
+        const newCell = generateTableCell();
+        newCell.rowspan = rowspan;
+        newCell.colspan = colspan - 1;
+        Transforms.removeNodes(editor, {
+          at: targetCellPath
+        });
+        Transforms.insertNodes(editor, newCell, {
+          at: targetCellPath
+        });
+      }
+    }
+  }
+};
 export const setTableSelectedRange = (editor, range) => {
   if (range) {
     editor.tableSelectedRange = range;

package/dist/basic-sdk/extension/plugins/table/menu/active-table-menu/combine-cells.js

@@ -0,0 +1,32 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, { useCallback, useEffect, useState } from 'react';
+import { MenuItem } from '../../../../commons';
+import { MENUS_CONFIG_MAP, COMBINE_CELL } from '../../../../constants';
+import { isCombineCellsDisabled, combineCells } from '../../helpers';
+const CombineCells = _ref => {
+  let {
+    isRichEditor,
+    className,
+    editor,
+    readonly
+  } = _ref;
+  const [disabled, setDisabled] = useState(false);
+  useEffect(() => {
+    const disabled = isCombineCellsDisabled(editor, readonly);
+    setDisabled(disabled);
+  }, [editor, editor.tableSelectedRange, readonly]);
+  const _combineCells = useCallback(() => {
+    if (readonly) return;
+    combineCells(editor);
+  }, [editor, readonly]);
+  const menuConfig = MENUS_CONFIG_MAP[COMBINE_CELL];
+  const props = _objectSpread(_objectSpread({
+    isRichEditor,
+    disabled: disabled,
+    isActive: false
+  }, menuConfig), {}, {
+    onMouseDown: _combineCells
+  });
+  return /*#__PURE__*/React.createElement(MenuItem, props);
+};
+export default CombineCells;

package/dist/basic-sdk/extension/plugins/table/menu/active-table-menu/index.css

@@ -1,7 +1,3 @@
-.sdoc-table-menu-group.menu-group .menu-group-item:not(.sdoc-remove-table) {
-  width: 36px;
-}
-
 .sdoc-table-menu-group .sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-icon {
   width: 24px;
 }

package/dist/basic-sdk/extension/plugins/table/menu/active-table-menu/index.js

@@ -4,6 +4,7 @@ import { MenuGroup } from '../../../../commons';
 import { isAllInTable } from '../../helpers';
 import CellBackgroundColorMenu from './cell-bg-color-menu';
 import CellTextAlignMenu from './cell-text-align-menu';
+import CombineCells from './combine-cells';
 import RemoveTable from './remove-table-menu';
 import TableColumnMenu from './table-column-menu';
 import TableRowMenu from './table-row-menu';
@@ -32,6 +33,11 @@ const ActiveTableMenu = _ref => {
     isRichEditor: isRichEditor,
     className: className,
     readonly: readonly
+  }), /*#__PURE__*/React.createElement(CombineCells, {
+    editor: editor,
+    isRichEditor: isRichEditor,
+    className: className,
+    readonly: readonly
   }), /*#__PURE__*/React.createElement(RemoveTable, {
     editor: editor,
     isRichEditor: isRichEditor,