@seafile/sdoc-editor 1.0.97 → 1.0.99

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

@@ -4,7 +4,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PAGE_EDIT_AREA_WIDTH = exports.MODIFY_TYPE = exports.INTERNAL_EVENT = exports.DOCUMENT_PLUGIN_EDITOR = exports.DIFF_VIEWER = exports.COMMENT_EDITOR_EDIT_AREA_WIDTH = exports.COMMENT_EDITOR = void 0;
+exports.PAGE_EDIT_AREA_WIDTH = exports.MODIFY_TYPE = exports.INTERNAL_EVENT = exports.HEADER_OUTLINE_WIDTH_MAPPING = exports.DOCUMENT_PLUGIN_EDITOR = exports.DIFF_VIEWER = exports.COMMENT_EDITOR_EDIT_AREA_WIDTH = exports.COMMENT_EDITOR = void 0;
 Object.defineProperty(exports, "PLUGIN_BTN_POSITION", {
   enumerable: true,
   get: function () {
@@ -17,7 +17,7 @@ Object.defineProperty(exports, "PLUGIN_DISPLAY_TYPE", {
     return _plugin.PLUGIN_DISPLAY_TYPE;
   }
 });
-exports.Z_INDEX = exports.WIKI_EDITOR = exports.REVISION_DIFF_VALUE = exports.REVISION_DIFF_KEY = exports.REBASE_TYPES = exports.REBASE_TYPE = exports.REBASE_ORIGIN = exports.REBASE_MARK_KEY = exports.REBASE_MARKS = void 0;
+exports.Z_INDEX = exports.WIKI_OUTLINE = exports.WIKI_EDITOR = exports.REVISION_DIFF_VALUE = exports.REVISION_DIFF_KEY = exports.REBASE_TYPES = exports.REBASE_TYPE = exports.REBASE_ORIGIN = exports.REBASE_MARK_KEY = exports.REBASE_MARKS = void 0;
 var Z_INDEX = _interopRequireWildcard(require("./z-index"));
 exports.Z_INDEX = Z_INDEX;
 var _plugin = require("./plugin");
@@ -45,7 +45,8 @@ const INTERNAL_EVENT = exports.INTERNAL_EVENT = {
   TABLE_HIDE_DRAG_HANDLER: 'table_show_drag_handler',
   ON_PRINT: 'on_print',
   COMMENT_EDITOR_POST_COMMENT: 'comment_editor_post_comment',
-  CLOSE_FILE_INSET_DIALOG: 'close_file_insert_dialog'
+  CLOSE_FILE_INSET_DIALOG: 'close_file_insert_dialog',
+  RESIZE_ARTICLE: 'resize_article'
 };
 const REVISION_DIFF_KEY = exports.REVISION_DIFF_KEY = 'diff';
 const REVISION_DIFF_VALUE = exports.REVISION_DIFF_VALUE = '1';
@@ -54,6 +55,12 @@ const COMMENT_EDITOR_EDIT_AREA_WIDTH = exports.COMMENT_EDITOR_EDIT_AREA_WIDTH =
 const COMMENT_EDITOR = exports.COMMENT_EDITOR = 'comment_editor';
 const WIKI_EDITOR = exports.WIKI_EDITOR = 'wiki_editor';
 const DOCUMENT_PLUGIN_EDITOR = exports.DOCUMENT_PLUGIN_EDITOR = 'document_plugin_editor';
+const WIKI_OUTLINE = exports.WIKI_OUTLINE = 'wiki-outline';
+const HEADER_OUTLINE_WIDTH_MAPPING = exports.HEADER_OUTLINE_WIDTH_MAPPING = {
+  header1: '16px',
+  header2: '12px',
+  header3: '8px'
+};
 const MODIFY_TYPE = exports.MODIFY_TYPE = {
   ADD: 'add',
   DELETE: 'delete',

package/dist/basic-sdk/editor/wiki-editor.js

@@ -20,6 +20,7 @@ var _core = require("../extension/core");
 var _insertElementDialog = _interopRequireDefault(require("../extension/commons/insert-element-dialog"));
 var _layout = require("../layout");
 var _editableArticle = _interopRequireDefault(require("./editable-article"));
+var _wikiOutline = _interopRequireDefault(require("../outline/wiki-outline"));
 var _useColorContext = require("../hooks/use-color-context");
 var _readonlyArticle = _interopRequireDefault(require("../views/readonly-article"));
 var _utils = require("../../utils");
@@ -177,7 +178,9 @@ const WikiEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     slateValue: slateValue,
     updateSlateValue: onValueChange,
     showComment: false
-  })))))), /*#__PURE__*/_react.default.createElement(_insertElementDialog.default, {
+  })), /*#__PURE__*/_react.default.createElement(_wikiOutline.default, {
+    doc: slateValue
+  }))))), /*#__PURE__*/_react.default.createElement(_insertElementDialog.default, {
     editor: validEditor
   }));
 });

