@seafile/sdoc-editor 0.1.74 → 0.1.76

package/dist/basic-sdk/editor.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Editable, ReactEditor, Slate } from '@seafile/slate-react';
 import defaultEditor, { renderLeaf, renderElement, Toolbar, ContextMenu } from './extension';
-import { focusEditor, getNextNode, getPrevNode, isSelectionAtBlockEnd, isSelectionAtBlockStart } from './extension/core';
+import { focusEditor, getAboveBlockNode, getNextNode, getPrevNode, isSelectionAtBlockEnd, isSelectionAtBlockStart } from './extension/core';
 import { withSocketIO } from './socket';
 import withNodeId from './node-id';
 import SDocOutline from './outline';
@@ -16,7 +16,7 @@ import { ScrollContext } from './hooks/use-scroll-context';
 import CommentContextProvider from './comment/comment-context-provider';
 import CommentWrapper from './comment';
 import { usePipDecorate } from './decorates';
-import { getCursorPosition, getDomHeight } from './utils/dom-utils';
+import { getCursorPosition, getDomHeight, getDomMarginTop } from './utils/dom-utils';
 import './assets/css/layout.css';
 import './assets/css/sdoc-editor-plugins.css';
 var SDocEditor = function SDocEditor(_ref) {
@@ -148,7 +148,11 @@ var SDocEditor = function SDocEditor(_ref) {
           if (!_prevNode) return;
           var _domNode2 = ReactEditor.toDOMNode(editor, _prevNode[0]);
           var _domHeight2 = getDomHeight(_domNode2);
-          scrollRef.current.scroll(0, Math.max(0, scrollTop - (newY + _domHeight2)));
+          var node = getAboveBlockNode(editor);
+          if (!node) return;
+          var currentDomNode = ReactEditor.toDOMNode(editor, node[0]);
+          var marginTop = getDomMarginTop(currentDomNode);
+          scrollRef.current.scroll(0, Math.max(0, scrollTop - (newY + _domHeight2 + marginTop)));
         } else {
           scrollRef.current.scroll(0, Math.max(0, scrollTop - newY));
         }

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,17 +112,6 @@ 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 = {
   computed_bg_color: '#ffeef0',
   color: 'rgb(165, 32, 21)'
@@ -121,4 +120,4 @@ export var ADDED_STYLE = {
   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/helpers.js

@@ -1,5 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import copy from 'copy-to-clipboard';
 import { Transforms, Editor, Node } from '@seafile/slate';
 import slugid from 'slugid';
 import { CODE_BLOCK, CODE_LINE, PARAGRAPH } from '../../constants';
@@ -106,4 +107,20 @@ export var changeToPlainText = function changeToPlainText(editor) {
   Transforms.insertNodes(editor, pList, {
     mode: 'highest'
   });
+};
+export var setClipboardData = function setClipboardData(value) {
+  // Insert text into the clipboard for use on other pages
+  var text = value.children.map(function (line) {
+    return Node.string(line);
+  }).join('\n');
+  copy(text, {
+    format: 'text/plain'
+  });
+
+  // Store the code block data
+  var clipboardData = {
+    text: text,
+    codeBlockNode: value
+  };
+  sessionStorage.setItem('clipboardData', JSON.stringify(clipboardData));
 };

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

@@ -9,8 +9,28 @@ var withCodeBlock = function withCodeBlock(editor) {
   var normalizeNode = editor.normalizeNode,
     insertFragment = editor.insertFragment,
     insertText = editor.insertText,
-    insertBreak = editor.insertBreak;
+    insertBreak = editor.insertBreak,
+    insertData = editor.insertData,
+    insertNode = editor.insertNode;
   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.insertData = function (data) {
+    var text = data.getData('text/plain');
+    var _ref = JSON.parse(sessionStorage.getItem('clipboardData')) || {},
+      storageText = _ref.text,
+      codeBlockNode = _ref.codeBlockNode;
+    if (codeBlockNode && text === storageText && !getSelectedNodeByType(editor, CODE_BLOCK)) {
+      return insertNode(codeBlockNode);
+    }
+    return insertData(data);
+  };
   newEditor.insertFragment = function (data) {
     // only selected code block content
     if (data.length === 1 && data[0].type === CODE_BLOCK && !getSelectedNodeByType(editor, CODE_BLOCK)) {
@@ -75,10 +95,10 @@ var withCodeBlock = function withCodeBlock(editor) {
   };
 
   // Rewrite normalizeNode
-  newEditor.normalizeNode = function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      node = _ref2[0],
-      path = _ref2[1];
+  newEditor.normalizeNode = function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      node = _ref3[0],
+      path = _ref3[1];
     var type = getNodeType(node);
     if (type === CODE_BLOCK) {
       // code-block is the last node in the editor and needs to be followed by a p node

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

@@ -5,6 +5,7 @@ import { ReactEditor, useSlateStatic, useReadOnly } from '@seafile/slate-react';
 import { Transforms } from '@seafile/slate';
 import { useScrollContext } from '../../../hooks/use-scroll-context';
 import CodeBlockHoverMenu from '../../../../components/code-block-hover-menu';
+import { setClipboardData } from './helpers';
 import '../../../assets/css/code-block.css';
 var CodeBlock = function CodeBlock(_ref) {
   var codeBlockProps = _ref.codeBlockProps;
@@ -53,6 +54,10 @@ var CodeBlock = function CodeBlock(_ref) {
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  var onCopyCodeBlock = useCallback(function () {
+    setClipboardData(element);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [element]);
   var onDeleteCodeBlock = useCallback(function () {
     var path = ReactEditor.findPath(editor, element);
     Transforms.removeNodes(editor, {
@@ -124,6 +129,7 @@ var CodeBlock = function CodeBlock(_ref) {
       white_space: 'nowrap'
     },
     onChangeAutoLineWrap: onChangeAutoLineWrap,
+    onCopyCodeBlock: onCopyCodeBlock,
     onDeleteCodeBlock: onDeleteCodeBlock
   }));
 };

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;