@seafile/sdoc-editor 1.0.174 → 1.0.176

package/dist/basic-sdk/assets/css/dropdown-menu.css

@@ -112,3 +112,16 @@
 .sdoc-sub-dropdown-menu .sdoc-insert-element-table-size-wrapper {
   left: 227px !important;
 }
+
+.mobile-login .sdoc-dropdown-menu {
+  padding: 0 !important;
+}
+
+.mobile-login .sdoc-dropdown-menu .sdoc-dropdown-menu-item {
+  padding: 16px !important;
+  height: 47px !important;
+}
+
+.mobile-login .sdoc-dropdown-menu .sdoc-operator-folder-divider {
+  margin: 0 !important;
+}

package/dist/basic-sdk/assets/css/layout.css

@@ -42,7 +42,8 @@
 }
 
 .sdoc-editor-container.mobile .sdoc-editor-content.readonly.no-outline {
-  min-width: 100%;
+  min-width: 100% !important;
+  width: 100% !important;
 }
 
 .sdoc-editor-container .sdoc-scroll-container {

package/dist/basic-sdk/assets/css/sdoc-viewer.css

@@ -4,7 +4,8 @@
 
 .sdoc-editor-container.mobile .sdoc-editor-content.readonly .sdoc-article-container {
   padding: 0;
-  width: auto;
+  width: 100% !important;
+  min-width: 100% !important;
 }
 
 .sdoc-editor-container.mobile .sdoc-editor-content.readonly .article {

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

@@ -91,7 +91,7 @@ const WikiFileLinkInsertDialog = _ref => {
     getPosition();
   }, 100);
   const getHistoryFiles = (0, _react.useCallback)(isCalculatedByFiles => {
-    let files = _utils.LocalStorage.getItem('wiki-recent-files') || [];
+    let files = (0, _utils.getLocalStorageFiles)(_utils.LocalStorage.getItem('wiki-recent-files') || []);
     if (isCalculatedByFiles) {
       const newFiles = (0, _utils.getMaximumCapacity)(files);
       // Can accommodate all without showing more operations
@@ -202,7 +202,7 @@ const WikiFileLinkInsertDialog = _ref => {
   }, [closeDialog, editor, element]);
   const onShowMoreWiki = (0, _react.useCallback)(e => {
     e.stopPropagation();
-    const recentFiles = _utils.LocalStorage.getItem('wiki-recent-files') || [];
+    const recentFiles = (0, _utils.getLocalStorageFiles)(_utils.LocalStorage.getItem('wiki-recent-files') || []);
     setFiles(recentFiles);
     setHiddenMoreMenu(true);
   }, []);

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

@@ -367,6 +367,12 @@ Object.defineProperty(exports, "SIDE_OTHER_OPERATIONS_MENUS_SEARCH_MAP", {
     return _menusConfig.SIDE_OTHER_OPERATIONS_MENUS_SEARCH_MAP;
   }
 });
+Object.defineProperty(exports, "SIDE_QUICK_INSERT_MENUS_SEARCH_MAP", {
+  enumerable: true,
+  get: function () {
+    return _menusConfig.SIDE_QUICK_INSERT_MENUS_SEARCH_MAP;
+  }
+});
 Object.defineProperty(exports, "SIDE_TRANSFORM_MENUS_CONFIG", {
   enumerable: true,
   get: function () {

package/dist/basic-sdk/extension/constants/menus-config.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UNDO = exports.TEXT_STYLE_MORE = exports.TEXT_STYLE_MAP = exports.TEXT_STYLE = exports.TEXT_ALIGN = exports.SIDE_TRANSFORM_MENUS_SEARCH_MAP = exports.SIDE_TRANSFORM_MENUS_CONFIG = exports.SIDE_OTHER_OPERATIONS_MENUS_SEARCH_MAP = exports.SIDE_INSERT_MENUS_SEARCH_MAP = exports.SIDE_INSERT_MENUS_CONFIG = exports.SEARCH_REPLACE = exports.REMOVE_TABLE = exports.REDO = exports.MENUS_CONFIG_MAP = exports.ITALIC = exports.COMBINE_CELL = exports.CLEAR_FORMAT = exports.BOLD = void 0;
+exports.UNDO = exports.TEXT_STYLE_MORE = exports.TEXT_STYLE_MAP = exports.TEXT_STYLE = exports.TEXT_ALIGN = exports.SIDE_TRANSFORM_MENUS_SEARCH_MAP = exports.SIDE_TRANSFORM_MENUS_CONFIG = exports.SIDE_QUICK_INSERT_MENUS_SEARCH_MAP = exports.SIDE_OTHER_OPERATIONS_MENUS_SEARCH_MAP = exports.SIDE_INSERT_MENUS_SEARCH_MAP = exports.SIDE_INSERT_MENUS_CONFIG = exports.SEARCH_REPLACE = exports.REMOVE_TABLE = exports.REDO = exports.MENUS_CONFIG_MAP = exports.ITALIC = exports.COMBINE_CELL = exports.CLEAR_FORMAT = exports.BOLD = void 0;
 var _color = require("./color");
 var _elementType = require("./element-type");
 const UNDO = exports.UNDO = 'undo';
@@ -432,6 +432,28 @@ const SIDE_INSERT_MENUS_SEARCH_MAP = exports.SIDE_INSERT_MENUS_SEARCH_MAP = {
   [_elementType.SEATABLE_COLUMN]: 'SeaTable_column',
   [_elementType.SEATABLE_TABLE]: 'SeaTable_table'
 };
+const SIDE_QUICK_INSERT_MENUS_SEARCH_MAP = exports.SIDE_QUICK_INSERT_MENUS_SEARCH_MAP = {
+  [_elementType.IMAGE]: 'Image',
+  [_elementType.VIDEO]: 'Video',
+  [_elementType.TABLE]: 'Table',
+  [_elementType.COLUMN]: 'Column',
+  [_elementType.TWO_COLUMN]: 'Two_column',
+  [_elementType.THREE_COLUMN]: 'Three_column',
+  [_elementType.FOUR_COLUMN]: 'Four_column',
+  [_elementType.LINK]: 'Link',
+  [_elementType.CODE_BLOCK]: 'Code_block',
+  [_elementType.CALL_OUT]: 'Callout',
+  [_elementType.UNORDERED_LIST]: 'Unordered_list',
+  [_elementType.ORDERED_LIST]: 'Ordered_list',
+  [_elementType.CHECK_LIST_ITEM]: 'Check_list',
+  [_elementType.PARAGRAPH]: 'Paragraph',
+  [_elementType.HEADER1]: 'Header_one',
+  [_elementType.HEADER2]: 'Header_two',
+  [_elementType.HEADER3]: 'Header_three',
+  [_elementType.HEADER4]: 'Header_four',
+  [_elementType.SEATABLE_COLUMN]: 'SeaTable_column',
+  [_elementType.SEATABLE_TABLE]: 'SeaTable_table'
+};
 
 // Other operations menu config
 const SIDE_OTHER_OPERATIONS_MENUS_SEARCH_MAP = exports.SIDE_OTHER_OPERATIONS_MENUS_SEARCH_MAP = {

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

@@ -32,7 +32,7 @@ const RenderQuickInsert = (_ref, editor, readonly) => {
   const insertElmRef = (0, _react.useRef)(null);
   const aboveBlockNode = (0, _core.getAboveBlockNode)(editor);
   const isEmptyNode = (0, _helpers.isVoidNode)(aboveBlockNode === null || aboveBlockNode === void 0 ? void 0 : aboveBlockNode[0]);
-  const [isShowPopover] = (0, _react.useState)((0, _helper.isSelectionSameWithInsert)(editor, element));
+  const [isShowPopover, setIsShowPopover] = (0, _react.useState)((0, _helper.isSelectionSameWithInsert)(editor, element));
   const handleClick = (0, _react.useCallback)(e => {
     // Click the search input
     if (sideMenuRef.current.contains(e.target) && e.target.tagName === 'INPUT') return;
@@ -80,6 +80,9 @@ const RenderQuickInsert = (_ref, editor, readonly) => {
       at: _slateReact.ReactEditor.findPath(editor, element)
     });
   };
+  const handleClosePopover = (0, _react.useCallback)(() => {
+    setIsShowPopover(false);
+  }, []);
   return /*#__PURE__*/_react.default.createElement("span", {
     ref: insertElmRef
   }, /*#__PURE__*/_react.default.createElement("span", Object.assign({}, attributes, {
@@ -94,7 +97,8 @@ const RenderQuickInsert = (_ref, editor, readonly) => {
     isEmptyNode: isEmptyNode,
     insertPosition: isEmptyNode ? _constants.INSERT_POSITION.CURRENT : _constants.INSERT_POSITION.AFTER,
     slateNode: aboveBlockNode === null || aboveBlockNode === void 0 ? void 0 : aboveBlockNode[0],
-    callback: handleInsertBlock
+    callback: handleInsertBlock,
+    handleClosePopover: handleClosePopover
   })))));
 };
 var _default = exports.default = RenderQuickInsert;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TABLE_ROW_STYLE = exports.TABLE_ROW_MIN_HEIGHT = exports.TABLE_MAX_ROWS = exports.TABLE_MAX_COLUMNS = exports.TABLE_ELEMENT_SPAN = exports.TABLE_ELEMENT_POSITION = exports.TABLE_ELEMENT = exports.TABLE_CELL_STYLE = exports.TABLE_CELL_MIN_WIDTH = exports.TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP = exports.SELECTED_TABLE_CELL_BACKGROUND_COLOR = exports.RESIZE_MASK_TOP = exports.RESIZE_MASK_RIGHT = exports.RESIZE_MASK_LEFT = exports.RESIZE_MASK_BOTTOM = exports.RESIZE_HANDLER_ROW = exports.RESIZE_HANDLER_FIRST_COLUMN = exports.RESIZE_HANDLER_COLUMN = exports.INHERIT_CELL_STYLE_WHEN_SELECT_SINGLE = exports.INHERIT_CELL_STYLE_WHEN_SELECT_MULTIPLE = exports.EMPTY_SELECTED_RANGE = exports.DRAG_HANDLER_ROW = exports.DRAG_HANDLER_COLUMN = exports.CELL_SELECTED = void 0;
+exports.TABLE_TEMPLATE_POSITION_MAP = exports.TABLE_ROW_STYLE = exports.TABLE_ROW_MIN_HEIGHT = exports.TABLE_MAX_ROWS = exports.TABLE_MAX_COLUMNS = exports.TABLE_ELEMENT_SPAN = exports.TABLE_ELEMENT_POSITION = exports.TABLE_ELEMENT = exports.TABLE_CELL_STYLE = exports.TABLE_CELL_MIN_WIDTH = exports.TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP = exports.SELECTED_TABLE_CELL_BACKGROUND_COLOR = exports.RESIZE_MASK_TOP = exports.RESIZE_MASK_RIGHT = exports.RESIZE_MASK_LEFT = exports.RESIZE_MASK_BOTTOM = exports.RESIZE_HANDLER_ROW = exports.RESIZE_HANDLER_FIRST_COLUMN = exports.RESIZE_HANDLER_COLUMN = exports.INHERIT_CELL_STYLE_WHEN_SELECT_SINGLE = exports.INHERIT_CELL_STYLE_WHEN_SELECT_MULTIPLE = exports.EMPTY_SELECTED_RANGE = exports.DRAG_HANDLER_ROW = exports.DRAG_HANDLER_COLUMN = exports.CELL_SELECTED = void 0;
 const TABLE_MAX_ROWS = exports.TABLE_MAX_ROWS = 500;
 const TABLE_MAX_COLUMNS = exports.TABLE_MAX_COLUMNS = 50;
 const EMPTY_SELECTED_RANGE = exports.EMPTY_SELECTED_RANGE = {
@@ -44,6 +44,12 @@ const TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP = exports.TABLE_ALTERNATE_HIGHLIGHT_CL
   'sdoc-table-header-f77d21': 'sdoc-table-body-f77d21',
   'sdoc-table-header-0099f4': 'sdoc-table-body-0099f4'
 };
+const TABLE_TEMPLATE_POSITION_MAP = exports.TABLE_TEMPLATE_POSITION_MAP = {
+  '[0,0]': 'sdoc-table-header-3f495d',
+  '[1,0]': 'sdoc-table-header-2367f2',
+  '[0,1]': 'sdoc-table-header-f77d21',
+  '[1,1]': 'sdoc-table-header-0099f4'
+};
 const INHERIT_CELL_STYLE_WHEN_SELECT_SINGLE = exports.INHERIT_CELL_STYLE_WHEN_SELECT_SINGLE = ['background_color'];
 const INHERIT_CELL_STYLE_WHEN_SELECT_MULTIPLE = exports.INHERIT_CELL_STYLE_WHEN_SELECT_MULTIPLE = ['background_color', 'text_align'];
 const RESIZE_MASK_TOP = exports.RESIZE_MASK_TOP = 'top';

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

@@ -11,6 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _reactI18next = require("react-i18next");
 var _reactstrap = require("reactstrap");
 var _tableTemplate = _interopRequireDefault(require("../table-template"));
+var _keyCodes = _interopRequireDefault(require("../../../../../../constants/key-codes"));
 require("./index.css");
 const TableSizePopover = _ref => {
   let {
@@ -19,15 +20,22 @@ const TableSizePopover = _ref => {
     trigger = 'legacy',
     placement = 'bottom-start',
     popperClassName,
-    createTable
+    createTable,
+    tableSizeRef,
+    handleClosePopover,
+    callback
   } = _ref;
   const minSize = [5, 10];
   const maxSize = [10, 10];
   const [displaySize, setDisplaySize] = (0, _react.useState)([5, 10]);
   const [selectedSize, setSelectedSize] = (0, _react.useState)([1, 1]);
   const ref = (0, _react.useRef)(null);
-  const onMouseEnter = (0, _react.useCallback)(function (event) {
-    let cellPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [1, 1];
+  const templateRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    ref.current['firstRender'] = true;
+  }, []);
+  const onHandleTableSize = (0, _react.useCallback)(function () {
+    let cellPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [1, 1];
     let newDisplaySize = displaySize.slice(0);
     const cellPositionX = cellPosition[0];
     const cellPositionY = cellPosition[1];
@@ -50,6 +58,137 @@ const TableSizePopover = _ref => {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedSize, ref]);
+  const onTemplateItemSelectedStyle = (0, _react.useCallback)(color => {
+    const templateEl = document.getElementById('sdoc-table-template-review-btn');
+    templateEl.style['backgroundColor'] = color;
+  }, []);
+  const handleSizeDown = (0, _react.useCallback)(e => {
+    const {
+      keyCode
+    } = e;
+    const {
+      UpArrow,
+      DownArrow,
+      Enter,
+      RightArrow,
+      LeftArrow
+    } = _keyCodes.default;
+    const newSelectedSize = selectedSize.slice(0);
+    if (keyCode === Enter) {
+      e.preventDefault();
+      onCreateTable();
+    }
+    if (keyCode === UpArrow) {
+      e.preventDefault();
+      if (newSelectedSize[0] > 1) {
+        newSelectedSize[0] = newSelectedSize[0] - 1;
+      }
+    }
+    if (keyCode === DownArrow) {
+      e.preventDefault();
+      newSelectedSize[0] = newSelectedSize[0] + 1;
+    }
+    if (keyCode === LeftArrow) {
+      e.preventDefault();
+      if (newSelectedSize[1] > 1) {
+        newSelectedSize[1] = newSelectedSize[1] - 1;
+      }
+    }
+    if (keyCode === RightArrow) {
+      e.preventDefault();
+      newSelectedSize[1] = newSelectedSize[1] + 1;
+    }
+    onHandleTableSize(newSelectedSize);
+  }, [onCreateTable, onHandleTableSize, selectedSize]);
+  const handleTableSizeKeyDown = (0, _react.useCallback)(e => {
+    if (document.getElementsByClassName('sdoc-table-template-popover')[0]) {
+      templateRef.current.handleTableTemplateKeyDown(e);
+      return;
+    }
+    const {
+      keyCode
+    } = e;
+    const {
+      UpArrow,
+      DownArrow,
+      Enter,
+      RightArrow,
+      LeftArrow,
+      Esc
+    } = _keyCodes.default;
+    const isInitSize = selectedSize[0] === 1 && selectedSize[1] === 1;
+    const templateEl = document.getElementById('sdoc-table-template-review-btn');
+    // Currently focusing on the template menu item
+    if (templateEl.style['background-color']) {
+      if (keyCode === DownArrow) {
+        e.preventDefault();
+        onTemplateItemSelectedStyle('');
+      }
+      // exit table size popover
+      if (keyCode === LeftArrow) {
+        e.preventDefault();
+        onTemplateItemSelectedStyle('');
+        ref.current['firstRender'] = true;
+        ref.current.toggle();
+      }
+      if (keyCode === Enter) {
+        e.preventDefault();
+        onTemplateItemSelectedStyle('');
+        templateRef.current.uncontrolledTemplatePopoverRef.current.toggle();
+      }
+      if (keyCode === Esc) {
+        e.preventDefault();
+        handleClosePopover();
+      }
+      return;
+    }
+
+    // left and right
+    if (keyCode === LeftArrow) {
+      e.preventDefault();
+      handleSizeDown(e);
+    }
+    if (keyCode === RightArrow) {
+      e.preventDefault();
+      if (ref.current['firstRender']) {
+        ref.current['firstRender'] = false;
+        onTemplateItemSelectedStyle('#e3e3e3');
+        return;
+      }
+      handleSizeDown(e);
+    }
+
+    // up and down
+    if (keyCode === UpArrow) {
+      e.preventDefault();
+      if (isInitSize) {
+        onTemplateItemSelectedStyle('#e3e3e3');
+      } else {
+        handleSizeDown(e);
+      }
+    }
+    if (keyCode === DownArrow) {
+      e.preventDefault();
+      onTemplateItemSelectedStyle('');
+      handleSizeDown(e);
+    }
+
+    // enter
+    if (keyCode === Enter) {
+      e.preventDefault();
+      handleSizeDown(e);
+    }
+    if (keyCode === Esc) {
+      e.preventDefault();
+      handleClosePopover();
+    }
+  }, [handleClosePopover, handleSizeDown, onTemplateItemSelectedStyle, selectedSize]);
+  (0, _react.useImperativeHandle)(tableSizeRef, () => {
+    return {
+      handleTableSizeKeyDown: handleTableSizeKeyDown,
+      uncontrolledPopoverRef: ref
+    };
+  });
   const renderTableSize = (0, _react.useCallback)(() => {
     let tableSize = [];
     for (let i = 1; i <= displaySize[0]; i++) {
@@ -62,7 +201,7 @@ const TableSizePopover = _ref => {
             'active': isSelectedChild
           }),
           onClick: onCreateTable,
-          onMouseEnter: event => onMouseEnter(event, [i, j])
+          onMouseEnter: () => onHandleTableSize([i, j])
         });
         children.push(child);
       }
@@ -97,8 +236,11 @@ const TableSizePopover = _ref => {
   }, renderTableSize()), /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-selected-table-size-tip w-100 "
   }, `${selectedSize[0]} x ${selectedSize[1]}`), /*#__PURE__*/_react.default.createElement(_tableTemplate.default, {
+    templateRef: templateRef,
     editor: editor,
-    targetId: "sdoc-table-template-review-btn"
+    targetId: "sdoc-table-template-review-btn",
+    handleClosePopover: handleClosePopover,
+    callback: callback
   })));
 };
 var _default = exports.default = TableSizePopover;

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

@@ -18,6 +18,10 @@
   box-shadow: 0 0 3px 2px #e2e3e6;
 }
 
