@seafile/sea-email-editor 0.0.1

package/dist/extension/plugins/table/render-elem/index.js

@@ -0,0 +1,252 @@
+"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 = exports.RenderTableRow = exports.RenderTableCell = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _slateReact = require("slate-react");
+var _slate = require("slate");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _constant = require("../constant");
+var _contextMenu = _interopRequireDefault(require("../context-menu"));
+var _helper = require("../helper");
+var _core = require("../../../core");
+var _constants = require("../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
+var _eventTypes = require("../../../../constants/event-types");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+const RenderTableContainer = (_ref, editor) => {
+  let {
+    attributes,
+    children,
+    element
+  } = _ref;
+  const tableRef = (0, _react.useRef)(null);
+  const startGridRef = (0, _react.useRef)({
+    rowIndex: -1,
+    colIndex: -1
+  });
+  const [isShowContextMenu, setIsShowContextMenu] = (0, _react.useState)(false);
+  const [contextMenuPosition, setContextMenuPosition] = (0, _react.useState)({
+    top: 0,
+    left: 0
+  });
+  const [, setSelectGridRange] = (0, _react.useState)({
+    startRowIndex: -1,
+    startColIndex: -1,
+    endRowIndex: -1,
+    endColIndex: -1
+  });
+  const isReadonly = (0, _slateReact.useReadOnly)();
+  (0, _react.useEffect)(() => {
+    if (isReadonly) return;
+    clearSelectedCells();
+    document.addEventListener('contextmenu', handleContextMenu, true);
+    document.addEventListener('click', handleOutsideMouseDown);
+    const eventBus = _eventBus.default.getInstance();
+    const unSubscribe = eventBus.subscribe(_eventTypes.INTERNAL_EVENTS.ON_SELECT_ALL_CELL, handleSelectAllCells);
+    return () => {
+      document.removeEventListener('contextmenu', handleContextMenu, true);
+      document.removeEventListener('click', handleOutsideMouseDown);
+      unSubscribe();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const getTableElement = (0, _react.useCallback)((node, type) => {
+    var _target$nodeName;
+    let target = node;
+    if (((_target$nodeName = target.nodeName) === null || _target$nodeName === void 0 ? void 0 : _target$nodeName.toLowerCase()) === type) return target;
+    while (target.nodeName && ((_target$nodeName2 = target.nodeName) === null || _target$nodeName2 === void 0 ? void 0 : _target$nodeName2.toLowerCase()) !== type) {
+      var _target$nodeName2;
+      target = target.parentNode;
+    }
+    return target;
+  }, []);
+  const clearSelectedCells = (0, _react.useCallback)(e => {
+    var _document$querySelect, _tableRef$current;
+    handleCloseContextMenu();
+    // Keep selecting when using alignment tool
+    const isTriggerByAlignmentTool = (_document$querySelect = document.querySelector('.sea-email-table-operations-group')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.contains(e === null || e === void 0 ? void 0 : e.target);
+    if (isTriggerByAlignmentTool) return;
+    (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.querySelectorAll('.selected-cell').forEach(selectedCell => {
+      selectedCell.classList.remove('selected-cell', 'selected-cell-left', 'selected-cell-bottom', 'selected-cell-top', 'selected-cell-right');
+    });
+  }, []);
+  const updateSelectedCellStyles = (0, _react.useCallback)((startRowIndex, endRowIndex, startColIndex, endColIndex) => {
+    clearSelectedCells();
+    if (startColIndex < 0 || startRowIndex < 0) return;
+    for (let rowIndex = startRowIndex; rowIndex <= endRowIndex; rowIndex++) {
+      let currentRow = tableRef.current.querySelectorAll(_constant.TABLE_ROW_NODE_NAME)[rowIndex];
+      for (let colIndex = startColIndex; colIndex <= endColIndex; colIndex++) {
+        const selectedCell = currentRow.querySelectorAll(_constant.TABLE_CELL_NODE_NAME)[colIndex];
+        selectedCell.classList.add('selected-cell');
+        // Set selected cell border
+        rowIndex === startRowIndex && selectedCell.classList.add('selected-cell-top');
+        colIndex === startColIndex && selectedCell.classList.add('selected-cell-left');
+        colIndex === endColIndex && selectedCell.classList.add('selected-cell-right');
+        rowIndex === endRowIndex && selectedCell.classList.add('selected-cell-bottom');
+      }
+    }
+    setSelectGridRange({
+      startRowIndex,
+      endRowIndex,
+      startColIndex,
+      endColIndex
+    });
+  }, [clearSelectedCells]);
+  const handleSelectAllCells = (0, _react.useCallback)(tableId => {
+    if (tableId !== element.id) return;
+    const startRowIndex = 0;
+    const startColIndex = 0;
+    const endRowIndex = element.children.length - 1;
+    const endColIndex = element.children[0].children.length - 1;
+    updateSelectedCellStyles(startRowIndex, endRowIndex, startColIndex, endColIndex);
+  }, [element.children, element.id, updateSelectedCellStyles]);
+
+  // select table cells
+  const handleMouseMove = (0, _react.useCallback)(e => {
+    var _e$target$nodeName;
+    // Check if the target is in the table
+    if (((_e$target$nodeName = e.target.nodeName) === null || _e$target$nodeName === void 0 ? void 0 : _e$target$nodeName.toLowerCase()) === _constant.TABLE_BODY_NODE_NAME || !tableRef.current.contains(e.target)) return;
+    // Figure out select range
+    const {
+      startRowIndex,
+      startColIndex
+    } = startGridRef.current;
+    const endRowIndex = getTableElement(e.target, _constant.TABLE_ROW_NODE_NAME).rowIndex;
+    const endColIndex = getTableElement(e.target, _constant.TABLE_CELL_NODE_NAME).cellIndex;
+    const minRowIndex = Math.min(startRowIndex, endRowIndex);
+    const maxRowIndex = Math.max(startRowIndex, endRowIndex);
+    const minColIndex = Math.min(startColIndex, endColIndex);
+    const maxColIndex = Math.max(startColIndex, endColIndex);
+    // Select one cell
+    if (minRowIndex === maxRowIndex && minColIndex === maxColIndex) return;
+
+    // collapse selection
+    window.getSelection().collapseToEnd();
+    updateSelectedCellStyles(minRowIndex, maxRowIndex, minColIndex, maxColIndex);
+  }, [getTableElement, updateSelectedCellStyles]);
+
+  // end select table cells
+  const handleMouseUp = (0, _react.useCallback)(e => {
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+  }, [handleMouseMove]);
+  const handleMouseDown = (0, _react.useCallback)(e => {
+    var _e$target$nodeName2;
+    if (e.target.nodeName === 'INPUT') return;
+    if (((_e$target$nodeName2 = e.target.nodeName) === null || _e$target$nodeName2 === void 0 ? void 0 : _e$target$nodeName2.toLowerCase()) === _constant.TABLE_BODY_NODE_NAME || !tableRef.current.contains(e.target)) return;
+    // Clear last rendered styles
+    clearSelectedCells();
+    // Set new select range
+    const startRowIndex = getTableElement(e.target, _constant.TABLE_ROW_NODE_NAME).rowIndex;
+    const startColIndex = getTableElement(e.target, _constant.TABLE_CELL_NODE_NAME).cellIndex;
+    startGridRef.current = {
+      startRowIndex: startRowIndex,
+      startColIndex: startColIndex
+    };
+
+    // begin select table cells
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  }, [clearSelectedCells, getTableElement, handleMouseMove, handleMouseUp]);
+  const handleOutsideMouseDown = (0, _react.useCallback)(e => {
+    if (e.target.nodeName === 'INPUT') return;
+    clearSelectedCells();
+  }, [clearSelectedCells]);
+  const handleContextMenu = (0, _react.useCallback)(e => {
+    if (!tableRef.current.contains(e.target)) {
+      handleCloseContextMenu();
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    const position = (0, _helper.getContextMenuPosition)(e, tableRef);
+    setContextMenuPosition(position);
+    setIsShowContextMenu(true);
+  }, []);
+  const handleCloseContextMenu = () => {
+    setIsShowContextMenu(false);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      position: 'relative'
+    },
+    "data-id": element.id,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("table", {
+      ref: tableRef,
+      onMouseDown: handleMouseDown,
+      className: (0, _classnames.default)('sea-email-table-container', element.className),
+      style: {
+        ...(_constants.ELEMENT_DEFAULT_STYLE[element.type] || {}),
+        ...((element === null || element === void 0 ? void 0 : element.style) || {})
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+        ...attributes,
+        children: children
+      })
+    }), isShowContextMenu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_contextMenu.default, {
+      element: element,
+      position: contextMenuPosition,
+      editor: editor,
+      handleCloseContextMenu: handleCloseContextMenu
+    })]
+  });
+};
+var _default = exports.default = RenderTableContainer;
+const RenderTableRow = _ref2 => {
+  let {
+    attributes,
+    children,
+    element,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+    ...attributes,
+    "data-id": element.id,
+    className: element.className,
+    style: {
+      ...(_constants.ELEMENT_DEFAULT_STYLE[element.type] || {}),
+      ...((element === null || element === void 0 ? void 0 : element.style) || {})
+    },
+    children: children
+  });
+};
+exports.RenderTableRow = RenderTableRow;
+const RenderTableCell = _ref3 => {
+  let {
+    attributes,
+    children,
+    element
+  } = _ref3;
+  const editor = (0, _slateReact.useSlateStatic)();
+  const cellPath = (0, _core.findPath)(editor, element, [0, 0]);
+  const pathLength = cellPath.length;
+  const cellIndex = cellPath[pathLength - 1];
+  const rowEntry = _slate.Editor.parent(editor, cellPath);
+  const tableEntry = _slate.Editor.parent(editor, rowEntry[1]);
+  const table = tableEntry[0];
+  let style = {};
+  if (table.align && Array.isArray(table.align)) {
+    style['textAlign'] = table.align[cellIndex] || _constants.TEXT_ALIGN.LEFT;
+  } else {
+    style['textAlign'] = _constants.TEXT_ALIGN.LEFT;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+    "data-root": "true",
+    "data-id": element.id,
+    ...attributes,
+    className: element.className,
+    style: {
+      ...(_constants.ELEMENT_DEFAULT_STYLE[element.type] || {}),
+      ...((element === null || element === void 0 ? void 0 : element.style) || {}),
+      ...style
+    },
+    children: children
+  });
+};
+exports.RenderTableCell = RenderTableCell;

