@seafile/sdoc-editor 0.1.39 → 0.1.41

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

@@ -0,0 +1,500 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import isHotkey from 'is-hotkey';
+import { Editor, Transforms, Point, Path, Node } from '@seafile/slate';
+import { ReactEditor } from '@seafile/slate-react';
+import { getNodeType, getParentNode, getSelectedNodeByType, isTextNode, isLastNode, genEmptyParagraph, getSelectedElems, replaceNodeChildren, focusEditor } from '../../core';
+import { getNodePathById } from '../../../socket/helpers';
+import { ELEMENT_TYPE, TABLE_ELEMENT, TABLE_ELEMENT_POSITION, KEYBOARD } from '../../constants';
+import { generateTableRow, generateTableCell } from './helpers';
+var deleteHandler = function deleteHandler(editor) {
+  var selection = editor.selection;
+  if (selection == null) return false;
+  var _Editor$nodes = Editor.nodes(editor, {
+      match: function match(n) {
+        var type = getNodeType(n);
+        if (!type && isTextNode(n) && n.id) {
+          var parentNode = getParentNode(editor.children, n.id);
+          type = getNodeType(parentNode);
+        }
+        return type === ELEMENT_TYPE.TABLE_CELL;
+      }
+    }),
+    _Editor$nodes2 = _slicedToArray(_Editor$nodes, 1),
+    cellNodeEntry = _Editor$nodes2[0];
+  if (cellNodeEntry) {
+    var _cellNodeEntry = _slicedToArray(cellNodeEntry, 2),
+      cellPath = _cellNodeEntry[1];
+    var start = Editor.start(editor, cellPath);
+    if (Point.equals(selection.anchor, start)) {
+      return true;
+    }
+  }
+  return false;
+};
+var isTableLocation = function isTableLocation(editor, location) {
+  var tables = Editor.nodes(editor, {
+    at: location,
+    match: function match(n) {
+      var type = getNodeType(n);
+      if (!type && isTextNode(n) && n.id) {
+        var parentNode = getParentNode(editor.children, n.id);
+        type = getNodeType(parentNode);
+      }
+      return type === ELEMENT_TYPE.TABLE_CELL;
+    }
+  });
+  var hasTable = false;
+  // eslint-disable-next-line no-unused-vars
+  var _iterator = _createForOfIteratorHelper(tables),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var table = _step.value;
+      hasTable = true;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return hasTable;
+};
+var getSelectedInfo = function getSelectedInfo(editor) {
+  var currentTable = getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE);
+  var currentRow = getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE_ROW);
+  var currentCell = getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE_CELL);
+  var currentCellPath = getNodePathById(editor, currentCell.id);
+  return {
+    table: currentTable,
+    tablePath: getNodePathById(editor, currentTable.id),
+    tableSize: [currentTable.children.length, currentRow.children.length],
+    row: currentRow,
+    rowPath: getNodePathById(editor, currentRow.id),
+    rowIndex: currentCellPath[currentCellPath.length - 2],
+    cell: currentCell,
+    cellPath: getNodePathById(editor, currentCell.id),
+    cellIndex: currentCellPath[currentCellPath.length - 1]
+  };
+};
+var removeTable = function removeTable(editor, path) {
+  var validPath = path;
+  if (!validPath) {
+    var _getSelectedInfo = getSelectedInfo(editor),
+      tablePath = _getSelectedInfo.tablePath;
+    validPath = tablePath;
+  }
+  var tableIndex = validPath[validPath.length - 1];
+  var tableParentPath = validPath.slice(0, validPath.length - 1);
+  var targetNodeIndex = tableIndex >= 1 ? tableIndex - 1 : 1;
+  var targetNodePath = [].concat(_toConsumableArray(tableParentPath), [targetNodeIndex]);
+  Transforms.removeNodes(editor, {
+    at: path
+  });
+  focusEditor(editor, targetNodePath);
+};
+var isCursorAtCellEnd = function isCursorAtCellEnd(cell) {
+  var cursor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  if (!cell) return false;
+  var textCount = cell.children[0].text.length;
+  return cursor === textCount;
+};
+var isCursorAtCellStart = function isCursorAtCellStart() {
+  var cursor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  return cursor === 0;
+};
+var focusCell = function focusCell(editor, event) {
+  var keyboardName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  var _getSelectedInfo2 = getSelectedInfo(editor),
+    tableSize = _getSelectedInfo2.tableSize,
+    tablePath = _getSelectedInfo2.tablePath,
+    rowIndex = _getSelectedInfo2.rowIndex,
+    cellIndex = _getSelectedInfo2.cellIndex,
+    cell = _getSelectedInfo2.cell;
+  var tableIndex = tablePath[0];
+  var selection = editor.selection;
+  var focus = selection.focus;
+  if (keyboardName === KEYBOARD.UP) {
+    if (!isCursorAtCellStart(focus.offset)) return;
+    event.preventDefault();
+    if (rowIndex === 0) {
+      if (tableIndex !== 0) {
+        focusEditor(editor, [tableIndex - 1]);
+      }
+      return;
+    }
+    focusEditor(editor, [tableIndex, rowIndex - 1, cellIndex]);
+    var newFocus = editor.selection.focus;
+    Transforms.select(editor, {
+      focus: newFocus,
+      anchor: newFocus
+    });
+  }
+  if (keyboardName === KEYBOARD.RIGHT) {
+    if (!isCursorAtCellEnd(cell, focus.offset)) return;
+    event.preventDefault();
+    if (rowIndex === tableSize[0] - 1 && cellIndex === tableSize[1] - 1) {
+      focusEditor(editor, [tableIndex + 1]);
+      return;
+    }
+    if (cellIndex === tableSize[1] - 1) {
+      focusEditor(editor, [tableIndex, rowIndex + 1, 0]);
+    } else {
+      focusEditor(editor, [tableIndex, rowIndex, cellIndex + 1]);
+    }
+    var newAnchor = editor.selection.anchor;
+    Transforms.select(editor, {
+      focus: newAnchor,
+      anchor: newAnchor
+    });
+  }
+  if (keyboardName === KEYBOARD.DOWN) {
+    if (!isCursorAtCellEnd(cell, focus.offset)) return;
+    event.preventDefault();
+    if (rowIndex === tableSize[0] - 1) {
+      focusEditor(editor, [tableIndex + 1]);
+      return;
+    }
+    focusEditor(editor, [tableIndex, rowIndex + 1, cellIndex]);
+    var _newAnchor = editor.selection.anchor;
+    Transforms.select(editor, {
+      focus: _newAnchor,
+      anchor: _newAnchor
+    });
+  }
+  if (keyboardName === KEYBOARD.LEFT) {
+    if (!isCursorAtCellStart(focus.offset)) return;
+    event.preventDefault();
+    if (rowIndex === 0 && cellIndex === 0) {
+      if (tableIndex !== 0) {
+        focusEditor(editor, [tableIndex - 1]);
+      }
+      return;
+    }
+    if (cellIndex === 0) {
+      focusEditor(editor, [tableIndex, rowIndex - 1, tableSize[1] - 1]);
+    } else {
+      focusEditor(editor, [tableIndex, rowIndex, cellIndex - 1]);
+    }
+    var _newFocus = editor.selection.focus;
+    Transforms.select(editor, {
+      focus: _newFocus,
+      anchor: _newFocus
+    });
+  }
+};
+var withTable = function withTable(editor) {
+  var insertBreak = editor.insertBreak,
+    deleteBackward = editor.deleteBackward,
+    deleteForward = editor.deleteForward,
+    insertData = editor.insertData,
+    selectAll = editor.selectAll,
+    normalizeNode = editor.normalizeNode,
+    deleteFragment = editor.deleteFragment;
+  var newEditor = editor;
+  newEditor.tableOnKeyDown = function (event) {
+    // Handle special keyboard events
+
+    if (isHotkey('mod+a', event)) {
+      event.preventDefault();
+      newEditor.selectAll();
+    }
+    if (isHotkey(KEYBOARD.UP, event)) {
+      event.preventDefault();
+      focusCell(newEditor, event, KEYBOARD.UP);
+    }
+    if (isHotkey(KEYBOARD.RIGHT, event)) {
+      focusCell(newEditor, event, KEYBOARD.RIGHT);
+    }
+    if (isHotkey(KEYBOARD.DOWN, event)) {
+      focusCell(newEditor, event, KEYBOARD.DOWN);
+    }
+    if (isHotkey(KEYBOARD.LEFT, event)) {
+      focusCell(newEditor, event, KEYBOARD.LEFT);
+    }
+  };
+  newEditor.insertBreak = function () {
+    var selectedNode = getSelectedNodeByType(newEditor, ELEMENT_TYPE.TABLE);
+    if (selectedNode != null) {
+      newEditor.insertText('\n'); // If table is selected, wrap in cell
+      return;
+    }
+    insertBreak();
+  };
+  newEditor.deleteBackward = function (unit) {
+    var res = deleteHandler(newEditor);
+    if (res) return;
+    var selection = newEditor.selection;
+    if (selection) {
+      var before = Editor.before(newEditor, selection);
+      if (before) {
+        // If the current is not a table and the previous one is a table, no deletion will be performed. Otherwise, the last cell of the table will be deleted
+        var isTableOnBeforeLocation = isTableLocation(newEditor, before);
+        var isTableOnCurSelection = isTableLocation(newEditor, selection);
+        if (isTableOnBeforeLocation && !isTableOnCurSelection) {
+          return;
+        }
+      }
+    }
+    deleteBackward(unit);
+  };
+  newEditor.deleteForward = function (unit) {
+    var res = deleteHandler(newEditor);
+    if (res) return;
+    deleteForward(unit);
+  };
+
+  // copy insert text
+  newEditor.insertData = function (data) {
+    var selectedNode = getSelectedNodeByType(newEditor, ELEMENT_TYPE.TABLE_CELL);
+    if (!selectedNode) {
+      insertData(data);
+      return;
+    }
+    var text = data.getData('text/plain');
+    if (!text) return;
+    Editor.insertText(newEditor, text);
+  };
+  newEditor.selectAll = function () {
+    var selection = newEditor.selection;
+    if (!selection) {
+      selectAll();
+      return;
+    }
+    var selectedCell = getSelectedNodeByType(newEditor, ELEMENT_TYPE.TABLE_CELL);
+    if (!selectedCell) {
+      selectAll();
+      return;
+    }
+    var anchor = selection.anchor,
+      focus = selection.focus;
+    if (!Path.equals(anchor.path.slice(0, 3), focus.path.slice(0, 3))) {
+      selectAll();
+      return;
+    }
+    var text = Node.string(selectedCell);
+    var textLength = text.length;
+    if (textLength === 0) {
+      selectAll();
+      return;
+    }
+    var path = ReactEditor.findPath(newEditor, selectedCell);
+    var start = Editor.start(newEditor, path);
+    var end = Editor.end(newEditor, path);
+    var newSelection = {
+      anchor: start,
+      focus: end
+    };
+    Transforms.select(newEditor, newSelection);
+  };
+
+  // Rewrite normalizeNode
+  newEditor.normalizeNode = function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      node = _ref2[0],
+      path = _ref2[1];
+    var type = getNodeType(node);
+    if (type !== ELEMENT_TYPE.TABLE) {
+      return normalizeNode([node, path]);
+    }
+
+    // insert empty node，continue editor
+    var isLast = isLastNode(newEditor, node);
+    if (isLast) {
+      var p = genEmptyParagraph();
+      Transforms.insertNodes(newEditor, p, {
+        at: [path[0] + 1]
+      });
+    }
+  };
+
+  // range selection delete
+  newEditor.deleteFragment = function (fragment) {
+    if (newEditor.isAllInTable()) {
+      var selectedNodes = getSelectedElems(newEditor);
+      var selectedNodesCount = selectedNodes.length;
+
+      // Some text is selected in a cell
+      if (selectedNodesCount === 3) {
+        var _getSelectedInfo3 = getSelectedInfo(newEditor),
+          cell = _getSelectedInfo3.cell,
+          cellPath = _getSelectedInfo3.cellPath;
+        var selection = newEditor.selection;
+        var focus = selection.focus,
+          anchor = selection.anchor;
+        var oldText = cell.children[0].text;
+        replaceNodeChildren(newEditor, {
+          at: cellPath,
+          nodes: _objectSpread(_objectSpread({}, cell.children[0]), {}, {
+            text: oldText.slice(0, focus.offset) + oldText.slice(anchor.offset)
+          })
+        });
+        Transforms.select(newEditor, {
+          focus: focus,
+          anchor: focus
+        });
+        return;
+      }
+      var firstSelectedNode = selectedNodes[0];
+
+      // select all table elements
+      if (selectedNodesCount === 1 + firstSelectedNode.children.length * (1 + firstSelectedNode.children[0].children.length)) {
+        Transforms.removeNodes(newEditor, {
+          match: function match(n) {
+            return n.id === firstSelectedNode.id;
+          }
+        });
+        return;
+      }
+
+      // clear cell value
+      var firstTableCellNodePath;
+      selectedNodes.forEach(function (node) {
+        if (node.type === ELEMENT_TYPE.TABLE_CELL) {
+          var targetNode = node.children[0];
+          var path = getNodePathById(editor, node.id);
+          firstTableCellNodePath = firstTableCellNodePath ? firstTableCellNodePath : path;
+          replaceNodeChildren(newEditor, {
+            at: path,
+            nodes: _objectSpread(_objectSpread({}, targetNode), {}, {
+              text: ''
+            })
+          });
+        }
+      });
+      if (firstTableCellNodePath) {
+        var start = Editor.start(newEditor, firstTableCellNodePath);
+        var end = Editor.end(newEditor, firstTableCellNodePath);
+        var newSelection = {
+          anchor: start,
+          focus: end
+        };
+        Transforms.select(newEditor, newSelection);
+      }
+      return;
+    }
+    deleteFragment(fragment);
+  };
+
+  // specific business logic
+  newEditor.isInTable = function () {
+    var selectedNodes = getSelectedElems(newEditor);
+    if (!selectedNodes.some(function (node) {
+      return node.type === ELEMENT_TYPE.TABLE;
+    })) return false;
+    var firstSelectedNode = selectedNodes[0];
+    return firstSelectedNode.type === ELEMENT_TYPE.TABLE;
+  };
+  newEditor.isAllInTable = function () {
+    var selectedNodes = getSelectedElems(newEditor);
+    if (!selectedNodes.some(function (node) {
+      return node.type === ELEMENT_TYPE.TABLE;
+    })) return false;
+    var firstSelectedNode = selectedNodes[0];
+    if (firstSelectedNode.type !== ELEMENT_TYPE.TABLE) return false;
+    return selectedNodes.slice(1).every(function (node) {
+      return [ELEMENT_TYPE.TABLE_ROW, ELEMENT_TYPE.TABLE_CELL].includes(node.type);
+    }); // same table element
+  };
+
+  newEditor.setTextStyle = function (style) {
+    var selectedNodes = getSelectedElems(newEditor);
+    var firstTableCellNodePath;
+    selectedNodes.forEach(function (node) {
+      if (node.type === ELEMENT_TYPE.TABLE_CELL) {
+        var targetNode = node.children[0];
+        var path = getNodePathById(editor, node.id);
+        firstTableCellNodePath = firstTableCellNodePath ? firstTableCellNodePath : path;
+        replaceNodeChildren(newEditor, {
+          at: path,
+          nodes: _objectSpread(_objectSpread({}, targetNode), style)
+        });
+      }
+    });
+    if (firstTableCellNodePath) {
+      var start = Editor.start(newEditor, firstTableCellNodePath);
+      var end = Editor.end(newEditor, firstTableCellNodePath);
+      var newSelection = {
+        anchor: start,
+        focus: end
+      };
+      Transforms.select(newEditor, newSelection);
+    }
+  };
+  newEditor.insertTableElement = function (type) {
+    var position = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TABLE_ELEMENT_POSITION.AFTER;
+    var _getSelectedInfo4 = getSelectedInfo(newEditor),
+      tablePath = _getSelectedInfo4.tablePath,
+      tableSize = _getSelectedInfo4.tableSize,
+      rowIndex = _getSelectedInfo4.rowIndex,
+      cellIndex = _getSelectedInfo4.cellIndex;
+    if (type === TABLE_ELEMENT.ROW) {
+      var targetPath = position === TABLE_ELEMENT_POSITION.AFTER ? [].concat(_toConsumableArray(tablePath), [rowIndex + 1]) : [].concat(_toConsumableArray(tablePath), [rowIndex]);
+      var row = generateTableRow(tableSize[1]);
+      Transforms.insertNodes(editor, row, {
+        at: targetPath
+      });
+      var focusPath = [].concat(_toConsumableArray(targetPath), [cellIndex]);
+      focusEditor(newEditor, focusPath);
+      return;
+    }
+    if (type === TABLE_ELEMENT.COLUMN) {
+      var newCellIndex = position === TABLE_ELEMENT_POSITION.AFTER ? cellIndex + 1 : cellIndex;
+      for (var i = 0; i < tableSize[0]; i++) {
+        var newCellPath = [].concat(_toConsumableArray(tablePath), [i, newCellIndex]);
+        var newCell = generateTableCell();
+        Transforms.insertNodes(editor, newCell, {
+          at: newCellPath
+        });
+      }
+      var _focusPath = [].concat(_toConsumableArray(tablePath), [rowIndex, cellIndex + 1, 0]);
+      focusEditor(newEditor, _focusPath);
+      return;
+    }
+  };
+  newEditor.removeTableElement = function (type) {
+    var _getSelectedInfo5 = getSelectedInfo(newEditor),
+      tablePath = _getSelectedInfo5.tablePath,
+      tableSize = _getSelectedInfo5.tableSize,
+      rowPath = _getSelectedInfo5.rowPath,
+      rowIndex = _getSelectedInfo5.rowIndex,
+      cellIndex = _getSelectedInfo5.cellIndex;
+    if (type === TABLE_ELEMENT.TABLE) {
+      removeTable(newEditor, tablePath);
+      return;
+    }
+    if (type === TABLE_ELEMENT.ROW) {
+      if (tableSize[0] === 1) {
+        removeTable(newEditor, tablePath);
+        return;
+      }
+      Transforms.removeNodes(newEditor, {
+        at: rowPath
+      });
+      var focusRowIndex = rowIndex === tableSize[0] - 1 ? rowIndex - 1 : rowIndex;
+      var focusPath = [].concat(_toConsumableArray(tablePath), [focusRowIndex, cellIndex, 0]);
+      focusEditor(newEditor, focusPath);
+      return;
+    }
+    if (type === TABLE_ELEMENT.COLUMN) {
+      if (tableSize[1] === 1) {
+        removeTable(newEditor, tablePath);
+        return;
+      }
+      for (var i = 0; i < tableSize[0]; i++) {
+        var cellPath = [].concat(_toConsumableArray(tablePath), [i, cellIndex]);
+        Transforms.removeNodes(newEditor, {
+          at: cellPath
+        });
+      }
+      var focusCellIndex = cellIndex === tableSize[1] - 1 ? cellIndex - 1 : cellIndex;
+      var _focusPath2 = [].concat(_toConsumableArray(tablePath), [rowIndex, focusCellIndex, 0]);
+      focusEditor(newEditor, _focusPath2);
+      return;
+    }
+  };
+  return newEditor;
+};
+export default withTable;