+.sdoc-table-template-view-table.active {
+  box-shadow: 0 0 3px 2px #e2e3e6;
+}
+
 .sdoc-table-template-view-table .sdoc-table-template-row .sdoc-table-template-cell {
   width: 28px;
   height: 15px;

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

@@ -11,17 +11,105 @@ var _reactstrap = require("reactstrap");
 var _constants = require("../../constants");
 var _sampleTable = _interopRequireDefault(require("./sample-table"));
 var _helpers = require("../../helpers");
+var _keyCodes = _interopRequireDefault(require("../../../../../../constants/key-codes"));
 require("./index.css");
 require("../../render/alternate-color.css");
 const TableTemplate = _ref => {
   let {
     editor,
-    targetId
+    targetId,
+    templateRef,
+    handleClosePopover,
+    callback
   } = _ref;
+  const ref = (0, _react.useRef)(null);
+  const [position, setPosition] = (0, _react.useState)([-1, -1]);
   const tableTemplatePreviewList = (0, _react.useMemo)(() => Reflect.ownKeys(_constants.TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP), []);
-  const handleClickTemplate = (0, _react.useCallback)((e, alternateColor) => {
+  const handleClickTemplate = (0, _react.useCallback)(alternateColor => {
+    callback && callback();
     (0, _helpers.insertTableByTemplate)(editor, alternateColor);
-  }, [editor]);
+  }, [callback, editor]);
+  const handleTableTemplateKeyDown = (0, _react.useCallback)(e => {
+    const {
+      keyCode
+    } = e;
+    const {
+      UpArrow,
+      DownArrow,
+      Enter,
+      RightArrow,
+      LeftArrow,
+      Esc
+    } = _keyCodes.default;
+    const position = ref.current.position;
+    const isInitPostion = position[0] === -1 && position[1] === -1;
+
+    // left and right
+    if (keyCode === LeftArrow) {
+      e.preventDefault();
+      if (position[0] > 0) {
+        const newPosition = [position[0] - 1, position[1]];
+        ref.current.position = newPosition;
+        setPosition(newPosition);
+      }
+    }
+    if (keyCode === RightArrow) {
+      e.preventDefault();
+      // Enter
+      if (isInitPostion) {
+        ref.current.position = [0, 0];
+        setPosition([0, 0]);
+        return;
+      }
+      if (position[0] < 1) {
+        const newPosition = [position[0] + 1, position[1]];
+        ref.current.position = newPosition;
+        setPosition(newPosition);
+      }
+    }
+
+    // up and down
+    if (keyCode === UpArrow) {
+      e.preventDefault();
+      if (isInitPostion) return;
+      if (position[1] > 0) {
+        const newPosition = [position[0], position[1] - 1];
+        ref.current.position = newPosition;
+        setPosition(newPosition);
+      }
+    }
+    if (keyCode === DownArrow) {
+      e.preventDefault();
+      if (isInitPostion) return;
+      if (position[1] < 1) {
+        const newPosition = [position[0], position[1] + 1];
+        ref.current.position = newPosition;
+        setPosition(newPosition);
+      }
+    }
+
+    // enter
+    if (keyCode === Enter) {
+      e.preventDefault();
+      if (isInitPostion) return;
+      const key = JSON.stringify(position);
+      handleClickTemplate(_constants.TABLE_TEMPLATE_POSITION_MAP[key]);
+      handleClosePopover();
+    }
+    if (keyCode === Esc) {
+      e.preventDefault();
+      handleClosePopover();
+    }
+  }, [handleClickTemplate, handleClosePopover]);
+  (0, _react.useImperativeHandle)(templateRef, () => {
+    return {
+      handleTableTemplateKeyDown: handleTableTemplateKeyDown,
+      uncontrolledTemplatePopoverRef: ref
+    };
+  });
+  (0, _react.useEffect)(() => {
+    ref.current.position = [-1, -1];
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
     target: targetId,
     trigger: "hover",
@@ -29,9 +117,11 @@ const TableTemplate = _ref => {
     hideArrow: true,
     fade: false,
     className: "sdoc-sub-dropdown-menu sdoc-table-template-popover",
-    innerClassName: "sdoc-table-template-inner-popover"
+    innerClassName: "sdoc-table-template-inner-popover",
+    ref: ref
   }, tableTemplatePreviewList.map((alternateColor, index) => /*#__PURE__*/_react.default.createElement(_sampleTable.default, {
     key: alternateColor + index,
+    curPositon: position,
     alternateColor: alternateColor,
     onClickTemplate: handleClickTemplate
   })));

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

@@ -8,24 +8,33 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _helpers = require("../../helpers");
+var _constants = require("../../constants");
 require("./index.css");
 const SampleTable = _ref => {
   let {
     alternateColor,
-    onClickTemplate
+    onClickTemplate,
+    curPositon
   } = _ref;
   // generate table
   const renderTableRow = (0, _react.useCallback)((row, column) => new Array(row).fill(null).map((_, index) => /*#__PURE__*/_react.default.createElement("div", {
     className: `sdoc-table-template-row table-row ${(0, _helpers.getCellHighlightClassName)(alternateColor, index)}`,
     key: `sdoc-template-table-row-${index}`,
-    onClick: e => onClickTemplate(e, alternateColor)
+    onClick: () => {
+      onClickTemplate(alternateColor);
+    }
   }, new Array(column).fill(null).map((_, index) => /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-table-template-cell",
     key: `sdoc-template-table-cell-${index}`
   })))), [onClickTemplate, alternateColor]);
+  const key = JSON.stringify(curPositon);
+  const isActive = _constants.TABLE_TEMPLATE_POSITION_MAP[key] === alternateColor;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-table-template-view-table"
+    className: (0, _classnames.default)('sdoc-table-template-view-table', {
+      'active': isActive
+    })
   }, renderTableRow(4, 4));
 };
 SampleTable.protoTypes = {

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

@@ -25,8 +25,8 @@ var _helper = require("../../plugins/callout/helper");
 var _keyCodes = _interopRequireDefault(require("../../../../constants/key-codes"));
 var _const = require("./const");
 var _core = require("../../core");
-var _helpers5 = require("../../plugins/blockquote/helpers");
 var _helper2 = require("../../plugins/multi-column/helper");
+var _utils = require("../../utils");
 require("./style.css");
 const QuickInsertBlockMenu = _ref => {
   let {
@@ -34,12 +34,15 @@ const QuickInsertBlockMenu = _ref => {
     slateNode,
     callback,
     isEmptyNode,
+    handleClosePopover,
     t
   } = _ref;
   const editor = (0, _slateReact.useSlateStatic)();
+  const tableSizeRef = (0, _react.useRef)(null);
+  const inputWrapperRef = (0, _react.useRef)(null);
   const downDownWrapperRef = (0, _react.useRef)(null);
-  const [currentSelectIndex, setCurrentSelectIndex] = (0, _react.useState)(0);
-  const [quickInsertMenuSearchMap, setQuickInsertMenuSearchMap] = (0, _react.useState)(_constants.SIDE_INSERT_MENUS_SEARCH_MAP);
+  const [currentSelectIndex, setCurrentSelectIndex] = (0, _react.useState)(-1); // -1 is input focus position
+  const [quickInsertMenuSearchMap, setQuickInsertMenuSearchMap] = (0, _react.useState)(_constants.SIDE_QUICK_INSERT_MENUS_SEARCH_MAP);
   const onInsertImageToggle = (0, _react.useCallback)(() => {
     callback && callback();
     const eventBus = _eventBus.default.getInstance();
@@ -135,10 +138,6 @@ const QuickInsertBlockMenu = _ref => {
     });
     return !!callout;
   }, [editor]);
-  const onInsertBlockQuote = (0, _react.useCallback)(() => {
-    callback && callback();
-    (0, _helpers5.insertBlockQuote)(editor, false);
-  }, [callback, editor]);
   const createMultiColumn = (0, _react.useCallback)(type => {
     callback && callback();
     const newInsertPosition = slateNode.type === _constants.ELEMENT_TYPE.LIST_ITEM ? _constants.INSERT_POSITION.AFTER : insertPosition;
@@ -146,49 +145,6 @@ const QuickInsertBlockMenu = _ref => {
   }, [callback, editor, insertPosition, slateNode]);
   const dropDownItems = (0, _react.useMemo)(() => {
     let items = {
-      [_constants.PARAGRAPH]: /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
-        isHidden: !quickInsertMenuSearchMap[_constants.PARAGRAPH],
-        disabled: isEmptyNode,
-        key: "sdoc-insert-menu-paragraph",
-        menuConfig: {
-          ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.PARAGRAPH]
-        },
-        onClick: () => onInsert(_constants.ELEMENT_TYPE.PARAGRAPH)
-      }),
-      [_constants.ELEMENT_TYPE.HEADER]: _constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.HEADER].map(item => /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
-        isHidden: !quickInsertMenuSearchMap[item.type],
-        key: item.id,
-        menuConfig: item,
-        onClick: () => onInsert(item.type)
-      })),
-      [_constants.UNORDERED_LIST]: /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
-        isHidden: !quickInsertMenuSearchMap[_constants.UNORDERED_LIST],
-        key: "sdoc-insert-menu-unorder-list",
-        menuConfig: {
-          ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.UNORDERED_LIST]
-        },
-        onClick: () => {
-          onInsertList(_constants.ELEMENT_TYPE.UNORDERED_LIST);
-        }
-      }),
-      [_constants.ORDERED_LIST]: /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
-        isHidden: !quickInsertMenuSearchMap[_constants.ORDERED_LIST],
-        key: "sdoc-insert-menu-order-list",
-        menuConfig: {
-          ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.ORDERED_LIST]
-        },
-        onClick: () => {
-          onInsertList(_constants.ELEMENT_TYPE.ORDERED_LIST);
-        }
-      }),
-      [_constants.CHECK_LIST_ITEM]: /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
-        isHidden: !quickInsertMenuSearchMap[_constants.CHECK_LIST_ITEM],
-        key: "sdoc-insert-menu-check-list",
-        menuConfig: {
-          ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.CHECK_LIST_ITEM]
-        },
-        onClick: onInsertCheckList
-      }),
       [_constants.IMAGE]: /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
         isHidden: !quickInsertMenuSearchMap[_constants.IMAGE],
         disabled: isDisableImage,
