@seafile/sdoc-editor 0.3.0 → 0.3.2

package/dist/basic-sdk/comment/components/elements-comment-count/element-comment-count.js

@@ -6,6 +6,7 @@ import { getNodeById, focusEditor, findPath } from '../../../extension/core';
 import { useScrollContext } from '../../../hooks/use-scroll-context';
 import { getElementCommentCountTop } from '../../helper';
 import { eventStopPropagation } from '../../../utils/mouse-event';
+import { ELEMENT_TYPE } from '../../../extension/constants';
 var ElementCommentCount = function ElementCommentCount(_ref) {
   var elementId = _ref.elementId,
     commentsCount = _ref.commentsCount;
@@ -20,8 +21,9 @@ var ElementCommentCount = function ElementCommentCount(_ref) {
     eventStopPropagation(event);
     var path = findPath(editor, element);
     var endOfFirstNode = Editor.end(editor, path);
+    var startOfFirstNode = Editor.start(editor, path);
     var range = {
-      anchor: endOfFirstNode,
+      anchor: [ELEMENT_TYPE.LIST_ITEM, ELEMENT_TYPE.ORDERED_LIST, ELEMENT_TYPE.UNORDERED_LIST].includes(element.type) ? startOfFirstNode : endOfFirstNode,
       focus: endOfFirstNode
     };
     focusEditor(editor, range);

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

@@ -11,6 +11,8 @@ export var INTERNAL_EVENT = {
   COMMENT_LIST_CLICK: 'comment_list_click',
   UNSEEN_NOTIFICATIONS_COUNT: 'unseen_notifications_count'
 };
+export var REVISION_DIFF_KEY = 'diff';
+export var REVISION_DIFF_VALUE = '1';
 export var PAGE_EDIT_AREA_WIDTH = 672; // 672 = 794 - 2[borderLeft + borderRight] - 120[paddingLeft + paddingRight]
 
 export var MODIFY_TYPE = {

package/dist/basic-sdk/extension/commons/insert-element-dialog/index.js

@@ -47,7 +47,6 @@ var InsertElementDialog = function InsertElementDialog(_ref) {
     return function () {
       toggleDialogSubscribe();
     };
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var toggleDialog = useCallback(function (_ref2) {

package/dist/basic-sdk/extension/plugins/file-link/helpers.js

@@ -50,7 +50,6 @@ export var getType = function getType(editor) {
 };
 export var insertFileLink = function insertFileLink(editor, text, uuid) {
   if (isMenuDisabled(editor)) return;
-
   // Selection folded or not
   var selection = editor.selection;
   if (selection == null) return;

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

@@ -80,4 +80,26 @@ export var getListType = function getListType(editor, type) {
 };
 export var setListType = function setListType(editor, type) {
   toggleList(editor, type);
+};
+export var getBeforeText = function getBeforeText(editor) {
+  var selection = editor.selection;
+  if (selection == null) return {
+    beforeText: '',
+    range: null
+  };
+  var anchor = selection.anchor;
+  // Find the near text node above the current text
+  var _Editor$above = Editor.above(editor),
+    _Editor$above2 = _slicedToArray(_Editor$above, 2),
+    aboveNodePath = _Editor$above2[1];
+  var aboveNodeStartPoint = Editor.start(editor, aboveNodePath); // The starting position of the text node
+  var range = {
+    anchor: anchor,
+    focus: aboveNodeStartPoint
+  };
+  var beforeText = Editor.string(editor, range) || '';
+  return {
+    beforeText: beforeText,
+    range: range
+  };
 };

package/dist/basic-sdk/extension/plugins/list/plugin/index.js

@@ -2,10 +2,12 @@ import { insertBreakList } from './insert-break-list';
 import { onTabHandle } from './on-tab-handle';
 import { normalizeList } from './normalize-list';
 import { insertFragmentList } from './insert-fragment-list';
+import { handleShortcut } from './shortcut';
 var withList = function withList(editor) {
   var insertBreak = editor.insertBreak,
     deleteBackWord = editor.deleteBackWord,
-    handleTab = editor.handleTab;
+    handleTab = editor.handleTab,
+    insertText = editor.insertText;
   var newEditor = editor;
   newEditor.insertBreak = function () {
     if (insertBreakList(editor)) return;
@@ -31,6 +33,11 @@ var withList = function withList(editor) {
   };
   newEditor.insertFragment = insertFragmentList(newEditor);
   newEditor.normalizeNode = normalizeList(editor);
+  newEditor.insertText = function (text) {
+    var isPreventInsert = handleShortcut(newEditor, text);
+    if (isPreventInsert) return;
+    return insertText(text);
+  };
   return newEditor;
 };
 export default withList;

package/dist/basic-sdk/extension/plugins/list/plugin/shortcut.js

@@ -0,0 +1,79 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { Editor, Path, Range, Transforms } from '@seafile/slate';
+import { ORDERED_LIST, PARAGRAPH } from '../../../constants';
+import { getBeforeText, setListType } from '../helpers';
+import { focusEditor, getLastChild, getPreviousPath } from '../../../core';
+import { generateEmptyListItem } from '../model';
+
+/**
+ * @param {Editor} editor
+ * @param {String} text
+ * @returns {Boolean} isPreventInsert
+ */
+export var handleShortcut = function handleShortcut(editor, text) {
+  if (text !== ' ') return false;
+  var selection = editor.selection;
+  if (!Range.isCollapsed(selection)) return false;
+  var _Editor$above = Editor.above(editor),
+    _Editor$above2 = _slicedToArray(_Editor$above, 2),
+    aboveNode = _Editor$above2[0],
+    aboveNodePath = _Editor$above2[1];
+  var aboveNodeRef = Editor.pathRef(editor, aboveNodePath);
+  if (aboveNode.type !== PARAGRAPH) return false;
+  // Match ordered list shortcut
+  var regShortcut = /^\s*[1-9]+\.\s*$/;
+  var _getBeforeText = getBeforeText(editor),
+    beforeText = _getBeforeText.beforeText,
+    range = _getBeforeText.range;
+  var matchResult = beforeText.match(regShortcut);
+  var matchedText = matchResult && matchResult[0];
+  // If the match fails or the match is not at the beginning of the line, it is not a shortcut
+  if (!matchResult || matchResult.index !== 0) return false;
+  var previousNodePath = getPreviousPath(aboveNodePath);
+  var _Editor$node = Editor.node(editor, previousNodePath),
+    _Editor$node2 = _slicedToArray(_Editor$node, 2),
+    previousNode = _Editor$node2[0],
+    previousPath = _Editor$node2[1];
+  // If the previous node is not an ordered list and is not start with `1.`,it is not a shortcut
+  if (previousNode.type !== ORDERED_LIST && matchedText !== '1.') return false;
+  // If the previous node is not an ordered list and is start with `1.`,transforms to ordered list
+  if (previousNode.type !== ORDERED_LIST && matchedText === '1.') {
+    // Delete shortcut key text
+    Transforms.delete(editor, {
+      at: range
+    });
+    setListType(editor, ORDERED_LIST);
+    focusEditor(editor);
+    return;
+  }
+  // Record the order number of the shortcut that will be inserted as a list item
+  var shortcutOrderNum = parseInt(matchResult[0].slice(0, -1));
+
+  // Check If order number is continuous
+  if (previousNode.children.length + 1 !== shortcutOrderNum) return false;
+
+  // Delete shortcut key text
+  Transforms.delete(editor, {
+    at: range
+  });
+  // Update aboveNode after delete shortcut text
+  var _Editor$above3 = Editor.above(editor);
+  var _Editor$above4 = _slicedToArray(_Editor$above3, 1);
+  aboveNode = _Editor$above4[0];
+  var _getLastChild = getLastChild([previousNode, previousPath]),
+    _getLastChild2 = _slicedToArray(_getLastChild, 2),
+    lastListItemPath = _getLastChild2[1];
+  var targetInsertPath = Path.next(lastListItemPath);
+  // Wrap the paragraph in a list item
+  var insertedListItem = generateEmptyListItem();
+  insertedListItem.children.push(aboveNode);
+  Transforms.insertNodes(editor, insertedListItem, {
+    at: targetInsertPath
+  });
+  Transforms.removeNodes(editor, {
+    at: aboveNodeRef.unref()
+  });
+  // Set the selection to the end of the inserted list item
+  Transforms.select(editor, Editor.end(editor, targetInsertPath));
+  return true;
+};

package/dist/basic-sdk/extension/plugins/sdoc-link/helpers.js

@@ -1,11 +1,12 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { ReactEditor } from '@seafile/slate-react';
-import { Editor, Transforms, Range } from '@seafile/slate';
+import { Editor, Transforms, Range, Text } from '@seafile/slate';
 import slugid from 'slugid';
 import copy from 'copy-to-clipboard';
 import context from '../../../../context';
 import { SDOC_LINK, LINK, INSERT_FILE_DISPLAY_TYPE, CODE_BLOCK, CODE_LINE, PARAGRAPH } from '../../constants';
-import { getNodeType, getSelectedElems } from '../../core';
+import { focusEditor, getNodeType, getSelectedElems } from '../../core';
 export var isMenuDisabled = function isMenuDisabled(editor, readonly) {
   if (readonly) return true;
   if (editor.selection == null) return true;
@@ -26,7 +27,7 @@ export var generateSdocFileNode = function generateSdocFileNode(uuid, text) {
     type: SDOC_LINK,
     doc_uuid: uuid,
     title: text,
-    display_type: INSERT_FILE_DISPLAY_TYPE[0],
+    display_type: INSERT_FILE_DISPLAY_TYPE[1],
     children: [{
       id: slugid.nice(),
       text: text || ''
@@ -50,11 +51,13 @@ export var getType = function getType(editor) {
 };
 export var insertSdocFileLink = function insertSdocFileLink(editor, text, uuid) {
   if (isMenuDisabled(editor)) return;
-
   // Selection folded or not
   var selection = editor.selection;
   if (selection == null) return;
   var isCollapsed = Range.isCollapsed(selection);
+
+  // Remove shortcut symbol,if trigger by shortcut
+  removeShortCutSymbol(editor);
   if (isCollapsed) {
     // Insert Spaces before and after sdoclinks for easy operation
     editor.insertText(' ');
@@ -121,4 +124,58 @@ export var onCopySdocLinkNode = function onCopySdocLinkNode(editor, element) {
       });
     }
   });
+};
+export var getBeforeText = function getBeforeText(editor) {
+  var selection = editor.selection;
+  if (selection == null) return {
+    beforeText: '',
+    range: null
+  };
+  var anchor = selection.anchor;
+  // Find the near text node above the current text
+  var _Editor$nodes3 = Editor.nodes(editor, {
+      match: function match(node) {
+        return Text.isText(node);
+      },
+      mode: 'lowest'
+    }),
+    _Editor$nodes4 = _slicedToArray(_Editor$nodes3, 1),
+    _Editor$nodes4$ = _slicedToArray(_Editor$nodes4[0], 2),
+    beforeNodePath = _Editor$nodes4$[1];
+  var beforeNodeStartPoint = Editor.start(editor, beforeNodePath); // The starting position of the text node
+  var range = {
+    anchor: anchor,
+    focus: beforeNodeStartPoint
+  };
+  var beforeText = Editor.string(editor, range) || '';
+  return {
+    beforeText: beforeText,
+    range: range
+  };
+};
+export var isTriggeredByShortCut = function isTriggeredByShortCut(editor) {
+  var _getBeforeText = getBeforeText(editor),
+    beforeText = _getBeforeText.beforeText;
+  return beforeText.slice(-2) === '[[';
+};
+
+// If insert operation is triggered by shortcut, remove the '[[' symbol
+export var removeShortCutSymbol = function removeShortCutSymbol(editor) {
+  // Check is trigger by short cut
+  var selection = editor.selection;
+  var _getBeforeText2 = getBeforeText(editor),
+    beforeText = _getBeforeText2.beforeText,
+    beforeRange = _getBeforeText2.range;
+  var isTrrigeredByShortCut = beforeText.slice(-3) === '[[ ';
+  isTrrigeredByShortCut && Transforms.delete(editor, {
+    at: {
+      anchor: {
+        path: beforeRange.focus.path,
+        offset: beforeText.length - 3
+      },
+      focus: _objectSpread({}, selection.focus)
+    },
+    voids: true
+  });
+  focusEditor(editor);
 };

package/dist/basic-sdk/extension/plugins/sdoc-link/plugin.js

@@ -1,8 +1,12 @@
 import { Transforms, Node, Editor } from '@seafile/slate';
-import { SDOC_LINK } from '../../constants';
+import { ELEMENT_TYPE, SDOC_LINK } from '../../constants';
+import EventBus from '../../../utils/event-bus';
+import { INTERNAL_EVENT } from '../../../constants';
+import { insertSdocFileLink, isTriggeredByShortCut } from './helpers';
 var withSdocLink = function withSdocLink(editor) {
   var isInline = editor.isInline,
-    deleteBackward = editor.deleteBackward;
+    deleteBackward = editor.deleteBackward,
+    onHotKeyDown = editor.onHotKeyDown;
   var newEditor = editor;
 
   // Rewrite isInline
@@ -35,6 +39,19 @@ var withSdocLink = function withSdocLink(editor) {
     }
     return deleteBackward(unit);
   };
+  newEditor.onHotKeyDown = function (event) {
+    var key = event.key;
+    if (key !== ' ') return onHotKeyDown && onHotKeyDown(event);
+    // If user press whitespace after '[[', open file modal
+    var eventBus = EventBus.getInstance();
+    if (isTriggeredByShortCut(newEditor)) {
+      eventBus.dispatch(INTERNAL_EVENT.INSERT_ELEMENT, {
+        type: ELEMENT_TYPE.SDOC_LINK,
+        insertSdocFileLinkCallback: insertSdocFileLink
+      });
+    }
+    return onHotKeyDown && onHotKeyDown(event);
+  };
   return newEditor;
 };
 export default withSdocLink;

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

@@ -28,4 +28,10 @@ export var TABLE_CELL_STYLE = {
 };
 export var TABLE_ROW_STYLE = {
   MIN_HEIGHT: 'min_height'
+};
+export var TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP = {
+  '#3f495d': 'sdoc-table-3f495d',
+  '#2367f2': 'sdoc-table-2367f2',
+  '#f77d21': 'sdoc-table-f77d21',
+  '#0099f4': 'sdoc-table-0099f4'
 };

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

@@ -67,8 +67,20 @@ export var generateTableRow = function generateTableRow(colsCount) {
     style: _defineProperty({}, TABLE_ROW_STYLE.MIN_HEIGHT, TABLE_ROW_MIN_HEIGHT)
   };
 };
-export var generateEmptyTable = function generateEmptyTable(editor) {
-  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0];
+
+/**
+ * @param {Editor} editor
+ * @param {Object} tableProps
+ * @param {[number,number]} tableProps.size - table size, [row,column]
+ * @param {Boolean} tableProps.alternate_highlight - is alternate highlight
+ * @param {string} tableProps.alternate_highlight_color - table alternate highlight color
+ */
+export var generateEmptyTable = function generateEmptyTable(editor, tableProps) {
+  var _tableProps$size = tableProps.size,
+    size = _tableProps$size === void 0 ? [0, 0] : _tableProps$size,
+    _tableProps$alternate = tableProps.alternate_highlight,
+    alternate_highlight = _tableProps$alternate === void 0 ? false : _tableProps$alternate,
+    alternate_highlight_color = tableProps.alternate_highlight_color;
   var rowsCount = size[0];
   var colsCount = size[1];
   var children = [];
@@ -87,7 +99,11 @@ export var generateEmptyTable = function generateEmptyTable(editor) {
     id: slugid.nice(),
     type: ELEMENT_TYPE.TABLE,
     children: children,
-    columns: columns
+    columns: columns,
+    style: {
+      alternate_highlight: alternate_highlight,
+      alternate_highlight_color: alternate_highlight_color
+    }
   };
 };
 export var insertTable = function insertTable(editor, size, selection) {
@@ -96,7 +112,9 @@ export var insertTable = function insertTable(editor, size, selection) {
   if (position !== INSERT_POSITION.AFTER) {
     if (isTableMenuDisabled(editor)) return;
   }
-  var tableNode = generateEmptyTable(editor, size);
+  var tableNode = generateEmptyTable(editor, {
+    size: size
+  });
   var validSelection = selection || editor.selection;
   var path = Editor.path(editor, validSelection);
   if (position === INSERT_POSITION.AFTER) {
@@ -926,7 +944,9 @@ var normalizeTableCell = function normalizeTableCell(cell) {
 export var normalizeTableELement = function normalizeTableELement(editor, element) {
   if (element.type !== ELEMENT_TYPE.TABLE) {
     var size = [element.children.length, element.children[0].children.length];
-    return generateEmptyTable(editor, size);
+    return generateEmptyTable(editor, {
+      size: size
+    });
   }
   var newElement = _objectSpread({}, element);
   for (var i = 0; i < element.children.length; i++) {
@@ -937,4 +957,16 @@ export var normalizeTableELement = function normalizeTableELement(editor, elemen
     newElement.children[i] = row;
   }
   return newElement;
+};
+export var insertTableByTemplate = function insertTableByTemplate(editor, alternateColor) {
+  var size = [4, 4];
+  var tableNode = generateEmptyTable(editor, {
+    size: size,
+    alternate_highlight_color: alternateColor,
+    alternate_highlight: true
+  });
+  var path = Editor.path(editor, editor.selection);
+  Transforms.insertNodes(editor, tableNode, {
+    at: [path[0]]
+  });
 };

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

@@ -4,7 +4,6 @@ import { insertTable, isTableMenuDisabled } from '../../helpers';
 import { MENUS_CONFIG_MAP, ELEMENT_TYPE, INSERT_POSITION } from '../../../../constants';
 import TableSizePopover from '../../popover/table-size-popover';
 import ElementDropdownMenuItem from '../../../../commons/dropdown-menu-item';
-import { INTERNAL_EVENT } from '../../../../../constants';
 var TableMenu = function TableMenu(_ref) {
   var editor = _ref.editor,
     readonly = _ref.readonly,
@@ -14,11 +13,6 @@ var TableMenu = function TableMenu(_ref) {
   var createTable = useCallback(function (size) {
     insertTable(editor, size, editor.selection, INSERT_POSITION.CURRENT);
   }, [editor]);
-  var openDialog = useCallback(function () {
-    eventBus.dispatch(INTERNAL_EVENT.INSERT_ELEMENT, {
-      type: ELEMENT_TYPE.TABLE
-    });
-  }, [eventBus]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ElementDropdownMenuItem, {
     disabled: disabled,
     menuConfig: menuConfig,
@@ -26,11 +20,11 @@ var TableMenu = function TableMenu(_ref) {
   }, !disabled && /*#__PURE__*/React.createElement("i", {
     className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
   })), !disabled && /*#__PURE__*/React.createElement(TableSizePopover, {
+    editor: editor,
     target: menuConfig.id,
     trigger: "hover",
     placement: "right-start",
-    createTable: createTable,
-    openDialog: openDialog
+    createTable: createTable
   }));
 };
 export default withTranslation('sdoc-editor')(TableMenu);

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

@@ -45,13 +45,20 @@
   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 {
-  min-height: 40px;
-  margin-top: 10px;
-  border-top: 1px solid #dedede;
-  padding: 8px 10px;
+  display: flex;
+  justify-content: space-between;
+  padding: 5px 10px 0;
+  min-height: 32px;
 }
 
 .sdoc-selected-table-size-popover .sdoc-selected-table-size-custom:hover {
   cursor: pointer;
+  background: #f5f5f5;
 }

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

@@ -3,25 +3,26 @@ import React, { useCallback, useRef, useState } from 'react';
 import classnames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { UncontrolledPopover } from 'reactstrap';
+import TableTemplate from '../table-template';
 import './index.css';
 var TableSizePopover = function TableSizePopover(_ref) {
-  var target = _ref.target,
+  var editor = _ref.editor,
+    target = _ref.target,
     _ref$trigger = _ref.trigger,
     trigger = _ref$trigger === void 0 ? 'legacy' : _ref$trigger,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
     popperClassName = _ref.popperClassName,
-    createTable = _ref.createTable,
-    openDialog = _ref.openDialog;
-  var minSize = [4, 4];
+    createTable = _ref.createTable;
+  var minSize = [5, 10];
   var maxSize = [10, 10];
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useState = useState([4, 4]),
+  var _useState = useState([5, 10]),
     _useState2 = _slicedToArray(_useState, 2),
     displaySize = _useState2[0],
     setDisplaySize = _useState2[1];
-  var _useState3 = useState([0, 0]),
+  var _useState3 = useState([1, 1]),
     _useState4 = _slicedToArray(_useState3, 2),
     selectedSize = _useState4[0],
     setSelectedSize = _useState4[1];
@@ -85,7 +86,7 @@ var TableSizePopover = function TableSizePopover(_ref) {
   }, [displaySize, selectedSize]);
   return /*#__PURE__*/React.createElement(UncontrolledPopover, {
     target: target,
-    className: "sdoc-selected-table-size-popover sdoc-sub-dropdown-menu",
+    className: "sdoc-selected-table-size-popover sdoc-sub-dropdown-menu sdoc-dropdown-menu",
     trigger: trigger,
     placement: placement,
     hideArrow: true,
@@ -95,12 +96,19 @@ var TableSizePopover = function TableSizePopover(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-selected-table-size-container w-100 h-100 d-flex flex-column"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-selected-table-size-tip w-100 "
-  }, "".concat(selectedSize[0], " x ").concat(selectedSize[1])), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-selected-table-tools-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "sdoc-table-template-review-btn",
+    className: "sdoc-selected-table-size-custom"
+  }, /*#__PURE__*/React.createElement("span", null, t('Table_template')), /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
+  }))), /*#__PURE__*/React.createElement("div", {
     className: "sdoc-table-size-select"
   }, renderTableSize()), /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-selected-table-size-custom",
-    onClick: openDialog
-  }, t('Customize_the_number_of_rows_and_columns'))));
+    className: "sdoc-selected-table-size-tip w-100 "
+  }, "".concat(selectedSize[0], " x ").concat(selectedSize[1])), /*#__PURE__*/React.createElement(TableTemplate, {
+    editor: editor,
+    targetId: "sdoc-table-template-review-btn"
+  })));
 };
 export default TableSizePopover;

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

