@seafile/comment-editor 0.0.1-alpha.0

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

@@ -0,0 +1,621 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _constants = require("../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _objectUtils = _interopRequireDefault(require("../../../utils/object-utils"));
+var _constants2 = require("../../constants");
+var _core = require("../../core");
+var _constants3 = require("./constants");
+var _helpers = require("./helpers");
+const withTable = editor => {
+  const {
+    insertBreak,
+    deleteBackward,
+    deleteForward,
+    insertData,
+    selectAll,
+    normalizeNode,
+    handleTab,
+    getFragment,
+    setFragmentData,
+    insertFragment,
+    deleteFragment
+  } = editor;
+  const newEditor = editor;
+  newEditor.tableSelectedRange = _constants3.EMPTY_SELECTED_RANGE;
+  const eventBus = _eventBus.default.getInstance();
+  newEditor.tableOnKeyDown = event => {
+    // Handle special keyboard events
+    if ((0, _isHotkey.default)('mod+a', event)) {
+      event.preventDefault();
+      const {
+        table,
+        tableSize
+      } = (0, _helpers.getSelectedInfo)(newEditor);
+      const allTableRange = {
+        minRowIndex: 0,
+        maxRowIndex: tableSize[0] - 1,
+        minColIndex: 0,
+        maxColIndex: tableSize[1] - 1
+      };
+      newEditor.tableSelectedRange = allTableRange;
+      eventBus.dispatch(_constants.INTERNAL_EVENT.SET_TABLE_SELECT_RANGE, table, allTableRange);
+    }
+    if ((0, _isHotkey.default)(_constants2.KEYBOARD.UP, event)) {
+      (0, _helpers.focusCell)(newEditor, event, _constants2.KEYBOARD.UP);
+    }
+    if ((0, _isHotkey.default)(_constants2.KEYBOARD.RIGHT, event)) {
+      (0, _helpers.focusCell)(newEditor, event, _constants2.KEYBOARD.RIGHT);
+    }
+    if ((0, _isHotkey.default)(_constants2.KEYBOARD.DOWN, event)) {
+      (0, _helpers.focusCell)(newEditor, event, _constants2.KEYBOARD.DOWN);
+    }
+    if ((0, _isHotkey.default)(_constants2.KEYBOARD.LEFT, event)) {
+      (0, _helpers.focusCell)(newEditor, event, _constants2.KEYBOARD.LEFT);
+    }
+    if ((0, _isHotkey.default)('tab', event)) {
+      event.preventDefault();
+    }
+    if ((0, _isHotkey.default)('shift+enter', event)) {
+      event.preventDefault();
+      const [, tablePath] = (0, _core.getAboveBlockNode)(newEditor);
+      const focusPath = [tablePath[0] + 1];
+      const focusPoint = _slate.Editor.start(newEditor, focusPath);
+      (0, _core.focusEditor)(newEditor, focusPoint);
+    }
+  };
+  newEditor.insertBreak = () => {
+    const selectedNode = (0, _core.getSelectedNodeByType)(newEditor, _constants2.ELEMENT_TYPE.TABLE);
+    if (selectedNode != null) {
+      newEditor.insertText('\n'); // If table is selected, wrap in cell
+      return;
+    }
+    insertBreak();
+  };
+  newEditor.deleteBackward = unit => {
+    const deleteType = (0, _helpers.deleteHandler)(newEditor);
+    if (deleteType === 'table') {
+      const {
+        tablePath
+      } = (0, _helpers.getSelectedInfo)(editor);
+      (0, _helpers.removeTable)(editor, tablePath);
+      return;
+    }
+
+    // range selection delete
+    if (deleteType === 'range') {
+      (0, _helpers.deleteTableRangeData)(newEditor);
+      return;
+    }
+    if (deleteType === 'default') return;
+    const {
+      selection
+    } = newEditor;
+    if (selection) {
+      const before = _slate.Editor.before(newEditor, selection);
+      if (before) {
+        const isTableOnBeforeLocation = (0, _helpers.isTableLocation)(newEditor, before);
+        const isTableOnCurSelection = (0, _helpers.isTableLocation)(newEditor, selection);
+        // If the current is not a table and the previous one is a table.
+        if (isTableOnBeforeLocation && !isTableOnCurSelection) {
+          const [currentNodeEntry] = _slate.Editor.nodes(editor, {
+            match: n => _slate.Element.isElement(n) && !_slate.Editor.parent(n, _slateReact.ReactEditor.findPath(editor, n))[1].length
+          });
+          if (!currentNodeEntry) return;
+          const [currentNode, currentPath] = Array.from(currentNodeEntry);
+
+          // If the current is paragraph.
+          if (currentNode.type === _constants2.PARAGRAPH) {
+            const {
+              path
+            } = before;
+            _slate.Transforms.select(editor, {
+              anchor: {
+                offset: 0,
+                path: [path[0], 0, 0, 0]
+              },
+              focus: {
+                offset: 0,
+                path: [path[0], 0, 0, 0]
+              }
+            });
+            const beforeTable = _slate.Editor.node(editor, [path[0]]);
+            const beforeRow = _slate.Editor.node(editor, [path[0], path[1]]);
+            const tableSize = [beforeTable[0].children.length, beforeRow[0].children.length];
+            const allTableRange = {
+              minRowIndex: 0,
+              maxRowIndex: tableSize[0] - 1,
+              minColIndex: 0,
+              maxColIndex: tableSize[1] - 1
+            };
+            newEditor.tableSelectedRange = allTableRange;
+            eventBus.dispatch(_constants.INTERNAL_EVENT.SET_TABLE_SELECT_RANGE, beforeTable[0], allTableRange);
+            return;
+          }
+
+          // If deleting node is empty check-list, order-list, unordered-list, change to paragraph
+          const transformTypes = [_constants2.CHECK_LIST_ITEM, _constants2.ORDERED_LIST, _constants2.UNORDERED_LIST];
+          if (transformTypes.includes(currentNode.type)) {
+            _slate.Transforms.delete(newEditor, {
+              at: currentPath
+            });
+            _slate.Transforms.insertNodes(newEditor, (0, _core.generateEmptyElement)(_constants2.PARAGRAPH), {
+              at: currentPath
+            });
+            (0, _core.focusEditor)(editor, _slate.Editor.start(editor, currentPath));
+          }
+          return;
+        }
+      }
+    }
+    deleteBackward(unit);
+  };
+  newEditor.deleteFragment = unit => {
+    const {
+      selection
+    } = editor;
+    if (!selection) {
+      return deleteFragment(unit);
+    }
+    const match = n => n.type === _constants2.TABLE;
+    if (_slate.Range.isRange(selection) && (0, _core.isRangeAcrossBlocks)(editor, {
+      at: selection,
+      match
+    })) {
+      const anchorEntry = (0, _core.getAboveBlockNode)(editor, {
+        at: selection.anchor,
+        match
+      });
+      if (anchorEntry) {
+        const columnLength = anchorEntry[0].columns.length;
+        const {
+          anchor
+        } = selection;
+        const isForward = _slate.Range.isForward(selection);
+        if (isForward) {
+          if (!(0, _core.isStartPoint)(editor, anchor, anchorEntry[1])) {
+            // delete table cells
+            const endPoint = (0, _core.getEndPoint)(editor, anchorEntry[1]);
+            (0, _helpers.deleteTableSelectCells)(editor, {
+              start: anchor.path,
+              end: endPoint.path,
+              columnLength
+            });
+
+            // delete other module
+            const newAnchor = (0, _core.getStartPoint)(editor, _slate.Path.next(anchorEntry[1]));
+            _slate.Transforms.delete(editor, {
+              at: {
+                ...selection,
+                anchor: newAnchor
+              }
+            });
+            (0, _core.focusEditor)(editor, newAnchor.path);
+            return;
+          }
+        } else {
+          if (!(0, _core.isEndPoint)(editor, anchor, anchorEntry[1])) {
+            // delete table cells
+            const startPoint = (0, _core.getStartPoint)(editor, anchorEntry[1]);
+            (0, _helpers.deleteTableSelectCells)(editor, {
+              start: startPoint.path,
+              end: anchor.path,
+              columnLength
+            });
+
+            // delete other module
+            const newAnchor = (0, _core.getEndPoint)(editor, _slate.Path.previous(anchorEntry[1]));
+            _slate.Transforms.delete(editor, {
+              at: {
+                ...selection,
+                anchor: newAnchor
+              }
+            });
+            (0, _core.focusEditor)(editor, newAnchor.path);
+            return;
+          }
+        }
+      } else {
+        const focusEntry = (0, _core.getAboveBlockNode)(editor, {
+          at: selection.focus,
+          match
+        });
+        const columnLength = focusEntry[0].columns.length;
+        if (focusEntry) {
+          const {
+            focus
+          } = selection;
+          const isForward = _slate.Range.isForward(selection);
+          if (isForward) {
+            if (!(0, _core.isEndPoint)(editor, focus, focusEntry[1])) {
+              const startPoint = (0, _core.getStartPoint)(editor, focusEntry[1]);
+              (0, _helpers.deleteTableSelectCells)(editor, {
+                start: startPoint.path,
+                end: focus.path,
+                columnLength
+              });
+
+              // delete other module
+              const newFocus = (0, _core.getEndPoint)(editor, _slate.Path.previous(focusEntry[1]));
+              _slate.Transforms.delete(editor, {
+                at: {
+                  ...selection,
+                  focus: newFocus
+                }
+              });
+              (0, _core.focusEditor)(editor, focus.path);
+              return;
+            }
+          } else {
+            if (!(0, _core.isEndPoint)(editor, focus, focusEntry[1])) {
+              const endPoint = (0, _core.getEndPoint)(editor, focusEntry[1]);
+              (0, _helpers.deleteTableSelectCells)(editor, {
+                start: focus.path,
+                end: endPoint.path,
+                columnLength
+              });
+
+              // delete other module
+              const newFocus = (0, _core.getStartPoint)(editor, _slate.Path.next(focusEntry[1]));
+              _slate.Transforms.delete(editor, {
+                at: {
+                  ...selection,
+                  focus: newFocus
+                }
+              });
+              (0, _core.focusEditor)(editor, focus.path);
+              return;
+            }
+          }
+        }
+      }
+    }
+    if (_slate.Range.isRange(selection) && (0, _helpers.isAllInTable)(editor) && !(0, _helpers.isInTableSameCell)(editor)) {
+      const [node] = (0, _core.getTopLevelBlockNode)(editor);
+      if (_slate.Range.isRange(selection) && (node === null || node === void 0 ? void 0 : node.type) === _constants2.ELEMENT_TYPE.TABLE) {
+        newEditor.deleteBackward();
+        return;
+      }
+    }
+    deleteFragment(unit);
+  };
+  newEditor.deleteForward = unit => {
+    const nextNode = _slate.Editor.next(newEditor);
+    const newNodeParent = (0, _core.getParentNode)(newEditor.children, nextNode[0].id);
+    if (newNodeParent.type === _constants2.ELEMENT_TYPE.TABLE_CELL) return;
+    deleteForward(unit);
+  };
+  newEditor.getFragment = () => {
+    const selectedNode = (0, _core.getSelectedNodeByType)(newEditor, _constants2.ELEMENT_TYPE.TABLE);
+    if (!selectedNode) {
+      return getFragment();
+    }
+    const {
+      tableSelectedRange
+    } = newEditor;
+    if (_objectUtils.default.isSameObject(tableSelectedRange, _constants3.EMPTY_SELECTED_RANGE)) {
+      const fragment = getFragment();
+
+      // When a cell is selected, it should be converted to text
+      return [Object.freeze({
+        children: fragment[0].children[0].children[0]['children'],
+        id: fragment[0]['id'],
+        type: _constants2.ELEMENT_TYPE.PARAGRAPH
+      })];
+    }
+    const {
+      minColIndex,
+      maxColIndex,
+      minRowIndex,
+      maxRowIndex
+    } = tableSelectedRange;
+    const rows = selectedNode.children;
+    const columns = selectedNode.columns;
+    let selectedRows = [];
+    let selectedColumns = [];
+    for (let i = minRowIndex; i <= maxRowIndex; i++) {
+      const row = rows[i];
+      const rowChildren = row.children;
+      let newRowChildren = [];
+      for (let j = minColIndex; j <= maxColIndex; j++) {
+        const column = rowChildren[j];
+        newRowChildren.push(column);
+      }
+      selectedRows.push({
+        ...row,
+        children: newRowChildren
+      });
+    }
+    for (let j = minColIndex; j <= maxColIndex; j++) {
+      const column = columns[j];
+      selectedColumns.push(column);
+    }
+    return [Object.freeze({
+      ...selectedNode,
+      children: selectedRows,
+      columns: selectedColumns
+    })];
+  };
+
+  // copy: mod + c
+  newEditor.setFragmentData = dataTransfer => {
+    const selectedNode = (0, _core.getSelectedNodeByType)(newEditor, _constants2.ELEMENT_TYPE.TABLE);
+    if (!selectedNode) {
+      return setFragmentData(dataTransfer);
+    }
+    const {
+      tableSelectedRange
+    } = newEditor;
+    if (_objectUtils.default.isSameObject(tableSelectedRange, _constants3.EMPTY_SELECTED_RANGE)) {
+      return setFragmentData(dataTransfer);
+    }
+    return (0, _helpers.setTableFragmentData)(newEditor, dataTransfer);
+  };
+  newEditor.cut = event => {
+    const selectedNode = (0, _core.getSelectedNodeByType)(newEditor, _constants2.ELEMENT_TYPE.TABLE);
+    const {
+      tableSelectedRange
+    } = newEditor;
+    if (selectedNode && !_objectUtils.default.isSameObject(tableSelectedRange, _constants3.EMPTY_SELECTED_RANGE)) {
+      (0, _helpers.setTableFragmentData)(newEditor, event.clipboardData);
+      const deleteType = (0, _helpers.deleteHandler)(newEditor);
+      if (deleteType === 'table') {
+        const {
+          tablePath
+        } = (0, _helpers.getSelectedInfo)(editor);
+        (0, _helpers.removeTable)(editor, tablePath);
+        return;
+      }
+
+      // range selection delete
+      if (deleteType === 'range') {
+        (0, _helpers.deleteTableRangeData)(newEditor);
+        return;
+      }
+      return;
+    }
+  };
+
+  // copy insert text
+  newEditor.insertData = data => {
+    const selectedNode = (0, _core.getSelectedNodeByType)(newEditor, _constants2.ELEMENT_TYPE.TABLE_CELL);
+    if (!selectedNode) {
+      insertData(data);
+      return;
+    }
+    const fragment = data.getData(`application/${_constants2.CLIPBOARD_FORMAT_KEY}`);
+    if (fragment) {
+      const decoded = decodeURIComponent(window.atob(fragment));
+      const parsedData = JSON.parse(decoded);
+      if (Array.isArray(parsedData) && parsedData.some(item => item.type === _constants2.ELEMENT_TYPE.TABLE)) {
+        const tableElement = parsedData.find(item => item.type === _constants2.ELEMENT_TYPE.TABLE);
+        (0, _helpers.insertMultipleRowsAndColumns)(newEditor, tableElement.children, tableElement.columns);
+        return;
+      }
+    }
+    const text = data.getData('text/plain');
+    if (!text) return;
+    _slate.Editor.insertText(newEditor, text);
+  };
+  newEditor.insertFragment = data => {
+    if (data.type === _constants2.ELEMENT_TYPE.TABLE) {
+      _slate.Transforms.insertNodes(editor, data);
+      return;
+    }
+    return insertFragment(data);
+  };
+  newEditor.selectAll = () => {
+    const selection = newEditor.selection;
+    if (!selection) {
+      selectAll();
+      return;
+    }
+    const selectedCell = (0, _core.getSelectedNodeByType)(newEditor, _constants2.ELEMENT_TYPE.TABLE_CELL);
+    if (!selectedCell) {
+      selectAll();
+      return;
+    }
+    const {
+      anchor,
+      focus
+    } = selection;
+    if (!_slate.Path.equals(anchor.path.slice(0, 3), focus.path.slice(0, 3))) {
+      selectAll();
+      return;
+    }
+    const {
+      table,
+      tableSize
+    } = (0, _helpers.getSelectedInfo)(newEditor);
+    eventBus.dispatch(_constants.INTERNAL_EVENT.SET_TABLE_SELECT_RANGE, table, {
+      minRowIndex: 0,
+      maxRowIndex: tableSize[0] - 1,
+      minColIndex: 0,
+      maxColIndex: tableSize[1] - 1
+    });
+  };
+
+  // Rewrite normalizeNode
+  newEditor.normalizeNode = _ref => {
+    var _node$children$, _node$children$$child, _node$children$2, _node$children$2$chil;
+    let [node, path] = _ref;
+    const type = (0, _core.getNodeType)(node);
+    if (node.type === _constants2.TABLE_ROW) {
+      const parentEntry = _slate.Editor.parent(editor, path);
+      if ((parentEntry === null || parentEntry === void 0 ? void 0 : parentEntry[0].type) !== _constants2.TABLE) {
+        _slate.Transforms.unwrapNodes(editor, {
+          at: path
+        });
+        return;
+      }
+    }
+    if (node.type === _constants2.TABLE_CELL) {
+      const parentEntry = _slate.Editor.parent(editor, path);
+      if ((parentEntry === null || parentEntry === void 0 ? void 0 : parentEntry[0].type) !== _constants2.TABLE_ROW) {
+        _slate.Transforms.unwrapNodes(editor, {
+          at: path
+        });
+        return;
+      }
+    }
+    if (type !== _constants2.ELEMENT_TYPE.TABLE) {
+      return normalizeNode([node, path]);
+    }
+
+    // Check field integrity
+    // Check table - columns
+    const isMissColumn = !node.columns;
+    if (isMissColumn) {
+      if (!node.columns) {
+        const columnCount = node.children[0].children.length;
+        const width = Math.max(_constants3.TABLE_CELL_MIN_WIDTH, parseInt(editor.width / columnCount));
+        const columns = Array(node.children[0].children.length).fill({
+          width
+        });
+        _slate.Transforms.setNodes(newEditor, {
+          columns
+        }, {
+          at: path
+        });
+      }
+    }
+
+    // Check table - style
+    if (!node.style) {
+      const columnCount = node.children[0].children.length;
+      const columnWidth = Math.max(_constants3.TABLE_CELL_MIN_WIDTH, parseInt(editor.width / columnCount));
+      _slate.Transforms.setNodes(newEditor, {
+        style: {
+          gridTemplateColumns: `repeat(${columnCount}, ${columnWidth}px)`,
+          gridAutoRows: `minmax(${_constants3.TABLE_ROW_MIN_HEIGHT}}px, auto)`
+        }
+      }, {
+        at: path
+      });
+    }
+
+    // Check table - ui
+    if (!node.ui) {
+      _slate.Transforms.setNodes(newEditor, {
+        ui: {
+          alternate_highlight: false
+        }
+      }, {
+        at: path
+      });
+    }
+
+    // Check row - style
+    if (!node.children[0].style) {
+      const style = {
+        min_height: _constants3.TABLE_ROW_MIN_HEIGHT
+      };
+      node.children.forEach((row, index) => {
+        if (!row.style) {
+          _slate.Transforms.setNodes(newEditor, {
+            style
+          }, {
+            at: path.concat(index)
+          });
+        }
+      });
+    }
+
+    // Check cell - style & inherit_style
+    if (node !== null && node !== void 0 && (_node$children$ = node.children[0]) !== null && _node$children$ !== void 0 && (_node$children$$child = _node$children$.children[0]) !== null && _node$children$$child !== void 0 && _node$children$$child.style || node !== null && node !== void 0 && (_node$children$2 = node.children[0]) !== null && _node$children$2 !== void 0 && (_node$children$2$chil = _node$children$2.children[0]) !== null && _node$children$2$chil !== void 0 && _node$children$2$chil.inherit_style) {
+      node.children.forEach((row, rowIndex) => {
+        row.children.forEach((cell, cellIndex) => {
+          if (!cell.style || !cell.inherit_style) {
+            const style = cell.style || {};
+            const inherit_style = cell.inherit_style || {};
+            _slate.Transforms.setNodes(newEditor, {
+              style,
+              inherit_style
+            }, {
+              at: path.concat(rowIndex, cellIndex)
+            });
+          }
+        });
+      });
+    }
+
+    // insert empty node，continue editor
+    const isLast = (0, _core.isLastNode)(newEditor, node);
+    if (isLast) {
+      const p = (0, _core.generateEmptyElement)(_constants2.PARAGRAPH);
+      _slate.Transforms.insertNodes(newEditor, p, {
+        at: [path[0] + 1]
+      });
+    }
+  };
+
+  // Jump to the next cell when pressing tab in the table
+  newEditor.handleTab = event => {
+    const selectedNode = (0, _core.getSelectedNodeByType)(newEditor, _constants2.ELEMENT_TYPE.TABLE);
+    if (!selectedNode) {
+      handleTab(event);
+      return;
+    }
+    const above = _slate.Editor.above(newEditor);
+
+    // Select multiple cells, jump to the first selected cell
+    if (above[0].type === _constants2.ELEMENT_TYPE.TABLE) {
+      const {
+        selection
+      } = newEditor;
+      const {
+        anchor
+      } = selection;
+      _slate.Transforms.select(newEditor, [...anchor.path.slice(0, -1)]);
+      return;
+    }
+
+    // Add row to the last cell
+    if ((0, _helpers.isLastTableCell)(newEditor, above)) {
+      const {
+        tablePath,
+        tableSize
+      } = (0, _helpers.getSelectedInfo)(newEditor);
+      if (tableSize[0] === _constants3.TABLE_MAX_ROWS) return;
+      (0, _helpers.insertTableElement)(newEditor, _constants3.TABLE_ELEMENT.ROW, _constants3.TABLE_ELEMENT_POSITION.AFTER);
+      _slate.Transforms.select(newEditor, [...tablePath, tableSize[0], 0]);
+      return;
+    }
+    const {
+      selection
+    } = newEditor;
+
+    // The default behavior, the cursor is in the middle of the text, and the current text content is selected
+    // Change to jump to next cell
+    if (selection.anchor.offset === selection.focus.offset) {
+      const {
+        tableSize,
+        tablePath,
+        rowIndex,
+        cellIndex
+      } = (0, _helpers.getSelectedInfo)(newEditor);
+      const lastColumnIndex = tableSize[1] - 1;
+      let nextCell = [rowIndex, cellIndex + 1];
+      if (lastColumnIndex < nextCell[1]) {
+        nextCell = [rowIndex + 1, 0];
+      }
+      _slate.Transforms.select(newEditor, [...tablePath, ...nextCell]);
+      return;
+    }
+    const next = _slate.Editor.next(newEditor);
+    _slate.Transforms.select(newEditor, next[1]);
+  };
+  newEditor.reSetTableSelectedRange = () => {
+    newEditor.tableSelectedRange = _constants3.EMPTY_SELECTED_RANGE;
+  };
+  return newEditor;
+};
+var _default = exports.default = withTable;

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

@@ -0,0 +1,69 @@
+.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-container .sdoc-selected-table-tools-container {
+  padding: 10px 0;
+  margin-bottom: 10px;
+  border-bottom: 1px solid #dedede;
+}
+
+.sdoc-selected-table-size-popover .sdoc-selected-table-size-custom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  min-height: 32px;
+}
+
+.sdoc-selected-table-size-popover .sdoc-selected-table-size-custom:hover {
+  cursor: pointer;
+  background: #f5f5f5;
+}
+
+.sdoc-selected-table-size-popover .sdoc-selected-table-size-custom .sdocfont {
+  font-size: 12px;
+}