@@ -220,12 +176,15 @@ const QuickInsertBlockMenu = _ref => {
       }, /*#__PURE__*/_react.default.createElement("i", {
         className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
       }), /*#__PURE__*/_react.default.createElement(_tableSizePopover.default, {
+        tableSizeRef: tableSizeRef,
         editor: editor,
         target: "sdoc-side-menu-item-table",
         trigger: "hover",
         placement: "left-start",
         popperClassName: "sdoc-side-menu-table-size sdoc-insert-element-table-size-wrapper",
-        createTable: createTable
+        createTable: createTable,
+        callback: callback,
+        handleClosePopover: handleClosePopover
       })),
       [_constants.LINK]: /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
         isHidden: !quickInsertMenuSearchMap[_constants.LINK],
@@ -235,14 +194,6 @@ const QuickInsertBlockMenu = _ref => {
         },
         onClick: openLinkDialog
       }),
-      [_constants.BLOCKQUOTE]: /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
-        isHidden: !quickInsertMenuSearchMap[_constants.BLOCKQUOTE],
-        key: "sdoc-insert-menu-blockquote",
-        menuConfig: {
-          ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.BLOCKQUOTE]
-        },
-        onClick: onInsertBlockQuote
-      }),
       [_constants.CODE_BLOCK]: /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
         isHidden: !quickInsertMenuSearchMap[_constants.CODE_BLOCK],
         key: "sdoc-insert-menu-code-block",