package/dist/basic-sdk/extension/plugins/table/popover/table-size-popover/index.css

@@ -0,0 +1,57 @@
+.sdoc-selected-table-size-popover .popover {
+  background-color: #fff;
+  min-width: 100px;
+  min-height: 100px;
+  max-width: 222px;
+  border-radius: 2px;
+}
+
+.sdoc-selected-table-size-popover .sdoc-selected-table-size-tip {
+  text-align: center;
+  height: 35px;
+  font-size: 14px;
+  padding: 5px 10px 10px;
+}
+
+.sdoc-selected-table-size-popover .sdoc-table-size-select {
+  padding: 0 10px;
+}
+
+.sdoc-selected-table-size-popover .sdoc-table-size-row {
+  flex-direction: row;
+  border-bottom: 1px solid #ccc;
+  width: fit-content;
+}
+
+.sdoc-selected-table-size-popover .sdoc-table-size-row:first-child {
+  border-top: 1px solid #ccc;
+}
+
+.sdoc-selected-table-size-popover .sdoc-table-size-cell {
+  border-right: 1px solid #ccc;
+  width: 20px;
+  height: 15px;
+}
+
+.sdoc-selected-table-size-popover .sdoc-table-size-row .sdoc-table-size-cell:first-child {
+  border-left: 1px solid #ccc;
+}
+
+.sdoc-selected-table-size-popover .sdoc-table-size-cell.active {
+  background-color: #ffa94d;
+}
+
+.sdoc-selected-table-size-popover .sdoc-table-size-select {
+  margin-top: 5px;
+}
+
+.sdoc-selected-table-size-popover .sdoc-selected-table-size-custom {
+  min-height: 40px;
+  margin-top: 10px;
+  border-top: 1px solid #dedede;
+  padding: 8px 10px;
+}
+
+.sdoc-selected-table-size-popover .sdoc-selected-table-size-custom:hover {
+  cursor: pointer;
+}

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

