@seafile/sdoc-editor 0.1.73 → 0.1.75

package/dist/basic-sdk/comment/comment-decorate.js

@@ -20,7 +20,7 @@ export var commentDecorate = function commentDecorate(editor) {
         }
       };
       // rgba prevents occlusion of the cursor
-      decoration['bg_color'] = 'rgba(129, 237, 247, 0.5)';
+      decoration['computed_bg_color'] = 'rgba(129, 237, 247, 0.5)';
       decoration['comment_count'] = editor.comments_map[node.id].length;
       decorations.push(decoration);
     }

package/dist/basic-sdk/editor.js

@@ -136,6 +136,54 @@ var SDocEditor = function SDocEditor(_ref) {
       scrollRef.current.scroll(0, Math.max(0, scrollTop + _domHeight));
       return;
     }
+    if (event.key === 'Backspace') {
+      var _getCursorPosition3 = getCursorPosition(),
+        _y2 = _getCursorPosition3.y;
+
+      // above viewport
+      if (_y2 < 0) {
+        var newY = Math.abs(_y2);
+        if (isSelectionAtBlockStart(editor)) {
+          var _prevNode = getPrevNode(editor);
+          if (!_prevNode) return;
+          var _domNode2 = ReactEditor.toDOMNode(editor, _prevNode[0]);
+          var _domHeight2 = getDomHeight(_domNode2);
+          scrollRef.current.scroll(0, Math.max(0, scrollTop - (newY + _domHeight2)));
+        } else {
+          scrollRef.current.scroll(0, Math.max(0, scrollTop - newY));
+        }
+        return;
+      }
+
+      // insider viewport
+      if (_y2 >= 0 && _y2 <= clientHeight) {
+        if (isSelectionAtBlockStart(editor)) {
+          var _prevNode2 = getPrevNode(editor);
+          if (!_prevNode2) return;
+          var _domNode3 = ReactEditor.toDOMNode(editor, _prevNode2[0]);
+          var _domHeight3 = getDomHeight(_domNode3);
+          if (_y2 >= _domHeight3) return;
+          // Scroll up the height of the previous block
+          scrollRef.current.scroll(0, Math.max(0, scrollTop - _domHeight3));
+          return;
+        }
+      }
+
+      // below viewport
+      if (_y2 > clientHeight) {
+        if (isSelectionAtBlockStart(editor)) {
+          // y: text top border
+          scrollRef.current.scroll(0, Math.max(0, scrollTop + (_y2 - clientHeight)));
+        } else {
+          var marginBottom = 11.2;
+          var _getCursorPosition4 = getCursorPosition(false),
+            _newY = _getCursorPosition4.y;
+          var rectBottom = _newY + marginBottom; // text bottom border
+          scrollRef.current.scroll(0, Math.max(0, scrollTop + (rectBottom - clientHeight)));
+        }
+        return;
+      }
+    }
     eventProxy.onKeyDown(event);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

package/dist/basic-sdk/extension/constants/element-type.js

@@ -3,6 +3,8 @@ export var BOLD = 'bold';
 export var ITALIC = 'italic';
 export var UNDERLINE = 'underline';
 export var STRIKETHROUGH = 'strikethrough';
+export var SUPERSCRIPT = 'superscript';
+export var SUBSCRIPT = 'subscript';
 export var HEADER = 'header';
 export var HEADER1 = 'header1';
 export var HEADER2 = 'header2';
@@ -28,6 +30,7 @@ export var TABLE_CELL = 'table-cell';
 export var FORMULA = 'formula';
 export var COLUMN = 'column';
 export var TEXT_STYLE = 'text-style';
+export var TEXT_STYLE_MORE = 'text-style-more';
 export var BOLD_ITALIC = 'bold-italic';
 export var TEXT_ALIGN = 'text-align';
 export var ALIGN_LEFT = 'align-left';

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

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _MENUS_CONFIG_MAP, _HEADER_TITLE_MAP, _TABLE_ELEMENT_SPAN;
+var _MENUS_CONFIG_MAP, _HEADER_TITLE_MAP;
 // extension plugin
 import * as ELEMENT_TYPE from './element-type';