@@ -259,8 +210,53 @@ const QuickInsertBlockMenu = _ref => {
           ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.CALL_OUT]
         },
         onClick: () => onInsertCallout(_constants.PARAGRAPH)
+      }),
+      [_constants.UNORDERED_LIST]: /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+        isHidden: !quickInsertMenuSearchMap[_constants.UNORDERED_LIST],
+        key: "sdoc-insert-menu-unorder-list",
+        menuConfig: {
+          ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.UNORDERED_LIST]
+        },
+        onClick: () => {
+          onInsertList(_constants.ELEMENT_TYPE.UNORDERED_LIST);
+        }
+      }),
+      [_constants.ORDERED_LIST]: /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+        isHidden: !quickInsertMenuSearchMap[_constants.ORDERED_LIST],
+        key: "sdoc-insert-menu-order-list",
+        menuConfig: {
+          ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.ORDERED_LIST]
+        },
+        onClick: () => {
+          onInsertList(_constants.ELEMENT_TYPE.ORDERED_LIST);
+        }
+      }),
+      [_constants.CHECK_LIST_ITEM]: /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+        isHidden: !quickInsertMenuSearchMap[_constants.CHECK_LIST_ITEM],
+        key: "sdoc-insert-menu-check-list",
+        menuConfig: {
+          ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.CHECK_LIST_ITEM]
+        },
+        onClick: onInsertCheckList
+      }),
+      [_constants.PARAGRAPH]: /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+        isHidden: !quickInsertMenuSearchMap[_constants.PARAGRAPH],
+        disabled: isEmptyNode,
+        key: "sdoc-insert-menu-paragraph",
+        menuConfig: {
+          ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.PARAGRAPH]
+        },
+        onClick: () => onInsert(_constants.ELEMENT_TYPE.PARAGRAPH)
       })
     };