package/dist/extension/plugins/table/table-operations.js

@@ -0,0 +1,323 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeTable = exports.removeRow = exports.removeColumn = exports.insertTableElement = exports.insertRow = exports.insertColumn = exports.changeColumnAlign = void 0;
+var _slate = require("slate");
+var _constants = require("../../constants");
+var _helper = require("./helper");
+var _model = require("./model");
+var _core = require("../../core");
+var _constant = require("./constant");
+var _elementTypes = require("../../constants/element-types");
+/**
+ * @param {Object} editor
+ * @param {INSERT_POSITION.AFTER | INSERT_POSITION.BEFORE} insertPosition by default is INSERT_POSITION.AFTER
+ */
+const insertRow = function (editor) {
+  let position = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.INSERT_POSITION.AFTER;
+  const {
+    tableEntry: [, tablePath],
+    rowEntry: [rowNode],
+    rowIndex
+  } = (0, _helper.getTableFocusingInfos)(editor);
+  const getInsertPath = rowIndex => {
+    const handlePosition = {
+      [_constants.INSERT_POSITION.BEFORE]: rowIndex => tablePath.concat(rowIndex),
+      [_constants.INSERT_POSITION.AFTER]: rowIndex => tablePath.concat(rowIndex + 1)
+    };
+    return handlePosition[position](rowIndex);
+  };
+  const insertPath = getInsertPath(rowIndex);
+  const insertRowChildren = rowNode.children.map(_ref => {
+    let {
+      align
+    } = _ref;
+    return (0, _model.generateTableCell)({
+      align
+    });
+  });
+  const insertRow = (0, _model.generateTableRow)({
+    childrenOrText: insertRowChildren
+  });
+  _slate.Transforms.insertNodes(editor, insertRow, {
+    at: insertPath
+  });
+};
+exports.insertRow = insertRow;
+const removeRow = editor => {
+  const isSelectMultipleTable = (0, _helper.isSelectingMultipleTables)(editor);
+  if (isSelectMultipleTable) return;
+  const selectInfo = (0, _helper.getSelectGrid)(editor);
+  const [tableEntry] = (0, _helper.getTableEntry)(editor);
+  if (!tableEntry) return;
+  if (selectInfo) {
+    const {
+      startRowIndex,
+      endRowIndex
+    } = selectInfo;
+    const [table, tablePath] = tableEntry;
+    const tableRowCount = table.children.length;
+
+    // Remove all rows
+    if (startRowIndex === 0 && endRowIndex === tableRowCount - 1) return removeTable(editor);
+    for (let index = endRowIndex; index >= startRowIndex; index--) {
+      const rowPath = tablePath.concat(index);
+      _slate.Transforms.removeNodes(editor, {
+        at: rowPath
+      });
+    }
+    const focusPoint = _slate.Editor.start(editor, tableEntry[1].concat(startRowIndex - 1 < 0 ? 0 : startRowIndex - 1));
+    (0, _core.focusEditor)(editor, focusPoint);
+    return;
+  }
+  const {
+    tableEntry: [tableNode, tablePath],
+    rowEntry: [, rowPath],
+    rowIndex
+  } = (0, _helper.getTableFocusingInfos)(editor);
+  let focusPoint = null;
+  const tableHeight = tableNode.children.length;
+  // If table has one more row, remove row, else remove table
+  if (tableHeight > 1) {
+    // If removing row is the last row, focus on the previous row
+    const isRemovingLastRow = rowIndex === tableHeight - 1;
+    focusPoint = isRemovingLastRow ? _slate.Editor.start(editor, tablePath.concat(rowIndex - 1)) : _slate.Editor.start(editor, rowPath);
+    _slate.Transforms.removeNodes(editor, {
+      at: rowPath
+    });
+    (0, _core.focusEditor)(editor, focusPoint);
+  } else {
+    return removeTable(editor);
+  }
+};
+exports.removeRow = removeRow;
+const removeTable = editor => {
+  const [tableNodeEntry] = (0, _helper.getTableEntry)(editor);
+  if (!tableNodeEntry) return;
+  const [table, tablePath] = tableNodeEntry;
+  const isLast = (0, _core.isLastNode)(editor, table);
+  if (isLast) {
+    const paragraph = (0, _core.generateDefaultParagraph)();
+    _slate.Transforms.removeNodes(editor, {
+      at: tablePath
+    });
+    _slate.Transforms.insertNodes(editor, paragraph, {
+      at: tablePath
+    });
+    const focusPoint = _slate.Editor.start(editor, tablePath);
+    (0, _core.focusEditor)(editor, focusPoint);
+    return;
+  }
+  const focusPoint = _slate.Editor.start(editor, tablePath[1]);
+  _slate.Transforms.removeNodes(editor, {
+    at: tablePath
+  });
+  (0, _core.focusEditor)(editor, focusPoint);
+};
+
+/**
+ * @param {Object} editor
+ * @param {INSERT_POSITION.AFTER | INSERT_POSITION.BEFORE} insertPosition by default is INSERT_POSITION.AFTER
+ */
+exports.removeTable = removeTable;
+const insertColumn = function (editor) {
+  let insertPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.INSERT_POSITION.AFTER;
+  const {
+    tableEntry: [tableNode, tablePath],
+    rowIndex,
+    columnIndex
+  } = (0, _helper.getTableFocusingInfos)(editor);
+  const getInsertPath = (rowIndex, columnIndex) => {
+    const newCellPath = {
+      [_constants.INSERT_POSITION.BEFORE]: (rowIndex, columnIndex) => tablePath.concat(rowIndex, columnIndex),
+      [_constants.INSERT_POSITION.AFTER]: (rowIndex, columnIndex) => tablePath.concat(rowIndex, columnIndex + 1)
+    };
+    return newCellPath[insertPosition](rowIndex, columnIndex);
+  };
+  tableNode.children.forEach((row, rowIndex) => {
+    const insertPath = getInsertPath(rowIndex, columnIndex);
+    const newCell = (0, _model.generateTableCell)(rowIndex, columnIndex);
+    _slate.Transforms.insertNodes(editor, newCell, {
+      at: insertPath
+    });
+  });
+  const align = [...tableNode.align];
+  const insertAlgin = insertPosition === _constants.INSERT_POSITION.BEFORE ? columnIndex : columnIndex + 1;
+  align.splice(insertAlgin, 0, _constants.TEXT_ALIGN.LEFT);
+  _slate.Transforms.setNodes(editor, {
+    align
+  }, {
+    at: tablePath
+  });
+  const focusPoint = _slate.Editor.start(editor, getInsertPath(rowIndex, columnIndex));
+  (0, _core.focusEditor)(editor, focusPoint);
+};
+exports.insertColumn = insertColumn;
+const removeColumn = editor => {
+  const isSelectMultipleTable = (0, _helper.isSelectingMultipleTables)(editor);
+  if (isSelectMultipleTable) return;
+  const selectInfos = (0, _helper.getSelectGrid)(editor);
+  const [tableEntry] = (0, _helper.getTableEntry)(editor);
+  if (!tableEntry) return;
+  if (selectInfos) {
+    const {
+      startColIndex,
+      endColIndex
+    } = selectInfos;
+    const [table, tablePath] = tableEntry;
+    const tableRowCount = table.children.length;
+    const tableColumnCount = table.children[0].children.length;
+
+    // Remove all columns
+    if (startColIndex === 0 && endColIndex === tableColumnCount - 1) return removeTable(editor);
+    for (let rowIndex = 0; rowIndex < tableRowCount; rowIndex++) {
+      for (let colIndex = endColIndex; colIndex >= startColIndex; colIndex--) {
+        const cellPath = tablePath.concat(rowIndex, colIndex);
+        _slate.Transforms.removeNodes(editor, {
+          at: cellPath
+        });
+      }
+    }
+    const focusPoint = _slate.Editor.start(editor, tablePath.concat(0, startColIndex - 1 < 0 ? 0 : startColIndex - 1));
+    (0, _core.focusEditor)(editor, focusPoint);
+    return;
+  }
+  const {
+    tableEntry: [tableNode, tablePath],
+    rowEntry: [rowNode, rowPath],
+    columnIndex
+  } = (0, _helper.getTableFocusingInfos)(editor);
+  const tableWidth = rowNode.children.length;
+  let focusPoint = null;
+
+  // If table has one more column, remove column, else remove table
+  if (tableWidth > 1) {
+    // If removing column is the last column, focus on the previous column
+    const isRemovingLastColumn = columnIndex === tableWidth - 1;
+    tableNode.children.forEach((row, rowIndex) => {
+      const removePath = tablePath.concat(rowIndex, columnIndex);
+      _slate.Transforms.removeNodes(editor, {
+        at: removePath
+      });
+    });
+
+    // Update columns
+    const align = [...tableNode.align];
+    align.splice(columnIndex, 1);
+    _slate.Transforms.setNodes(editor, {
+      align
+    }, {
+      at: tablePath
+    });
+    focusPoint = isRemovingLastColumn ? _slate.Editor.start(editor, rowPath.concat(columnIndex - 1)) : _slate.Editor.start(editor, rowPath.concat(columnIndex));
+    (0, _core.focusEditor)(editor, focusPoint);
+  } else {
+    removeTable(editor);
+  }
+};
+
+/**
+ * @param {Object} editor
+ * @param {keyof TEXT_ALIGN} align Text align
+ */
+exports.removeColumn = removeColumn;
+const changeColumnAlign = (editor, alignType) => {
+  const {
+    tableEntry: [table, tablePath],
+    columnIndex
+  } = (0, _helper.getTableFocusingInfos)(editor);
+  const selectGrid = (0, _helper.getSelectGrid)(editor);
+  const align = [...table.align];
+
+  // If select a range in table
+  if (selectGrid) {
+    const {
+      startColIndex,
+      endColIndex
+    } = selectGrid;
+    for (let columnIndex = startColIndex; columnIndex <= endColIndex; columnIndex++) {
+      align.splice(columnIndex, columnIndex, alignType);
+    }
+  } else {
+    // If select a cell in table
+    align.splice(columnIndex, columnIndex, alignType);
+  }
+  _slate.Transforms.setNodes(editor, {
+    align
+  }, {
+    at: tablePath
+  });
+};
+exports.changeColumnAlign = changeColumnAlign;
+const insertTableElement = function (editor, type) {
+  let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _constant.TABLE_ELEMENT_POSITION.AFTER;
+  let count = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  const [tableEntry] = (0, _helper.getTableEntry)(editor);
+  if (!tableEntry) return;
+  let selectedInfo = (0, _helper.getSelectGrid)(editor);
+  if (!selectedInfo) {
+    const tableCellEntry = (0, _core.getSelectedNodeEntryByType)(editor, _elementTypes.TABLE_CELL);
+    const cellPath = tableCellEntry[1];
+    const rowPath = cellPath.slice(0, cellPath.length - 1);
+    selectedInfo = {
+      endRowIndex: rowPath.pop(),
+      endColIndex: cellPath.pop()
+    };
+  }
+  const [tableNode, tablePath] = tableEntry;
+  const tableRows = tableNode.children;
+  const tableRowsLength = tableRows.length;
+  const tableColumnLength = tableRows[0].children.length;
+  const {
+    endRowIndex,
+    endColIndex
+  } = selectedInfo;
+  if (type === _constant.TABLE_ELEMENT.ROW) {
+    if (tableRowsLength >= _constant.TABLE_MAX_ROWS) return;
+    const targetPath = position === _constant.TABLE_ELEMENT_POSITION.AFTER ? [...tablePath, endRowIndex + 1] : [...tablePath, endRowIndex];
+    const validCount = Math.min(_constant.TABLE_MAX_ROWS - tableRowsLength, count);
+    for (let i = 0; i < validCount; i++) {
+      const row = (0, _model.generateTableRow)({
+        columnNum: tableColumnLength
+      });
+      _slate.Transforms.insertNodes(editor, row, {
+        at: targetPath
+      });
+    }
+    setTimeout(() => {
+      const oldRowIndex = position === _constant.TABLE_ELEMENT_POSITION.AFTER ? endRowIndex : endRowIndex + validCount;
+      const focusPath = [...tablePath, oldRowIndex, endColIndex];
+      (0, _core.focusEditor)(editor, focusPath);
+      _slate.Transforms.collapse(editor, {
+        edge: 'end'
+      });
+    });
+    return;
+  }
+  if (type === _constant.TABLE_ELEMENT.COLUMN) {
+    if (tableColumnLength >= _constant.TABLE_MAX_COLUMNS) return;
+    const newCellIndex = position === _constant.TABLE_ELEMENT_POSITION.AFTER ? endColIndex + 1 : endColIndex;
+    const validCount = Math.min(_constant.TABLE_MAX_COLUMNS - tableColumnLength, count);
+    for (let j = 0; j < validCount; j++) {
+      for (let i = 0; i < tableRowsLength; i++) {
+        const newCellPath = [...tablePath, i, newCellIndex];
+        const newCell = (0, _model.generateTableCell)();
+        _slate.Transforms.insertNodes(editor, newCell, {
+          at: newCellPath
+        });
+      }
+    }
+    setTimeout(() => {
+      const oldCellIndex = position === _constant.TABLE_ELEMENT_POSITION.AFTER ? endColIndex : endColIndex + validCount;
+      const focusPath = [...tablePath, endRowIndex, oldCellIndex, 0];
+      (0, _core.focusEditor)(editor, focusPath);
+      _slate.Transforms.collapse(editor, {
+        edge: 'end'
+      });
+    });
+    return;
+  }
+};
+exports.insertTableElement = insertTableElement;