-import { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, BOLD_ITALIC, TEXT_ALIGN, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_CENTER } from './element-type';
+import { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, SUPERSCRIPT, SUBSCRIPT, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, TEXT_STYLE_MORE, BOLD_ITALIC, TEXT_ALIGN, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_CENTER } from './element-type';
 import KEYBOARD from './keyboard';
 
 // history
@@ -64,11 +64,21 @@ export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CO
   iconClass: 'sdocfont sdoc-underline',
   text: 'Underline',
   type: 'UNDERLINE'
-}, {
+}]), _defineProperty(_MENUS_CONFIG_MAP, TEXT_STYLE_MORE, [{
   id: STRIKETHROUGH,
   iconClass: 'sdocfont sdoc-strikethrough',
   text: 'Strikethrough',
   type: 'STRIKETHROUGH'
+}, {
+  id: SUPERSCRIPT,
+  iconClass: 'sdocfont sdoc-superscript',
+  text: 'Superscript',
+  type: 'SUPERSCRIPT'
+}, {
+  id: SUBSCRIPT,
+  iconClass: 'sdocfont sdoc-subscript',
+  text: 'Subscript',
+  type: 'SUBSCRIPT'
 }]), _defineProperty(_MENUS_CONFIG_MAP, TEXT_ALIGN, [{
   id: ALIGN_LEFT,
   iconClass: 'sdocfont sdoc-align-left',
@@ -102,23 +112,12 @@ export var DIFF_TYPE = {
 export var STYLE_KEY = {
   TEXT_ALIGN: 'textAlign'
 };
-export var TABLE_ELEMENT = {
-  TABLE: 'table',
-  ROW: 'row',
-  COLUMN: 'column',
-  CELL: 'cell'
-};
-export var TABLE_ELEMENT_SPAN = (_TABLE_ELEMENT_SPAN = {}, _defineProperty(_TABLE_ELEMENT_SPAN, TABLE_ELEMENT.TABLE, 'table'), _defineProperty(_TABLE_ELEMENT_SPAN, TABLE_ELEMENT.ROW, 'tr'), _defineProperty(_TABLE_ELEMENT_SPAN, TABLE_ELEMENT.CELL, 'td'), _TABLE_ELEMENT_SPAN);
-export var TABLE_ELEMENT_POSITION = {
-  AFTER: 'after',
-  BEFORE: 'before'
-};
 export var DELETED_STYLE = {
-  background_color: '#ffeef0',
+  computed_bg_color: '#ffeef0',
   color: 'rgb(165, 32, 21)'
 };
 export var ADDED_STYLE = {
-  background_color: '#e6ffed',
+  computed_bg_color: '#e6ffed',
   color: 'rgb(137, 181, 66)'
 };
-export { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, BOLD_ITALIC, TEXT_ALIGN, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_CENTER, ELEMENT_TYPE, KEYBOARD };
+export { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, SUPERSCRIPT, SUBSCRIPT, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, TEXT_STYLE_MORE, BOLD_ITALIC, TEXT_ALIGN, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_CENTER, ELEMENT_TYPE, KEYBOARD };

package/dist/basic-sdk/extension/plugins/code-block/plugin.js

@@ -11,6 +11,14 @@ var withCodeBlock = function withCodeBlock(editor) {
     insertText = editor.insertText,
     insertBreak = editor.insertBreak;
   var newEditor = editor;
+
+  // If you enter two Spaces in quick succession, a period and a space appear （Default Settings for mac）
+  newEditor.insertText = function (data) {
+    if (data === '. ') {
+      return insertText('  ');
+    }
+    return insertText(data);
+  };
   newEditor.insertFragment = function (data) {
     // only selected code block content
     if (data.length === 1 && data[0].type === CODE_BLOCK && !getSelectedNodeByType(editor, CODE_BLOCK)) {

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

@@ -1,3 +1,5 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _TABLE_ELEMENT_SPAN;
 export var TABLE_MAX_ROWS = 50;
 export var TABLE_MAX_COLUMNS = 50;
 export var EMPTY_SELECTED_RANGE = {
@@ -7,4 +9,15 @@ export var EMPTY_SELECTED_RANGE = {
   maxColIndex: -1
 };
 export var TABLE_ROW_MIN_HEIGHT = 42;
-export var TABLE_CELL_MIN_WIDTH = 35;
+export var TABLE_CELL_MIN_WIDTH = 35;
+export var TABLE_ELEMENT = {
+  TABLE: 'table',
+  ROW: 'row',
+  COLUMN: 'column',
+  CELL: 'cell'
+};
+export var TABLE_ELEMENT_SPAN = (_TABLE_ELEMENT_SPAN = {}, _defineProperty(_TABLE_ELEMENT_SPAN, TABLE_ELEMENT.TABLE, 'table'), _defineProperty(_TABLE_ELEMENT_SPAN, TABLE_ELEMENT.ROW, 'tr'), _defineProperty(_TABLE_ELEMENT_SPAN, TABLE_ELEMENT.CELL, 'td'), _TABLE_ELEMENT_SPAN);
+export var TABLE_ELEMENT_POSITION = {
+  AFTER: 'after',
+  BEFORE: 'before'
+};

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

@@ -4,8 +4,8 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import slugid from 'slugid';
 import { Editor, Range, Transforms } from '@seafile/slate';
 import { getNodeType, getParentNode, getSelectedNodeByType, isTextNode, getSelectedElems, focusEditor, getNode, findPath } from '../../core';
-import { ELEMENT_TYPE, TABLE_ELEMENT, TABLE_ELEMENT_POSITION } from '../../constants';
-import { TABLE_MAX_ROWS, TABLE_MAX_COLUMNS, EMPTY_SELECTED_RANGE, TABLE_ROW_MIN_HEIGHT, TABLE_CELL_MIN_WIDTH } from './constants';
+import { ELEMENT_TYPE } from '../../constants';
+import { TABLE_MAX_ROWS, TABLE_MAX_COLUMNS, EMPTY_SELECTED_RANGE, TABLE_ROW_MIN_HEIGHT, TABLE_CELL_MIN_WIDTH, TABLE_ELEMENT, TABLE_ELEMENT_POSITION } from './constants';
 import EventBus from '../../../utils/event-bus';
 import { EXTERNAL_EVENT, PAGE_EDIT_AREA_WIDTH } from '../../../../constants';
 import ObjectUtils from '../../../utils/object-utils';
@@ -159,6 +159,39 @@ export var setTextStyle = function setTextStyle(editor, style) {
     Transforms.select(editor, newSelection);
   }
 };
+export var insertTableRow = function insertTableRow(editor, table, rowIndex) {
+  var position = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : TABLE_ELEMENT_POSITION.AFTER;
+  var tableRowCount = table.children.length;
+  if (tableRowCount >= TABLE_MAX_ROWS) return;
+  var tableColumnCount = table.children[0].children.length;
+  var row = generateTableRow(tableColumnCount);
+  var tablePath = findPath(editor, table);
+  var targetPath = position === TABLE_ELEMENT_POSITION.AFTER ? [].concat(_toConsumableArray(tablePath), [rowIndex + 1]) : [].concat(_toConsumableArray(tablePath), [rowIndex]);
+  Transforms.insertNodes(editor, row, {
+    at: targetPath
+  });
+  var focusPath = [].concat(_toConsumableArray(targetPath), [0]);
+  focusEditor(editor, focusPath);
+};
+export var insertTableColumn = function insertTableColumn(editor, table, columnIndex) {
+  var position = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : TABLE_ELEMENT_POSITION.AFTER;
+  var tableColumnCount = table.children[0].children.length;
+  if (tableColumnCount >= TABLE_MAX_COLUMNS) return;
+  var newCellIndex = position === TABLE_ELEMENT_POSITION.AFTER ? columnIndex + 1 : columnIndex;
+  var newColumns = getTableColumnsAfterInsertColumn(editor, table, newCellIndex, 1);
+  updateColumnWidth(editor, table, newColumns);
+  var tablePath = findPath(editor, table);
+  var tableRowCount = table.children.length;
+  for (var i = 0; i < tableRowCount; i++) {
+    var newCellPath = [].concat(_toConsumableArray(tablePath), [i, newCellIndex]);
+    var newCell = generateTableCell();
+    Transforms.insertNodes(editor, newCell, {
+      at: newCellPath
+    });
+  }
+  var focusPath = [].concat(_toConsumableArray(tablePath), [0, newCellIndex, 0]);
+  focusEditor(editor, focusPath);
+};
 export var insertTableElement = function insertTableElement(editor, type) {
   var position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : TABLE_ELEMENT_POSITION.AFTER;
   var count = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;

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

@@ -8,8 +8,9 @@ import React, { Component } from 'react';
 import { withTranslation } from 'react-i18next';
 import { MenuGroup, MenuItem } from '../../../../menu';
 import CommonMenu from './common-menu';
-import { TABLE_ELEMENT, MENUS_CONFIG_MAP, REMOVE_TABLE } from '../../../../constants';
+import { MENUS_CONFIG_MAP, REMOVE_TABLE } from '../../../../constants';
 import { setTextStyle, insertTableElement, removeTableElement, isAllInTable } from '../../helpers';
+import { TABLE_ELEMENT } from '../../constants';
 import './index.css';
 var ActiveTableMenu = /*#__PURE__*/function (_Component) {
   _inherits(ActiveTableMenu, _Component);

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

@@ -6,10 +6,10 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { withTranslation } from 'react-i18next';
 import ObjectUtils from '../../../../../utils/object-utils';
-import { TABLE_ELEMENT, TABLE_ELEMENT_POSITION, ELEMENT_TYPE } from '../../../../constants';
+import { ELEMENT_TYPE } from '../../../../constants';
 import InsertTableElement from './insert-table-element';
 import { getSelectedNodeByType } from '../../../../core';
-import { TABLE_MAX_COLUMNS, TABLE_MAX_ROWS } from '../../constants';
+import { TABLE_MAX_COLUMNS, TABLE_MAX_ROWS, TABLE_ELEMENT, TABLE_ELEMENT_POSITION } from '../../constants';
 import { insertTableElement, removeTableElement } from '../../helpers';
 import './index.css';
 var ContextMenu = /*#__PURE__*/function (_React$Component) {

package/dist/basic-sdk/extension/plugins/table/menu/context-menu/insert-table-element.js

@@ -6,8 +6,7 @@ import React, { Component } from 'react';
 import { withTranslation } from 'react-i18next';
 import { Input } from 'reactstrap';
 import isHotkey from 'is-hotkey';
-import { TABLE_ELEMENT, TABLE_ELEMENT_POSITION } from '../../../../constants';
-import { TABLE_MAX_COLUMNS, TABLE_MAX_ROWS } from '../../constants';
+import { TABLE_MAX_COLUMNS, TABLE_MAX_ROWS, TABLE_ELEMENT, TABLE_ELEMENT_POSITION } from '../../constants';
 var InsertTableElement = /*#__PURE__*/function (_Component) {
   _inherits(InsertTableElement, _Component);
   var _super = _createSuper(InsertTableElement);

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

@@ -6,8 +6,8 @@ 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, replaceNodeChildren, focusEditor, getNode, generateEmptyElement } from '../../core';
-import { ELEMENT_TYPE, TABLE_ELEMENT, TABLE_ELEMENT_POSITION, KEYBOARD, PARAGRAPH } from '../../constants';
-import { TABLE_MAX_ROWS, EMPTY_SELECTED_RANGE } from './constants';
+import { ELEMENT_TYPE, KEYBOARD, PARAGRAPH } from '../../constants';
+import { TABLE_MAX_ROWS, EMPTY_SELECTED_RANGE, TABLE_ELEMENT, TABLE_ELEMENT_POSITION } from './constants';
 import ObjectUtils from '../../../utils/object-utils';
 import { getSelectedInfo, insertTableElement } from './helpers';
 var deleteHandler = function deleteHandler(editor) {

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

@@ -3,9 +3,9 @@ export var TableRootContext = createContext();
 export var useTableRootContext = function useTableRootContext() {
   return useContext(TableRootContext);
 };
-export var TableContext = createContext();
-export var useTableContext = function useTableContext() {
-  return useContext(TableContext);
+export var TableSelectedRangeContext = createContext();
+export var useTableSelectedRangeContext = function useTableSelectedRangeContext() {
+  return useContext(TableSelectedRangeContext);
 };
 export var ResizeHandlersContext = createContext();
 export var useResizeHandlersContext = function useResizeHandlersContext() {
@@ -14,4 +14,8 @@ export var useResizeHandlersContext = function useResizeHandlersContext() {
 export var SettingSelectRangeContext = createContext();
 export var useSettingSelectRangeContext = function useSettingSelectRangeContext() {
   return useContext(SettingSelectRangeContext);
+};
+export var TableRootScrollLeftContext = createContext();
+export var useTableRootScrollLeftContext = function useTableRootScrollLeftContext() {
+  return useContext(TableRootScrollLeftContext);
 };

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

@@ -1,6 +1,6 @@
 .sdoc-table-wrapper {
   width: 100%;
-  overflow: hidden;
+  /* overflow: hidden; */
 }
 
 .sdoc-table-wrapper .sdoc-table-scroll-wrapper {
@@ -72,11 +72,16 @@
   position: absolute;
   top: -1px;
   left: 0;
-  width: 100%;
+  width: calc(100% + 1px);
   height: 2px;
   border-top: 1px double #ffa94d !important;
 }
 
+.sdoc-table-wrapper .cell-light-height-top-border:first-child:before {
+  left: -1px;
+  width: calc(100% + 2px);
+}
+
 .sdoc-table-wrapper .cell-light-height-bottom-border {
   border-bottom: 1px double #ffa94d !important;
 }
@@ -87,7 +92,7 @@
   top: 0px;
   left: -1px;
   width: 2px;
-  height: 100%;
+  height: calc(100% + 1px);
   border-left: 1px double #ffa94d !important;
 }
 
@@ -135,3 +140,7 @@
   background-color: #2d7ff9;
   border-radius: 1px;
 }
+
+.sdoc-table-wrapper .background-color-tip-blue {
+  background-color: #2d7ff9 !important;
+}

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

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import throttle from 'lodash.throttle';
 import { useSelected, useSlateStatic, useReadOnly } from '@seafile/slate-react';
 import { EMPTY_SELECTED_RANGE } from '../constants';
-import { ResizeHandlersContext, TableContext, SettingSelectRangeContext } from './hooks';
+import { ResizeHandlersContext, TableSelectedRangeContext, SettingSelectRangeContext } from './hooks';
 import EventBus from '../../../../utils/event-bus';
 import { EXTERNAL_EVENT } from '../../../../../constants';
 import { getTableColumns, setTableSelectedRange, getFirstTableCell } from '../helpers';
@@ -12,6 +12,7 @@ import ObjectUtils from '../../../../utils/object-utils';
 import ResizeHandlers from './resize-handlers';
 import { registerResizeEvents, unregisterResizeEvents } from '../../../../utils/mouse-event';
 import TableRoot from './table-root';
+import TableHeader from './table-header';
 import './index.css';
 var Table = function Table(_ref) {
   var className = _ref.className,
@@ -108,6 +109,7 @@ var Table = function Table(_ref) {
     }
     return function () {
       cancelTableSelectRangeSubscribe();
+      setTableSelectedRange(editor, selectedRange);
     };
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -117,7 +119,13 @@ var Table = function Table(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React.createElement(TableContext.Provider, {
+  var setSelectedRangeByClick = useCallback(function (range) {
+    setSelectedRange(range);
+    setTableSelectedRange(editor, range);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(TableSelectedRangeContext.Provider, {
     value: selectedRange
   }, /*#__PURE__*/React.createElement(ResizeHandlersContext.Provider, {
     value: columns
@@ -126,7 +134,10 @@ var Table = function Table(_ref) {
   }, /*#__PURE__*/React.createElement(TableRoot, {
     columns: columns,
     attributes: attributes
-  }, /*#__PURE__*/React.createElement("div", {
+  }, isSelected && /*#__PURE__*/React.createElement(TableHeader, {
+    table: element,
+    setSelectedRange: setSelectedRangeByClick
+  }), /*#__PURE__*/React.createElement("div", {
     className: classnames('sdoc-table-container position-relative', attributes.className, className, {
       'sdoc-table-selected': isSelected
     }),

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

@@ -5,7 +5,7 @@ import { useSlateStatic, useReadOnly } from '@seafile/slate-react';
 import ObjectUtils from '../../../../utils/object-utils';
 import { STYLE_KEY } from '../../../constants';
 import { findPath } from '../../../core';
-import { useResizeHandlersContext, useTableContext } from './hooks';
+import { useResizeHandlersContext, useTableSelectedRangeContext } from './hooks';
 import { EMPTY_SELECTED_RANGE } from '../constants';
 import { getTableColumns, getCellColumn } from '../helpers';
 var TableCell = function TableCell(_ref) {
@@ -13,7 +13,7 @@ var TableCell = function TableCell(_ref) {
     element = _ref.element,
     children = _ref.children;
   var editor = useSlateStatic();
-  var selectedRange = useTableContext() || EMPTY_SELECTED_RANGE;
+  var selectedRange = useTableSelectedRangeContext() || EMPTY_SELECTED_RANGE;
   var cellPath = findPath(editor, element, [0, 0]);
   var columns = useResizeHandlersContext() || getTableColumns(editor, element);
   var pathLength = cellPath.length;

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

@@ -4,7 +4,6 @@ import React, { useEffect, useState, useRef, useCallback } from 'react';
 import classnames from 'classnames';
 import { useSlateStatic, useReadOnly } from '@seafile/slate-react';
 import { ReactEditor } from '@seafile/slate-react';
-import { Transforms } from '@seafile/slate';
 import { findPath } from '../../../core';
 import { TABLE_ROW_MIN_HEIGHT } from '../constants';
 import { updateTableRowHeight } from '../helpers';
@@ -40,7 +39,6 @@ var TableRow = function TableRow(_ref) {
   var scrollContent = useScrollContext();
   var onMouseDown = useCallback(function (event) {
     eventStopPropagation(event);
-    Transforms.deselect(editor);
     var mouseDownInfo = getMouseDownInfo(event, scrollContent.current);
     setMouseDownInfo(mouseDownInfo);
     setIsResizing(true);

package/dist/basic-sdk/extension/plugins/table/render/resize-handlers/first-column-left-resize-handler.js

@@ -1,7 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useRef, useState, useEffect, useCallback } from 'react';
-import { Transforms } from '@seafile/slate';
 import { useSlateStatic } from '@seafile/slate-react';
 import classnames from 'classnames';
 import { useTableRootContext } from '../hooks';
@@ -35,7 +34,6 @@ var FirstColumnResizeHandler = function FirstColumnResizeHandler(_ref) {
   var tableRootScrollContainer = useTableRootContext();
   var onMouseDown = useCallback(function (event) {
     eventStopPropagation(event);
-    Transforms.deselect(editor);
     var mouseDownInfo = getMouseDownInfo(event, tableRootScrollContainer);
     var _tableRootScrollConta = tableRootScrollContainer.getBoundingClientRect(),
       top = _tableRootScrollConta.top;

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

@@ -5,8 +5,8 @@ import ResizeHandler from './resize-handler';
 import { getNode, findPath } from '../../../../core';
 import { useResizeHandlersContext } from '../hooks';
 import { getTableColumns } from '../../helpers';
-var ResizeHandlers = function ResizeHandlers(props) {
-  var element = props.element;
+var ResizeHandlers = function ResizeHandlers(_ref) {
+  var element = _ref.element;
   var editor = useSlateStatic();
   var tablePath = findPath(editor, element);
   var columns = useResizeHandlersContext() || getTableColumns(editor, element);

package/dist/basic-sdk/extension/plugins/table/render/resize-handlers/resize-handler.js

@@ -1,7 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useRef, useState, useEffect, useCallback } from 'react';
-import { Transforms } from '@seafile/slate';
 import { useSlateStatic } from '@seafile/slate-react';
 import classnames from 'classnames';
 import { useTableRootContext } from '../hooks';
@@ -35,7 +34,6 @@ var ResizeHandler = function ResizeHandler(_ref) {
   var tableRootScrollContainer = useTableRootContext();
   var onMouseDown = useCallback(function (event) {
     eventStopPropagation(event);
-    Transforms.deselect(editor);
     var mouseDownInfo = getMouseDownInfo(event, tableRootScrollContainer);
     var _tableRootScrollConta = tableRootScrollContainer.getBoundingClientRect(),
       top = _tableRootScrollConta.top;

package/dist/basic-sdk/extension/plugins/table/render/table-header/columns-header/column-header.js

@@ -0,0 +1,71 @@
+import React, { useRef, useCallback } from 'react';
+import classnames from 'classnames';
+import { useSlateStatic } from '@seafile/slate-react';
+import ObjectUtils from '../../../../../../utils/object-utils';
+import { useTableRootContext, useTableSelectedRangeContext } from '../../hooks';
+import { ELEMENT_TYPE } from '../../../../../constants';
+import { findPath, getSelectedNodeByType } from '../../../../../core';
+var ColumnHeader = function ColumnHeader(_ref) {
+  var index = _ref.index,
+    column = _ref.column,
+    addIconPosition = _ref.addIconPosition,
+    setAddIconPosition = _ref.setAddIconPosition,
+    setInsertColumnIndex = _ref.setInsertColumnIndex,
+    selectRange = _ref.selectRange,
+    tableSize = _ref.tableSize;
+  var editor = useSlateStatic();
+  var columnHeaderRef = useRef(null);
+  var tableRoot = useTableRootContext();
+  var selectedRange = useTableSelectedRangeContext();
+  var currentCell = getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE_CELL);
+  var currentCellPath = currentCell ? findPath(editor, currentCell, [-1, -1]) : [-1, -1];
+  var pathLength = currentCellPath.length;
+  var onMouseMove = useCallback(function (event) {
+    var _columnHeaderRef$curr = columnHeaderRef.current.getBoundingClientRect(),
+      left = _columnHeaderRef$curr.left,
+      width = _columnHeaderRef$curr.width,
+      top = _columnHeaderRef$curr.top;
+    var tableRootPosition = tableRoot.getBoundingClientRect();
+    var halfElementX = left + width / 2;
+    var nextAddIconPosition = {
+      left: event.clientX > halfElementX ? left + width - 6 : left - 6,
+      top: top
+    };
+    if (tableRootPosition.right < nextAddIconPosition.left) {
+      setAddIconPosition(undefined);
+      return;
+    }
+    if (tableRootPosition.left - 6 > nextAddIconPosition.left) {
+      setAddIconPosition(undefined);
+      return;
+    }
+    if (ObjectUtils.isSameObject(nextAddIconPosition, addIconPosition)) return;
+    setInsertColumnIndex(event.clientX > halfElementX ? index : index - 1);
+    setAddIconPosition(nextAddIconPosition);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [index, addIconPosition, column, tableSize]);
+  var onMouseLeave = useCallback(function (event) {
+    setAddIconPosition(undefined);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [index, addIconPosition, column, tableSize]);
+  var isSelectedAColumn = selectedRange.minRowIndex === 0 && selectedRange.maxRowIndex === tableSize[0] - 1;
+  var isSelectedRangeColumn = selectedRange.minColIndex <= index && index <= selectedRange.maxColIndex;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames('sdoc-table-column-header h-100', {
+      'range-selected': isSelectedAColumn && isSelectedRangeColumn,
+      'range-selected-tip': !isSelectedAColumn && isSelectedRangeColumn || currentCellPath[pathLength - 1] === index
+    }),
+    ref: columnHeaderRef,
+    onMouseMove: onMouseMove,
+    onMouseLeave: onMouseLeave,
+    onClick: function onClick() {
+      return selectRange(index);
+    },
+    style: {
+      width: column.width
+    }
+  });
+};
+export default ColumnHeader;

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

@@ -0,0 +1,92 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useState } from 'react';
+import { useSlateStatic } from '@seafile/slate-react';
+import classnames from 'classnames';
+import { useResizeHandlersContext, useTableRootScrollLeftContext, useTableRootContext } from '../../hooks';
+import ColumnHeader from './column-header';
+import { insertTableColumn } from '../../../helpers';
+import { TABLE_ELEMENT_POSITION } from '../../../constants';
+var ColumnsHeader = function ColumnsHeader(_ref) {
+  var table = _ref.table,
+    selectRange = _ref.selectRange,
+    tableSize = _ref.tableSize;
+  var editor = useSlateStatic();
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    insertColumnIndex = _useState2[0],
+    setInsertColumnIndex = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    addIconPosition = _useState4[0],
+    setAddIconPosition = _useState4[1];
+  var columns = useResizeHandlersContext();
+  var tableRootScrollLeft = useTableRootScrollLeftContext();
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isHoverInAddIcon = _useState6[0],
+    setIsHoverInAddIcon = _useState6[1];
+  var tableRootContent = useTableRootContext();
+  var onMouseLeave = useCallback(function () {
+    setAddIconPosition();
+    setInsertColumnIndex(0);
+    setIsHoverInAddIcon(false);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [table, columns, tableSize]);
+  var _onMouseEnter = useCallback(function (addIconPosition) {
+    setAddIconPosition(addIconPosition);
+    setIsHoverInAddIcon(true);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [table, columns, tableSize]);
+  var insertColumn = useCallback(function (insertColumnIndex) {
+    var validInsertColumnIndex = insertColumnIndex === -1 ? 0 : insertColumnIndex;
+    var insertColumnPosition = insertColumnIndex === -1 ? TABLE_ELEMENT_POSITION.BEFORE : TABLE_ELEMENT_POSITION.AFTER;
+    insertTableColumn(editor, table, validInsertColumnIndex, insertColumnPosition, 1);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [table, columns, tableSize]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-table-columns-header position-absolute",
+    contentEditable: false
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-table-columns-header-container h-100 d-flex position-absolute",
+    style: {
+      left: -1 * tableRootScrollLeft
+    }
+  }, columns.map(function (column, index) {
+    return /*#__PURE__*/React.createElement(ColumnHeader, {
+      key: index,
+      column: column,
+      index: index,
+      addIconPosition: addIconPosition,
+      tableSize: tableSize,
+      setAddIconPosition: setAddIconPosition,
+      setInsertColumnIndex: setInsertColumnIndex,
+      selectRange: selectRange
+    });
+  }))), addIconPosition && /*#__PURE__*/React.createElement("div", {
+    className: classnames('position-fixed sdoc-table-add-element-icon-content', {
+      'background-color-tip-blue': isHoverInAddIcon
+    }),
+    contentEditable: false,
+    style: addIconPosition,
+    onMouseEnter: function onMouseEnter() {
+      return _onMouseEnter(addIconPosition);
+    },
+    onMouseLeave: onMouseLeave,
+    onClick: function onClick() {
+      return insertColumn(insertColumnIndex);
+    }
+  }, '+'), addIconPosition && isHoverInAddIcon && /*#__PURE__*/React.createElement("div", {
+    className: "position-fixed sdoc-table-add-element-tip background-color-tip-blue",
+    style: {
+      left: (addIconPosition === null || addIconPosition === void 0 ? void 0 : addIconPosition.left) + 5,
+      top: (addIconPosition === null || addIconPosition === void 0 ? void 0 : addIconPosition.top) + 12,
+      width: 2,
+      height: tableRootContent.clientHeight,
+      zIndex: 1
+    }
+  }));
+};
+export default ColumnsHeader;