+    _constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.HEADER].forEach(item => {
+      items[item.id.toLowerCase()] = /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+        isHidden: !quickInsertMenuSearchMap[item.type],
+        key: item.id,
+        menuConfig: item,
+        onClick: () => onInsert(item.type)
+      });
+    });
     _constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.MULTI_COLUMN].forEach(item => {
       items[item.id.toLowerCase()] = /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
         isHidden: !quickInsertMenuSearchMap[item.type],
@@ -274,19 +270,33 @@ const QuickInsertBlockMenu = _ref => {
       delete items[_constants.VIDEO];
     }
     return items;
-  }, [isDisableImage, onInsertImageToggle, isDisableVideo, onInsertVideoToggle, editor, createTable, openLinkDialog, onInsertBlockQuote, onInsertCodeBlock, isDisableCallout, onInsertCheckList, isEmptyNode, onInsertCallout, onInsertList, onInsert, createMultiColumn, quickInsertMenuSearchMap]);
+  }, [quickInsertMenuSearchMap, isDisableImage, onInsertImageToggle, isDisableVideo, onInsertVideoToggle, editor, createTable, callback, handleClosePopover, openLinkDialog, onInsertCodeBlock, isDisableCallout, onInsertCheckList, isEmptyNode, onInsertCallout, onInsertList, onInsert, createMultiColumn]);
   const getSelectItemDom = selectIndex => {
     const dropDownItemWrapper = downDownWrapperRef.current;
-    const currentSelectItem = dropDownItemWrapper.children[selectIndex];
+    const searchedDropDownItemWrapper = [];
+    Array.from(dropDownItemWrapper.children).forEach(item => {
+      if (!Array.from(item.classList).includes('sdoc-dropdown-menu-item-hidden')) {
+        searchedDropDownItemWrapper.push(item);
+      }
+    });
+    const currentSelectItem = searchedDropDownItemWrapper[selectIndex];
     return currentSelectItem;
   };
   const handleKeyDown = (0, _react.useCallback)(e => {
+    if (document.getElementsByClassName('sdoc-selected-table-size-popover')[0]) {
+      tableSizeRef.current.handleTableSizeKeyDown(e);
+      return;
+    }
     const {
       UpArrow,
       DownArrow,
-      Enter
+      Enter,
+      Esc
     } = _keyCodes.default;
-    const renderItems = Reflect.ownKeys(dropDownItems);
+    const renderItems = [];
+    Reflect.ownKeys(dropDownItems).forEach(key => {
+      if (quickInsertMenuSearchMap[key]) renderItems.push(key);
+    });
     const {
       keyCode
     } = e;
@@ -294,52 +304,71 @@ const QuickInsertBlockMenu = _ref => {
       e.preventDefault();
       const currentSelectItem = getSelectItemDom(currentSelectIndex);
       if (currentSelectItem) currentSelectItem.classList.remove(_const.SELECTED_ITEM_CLASS_NAME);
-      if (currentSelectIndex > 0) {
+      if (currentSelectIndex > -1) {
         setCurrentSelectIndex(currentSelectIndex - 1);
-      } else {
-        setCurrentSelectIndex(renderItems.length - 1);
       }
     }
     if (keyCode === DownArrow) {
       e.preventDefault();
+      if (currentSelectIndex === renderItems.length - 1) return;
       const currentSelectItem = getSelectItemDom(currentSelectIndex);
       if (currentSelectItem) currentSelectItem.classList.remove(_const.SELECTED_ITEM_CLASS_NAME);
       if (currentSelectIndex < renderItems.length - 1) {
         setCurrentSelectIndex(currentSelectIndex + 1);
-      } else {
-        setCurrentSelectIndex(0);
       }
     }
     if (keyCode === Enter) {
       e.preventDefault();
       const item = renderItems[currentSelectIndex];
+      if (item === _constants.TABLE) {
+        tableSizeRef.current.uncontrolledPopoverRef.current.toggle();
+        return;
+      }
       const {
         disabled,
         onClick
       } = dropDownItems[item].props;
       !disabled && onClick();
     }
-  }, [currentSelectIndex, dropDownItems]);
+    if (keyCode === Esc) {
+      e.preventDefault();
+      handleClosePopover();
+    }
+  }, [currentSelectIndex, dropDownItems, handleClosePopover, quickInsertMenuSearchMap]);
   (0, _react.useEffect)(() => {
     document.addEventListener('keydown', handleKeyDown);
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [handleKeyDown]);
   const clearSelectStyle = (0, _react.useCallback)(() => {
     const domList = Array.from(downDownWrapperRef.current.children);
     domList.forEach(dom => dom.classList.remove(_const.SELECTED_ITEM_CLASS_NAME));
   }, []);
+  const onHandleInputFocus = (0, _react.useCallback)(isFocus => {
+    if (inputWrapperRef.current) {
+      queueMicrotask(() => {
+        isFocus ? inputWrapperRef.current.focus() : inputWrapperRef.current.blur();
+      });
+    }
+  }, []);
   (0, _react.useEffect)(() => {
-    clearSelectStyle();
-    const currentSelectItem = getSelectItemDom(currentSelectIndex);
-    if (currentSelectItem) {
-      currentSelectItem.classList.add(_const.SELECTED_ITEM_CLASS_NAME);
+    if (currentSelectIndex === -1) {
+      onHandleInputFocus(true);
+    } else {
+      onHandleInputFocus(false);
+      clearSelectStyle();
+      const currentSelectItem = getSelectItemDom(currentSelectIndex);
+      if (currentSelectItem) {
+        (0, _utils.onHandleOverflowScroll)(currentSelectItem, downDownWrapperRef);
+        currentSelectItem.classList.add(_const.SELECTED_ITEM_CLASS_NAME);
+      }
     }
-  }, [clearSelectStyle, currentSelectIndex, dropDownItems]);
+  }, [clearSelectStyle, currentSelectIndex, downDownWrapperRef, onHandleInputFocus]);
   const onChange = (0, _react.useCallback)(e => {
     if (!downDownWrapperRef.current.isInputtingChinese) {
-      const newMenuSearchMap = (0, _helpers.getSearchedOperations)(_constants.SIDE_INSERT_MENUS_SEARCH_MAP, true, e, t, editor);
+      const newMenuSearchMap = (0, _helpers.getSearchedOperations)(_constants.SIDE_QUICK_INSERT_MENUS_SEARCH_MAP, true, e, t, editor);
       setQuickInsertMenuSearchMap(newMenuSearchMap);
     }
   }, [editor, t]);