@@ -0,0 +1,134 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import { withTranslation } from 'react-i18next';
+import { UncontrolledPopover } from 'reactstrap';
+import CustomTableSizeDialog from '../../dialog/custom-table-size-dialog';
+import './index.css';
+var TableSizePopover = /*#__PURE__*/function (_Component) {
+  _inherits(TableSizePopover, _Component);
+  var _super = _createSuper(TableSizePopover);
+  function TableSizePopover(props) {
+    var _this;
+    _classCallCheck(this, TableSizePopover);
+    _this = _super.call(this, props);
+    _this.createTable = function () {
+      var selectedSize = _this.state.selectedSize;
+      _this.props.createTable(selectedSize);
+      _this.ref && _this.ref.toggle();
+    };
+    _this.createCustomSizeTable = function () {
+      var customSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0];
+      _this.props.createTable(customSize);
+      _this.closeCustomTableSizeDialog();
+    };
+    _this.onMouseEnter = function (event) {
+      var cellPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [1, 1];
+      var displaySize = _this.state.displaySize;
+      var cellPositionX = cellPosition[0];
+      var cellPositionY = cellPosition[1];
+      displaySize[0] = cellPositionX < _this.minSize[0] ? _this.minSize[0] : cellPositionX + 1;
+      displaySize[1] = cellPositionY < _this.minSize[1] ? _this.minSize[1] : cellPositionY + 1;
+      if (displaySize[0] > _this.maxSize[0]) {
+        displaySize[0] = _this.maxSize[0];
+      }
+      if (displaySize[1] > _this.maxSize[1]) {
+        displaySize[1] = _this.maxSize[1];
+      }
+      _this.setState({
+        selectedSize: cellPosition,
+        displaySize: displaySize
+      });
+    };
+    _this.openCustomTableSizeDialog = function () {
+      _this.setState({
+        isShowCustomSizeDialog: true
+      });
+      _this.ref && _this.ref.toggle();
+    };
+    _this.closeCustomTableSizeDialog = function () {
+      _this.setState({
+        isShowCustomSizeDialog: false
+      });
+    };
+    _this.setRef = function (ref) {
+      _this.ref = ref;
+    };
+    _this.renderTableSize = function () {
+      var _this$state = _this.state,
+        displaySize = _this$state.displaySize,
+        selectedSize = _this$state.selectedSize;
+      var tableSize = [];
+      var _loop = function _loop(i) {
+        var children = [];
+        var _loop2 = function _loop2(j) {
+          var isSelectedChild = i <= selectedSize[0] && selectedSize[0] !== 0 && j <= selectedSize[1] && selectedSize[1] !== 0;
+          var child = /*#__PURE__*/React.createElement("div", {
+            key: "sdoc-table-size-cell-".concat(i, "-").concat(j),
+            className: classnames('sdoc-table-size-cell', {
+              'active': isSelectedChild
+            }),
+            onClick: _this.createTable,
+            onMouseEnter: function onMouseEnter(event) {
+              return _this.onMouseEnter(event, [i, j]);
+            }
+          });
+          children.push(child);
+        };
+        for (var j = 1; j <= displaySize[1]; j++) {
+          _loop2(j);
+        }
+        tableSize.push( /*#__PURE__*/React.createElement("div", {
+          key: "sdoc-table-size-row-".concat(i),
+          className: "sdoc-table-size-row d-flex"
+        }, children));
+      };
+      for (var i = 1; i <= displaySize[0]; i++) {
+        _loop(i);
+      }
+      return tableSize;
+    };
+    _this.minSize = [4, 4];
+    _this.maxSize = [10, 10];
+    _this.state = {
+      displaySize: [4, 4],
+      selectedSize: [0, 0],
+      isShowCustomSizeDialog: false
+    };
+    return _this;
+  }
+  _createClass(TableSizePopover, [{
+    key: "render",
+    value: function render() {
+      var _this$state2 = this.state,
+        selectedSize = _this$state2.selectedSize,
+        isShowCustomSizeDialog = _this$state2.isShowCustomSizeDialog;
+      var t = this.props.t;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UncontrolledPopover, {
+        target: this.props.target,
+        className: "sdoc-selected-table-size-popover",
+        trigger: "legacy",
+        placement: "bottom-start",
+        hideArrow: true,
+        ref: this.setRef
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-selected-table-size-container w-100 h-100 d-flex flex-column"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-selected-table-size-tip w-100 "
+      }, "".concat(selectedSize[0], " x ").concat(selectedSize[1])), /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-table-size-select"
+      }, this.renderTableSize()), /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-selected-table-size-custom",
+        onClick: this.openCustomTableSizeDialog
+      }, t('Customize_the_number_of_rows_and_columns')))), isShowCustomSizeDialog && /*#__PURE__*/React.createElement(CustomTableSizeDialog, {
+        toggle: this.closeCustomTableSizeDialog,
+        submit: this.createCustomSizeTable
+      }));
+    }
+  }]);
+  return TableSizePopover;
+}(Component);
+export default withTranslation('sdoc-editor')(TableSizePopover);