@@ -0,0 +1,35 @@
+.sdoc-table-template-inner-popover {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 20px;
+  width: 430px;
+  height: 100%;
+  background-color: #fff;
+}
+
+.sdoc-table-template-view-table {
+  padding: 10px;
+  margin: 10px 5px;
+  border: 1px solid #e2e3e6;
+  cursor: pointer;
+}
+
+.sdoc-table-template-view-table .sdoc-table-template-row .sdoc-table-template-cell {
+  width: 40px;
+  height: 20px;
+  border-left: 1px solid #e2e3e6;
+  border-right: 1px solid #e2e3e6;
+}
+
+.sdoc-table-template-view-table .sdoc-table-template-row {
+  display: flex;
+}
+
+.sdoc-table-template-view-table .sdoc-table-template-row:first-child .sdoc-table-template-cell {
+  border: none;
+  border-top: 1px solid #e2e3e6;
+}
+
+.sdoc-table-template-view-table .sdoc-table-template-row:last-child .sdoc-table-template-cell {
+  border-bottom: 1px solid #e2e3e6;
+}

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

@@ -0,0 +1,33 @@
+import React, { useCallback, useMemo } from 'react';
+import { UncontrolledPopover } from 'reactstrap';
+import { TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP } from '../../constants';
+import SmapleTable from './sample-table';
+import { insertTableByTemplate } from '../../helpers';
+import './index.css';
+import '../../render/alternate-color.css';
+var TableTemplate = function TableTemplate(_ref) {
+  var editor = _ref.editor,
+    targetId = _ref.targetId;
+  var tableTemplatePreviewList = useMemo(function () {
+    return Reflect.ownKeys(TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP);
+  }, []);
+  var handleClickTemplate = useCallback(function (e, alternateColor) {
+    insertTableByTemplate(editor, alternateColor);
+  }, [editor]);
+  return /*#__PURE__*/React.createElement(UncontrolledPopover, {
+    target: targetId,
+    trigger: "hover",
+    placement: "right-start",
+    hideArrow: true,
+    fade: false,
+    className: "sdoc-sub-dropdown-menu sdoc-table-template-popover",
+    innerClassName: "sdoc-table-template-inner-popover"
+  }, tableTemplatePreviewList.map(function (alternateColor, index) {
+    return /*#__PURE__*/React.createElement(SmapleTable, {
+      key: alternateColor + index,
+      alternateColor: alternateColor,
+      onClickTemplate: handleClickTemplate
+    });
+  }));
+};
+export default TableTemplate;