@@ -351,17 +380,18 @@ const QuickInsertBlockMenu = _ref => {
     onChange(e);
   }, [onChange]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-insert-element-toolbar",
-    ref: downDownWrapperRef
+    className: "sdoc-insert-element-toolbar"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-side-menu-search-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+    innerRef: inputWrapperRef,
     placeholder: t('Search_action'),
     onChange: onChange,
     onCompositionStart: onCompositionStart,
     onCompositionEnd: onCompositionEnd
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-insert-element-content-wrapper"
+    className: "sdoc-insert-element-content-wrapper",
+    ref: downDownWrapperRef
   }, Object.keys(dropDownItems).map(key => {
     return dropDownItems[key];
   }), Object.keys(quickInsertMenuSearchMap).length === 0 && /*#__PURE__*/_react.default.createElement("div", {

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

@@ -106,7 +106,37 @@ const InsertBlockMenu = _ref => {
     const newInsertPosition = slateNode.type === _constants.ELEMENT_TYPE.LIST_ITEM ? _constants.INSERT_POSITION.AFTER : insertPosition;
     (0, _helper2.insertMultiColumn)(editor, editor.selection, newInsertPosition, type);
   }, [editor, insertPosition, slateNode]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, [_constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.PARAGRAPH], ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.HEADER]].map(item => {
+    return /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+      isHidden: !insertMenuSearchMap[item.type],
+      disabled: isNodeEmpty && item.type === _constants.PARAGRAPH,
+      key: item.id,
+      menuConfig: item,
+      onClick: () => onInsert(item.type)
+    });
+  }), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    isHidden: !insertMenuSearchMap[_constants.ELEMENT_TYPE.UNORDERED_LIST],
+    menuConfig: {
+      ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.UNORDERED_LIST]
+    },
+    onClick: () => {
+      onInsertList(_constants.ELEMENT_TYPE.UNORDERED_LIST);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    isHidden: !insertMenuSearchMap[_constants.ELEMENT_TYPE.ORDERED_LIST],
+    menuConfig: {
+      ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.ORDERED_LIST]
+    },
+    onClick: () => {
+      onInsertList(_constants.ELEMENT_TYPE.ORDERED_LIST);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    isHidden: !insertMenuSearchMap[_constants.ELEMENT_TYPE.CHECK_LIST_ITEM],
+    menuConfig: {
+      ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.CHECK_LIST_ITEM]
+    },
+    onClick: onInsertCheckList
+  }), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
     isHidden: !insertMenuSearchMap[_constants.ELEMENT_TYPE.IMAGE],
     menuConfig: {
       ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.IMAGE]
@@ -151,36 +181,6 @@ const InsertBlockMenu = _ref => {
       ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.CALL_OUT]
     },
     onClick: () => onInsertCallout(_constants.PARAGRAPH)
