@seafile/sdoc-editor 0.1.56 → 0.1.57-test0

package/dist/basic-sdk/extension/plugins/table/render/table-root.js

@@ -0,0 +1,38 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useRef } from 'react';
+import classnames from 'classnames';
+import { TABLE_MAX_WIDTH } from '../constants';
+import { TableRootContext } from './hooks';
+var TableRoot = function TableRoot(_ref) {
+  var attributes = _ref.attributes,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? [] : _ref$columns,
+    children = _ref.children;
+  var tableScrollWrapper = useRef(null);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    scrollLeft = _useState2[0],
+    setScrollLeft = _useState2[1];
+  var allWidth = columns.reduce(function (pre, cur) {
+    return pre + cur.width;
+  }, 0);
+  var onScroll = function onScroll(event) {
+    setScrollLeft(event.target.scrollLeft);
+  };
+  return /*#__PURE__*/React.createElement(TableRootContext.Provider, {
+    value: tableScrollWrapper.current
+  }, /*#__PURE__*/React.createElement("div", Object.assign({
+    className: classnames('sdoc-table-wrapper', {
+      'scroll position-relative': allWidth > TABLE_MAX_WIDTH
+    })
+  }, attributes), /*#__PURE__*/React.createElement("div", {
+    className: classnames('sdoc-table-scroll-wrapper', {
+      'scroll-at-center': scrollLeft + TABLE_MAX_WIDTH !== allWidth && scrollLeft > 0,
+      'scroll-at-right': scrollLeft + TABLE_MAX_WIDTH === allWidth,
+      'scroll-at-left': scrollLeft === 0
+    }),
+    ref: tableScrollWrapper,
+    onScroll: onScroll
+  }, children)));
+};
+export default TableRoot;

package/dist/basic-sdk/extension/plugins/table/render-elem.js

@@ -1,4 +1,4 @@
-import renderTable from './render/render-table';
+import renderTable from './render';
 import renderTableRow from './render/render-row';
 import renderTableCell from './render/render-cell';
 export { renderTable, renderTableRow, renderTableCell };

package/dist/basic-sdk/extension/plugins/text-align/helpers.js

@@ -0,0 +1,43 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { Editor, Transforms, Element } from '@seafile/slate';
+import { TEXT_ALIGN, MENUS_CONFIG_MAP, CODE_BLOCK, TABLE } from '../../constants';
+export var isMenuDisabled = function isMenuDisabled(editor) {
+  if (!editor.selection) return true;
+  var _Editor$nodes = Editor.nodes(editor, {
+      match: function match(node) {
+        return !Editor.isEditor(node) && Element.isElement(node) && Editor.isBlock(editor, node);
+      },
+      universal: true,
+      mode: 'highest'
+    }),
+    _Editor$nodes2 = _slicedToArray(_Editor$nodes, 1),
+    match = _Editor$nodes2[0];
+  var elementType = match[0].type;
+  // at present, TABLE got its own 'text align'
+  if (elementType == CODE_BLOCK || elementType == TABLE) {
+    return true;
+  }
+  return false;
+};
+export var getAlignType = function getAlignType(editor) {
+  var defaultType = MENUS_CONFIG_MAP[TEXT_ALIGN][0].type;
+  var selection = editor.selection;
+  if (!selection) {
+    return defaultType;
+  }
+  var _Editor$nodes3 = Editor.nodes(editor, {
+      at: Editor.unhangRange(editor, selection),
+      match: function match(n) {
+        return !Editor.isEditor(n) && Element.isElement(n) && n['align'];
+      }
+    }),
+    _Editor$nodes4 = _slicedToArray(_Editor$nodes3, 1),
+    match = _Editor$nodes4[0];
+  if (!match) return defaultType;
+  return match[0].align;
+};
+export var setAlignType = function setAlignType(editor, type) {
+  Transforms.setNodes(editor, {
+    'align': type
+  });
+};

package/dist/basic-sdk/extension/plugins/text-align/index.js

@@ -0,0 +1,2 @@
+var TextAlignPlugin = {};
+export default TextAlignPlugin;

package/dist/basic-sdk/extension/plugins/text-align/menu/index.js