package/dist/basic-sdk/extension/plugins/table/popover/table-template/sample-table.js

@@ -0,0 +1,33 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP } from '../../constants';
+import './index.css';
+var SmapleTable = function SmapleTable(_ref) {
+  var alternateColor = _ref.alternateColor,
+    onClickTemplate = _ref.onClickTemplate;
+  // generate table
+  var renderTableRow = useCallback(function (row, column) {
+    return new Array(row).fill(null).map(function (_, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-table-template-row table-row",
+        key: "sdoc-template-table-row-".concat(index),
+        onClick: function onClick(e) {
+          return onClickTemplate(e, alternateColor);
+        }
+      }, new Array(column).fill(null).map(function (_, index) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "sdoc-table-template-cell",
+          key: "sdoc-template-table-cell-".concat(index)
+        });
+      }));
+    });
+  }, [onClickTemplate, alternateColor]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-table-template-view-table ".concat(TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP[alternateColor])
+  }, renderTableRow(4, 4));
+};
+SmapleTable.proptoTypes = {
+  alternateColor: PropTypes.string.isRequired,
+  onClickTemplate: PropTypes.func.isRequired
+};
+export default SmapleTable;

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

@@ -0,0 +1,37 @@
+/* type1 */
+.sdoc-table-3f495d .table-row:nth-child(2n + 1) {
+  background-color: #f1f3f6;
+}
+
+.sdoc-table-3f495d .table-row:first-child {
+  background-color: #3f495d;
+  color: white;
+}
+
+/* type2 */
+.sdoc-table-2367f2 .table-row:nth-child(2n + 1) {
+  background-color: #e1edff;
+}
+
+.sdoc-table-2367f2 .table-row:first-child {
+  background-color: #2367f2;
+  color: white;
+}
+
+/* type3 */
+.sdoc-table-f77d21 .table-row:nth-child(2n + 1) {
+  background-color: #fff1e8;
+}
+
+.sdoc-table-f77d21 .table-row:first-child {
+  background-color: #f77d21;
+}
+
+/* type4 */
+.sdoc-table-0099f4 .table-row:nth-child(2n + 1) {
+  background-color: #e1f5ff;
+}
+
+.sdoc-table-0099f4 .table-row:first-child {
+  background-color: #0099f4;
+}

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

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useRef, useState, useEffect, useCallback } from 'react';
@@ -5,7 +6,7 @@ import classnames from 'classnames';
 import throttle from 'lodash.throttle';
 import { useSelected, useSlateStatic, useReadOnly } from '@seafile/slate-react';
 import { Transforms, Editor } from '@seafile/slate';