-  }), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
-    isHidden: !insertMenuSearchMap[_constants.ELEMENT_TYPE.UNORDERED_LIST],
-    menuConfig: {
-      ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.UNORDERED_LIST]
-    },
-    onClick: () => {
-      onInsertList(_constants.ELEMENT_TYPE.UNORDERED_LIST);
-    }
-  }), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
-    isHidden: !insertMenuSearchMap[_constants.ELEMENT_TYPE.ORDERED_LIST],
-    menuConfig: {
-      ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.ORDERED_LIST]
-    },
-    onClick: () => {
-      onInsertList(_constants.ELEMENT_TYPE.ORDERED_LIST);
-    }
-  }), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
-    isHidden: !insertMenuSearchMap[_constants.ELEMENT_TYPE.CHECK_LIST_ITEM],
-    menuConfig: {
-      ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.CHECK_LIST_ITEM]
-    },
-    onClick: onInsertCheckList
-  }), [_constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.PARAGRAPH], ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.HEADER]].map(item => {
-    return /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
-      isHidden: !insertMenuSearchMap[item.type],
-      disabled: isNodeEmpty && item.type === _constants.PARAGRAPH,
-      key: item.id,
-      menuConfig: item,
-      onClick: () => onInsert(item.type)
-    });
   }), _constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.MULTI_COLUMN].map(item => {
     return /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
       isHidden: !insertMenuSearchMap[item.type],

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isSameDomain = exports.isOverflowPortByDirection = exports.isImage = exports.IMAGE_TYPES = void 0;
+exports.onHandleOverflowScroll = exports.isSameDomain = exports.isOverflowPortByDirection = exports.isImage = exports.IMAGE_TYPES = void 0;
 var _isUrl = _interopRequireDefault(require("is-url"));
 const IMAGE_TYPES = exports.IMAGE_TYPES = ['png', 'jpg', 'gif'];
 const isImage = url => {
@@ -41,4 +41,31 @@ const isOverflowPortByDirection = (element, direction) => {
     return right >= viewWidth;
   }
 };
-exports.isOverflowPortByDirection = isOverflowPortByDirection;
+exports.isOverflowPortByDirection = isOverflowPortByDirection;
+const onHandleOverflowScroll = (currentSelectItem, downDownWrapperRef) => {
+  const {
+    bottom: curBottom,
+    top: curTop
+  } = currentSelectItem.getBoundingClientRect();
+  const {
+    bottom: containerBottom
+  } = downDownWrapperRef.current.parentNode.getBoundingClientRect();
+  const {
+    top: containerTop
+  } = downDownWrapperRef.current.getBoundingClientRect();
+  if (curBottom > containerBottom) {
+    const scrollTop = downDownWrapperRef.current.scrollTop + 100;
+    downDownWrapperRef.current.scrollTo({
+      top: scrollTop,
+      behavior: 'smooth'
+    });
+  }
+  if (curTop < containerTop) {
+    const scrollTop = downDownWrapperRef.current.scrollTop - 100;
+    downDownWrapperRef.current.scrollTo({
+      top: scrollTop,
+      behavior: 'smooth'
+    });
+  }
+};
+exports.onHandleOverflowScroll = onHandleOverflowScroll;

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

@@ -32,7 +32,8 @@ const DocInfo = _ref => {
   const {
     isShowInternalLink,
     isStarIconShown,
-    isFreezed
+    isFreezed,
+    mobileLogin
   } = _context.default.getSettings();
   const onInternalLinkClick = (0, _react.useCallback)(() => {
     const eventBus = _basicSdk.EventBus.getInstance();
@@ -52,12 +53,12 @@ const DocInfo = _ref => {
     const originFileURL = _context.default.getSetting('originFileURL');
     window.open(originFileURL, '_blank');
   }, []);
-  const docInfo = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDraft && /*#__PURE__*/_react.default.createElement(_draftDropdown.default, null), isStarIconShown && /*#__PURE__*/_react.default.createElement("button", {
+  const docInfo = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDraft && /*#__PURE__*/_react.default.createElement(_draftDropdown.default, null), isStarIconShown && !mobileLogin && /*#__PURE__*/_react.default.createElement("button", {
     className: `doc-icon sdocfont ${isStarred ? 'sdoc-starred' : 'sdoc-unstarred'} border-0 p-0 bg-transparent`,
     title: isStarred ? t('Starred') : t('Unstarred'),
     "aria-label": isStarred ? t('Unstar') : t('Star'),
     onClick: toggleStar
-  }), isShowInternalLink && /*#__PURE__*/_react.default.createElement("span", {
+  }), isShowInternalLink && !mobileLogin && /*#__PURE__*/_react.default.createElement("span", {
     className: "doc-icon"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "internal-link sdocfont sdoc-link",

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

@@ -18,6 +18,7 @@ require("./style.css");
 const DocOperations = _ref => {
   let {
     isShowChanges,
+    isStarred,
     isPublished = false,
     changes,
     handleViewChangesToggle,
@@ -25,10 +26,13 @@ const DocOperations = _ref => {
     handleRevisionPublished
   } = _ref;
   const isSdocRevision = _context.default.getSetting('isSdocRevision');
+  const mobileLogin = _context.default.getSetting('mobileLogin');
   if (_utils.isMobile) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "doc-ops"
-    }, !isSdocRevision && /*#__PURE__*/_react.default.createElement(_shareOperation.default, null), !isSdocRevision && /*#__PURE__*/_react.default.createElement(_moreOperations.default, null));
+    }, !isSdocRevision && !mobileLogin && /*#__PURE__*/_react.default.createElement(_shareOperation.default, null), !isSdocRevision && /*#__PURE__*/_react.default.createElement(_moreOperations.default, {
+      isStarred: isStarred
+    }));
   }
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "doc-ops"

package/dist/components/doc-operations/more-operations.js

@@ -20,6 +20,7 @@ var _constants = require("../../constants");
 var _constants2 = require("../../basic-sdk/constants");
 const MoreOperations = _ref => {
   let {
+    isStarred,
     t
   } = _ref;
   const [isDropdownOpen, setIsDropdownOpen] = (0, _react.useState)(false);
@@ -30,6 +31,7 @@ const MoreOperations = _ref => {
   const docPerm = _context.default.getSetting('docPerm');
   const historyURL = _context.default.getSetting('historyURL');
   const isSdocRevision = _context.default.getSetting('isSdocRevision');
+  const mobileLogin = _context.default.getSetting('mobileLogin');
   const cssUrls = _context.default.getPrintCss();
   (0, _react.useEffect)(() => {
     const eventBus = _basicSdk.EventBus.getInstance();
@@ -83,8 +85,26 @@ const MoreOperations = _ref => {
     eventBus.dispatch(_constants2.INTERNAL_EVENT.RESIZE_ARTICLE);
     setIsFullWidthMode(newMode);
   }, [isFullWidthMode]);
+  const toggleStar = (0, _react.useCallback)(() => {
+    const eventBus = _basicSdk.EventBus.getInstance();
+    eventBus.dispatch(_constants.EXTERNAL_EVENT.TOGGLE_STAR);
+  }, []);
+  const onShareToggle = (0, _react.useCallback)(() => {
+    const eventBus = _basicSdk.EventBus.getInstance();
+    eventBus.dispatch(_constants.EXTERNAL_EVENT.SHARE_SDOC);
+  }, []);
+  const onInternalLinkClick = (0, _react.useCallback)(() => {
+    const eventBus = _basicSdk.EventBus.getInstance();
+    if (isSdocRevision) {
+      eventBus.dispatch(_constants.EXTERNAL_EVENT.INTERNAL_LINK_CLICK, {
+        internalLink: window.location.href
+      });
+      return;
+    }
+    eventBus.dispatch(_constants.EXTERNAL_EVENT.INTERNAL_LINK_CLICK);
+  }, [isSdocRevision]);
   return /*#__PURE__*/_react.default.createElement(_reactstrap.Dropdown, {
-    className: "sdoc-operator-folder",
+    className: `sdoc-operator-folder ${mobileLogin ? 'mobile-login' : ''}`,
     isOpen: isDropdownOpen,
     toggle: event => toggleDropdown(event, isDropdownOpen)
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownToggle, {
@@ -95,7 +115,18 @@ const MoreOperations = _ref => {
   })), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownMenu, {
     className: "sdoc-dropdown-menu",
     right: true
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
+  }, mobileLogin && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
+    className: "sdoc-dropdown-menu-item",
+    onClick: toggleStar
+  }, /*#__PURE__*/_react.default.createElement("div", null, isStarred ? t('Collected') : t('Collect'))), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
+    className: "sdoc-dropdown-menu-item",
+    onClick: onShareToggle
+  }, t('Share_1')), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
+    className: "sdoc-dropdown-menu-item",
+    onClick: onInternalLinkClick
+  }, t('Internal_link')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-operator-folder-divider"
+  })), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
     className: "sdoc-dropdown-menu-item",
     onClick: handlePrint
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -111,7 +142,7 @@ const MoreOperations = _ref => {
   }, t('Freeze_document')), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
     className: "sdoc-dropdown-menu-item",
     onClick: handleClickHistory
