@seafile/sdoc-editor 1.0.174 → 1.0.176-beta

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/plugins/text-style/menu/comemnt-editor-menu.js

@@ -12,20 +12,14 @@ var _core = require("../../../core");
 var _commons = require("../../../commons");
 var _helpers = require("../helpers");
 var _menusConfig = require("../../../constants/menus-config");
-const filterFontTypes = _ref => {
-  let {
-    id
-  } = _ref;
-  return [_menusConfig.BOLD, _menusConfig.ITALIC].includes(id);
-};
-const CommentEditorTextStyleMenuList = _ref2 => {
+const CommentEditorTextStyleMenuList = _ref => {
   let {
     editor,
     isRichEditor,
     className,
     idPrefix,
     readonly
-  } = _ref2;
+  } = _ref;
   const isActive = (0, _react.useCallback)(type => {
     const isMark = (0, _helpers.getValue)(editor, type);
     return !!isMark;
@@ -50,8 +44,10 @@ const CommentEditorTextStyleMenuList = _ref2 => {
     (0, _core.focusEditor)(editor);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor]);
-  const getTextStyleList = (0, _react.useCallback)(key => {
-    return _constants.MENUS_CONFIG_MAP[key].map(item => {
+  const getTextStyleList = (0, _react.useCallback)(() => {
+    const styleMenus = _constants.MENUS_CONFIG_MAP[_constants.TEXT_STYLE];
+    const commentMenus = styleMenus.filter(item => [_menusConfig.BOLD, _menusConfig.ITALIC].includes(item.id));
+    return commentMenus.map(item => {
       let itemProps = {
         isRichEditor,
         className,
@@ -68,7 +64,7 @@ const CommentEditorTextStyleMenuList = _ref2 => {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, readonly]);
-  const list = getTextStyleList(_constants.TEXT_STYLE).filter(filterFontTypes);
+  const list = getTextStyleList();
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, list.map((itemProps, index) => /*#__PURE__*/_react.default.createElement(_commons.MenuItem, Object.assign({
     key: index
   }, itemProps))));

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

@@ -17,15 +17,7 @@ var _fontSizeScale = _interopRequireDefault(require("../../font/menu/font-size/f
 var _helpers2 = require("../helpers");
 var _useColorContext = require("../../../../hooks/use-color-context");
 var _mouseEvent = require("../../../../utils/mouse-event");
-var _menusConfig = require("../../../constants/menus-config");
-var _constants2 = require("../../../../constants");
-const filterFontTypes = _ref => {
-  let {
-    id
-  } = _ref;
-  return [_menusConfig.BOLD, _menusConfig.ITALIC].includes(id);
-};
-const TextStyleMenuList = _ref2 => {
+const TextStyleMenuList = _ref => {
   let {
     editor,
     t,
@@ -33,10 +25,9 @@ const TextStyleMenuList = _ref2 => {
     className,
     idPrefix,
     readonly
-  } = _ref2;
+  } = _ref;
   let selectedFontSize = (0, _helpers.getFontSize)(editor);
   let selectedFontSizeValue = selectedFontSize;
-  const isCommentEditor = editor.editorType === _constants2.COMMENT_EDITOR;
   const {
     lastUsedFontColor,
     updateLastUsedFontColor,
@@ -114,17 +105,13 @@ const TextStyleMenuList = _ref2 => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, lastUsedFontColor, lastUsedHighlightColor, readonly]);
   let list = getTextStyleList(_constants.TEXT_STYLE);
-  // Filter for comment editor
-  if (isCommentEditor) {
-    list = list.filter(filterFontTypes);
-  }
   const dropdownList = getTextStyleList(_constants.TEXT_STYLE_MORE);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, list.map((itemProps, index) => {
     const Component = itemProps.isColor ? _commons.ColorMenu : _commons.MenuItem;
     return /*#__PURE__*/_react.default.createElement(Component, Object.assign({
       key: index
     }, itemProps));
-  }), !isCommentEditor && /*#__PURE__*/_react.default.createElement(_commons.MoreDropdown, null, dropdownList.map((itemProps, index) => /*#__PURE__*/_react.default.createElement(_commons.MenuItem, Object.assign({
+  }), /*#__PURE__*/_react.default.createElement(_commons.MoreDropdown, null, dropdownList.map((itemProps, index) => /*#__PURE__*/_react.default.createElement(_commons.MenuItem, Object.assign({
     key: index
   }, itemProps))), /*#__PURE__*/_react.default.createElement(_fontSizeScale.default, {
     disabled: isDisabled(),