@@ -0,0 +1,105 @@
+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 from 'react';
+import { withTranslation } from 'react-i18next';
+import classnames from 'classnames';
+import { getAlignType, isMenuDisabled, setAlignType } from '../helpers';
+import { TEXT_ALIGN, MENUS_CONFIG_MAP } from '../../../constants';
+import './style.css';
+var TextAlignMenu = /*#__PURE__*/function (_React$Component) {
+  _inherits(TextAlignMenu, _React$Component);
+  var _super = _createSuper(TextAlignMenu);
+  function TextAlignMenu(props) {
+    var _this;
+    _classCallCheck(this, TextAlignMenu);
+    _this = _super.call(this, props);
+    _this.registerEventHandler = function () {
+      document.addEventListener('click', _this.onHideTextAlignMenu);
+    };
+    _this.unregisterEventHandler = function () {
+      document.removeEventListener('click', _this.onHideTextAlignMenu);
+    };
+    _this.onHideTextAlignMenu = function () {
+      _this.setState({
+        isDropdownMenuOpen: false
+      }, function () {
+        _this.unregisterEventHandler();
+      });
+    };
+    _this.getCurrentType = function () {
+      var editor = _this.props.editor;
+      return getAlignType(editor);
+    };
+    _this.isActive = function (type) {
+      return _this.getCurrentType() === type;
+    };
+    _this.isDisabled = function () {
+      var editor = _this.props.editor;
+      return isMenuDisabled(editor);
+    };
+    _this.onToggleClick = function (event) {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      var isDropdownMenuOpen = !_this.state.isDropdownMenuOpen;
+      if (isDropdownMenuOpen) {
+        _this.setState({
+          isDropdownMenuOpen: isDropdownMenuOpen
+        }, function () {
+          _this.registerEventHandler();
+        });
+      } else {
+        _this.setState({
+          isDropdownMenuOpen: isDropdownMenuOpen
+        }, function () {
+          _this.unregisterEventHandler();
+        });
+      }
+    };
+    _this.setType = function (type) {
+      var editor = _this.props.editor;
+      setAlignType(editor, type);
+    };
+    _this.state = {
+      isDropdownMenuOpen: false
+    };
+    return _this;
+  }
+  _createClass(TextAlignMenu, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var t = this.props.t;
+      var isDropdownMenuOpen = this.state.isDropdownMenuOpen;
+      var caretIconClass = "caret-icon sdocfont sdoc-".concat(isDropdownMenuOpen ? 'caret-up' : 'drop-down');
+      var curType = this.getCurrentType();
+      var curIcon = MENUS_CONFIG_MAP[TEXT_ALIGN].filter(function (item) {
+        return item.type == curType;
+      })[0].iconClass;
+      var disabled = this.isDisabled();
+      return /*#__PURE__*/React.createElement("div", {
+        className: "align-menu"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classnames('align-toggle px-2', {
+          'align-toggle-disabled': disabled
+        }),
+        onClick: disabled ? function () {} : this.onToggleClick
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "mr-1 ".concat(curIcon)
+      }), !disabled && /*#__PURE__*/React.createElement("span", {
+        className: caretIconClass
+      })), isDropdownMenuOpen && /*#__PURE__*/React.createElement("div", {
+        className: "align-popover"
+      }, MENUS_CONFIG_MAP[TEXT_ALIGN].map(function (item, index) {
+        return /*#__PURE__*/React.createElement("span", {
+          key: index,
+          className: "align-menu-item ".concat(item.iconClass),
+          onClick: _this2.setType.bind(_this2, item.type)
+        });
+      })));
+    }
+  }]);
+  return TextAlignMenu;
+}(React.Component);
+export default withTranslation('sdoc-editor')(TextAlignMenu);

package/dist/basic-sdk/extension/plugins/text-align/menu/style.css