-  }, t('Document_history')), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
+  }, t('Document_history')), !_utils.isMobile && /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
     id: "sdoc-full-width-mode-wrapper",
     className: "sdoc-dropdown-menu-item"
   }, /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {

package/dist/pages/simple-editor.js

@@ -107,6 +107,7 @@ const SimpleEditor = _ref => {
     });
   }, [setErrorMessage]);
   const docOperationsProps = {
+    isStarred,
     isPublished,
     isShowChanges,
     changes,

package/dist/utils/index.js

@@ -25,7 +25,7 @@ Object.defineProperty(exports, "getEventTransfer", {
     return _getEventTransfer.default;
   }
 });
-exports.resetWebTitle = exports.isMobile = exports.isMac = exports.isEnglish = exports.getSelectionCoords = exports.getMaximumCapacity = exports.getImageFileNameWithTimestamp = void 0;
+exports.resetWebTitle = exports.isMobile = exports.isMac = exports.isEnglish = exports.getSelectionCoords = exports.getMaximumCapacity = exports.getLocalStorageFiles = exports.getImageFileNameWithTimestamp = void 0;
 var _dateUtils = _interopRequireDefault(require("./date-utils"));
 var _localStorageUtils = _interopRequireDefault(require("./local-storage-utils"));
 var _context = _interopRequireDefault(require("../context"));
@@ -170,4 +170,15 @@ const getMaximumCapacity = files => {
   });
   return newFiles;
 };
-exports.getMaximumCapacity = getMaximumCapacity;
+exports.getMaximumCapacity = getMaximumCapacity;
+const getLocalStorageFiles = files => {
+  const wikiRepoId = window.wiki.config.wikiId;
+  const newFiles = [];
+  files.forEach(item => {
+    if ((item === null || item === void 0 ? void 0 : item.wikiRepoId) === wikiRepoId) {
+      newFiles.push(item);
+    }
+  });
+  return newFiles;
+};
+exports.getLocalStorageFiles = getLocalStorageFiles;

package/package.json

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

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

@@ -578,5 +578,8 @@
   "Token_expired_Please_refresh_the_page": "Token expired. Please refresh the page.",
   "Link_to_page": "Link to page",
   "No_page_results": "No page results",
-  "Page": "Page"
+  "Page": "Page",
+  "Share_1": "Sdílet",
+  "Collect": "Collect",
+  "Collected": "Collected"
 }

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

@@ -578,5 +578,8 @@
   "Token_expired_Please_refresh_the_page": "Token expired. Please refresh the page.",
   "Link_to_page": "Link to page",
   "No_page_results": "No page results",
-  "Page": "Page"
+  "Page": "Page",
+  "Share_1": "Freigeben",
+  "Collect": "Collect",
+  "Collected": "Collected"
 }

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

@@ -578,5 +578,8 @@
   "Token_expired_Please_refresh_the_page": "Token expired. Please refresh the page.",
   "Link_to_page": "Link to page",
   "No_page_results": "No page results",
-  "Page": "Page"
+  "Page": "Page",
+  "Share_1": "Share",
+  "Collect": "Collect",
+  "Collected": "Collected"
 }

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

@@ -578,5 +578,8 @@
   "Token_expired_Please_refresh_the_page": "Token expired. Please refresh the page.",
   "Link_to_page": "Link to page",
   "No_page_results": "No page results",
-  "Page": "Page"
+  "Page": "Page",
+  "Share_1": "Compartir",
+  "Collect": "Collect",
+  "Collected": "Collected"
 }

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

@@ -578,5 +578,8 @@
   "Token_expired_Please_refresh_the_page": "Token expired. Please refresh the page.",
   "Link_to_page": "Link to page",
   "No_page_results": "No page results",
-  "Page": "Page"
+  "Page": "Page",
+  "Share_1": "Compartir",
+  "Collect": "Collect",
+  "Collected": "Collected"
 }

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

@@ -578,5 +578,8 @@
   "Token_expired_Please_refresh_the_page": "Token expired. Please refresh the page.",
   "Link_to_page": "Link to page",
   "No_page_results": "No page results",
-  "Page": "Page"
+  "Page": "Page",
+  "Share_1": "Compartir",
+  "Collect": "Collect",
+  "Collected": "Collected"
 }

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

@@ -578,5 +578,8 @@
   "Token_expired_Please_refresh_the_page": "Token expired. Please refresh the page.",
   "Link_to_page": "Link to page",
   "No_page_results": "No page results",
-  "Page": "Page"
+  "Page": "Page",
+  "Share_1": "Partager",
+  "Collect": "Collect",
+  "Collected": "Collected"
 }

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

@@ -578,5 +578,8 @@
   "Token_expired_Please_refresh_the_page": "Token expired. Please refresh the page.",
   "Link_to_page": "Link to page",
   "No_page_results": "No page results",
-  "Page": "Page"
+  "Page": "Page",
+  "Share_1": "Condividi",
+  "Collect": "Collect",
+  "Collected": "Collected"
 }

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

@@ -577,6 +577,9 @@
   "The_current_version_does_not_support_>5MB_video_file": "Текущая_версия_не_поддерживает_видео_файл_>5_МБ",
   "Token_expired_Please_refresh_the_page": "Срок действия токена истек. Обновите страницу.",
   "Link_to_page": "Ссылка на страницу",
-  "No_page_results": "No page results",
-  "Page": "Page"
+  "No_page_results": "Нет результатов на странице",
+  "Page": "Страница",
+  "Share_1": "Общий доступ",
+  "Collect": "Collect",
+  "Collected": "Collected"
 }

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

@@ -578,5 +578,8 @@
   "Token_expired_Please_refresh_the_page": "Token已过期。请刷新页面。",
   "Link_to_page": "链接到页面",
   "No_page_results": "没有页面结果",
-  "Page": "页面"
+  "Page": "页面",
+  "Share_1": "分享",
+  "Collect": "收藏",
+  "Collected": "已收藏"
 }