-import { EMPTY_SELECTED_RANGE } from '../constants';
+import { EMPTY_SELECTED_RANGE, TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP } from '../constants';
 import { ResizeHandlersContext, TableSelectedRangeContext, SettingSelectRangeContext } from './hooks';
 import EventBus from '../../../../utils/event-bus';
 import { INTERNAL_EVENT } from '../../../../constants';
@@ -17,7 +18,9 @@ import TableRoot from './table-root';
 import TableHeader from './table-header';
 import { findPath } from '../../../core';
 import './index.css';
+import './alternate-color.css';
 var Table = function Table(_ref) {
+  var _element$style, _element$style2;
   var className = _ref.className,
     attributes = _ref.attributes,
     children = _ref.children,
@@ -181,7 +184,7 @@ var Table = function Table(_ref) {
     table: element,
     setSelectedRange: setSelectedRangeByClick
   }), /*#__PURE__*/React.createElement("div", {
-    className: tableContainerClassName,
+    className: classnames(tableContainerClassName, _defineProperty({}, TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP[element === null || element === void 0 ? void 0 : (_element$style = element.style) === null || _element$style === void 0 ? void 0 : _element$style.alternate_highlight_color], element === null || element === void 0 ? void 0 : (_element$style2 = element.style) === null || _element$style2 === void 0 ? void 0 : _element$style2.alternate_highlight)),
     onMouseDown: onMouseDown,
     ref: table,
     "data-id": element.id
@@ -197,7 +200,6 @@ function renderTable(props) {
       attributes = props.attributes,
       children = props.children,
       element = props.element;
-
     // eslint-disable-next-line react-hooks/rules-of-hooks
     var editor = useSlateStatic();
     return /*#__PURE__*/React.createElement(TableRoot, {

package/dist/basic-sdk/extension/toolbar/side-toolbar/insert-block-menu.js

@@ -52,15 +52,6 @@ var InsertBlockMenu = function InsertBlockMenu(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, insertPosition, slateNode]);
-  var openTableDialog = useCallback(function () {
-    var eventBus = EventBus.getInstance();
-    eventBus.dispatch(INTERNAL_EVENT.INSERT_ELEMENT, {
-      type: ELEMENT_TYPE.TABLE,
-      insertPosition: insertPosition
-    });
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [insertPosition]);
   var onInsertList = useCallback(function (type) {
     toggleList(editor, type, insertPosition);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -82,12 +73,12 @@ var InsertBlockMenu = function InsertBlockMenu(_ref) {
   }, /*#__PURE__*/React.createElement("i", {
     className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
   }), /*#__PURE__*/React.createElement(TableSizePopover, {
+    editor: editor,
     target: "sdoc-side-menu-item-table",
     trigger: "hover",
     placement: "right-start",
     popperClassName: "sdoc-side-menu-table-size",
-    createTable: createTable,
-    openDialog: openTableDialog
+    createTable: createTable
   })), /*#__PURE__*/React.createElement(DropdownMenuItem, {
     menuConfig: _objectSpread({}, SIDE_INSERT_MENUS_CONFIG[ELEMENT_TYPE.LINK]),
     onClick: openLinkDialog

package/dist/components/doc-operations/revision-operations/view-changes/index.js

@@ -1,15 +1,59 @@
-import React, { useCallback } from 'react';
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import React, { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import Switch from '../../../switch';
 import Tooltip from '../../../tooltip';
+import { REVISION_DIFF_KEY, REVISION_DIFF_VALUE } from '../../../../basic-sdk/constants';
 import './index.css';
 var ViewChanges = function ViewChanges(_ref) {
   var isShowChanges = _ref.isShowChanges,
     propsOnViewChangesToggle = _ref.onViewChangesToggle;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  useEffect(function () {
+    var url = new URL(window.location.href);
+    var searchParams = new URLSearchParams(url.search);
+    if (!searchParams.has(REVISION_DIFF_KEY)) return;
+    var firstLoadValue = searchParams.get(REVISION_DIFF_KEY);
+    if (firstLoadValue === REVISION_DIFF_VALUE) {
+      propsOnViewChangesToggle(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   var onViewChangesToggle = useCallback(function () {
-    propsOnViewChangesToggle(!isShowChanges);
+    var nextIsShowChanges = !isShowChanges;
+    var url = new URL(window.location.href);
+    var searchParams = new URLSearchParams(url.search);
+    var newParamsString = '';
+    var _iterator = _createForOfIteratorHelper(searchParams.entries()),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var item = _step.value;
+        if (item[0] !== REVISION_DIFF_KEY) {
+          if (newParamsString) {
+            newParamsString = newParamsString + "&".concat(item[0], "=").concat(item[1]);
+          } else {
+            newParamsString = "".concat(item[0], "=").concat(item[1]);
+          }
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    if (!searchParams.has(REVISION_DIFF_KEY) && nextIsShowChanges) {
+      if (newParamsString) {
+        newParamsString = newParamsString + "&".concat(REVISION_DIFF_KEY, "=").concat(REVISION_DIFF_VALUE);
+      } else {
+        newParamsString = "".concat(REVISION_DIFF_KEY, "=").concat(REVISION_DIFF_VALUE);
+      }
+    }
+    var validPathName = url.pathname.endsWith('/') ? url.pathname : url.pathname + '/';
+    var newURL = "".concat(url.origin).concat(validPathName).concat(newParamsString ? '?' + newParamsString : '');
+    window.history.replaceState(null, null, newURL);
+    propsOnViewChangesToggle(nextIsShowChanges);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isShowChanges, propsOnViewChangesToggle]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {

package/package.json

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

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

@@ -410,5 +410,6 @@
   "revision": "revision",
   "xxx_added_a_new_comment": "{{author}} added a new comment",
   "xxx_added_a_reply": "{{author}} added a reply",
-  "New": "New"
+  "New": "New",
+  "Table_template": "Table template"
 }

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

@@ -410,5 +410,6 @@
   "revision": "修订稿",
   "xxx_added_a_new_comment": "{{author}} 添加了一条新评论",
   "xxx_added_a_reply": "{{author}} 添加了一条回复",
-  "New": "新"
+  "New": "新",
+  "Table_template": "表格模板"
 }