@@ -0,0 +1,61 @@
+.align-menu {
+  display: flex;
+  position: relative;
+  margin-right: 10px;
+}
+
+.align-menu .align-toggle {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.align-menu .align-toggle-disabled {
+  color: #999;
+}
+
+.align-menu .align-toggle:not(.align-toggle-disabled):hover {
+  background: #e5e5e5;
+  border-radius: 2px;
+}
+
+.align-menu .align-toggle .sdocfont {
+  height: 30px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.align-menu .align-toggle .caret-icon {
+  transform: scale(.8);
+}
+
+.align-menu .align-popover {
+  position: absolute;
+  top: 37px;
+  left: 0;
+  padding: 8px 0;
+  background-color: #fff;
+  border: 1px solid #e5e6e8;
+  border-radius: 2px;
+  box-shadow: 0 0 10px #ccc;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  z-index: 10;
+}
+
+.align-menu .align-popover .align-menu-item {
+  cursor: pointer;
+  height: 30px;
+  width: 100%;
+  padding: 4px 24px;
+  user-select: none;
+}
+
+.align-menu .align-popover .align-menu-item:hover {
+  background-color: rgb(245, 245, 245);
+}

package/dist/basic-sdk/extension/render/render-element.js

@@ -1,4 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React from 'react';
 import { Node } from '@seafile/slate';
 import { useSlateStatic } from '@seafile/slate-react';
@@ -10,6 +11,9 @@ var CustomElement = function CustomElement(props) {
   var attributes = props.attributes,
     children = props.children,
     element = props.element;
+  var style = {
+    textAlign: element.align
+  };
   switch (element.type) {
     case PARAGRAPH:
       {
@@ -25,9 +29,9 @@ var CustomElement = function CustomElement(props) {
         return /*#__PURE__*/React.createElement("p", Object.assign({
           "data-id": element.id
         }, attributes, {
-          style: {
+          style: _objectSpread({
             position: isShowPlaceHolder ? 'relative' : ''
-          }
+          }, style)
         }), children, isShowPlaceHolder && /*#__PURE__*/React.createElement(Placeholder, {
           title: 'Please_enter_text'
         }));
@@ -116,7 +120,9 @@ var CustomElement = function CustomElement(props) {
       {
         return /*#__PURE__*/React.createElement("p", Object.assign({
           "data-id": element.id
-        }, attributes), children);
+        }, attributes, {
+          style: style
+        }), children);
       }
   }
 };

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

@@ -10,6 +10,7 @@ import HeaderMenu from '../plugins/header/menu';
 import CheckListMenu from '../plugins/check-list/menu';
 import TextStyleMenuList from '../plugins/text-style/menu';
 import CodeBlockMenu from '../plugins/code-block/menu';
+import TextAlignMenu from '../plugins/text-align/menu';
 import HistoryMenu from './redo-undo';
 import { TableMenu, ActiveTableMenu } from '../plugins/table/menu';
 import EventBus from '../../utils/event-bus';
@@ -48,6 +49,8 @@ var Toolbar = function Toolbar(_ref) {
     type: ORDERED_LIST
   }), /*#__PURE__*/React.createElement(CheckListMenu, {
     editor: editor
+  }), /*#__PURE__*/React.createElement(TextAlignMenu, {
+    editor: editor
   })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(CodeBlockMenu, {
     editor: editor
   }), /*#__PURE__*/React.createElement(TableMenu, {

package/dist/basic-sdk/utils/mouse-event.js

@@ -0,0 +1,59 @@
+export var eventStopPropagation = function eventStopPropagation(event) {
+  if (!event) return;
+  event.stopPropagation();
+  event.nativeEvent && event.nativeEvent.stopImmediatePropagation && event.nativeEvent.stopImmediatePropagation();
+};
+export var registerResizeEvents = function registerResizeEvents() {
+  var eventsMap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  for (var key in eventsMap) {
+    document.addEventListener(key, eventsMap[key]);
+  }
+};
+export var unregisterResizeEvents = function unregisterResizeEvents() {
+  var eventsMap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  for (var key in eventsMap) {
+    document.removeEventListener(key, eventsMap[key]);
+  }
+};
+export var getMouseDownInfo = function getMouseDownInfo(event, scrollContainer) {
+  var positionX = 0;
+  var positionY = 0;
+  var scrollLeft = 0;
+  var scrollTop = 0;
+  if (event) {
+    positionX = event.clientX;
+    positionY = event.clientY;
+  }
+  if (scrollContainer) {
+    scrollLeft = scrollContainer.scrollLeft;
+    scrollTop = scrollContainer.scrollTop;
+  }
+  return {
+    positionX: positionX,
+    positionY: positionY,
+    scrollLeft: scrollLeft,
+    scrollTop: scrollTop
+  };
+};
+export var getMouseMoveInfo = function getMouseMoveInfo(event, mouseDownInfo, scrollContainer) {
+  var displacementX = 0;
+  var displacementY = 0;
+  if (!event) return {
+    displacementX: displacementX,
+    displacementY: displacementY
+  };
+  var currPositionX = event.clientX,
+    currPositionY = event.clientY;
+  var scrollLeft = 0;
+  var scrollTop = 0;
+  if (scrollContainer) {
+    scrollLeft = scrollContainer.scrollLeft;
+    scrollTop = scrollContainer.scrollTop;
+  }
+  displacementX = currPositionX - mouseDownInfo.positionX + scrollLeft - (mouseDownInfo.scrollLeft || 0);
+  displacementY = currPositionY - mouseDownInfo.positionY + scrollTop - (mouseDownInfo.scrollTop || 0);
+  return {
+    displacementX: displacementX,
+    displacementY: displacementY
+  };
+};

package/dist/basic-sdk/utils/object-utils.js

@@ -55,6 +55,7 @@ var ObjectUtils = /*#__PURE__*/function () {
   return ObjectUtils;
 }();
 ObjectUtils.hasProperty = function (obj, prop) {
+  if (!obj) return false;
   return Object.prototype.hasOwnProperty.call(obj, prop);
 };
 export default ObjectUtils;

package/dist/components/doc-info/index.js

@@ -22,21 +22,36 @@ var DocInfo = /*#__PURE__*/function (_React$Component) {
       var eventBus = EventBus.getInstance();
       eventBus.dispatch(EXTERNAL_EVENT.INTERNAL_LINK_CLICK);
     };
+    _this.toggleStar = function () {
+      var eventBus = EventBus.getInstance();
+      eventBus.dispatch(EXTERNAL_EVENT.TOGGLE_STAR);
+    };
     return _this;
   }
   _createClass(DocInfo, [{
     key: "render",
     value: function render() {
-      var t = this.props.t;
+      var _this$props = this.props,
+        t = _this$props.t,
+        isStarred = _this$props.isStarred;
       var docName = context.getSetting('docName');
-      var isShowInternalLink = context.getSetting('isShowInternalLink');
+      var _context$getSettings = context.getSettings(),
+        isShowInternalLink = _context$getSettings.isShowInternalLink,
+        isStarIconShown = _context$getSettings.isStarIconShown;
       return /*#__PURE__*/React.createElement("div", {
         className: "doc-info"
       }, /*#__PURE__*/React.createElement("div", {
         className: "doc-name"
-      }, docName), /*#__PURE__*/React.createElement("span", {
+      }, docName), isStarIconShown && /*#__PURE__*/React.createElement("a", {
+        className: "file-star ".concat(isStarred ? 'fa' : 'far', " fa-star"),
+        href: "#",
+        title: isStarred ? t('starred') : t('unstarred'),
+        role: "button",
+        "aria-label": isStarred ? t('Unstar') : t('Star'),
+        onClick: this.toggleStar
+      }), isShowInternalLink && /*#__PURE__*/React.createElement("span", {
         className: "doc-icon"
-      }, isShowInternalLink && /*#__PURE__*/React.createElement("span", {
+      }, /*#__PURE__*/React.createElement("span", {
         className: "internal-link sdocfont sdoc-link",
         title: t('internal_link'),
         onClick: this.onInternalLinkClick

package/dist/config.js

@@ -0,0 +1,16 @@
+var serverConfig = {
+  //serviceUrl: "http://127.0.0.1:8000",
+  serviceUrl: "http://192.168.1.100:8000",
+  username: "lj@11.com",
+  password: "11",
+  repoID: "79d1fa93-4b5f-4d6c-8fb5-ad3958e1fa47",
+  userInfo: {
+    username: 'lj@11.com',
+    name: 'lj-',
+    contact_email: 'lj@11.com'
+  },
+  filePath: '/xxx.md',
+  fileName: 'xxx.md',
+  dirPath: '/'
+};
+export { serverConfig };

package/dist/constants/index.js

@@ -1,4 +1,5 @@
 export var EXTERNAL_EVENT = {
   INTERNAL_LINK_CLICK: 'internal_link_click',
+  TOGGLE_STAR: 'toggle_star',
   CANCEL_TABLE_SELECT_RANGE: 'cancel_table_select_range'
 };

package/dist/pages/simple-editor.js

@@ -112,7 +112,9 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
         }, errorMessage);
       }
       var isOpenSocket = context.getSetting('isOpenSocket');
-      return /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(DocInfo, null), /*#__PURE__*/React.createElement(DocOperations, null)), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(SDocEditor, {
+      return /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(DocInfo, {
+        isStarred: this.props.isStarred
+      }), /*#__PURE__*/React.createElement(DocOperations, null)), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(SDocEditor, {
         config: context.getEditorConfig(),
         document: document,
         isOpenSocket: isOpenSocket,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.1.56",
+  "version": "0.1.57-test0",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",

package/public/locales/en/sdoc-editor.json

@@ -247,5 +247,9 @@
   "Insert_below": "Insert below",
   "Insert_above": "Insert above",
   "Insert_on_the_right": "Insert on the right",
-  "Insert_on_the_left": "Insert on the left"
+  "Insert_on_the_left": "Insert on the left",
+  "starred": "starred",
+  "unstarred": "unstarred",
+  "Star": "Star",
+  "Unstar": "Unstar"
 }

package/public/media/sdoc-editor-font.css

@@ -28,11 +28,11 @@
   content: "\e636";
 }
 
-.sdoc-left-alignment:before {
+.sdoc-align-left:before {
   content: "\e62e";
 }
 
-.sdoc-center-horizontally:before {
+.sdoc-align-center:before {
   content: "\e62f";
 }
 

package/dist/basic-sdk/extension/plugins/table/render/context.js

@@ -1,5 +0,0 @@
-import { createContext, useContext } from 'react';
-export var TableContext = createContext();
-export var useTableContext = function useTableContext() {
-  return useContext(TableContext);
-};

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

@@ -1,72 +0,0 @@
-.sdoc-table-selected {
-  position: relative;
-}
-
-.sdoc-table-selected .sdoc-table-rows-header {
-  width: 12px;
-  left: -12px;
-  top: 0;
-  height: 100%;
-  background-color: rgb(243, 245, 247);
-  display: flex;
-  flex-direction: column;
-}
-
-.sdoc-table-selected .sdoc-table-rows-header .sdoc-table-rows-header-item {
-  border-bottom: 1px solid #ccc;
-  flex-shrink: 0;
-}
-
-.sdoc-table-selected .sdoc-table-rows-header .sdoc-table-rows-header-item:last-child {
-  border-bottom: none;
-}
-
-.sdoc-table-wrapper {
-  overflow: scroll;
-}
-
-.sdoc-table-wrapper tr:first-child {
-  font-weight: unset;
-}
-
-.sdoc-table-wrapper tr:nth-child(2n+1) {
-  background-color: unset;
-}
-
-.article .sdoc-table-wrapper td {
-  min-width: 35px;
-}
-
-.sdoc-table-wrapper .cell-selected {
-  caret-color: transparent;
-  background-color: #fff4e6;
-  position: relative;
-}
-
-.sdoc-table-wrapper .cell-light-height-top-border::before {
-  content: '';
-  position: absolute;
-  top: -1px;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  border-top: 1px double #ffa94d;
-}
-
-.sdoc-table-wrapper .cell-light-height-bottom-border {
-  border-bottom: 1px double #ffa94d;
-}
-
-.sdoc-table-wrapper .cell-light-height-left-border::after {
-  content: '';
-  position: absolute;
-  top: 0px;
-  left: -1px;
-  width: 2px;
-  height: 100%;
-  border-left: 1px double #ffa94d;
-}
-
-.sdoc-table-wrapper .cell-light-height-right-border {
-  border-right: 1px double #ffa94d;
-}

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

@@ -1,94 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useRef, useState, useEffect } from 'react';
-import classnames from 'classnames';
-import throttle from 'lodash.throttle';
-import { useSelected } from '@seafile/slate-react';
-import { EMPTY_SELECTED_RANGE } from '../../constants';
-import { TableContext } from '../context';
-import EventBus from '../../../../../utils/event-bus';
-import { EXTERNAL_EVENT } from '../../../../../../constants';
-import { setTableSelectedRange } from '../../helpers';
-import ObjectUtils from '../../../../../utils/object-utils';
-import './index.css';
-var Table = function Table(_ref) {
-  var className = _ref.className,
-    attributes = _ref.attributes,
-    children = _ref.children,
-    isSelected = _ref.isSelected,
-    editor = _ref.editor;
-  var table = useRef(null);
-  var startRowIndex = 0;
-  var startColIndex = 0;
-  var _selectedRange = EMPTY_SELECTED_RANGE;
-  var _useState = useState(EMPTY_SELECTED_RANGE),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedRange = _useState2[0],
-    setSelectedRange = _useState2[1];
-  var eventBus = EventBus.getInstance();
-  useEffect(function () {
-    var cancelTableSelectRangeSubscribe = eventBus.subscribe(EXTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE, clearRange);
-    return function () {
-      cancelTableSelectRangeSubscribe();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  var clearRange = function clearRange() {
-    _selectedRange = EMPTY_SELECTED_RANGE;
-    setSelectedRange(EMPTY_SELECTED_RANGE);
-  };
-  var onMouseMove = throttle(function (event) {
-    // if  event.target not in the table, clear the mouseMove event
-    if (event.target.nodeName === 'TBODY' || !table.current.contains(event.target)) {
-      return;
-    }
-    var endRowIndex = Number(event.target.getAttribute('row-index'));
-    var endColIndex = Number(event.target.getAttribute('cell-index'));
-    var newSelectedRange = {
-      minRowIndex: Math.min(startRowIndex, endRowIndex),
-      maxRowIndex: Math.max(startRowIndex, endRowIndex),
-      minColIndex: Math.min(startColIndex, endColIndex),
-      maxColIndex: Math.max(startColIndex, endColIndex)
-    };
-
-    // same cell
-    if (newSelectedRange.minRowIndex === newSelectedRange.maxRowIndex && newSelectedRange.minColIndex === newSelectedRange.maxColIndex) return;
-    _selectedRange = newSelectedRange;
-    setSelectedRange(newSelectedRange);
-    setTableSelectedRange(editor, newSelectedRange);
-  }, 200);
-  var onMouseUp = function onMouseUp(event) {
-    if (!ObjectUtils.isSameObject(_selectedRange, EMPTY_SELECTED_RANGE)) {
-      window.getSelection().collapseToEnd();
-    }
-    window.document.removeEventListener('mousemove', onMouseMove);
-    window.document.removeEventListener('mouseup', onMouseUp);
-  };
-  var onMouseDown = function onMouseDown(event) {
-    if (event.button !== 0) return; // right click not deal
-    startRowIndex = Number(event.target.getAttribute('row-index'));
-    startColIndex = Number(event.target.getAttribute('cell-index'));
-    setSelectedRange(EMPTY_SELECTED_RANGE);
-    setTableSelectedRange(editor, EMPTY_SELECTED_RANGE);
-    window.document.addEventListener('mousemove', onMouseMove);
-    window.document.addEventListener('mouseup', onMouseUp);
-  };
-  return /*#__PURE__*/React.createElement(TableContext.Provider, {
-    value: selectedRange
-  }, /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
-    className: classnames('sdoc-table-wrapper', attributes.className, className, {
-      'sdoc-table-selected': isSelected
-    })
-  }), /*#__PURE__*/React.createElement("table", {
-    onMouseDown: onMouseDown,
-    ref: table
-  }, /*#__PURE__*/React.createElement("tbody", null, children))));
-};
-function renderTable(props, editor) {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  var isSelected = useSelected();
-  return /*#__PURE__*/React.createElement(Table, Object.assign({}, props, {
-    editor: editor,
-    isSelected: isSelected
-  }));
-}
-export default renderTable;