package/dist/extension/plugins/text-style/helpers.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toggleTextStyle = exports.removeMark = exports.isMenuDisabled = exports.isMarkActive = exports.addMark = void 0;
+var _slate = require("slate");
+var _helpers = require("../code-block/helpers");
+var _constants = require("../../constants");
+var _core = require("../../core");
+const isMenuDisabled = (editor, isReadonly) => {
+  if (isReadonly) return true;
+  const {
+    selection
+  } = editor;
+  if (!selection) return true;
+  if ((0, _helpers.isInCodeBlock)(editor)) return true;
+  return false;
+};
+exports.isMenuDisabled = isMenuDisabled;
+const isMarkActive = (editor, mark) => {
+  const {
+    selection
+  } = editor;
+  if (!selection) return false;
+  const marks = _slate.Editor.marks(editor);
+
+  // If curMarks exists, you need to set this parameter manually. curMarks prevails
+  if (marks && Object.keys(marks).length > 0) {
+    return !!marks[mark];
+  } else {
+    const [match] = _slate.Editor.nodes(editor, {
+      match: n => n[mark] === true
+    });
+    return !!match;
+  }
+};
+exports.isMarkActive = isMarkActive;
+const addMark = (editor, type) => {
+  _slate.Editor.addMark(editor, type, true);
+};
+exports.addMark = addMark;
+const removeMark = (editor, type) => {
+  _slate.Editor.removeMark(editor, type);
+};
+exports.removeMark = removeMark;
+const toggleTextStyle = (editor, type) => {
+  const isActive = isMarkActive(editor, type);
+  isActive ? removeMark(editor, type) : addMark(editor, type);
+  if (type === _constants.TEXT_STYLE_MAP.CODE) {
+    if (_slate.Range.isCollapsed(editor.selection)) {
+      _slate.Editor.insertText(editor, '');
+    }
+    (0, _core.focusEditor)(editor);
+  }
+};
+exports.toggleTextStyle = toggleTextStyle;