package/dist/basic-sdk/extension/plugins/code-block/hover-menu/index.css

@@ -130,12 +130,12 @@
   justify-content: space-between;
 }
 
-.sdoc-langs-list-container .langs-list-ul .langs-list-li:hover {
-  background-color: #f5f5f5;;
+.sdoc-langs-list-container .langs-list-ul .langs-list-li.active {
+  background-color: #f5f5f5;
 }
 
-.sdoc-langs-list-container .langs-list-ul .langs-list-li .active {
-  background-color: #f5f5f5;;
+.sdoc-langs-list-container .langs-list-ul .langs-list-li.hover {
+  background-color: #f5f5f5;
 }
 
 .sdoc-langs-list-container .langs-list-ul .langs-list-li .li-check-mark {

package/dist/basic-sdk/extension/plugins/code-block/hover-menu/index.js

@@ -14,11 +14,12 @@ var _commons = require("../../../commons/");
 var _prismjs = require("../prismjs");
 var _helpers = require("../helpers");
 require("./index.css");
-const LangList = _ref => {
+const LangList = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     langsData,
     onSelectLang,
-    selectedLanguageText
+    selectedLanguageText,
+    selectedIndex
   } = _ref;
   const {
     t
@@ -30,13 +31,14 @@ const LangList = _ref => {
   }
   return /*#__PURE__*/_react.default.createElement("ul", {
     className: "langs-list-ul"
-  }, langsData.map(item => {
+  }, langsData.map((item, index) => {
     return /*#__PURE__*/_react.default.createElement("li", {
-      className: `langs-list-li ${selectedLanguageText === item.text ? 'active' : ''}`,
+      ref: el => ref.current[index] = el,
+      className: `langs-list-li ${selectedLanguageText === item.text ? 'active' : ''} ${selectedIndex === index ? 'hover' : ''}`,
       id: item.value,
       key: item.value,
       onClick: () => {
-        onSelectLang(item);
+        onSelectLang(item, index);
       }
     }, item.text, /*#__PURE__*/_react.default.createElement("span", {
       className: `li-check-mark ${selectedLanguageText === item.text ? 'li-checked' : ''}`
@@ -44,7 +46,7 @@ const LangList = _ref => {
       className: "sdocfont sdoc-check-mark icon-font"
     })));
   }));
-};
+});
 const CodeBlockHoverMenu = _ref2 => {
   let {
     style,
@@ -63,6 +65,11 @@ const CodeBlockHoverMenu = _ref2 => {
   const [selectedLanguageText, setSelectedLanguageText] = (0, _react.useState)('');
   const [langsData, setLangsData] = (0, _react.useState)((0, _prismjs.genCodeLangs)());
   const [isShowTooltip, setIsShowTooltip] = (0, _react.useState)(false);
+  const [selectedIndex, setSelectedIndex] = (0, _react.useState)(0);
+  const langRefs = (0, _react.useRef)([]);
+  (0, _react.useEffect)(() => {
+    langRefs.current = Array(langsData.length).fill().map((_, i) => langRefs.current[i] || /*#__PURE__*/_react.default.createRef());
+  }, [langsData]);
   const onHiddenLangsList = (0, _react.useCallback)(e => {
     if (!e.target.parentNode.className.includes('sdoc-search-langs')) {
       setIsShowlangsList(false);
@@ -79,9 +86,10 @@ const CodeBlockHoverMenu = _ref2 => {
   }, []);
   const onShowLangs = (0, _react.useCallback)(e => {
     e.stopPropagation();
+    setSelectedIndex(langsData.findIndex(lang => lang.text === selectedLanguageText));
     setIsShowlangsList(!isShowlangsList);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isShowlangsList]);
+  }, [isShowlangsList, selectedLanguageText]);
   const onAutoLineWrap = (0, _react.useCallback)(() => {
     if (white_space === 'normal') {
       onChangeAutoLineWrap('nowrap');
@@ -94,14 +102,22 @@ const CodeBlockHoverMenu = _ref2 => {
     onDeleteCodeBlock();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const onSelectLang = (0, _react.useCallback)(lang => {
+  const onSelectLang = (0, _react.useCallback)((lang, index) => {
     const {
       text
     } = lang;
     setSelectedLanguageText(text);
+    setSelectedIndex(index);
     onChangeLanguage(lang);
+    const selectedLangRef = langRefs.current[index];
+    if (selectedLangRef) {
+      selectedLangRef.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest'
+      });
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [onChangeLanguage]);
   (0, _react.useEffect)(() => {
     // Compatible with legacy code
     let selectedLanguage = language;
@@ -126,6 +142,41 @@ const CodeBlockHoverMenu = _ref2 => {
     setLangsData(filterData);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  const onKeyDown = (0, _react.useCallback)(e => {
+    const {
+      key
+    } = e;
+    switch (key) {
+      case 'ArrowUp':
+        e.preventDefault();
+        setSelectedIndex(prevIndex => {
+          const newIndex = Math.max(prevIndex - 1, 0);
+          scrollToLang(newIndex);
+          return newIndex;
+        });
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        setSelectedIndex(prevIndex => {
+          const newIndex = Math.min(prevIndex + 1, langsData.length - 1);
+          scrollToLang(newIndex);
+          return newIndex;
+        });
+        break;
+      case 'Enter':
+        onSelectLang(langsData[selectedIndex], selectedIndex);
+        break;
+    }
+  }, [langsData, selectedIndex, onSelectLang]);
+  const scrollToLang = index => {
+    const selectedLangRef = langRefs.current[index];
+    if (selectedLangRef) {
+      selectedLangRef.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest'
+      });
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_commons.ElementPopover, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-code-block-hover-menu-container",
     style: menuPosition
@@ -191,11 +242,14 @@ const CodeBlockHoverMenu = _ref2 => {
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
     autoFocus: true,
     placeholder: t('Search_language'),
-    onChange: onChange
+    onChange: onChange,
+    onKeyDown: onKeyDown
   })), /*#__PURE__*/_react.default.createElement(LangList, {
     langsData: langsData,
     onSelectLang: onSelectLang,
-    selectedLanguageText: selectedLanguageText
+    selectedLanguageText: selectedLanguageText,
+    selectedIndex: selectedIndex,
+    ref: langRefs
   })))));
 };
 var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(CodeBlockHoverMenu);

package/dist/basic-sdk/layout/article-container.js

@@ -31,7 +31,7 @@ function ArticleContainer(_ref) {
     const articleRect = articleRef.current.getBoundingClientRect();
     // get state from local storage
     const isShowOutline = (0, _outline.getOutlineSetting)();
-    if (isShowOutline && (rect.width - articleRect.width) / 2 < 280) {
+    if (isShowOutline && editor.editorType !== _constants.WIKI_EDITOR && (rect.width - articleRect.width) / 2 < 280) {
       setContainerStyle({
         marginLeft: '280px'
       });
@@ -44,7 +44,7 @@ function ArticleContainer(_ref) {
         block: 'nearest'
       });
     }
-  }, [scrollRef]);
+  }, [editor.editorType, scrollRef]);
   const handelArticleClick = (0, _react.useCallback)(event => {
     if (!articleRef.current.contains(event.target)) return;
     const eventBus = _eventBus.default.getInstance();
@@ -53,7 +53,11 @@ function ArticleContainer(_ref) {
   (0, _react.useEffect)(() => {
     const eventBus = _eventBus.default.getInstance();
     const unsubscribeOutline = eventBus.subscribe(_constants.INTERNAL_EVENT.OUTLINE_STATE_CHANGED, handleWindowResize);
-    return unsubscribeOutline;
+    const unsubscribeResizeArticle = eventBus.subscribe(_constants.INTERNAL_EVENT.RESIZE_ARTICLE, handleWindowResize);
+    return () => {
+      unsubscribeOutline();
+      unsubscribeResizeArticle();
+    };
   }, [handleWindowResize]);
   (0, _react.useEffect)(() => {
     if (editor.editorType === _constants.WIKI_EDITOR) return;

package/dist/basic-sdk/outline/outline-item.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
+var _constants = require("../constants");
 class OutlineItem extends _react.default.PureComponent {
   constructor(props) {
     super(props);
@@ -30,26 +31,61 @@ class OutlineItem extends _react.default.PureComponent {
         isHighlighted: false
       });
     });
+    (0, _defineProperty2.default)(this, "getOutlineItemClass", () => {
+      const {
+        isHighlighted
+      } = this.state;
+      const {
+        item,
+        isDisplayHorizontalBar
+      } = this.props;
+      const {
+        type,
+        isActive
+      } = item;
+      let outlineItemClass = null;
+      outlineItemClass = (0, _classnames.default)('sdoc-outline-item', {
+        'pl-5': type === 'header2',
+        'pl-7': type === 'header3',
+        'active': isHighlighted,
+        'wiki-outline-active': isActive
+      });
+      if (isDisplayHorizontalBar) {
+        outlineItemClass = (0, _classnames.default)('sdoc-outline-item', {
+          'pl-1': type === 'header2',
+          'pl-2': type === 'header3',
+          'active': isHighlighted
+        });
+      }
+      return outlineItemClass;
+    });
     this.state = {
       isHighlighted: false
     };
   }
   render() {
     const {
-      isHighlighted
-    } = this.state;
-    const {
-      item
+      item,
+      isDisplayHorizontalBar
     } = this.props;
     const {
       type,
-      children
+      children,
+      isActive
     } = item;
-    const outlineItemClass = (0, _classnames.default)('sdoc-outline-item', {
-      'pl-5': type === 'header2',
-      'pl-7': type === 'header3',
-      'active': isHighlighted
-    });
+    const outlineItemClass = this.getOutlineItemClass();
+    if (isDisplayHorizontalBar) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: outlineItemClass
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)('wiki-outline-context', {
+          'active': isActive
+        }),
+        style: {
+          width: _constants.HEADER_OUTLINE_WIDTH_MAPPING[type]
+        }
+      }));
+    }
     return /*#__PURE__*/_react.default.createElement("div", {
       className: outlineItemClass,
       onClick: this.onItemClick,

package/dist/basic-sdk/outline/style.css

@@ -13,6 +13,71 @@
   pointer-events: all;
 }
 
+.wiki-outline-wrapper {
+  position: fixed;
+  right: 0;
+  margin: 0;
+  pointer-events: unset !important;
+  flex: none;
+  max-height: 400px;
+}
+
+.wiki-outline-wrapper .sdoc-outline {
+  width: 59px;
+}
+
+.wiki-outline-wrapper .sdoc-outline .sdoc-outline-list-container {
+  flex: none;
+  max-height: 400px;
+  overflow-y: hidden;
+}
+
+.wiki-outline-wrapper .sdoc-outline .sdoc-outline-list-container .sdoc-outline-item .wiki-outline-context {
+  background-color: rgb(227, 226, 224);
+  height: 2px;
+  box-shadow: none;
+  border-radius: 2px;
+}
+
+.wiki-outline-wrapper .sdoc-outline .sdoc-outline-list-container .sdoc-outline-item .active {
+  background-color: rgb(50, 48, 44);
+}
+
+.wiki-outline-wrapper .wiki-outline-popver {
+  position: absolute;
+  right: 0;
+  width: 242px;
+  max-height: 538px;
+  padding: 12px;
+  margin-right: 10px;
+  background-color: white;
+  box-shadow: rgba(15, 15, 15, 0.04) 0px 0px 0px 1px, rgba(15, 15, 15, 0.03) 0px 3px 6px, rgba(15, 15, 15, 0.06) 0px 9px 24px;
+  border: 1px solid rgba(55, 53, 47, 0.06);
+  border-radius: 14px;
+  overflow-y: auto;
+}
+
+.wiki-outline-wrapper .wiki-outline-popver .sdoc-outline-list-container {
+  padding: 6px;
+}
+
+.wiki-outline-wrapper .wiki-outline-popver .sdoc-outline-list-container .sdoc-outline-item {
+  color: rgb(120, 119, 116);
+  transition: color 0.15s;
+  cursor: pointer;
+  padding: 4px 6px 4px 4px;
+  font-size: 14px;
+}
+
+.wiki-outline-wrapper .wiki-outline-popver .sdoc-outline-list-container .wiki-outline-active {
+  color: rgb(35, 131, 226)
+}
+
+.wiki-outline-wrapper .wiki-outline-popver .sdoc-outline-list-container .sdoc-outline-item:hover {
+  background: rgba(55, 53, 47, 0.06);
+  border-radius: 6px;
+}
+
 .sdoc-outline {
   flex: 1;
   width: 220px;

package/dist/basic-sdk/outline/wiki-outline.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+var _reactI18next = require("react-i18next");
+var _useScrollContext = require("../hooks/use-scroll-context");
+var _outlineItem = _interopRequireDefault(require("./outline-item"));
+require("./style.css");
+const WikiOutline = _ref => {
+  let {
+    doc = []
+  } = _ref;
+  const scrollRef = (0, _useScrollContext.useScrollContext)();
+  const wikiOutlineRef = (0, _react.useRef)(null);
+  const [wikiOutlineList, setWikiOutlineList] = (0, _react.useState)([]);
+  const [isShowOutlinePopver, setIsShowOutlinePopver] = (0, _react.useState)(false);
+  const onMouseOver = (0, _react.useCallback)(() => {
+    if (!isShowOutlinePopver) {
+      setIsShowOutlinePopver(true);
+    }
+  }, [isShowOutlinePopver]);
+  const updateWikiOutlineList = (0, _react.useCallback)(() => {
+    const list = doc.filter(item => ['header1', 'header2', 'header3'].includes(item.type));
+    if (list.length === 0) return;
+    const newList = JSON.parse(JSON.stringify(list)); // The slateValue value in the document cannot be operated, so copy it for operation
+    const index = list.findIndex(item => {
+      const {
+        id
+      } = item;
+      const el = document.getElementById(id);
+      if (el) {
+        const {
+          bottom
+        } = el.getBoundingClientRect();
+        if (bottom >= 43) {
+          // 43 is Top toolbar height
+          return true;
+        }
+      }
+      return false;
+    });
+
+    // There is a title in the visible area
+    if (index !== -1) {
+      newList[index]['isActive'] = true;
+    }
+    // There is no title in the visible area
+    if (index === -1) {
+      const lastItemId = list[list.length - 1].id;
+      const lastItemEl = document.getElementById(lastItemId);
+      if (lastItemEl) {
+        const {
+          top
+        } = lastItemEl.getBoundingClientRect();
+        if (top < 0) {
+          newList[newList.length - 1]['isActive'] = true;
+        }
+      }
+    }
+    setWikiOutlineList([...newList]);
+  }, [doc]);
+  const onScroll = (0, _lodash.default)(() => {
+    updateWikiOutlineList();
+  }, 200);
+  (0, _react.useEffect)(() => {
+    updateWikiOutlineList();
+    let curRef = null;
+    curRef = scrollRef.current;
+    scrollRef.current.addEventListener('scroll', onScroll);
+    return () => {
+      curRef && curRef.removeEventListener('scroll', onScroll);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [doc]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-outline-wrapper wiki-outline-wrapper",
+    onMouseLeave: () => {
+      setIsShowOutlinePopver(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-outline"
+  }, wikiOutlineList.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-outline-list-container",
+    onMouseOver: onMouseOver
+  }, wikiOutlineList.map((item, index) => {
+    return /*#__PURE__*/_react.default.createElement(_outlineItem.default, {
+      key: index,
+      item: item,
+      isDisplayHorizontalBar: true
+    });
+  }))), isShowOutlinePopver && /*#__PURE__*/_react.default.createElement("div", {
+    className: "wiki-outline-popver",
+    ref: wikiOutlineRef
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-outline-list-container"
+  }, wikiOutlineList.map((item, index) => {
+    return /*#__PURE__*/_react.default.createElement(_outlineItem.default, {
+      key: index,
+      item: item
+    });
+  }))));
+};
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(WikiOutline);

package/dist/basic-sdk/right-panel/index.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("../../hooks");
 var _resizeWidth = _interopRequireDefault(require("./resize-width"));
 var _constants = require("../constants");
+var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
 require("./index.css");
 const MIN_PANEL_WIDTH = 360;
 const MAX_PANEL_WIDTH = 620;
@@ -40,17 +41,26 @@ const RightPanel = _ref => {
     setWidth(width);
   }, []);
   const resizeWidthEnd = (0, _react.useCallback)(width => {
-    window.localStorage.setItem('sdoc-panel-width', width);
+    const settings = JSON.parse(window.localStorage.getItem('sdoc') || '{}');
+    window.localStorage.setItem('sdoc', JSON.stringify({
+      ...settings,
+      panelWidth: width
+    }));
+    const eventBus = _eventBus.default.getInstance();
+    eventBus.dispatch(_constants.INTERNAL_EVENT.RESIZE_ARTICLE);
   }, []);
   (0, _react.useEffect)(() => {
-    let width = parseInt(window.localStorage.getItem('sdoc-panel-width', '0')) || MIN_PANEL_WIDTH;
-    if (width < MIN_PANEL_WIDTH) {
-      width = MIN_PANEL_WIDTH;
-    } else if (width > MAX_PANEL_WIDTH) {
-      width = MAX_PANEL_WIDTH;
-    }
+    const settings = JSON.parse(window.localStorage.getItem('sdoc', '{}')) || {};
+    const {
+      panelWidth
+    } = settings;
+    const width = Math.max(MIN_PANEL_WIDTH, Math.min(parseInt(panelWidth, 10) || MIN_PANEL_WIDTH, MAX_PANEL_WIDTH));
     setWidth(width);
   }, []);
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    eventBus.dispatch(_constants.INTERNAL_EVENT.RESIZE_ARTICLE);
+  }, [displayPluginName]);
   if (!displayPluginName) return null;
   const plugin = plugins.find(p => p.name === displayPluginName);
   if (!plugin) return null;

package/package.json

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