package/dist/extension/plugins/text-style/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 _menu = _interopRequireDefault(require("./menu"));
+var _plugin = _interopRequireDefault(require("./plugin"));
+var _renderElem = _interopRequireDefault(require("./render-elem"));
+const TextPlugin = {
+  type: 'text',
+  editorMenus: [_menu.default],
+  editorPlugin: _plugin.default,
+  renderElements: [_renderElem.default]
+};
+var _default = exports.default = TextPlugin;

package/dist/extension/plugins/text-style/menu/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+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 _components = require("../../../../components");
+var _helpers = require("../helpers");
+var _jsxRuntime = require("react/jsx-runtime");
+const TextStyleMenu = _ref => {
+  let {
+    editor,
+    readonly,
+    type,
+    className
+  } = _ref;
+  const config = _constants.MENUS_CONFIG_MAP[type];
+  const isDisabled = (0, _helpers.isMenuDisabled)(editor, readonly);
+  const isActive = (0, _helpers.isMarkActive)(editor, type);
+  const onClick = (0, _react.useCallback)((e, toggleType) => {
+    (0, _helpers.toggleTextStyle)(editor, type);
+  }, [editor, type]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarItem, {
+      editor: editor,
+      disabled: isDisabled,
+      isActive: isActive,
+      className: className,
+      onClick: onClick,
+      ...config
+    })
+  });
+};
+var _default = exports.default = TextStyleMenu;