@seafile/sdoc-editor 2.0.145 → 2.0.147

package/dist/api/sdoc-server-api.js

@@ -37,6 +37,17 @@ var SDocServerApi = /*#__PURE__*/function () {
         }
       });
     }
+  }, {
+    key: "getFileContentByDocUuidAndAccessToken",
+    value: function getFileContentByDocUuidAndAccessToken(docUuid, access_token) {
+      var server = this.server;
+      var url = "".concat(server, "/api/v1/docs/").concat(docUuid, "/");
+      return _axios["default"].get(url, {
+        headers: {
+          Authorization: "Token ".concat(access_token)
+        }
+      });
+    }
   }, {
     key: "normalizeSdocContent",
     value: function normalizeSdocContent() {

package/dist/api/seafile-api.js

@@ -299,6 +299,12 @@ var SeafileAPI = /*#__PURE__*/function () {
       form.append('file_uuid', docUuid);
       return this.req.post(url, form);
     }
+  }, {
+    key: "getTokenByDocUuid",
+    value: function getTokenByDocUuid(docUuid) {
+      var url = "/api/v2.1/seadoc/access-token-by-uuid/".concat(docUuid, "/");
+      return this.req.get(url);
+    }
   }]);
 }();
 var _default = exports["default"] = SeafileAPI;

package/dist/comment/components/comment-item-content.js

@@ -137,7 +137,7 @@ var CommentItemContent = function CommentItemContent(_ref) {
     insertContent: updateContent,
     hiddenComment: setIsEditing,
     api: {
-      uploadLocalImage: _context2["default"].uploadLocalImage
+      uploadLocalImage: _context2["default"].uploadCommentImage
     }
   };
   return /*#__PURE__*/_react["default"].createElement("div", {

package/dist/comment/components/comment-item-reply.js

@@ -121,7 +121,7 @@ var CommentItemReply = function CommentItemReply(_ref) {
     insertContent: updateContent,
     hiddenComment: setIsEditing,
     api: {
-      uploadLocalImage: _context2["default"].uploadLocalImage
+      uploadLocalImage: _context2["default"].uploadCommentImage
     }
   };
   return /*#__PURE__*/_react["default"].createElement("div", {

package/dist/comment/components/comment-list.js

@@ -220,7 +220,7 @@ var CommentList = function CommentList(_ref) {
       hiddenComment: hiddenComment,
       closePanel: closeComment,
       api: {
-        uploadLocalImage: _context2["default"].uploadLocalImage
+        uploadLocalImage: _context2["default"].uploadCommentImage
       }
     }), !isEmptyComment && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !isActiveEditor && /*#__PURE__*/_react["default"].createElement(_reactstrap.Input, {
       value: inputContent !== null && inputContent !== void 0 && inputContent.trim() ? '.....' : '',
@@ -247,7 +247,7 @@ var CommentList = function CommentList(_ref) {
       },
       hiddenComment: hiddenComment,
       api: {
-        uploadLocalImage: _context2["default"].uploadLocalImage
+        uploadLocalImage: _context2["default"].uploadCommentImage
       }
     }))));
   }), Object.values(commentDetail).length === 0 && /*#__PURE__*/_react["default"].createElement("div", {
@@ -267,7 +267,7 @@ var CommentList = function CommentList(_ref) {
     hiddenComment: hiddenComment,
     closePanel: closeComment,
     api: {
-      uploadLocalImage: _context2["default"].uploadLocalImage
+      uploadLocalImage: _context2["default"].uploadCommentImage
     }
   }), !isEmptyComment && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !showEditor && /*#__PURE__*/_react["default"].createElement(_reactstrap.Input, {
     value: inputContent !== null && inputContent !== void 0 && inputContent.trim() ? '.....' : '',
@@ -292,7 +292,7 @@ var CommentList = function CommentList(_ref) {
     },
     hiddenComment: hiddenComment,
     api: {
-      uploadLocalImage: _context2["default"].uploadLocalImage
+      uploadLocalImage: _context2["default"].uploadCommentImage
     }
   }))));
 };

package/dist/comment/components/global-comment/global-comment-editor.js

@@ -39,7 +39,7 @@ var GlobalCommentEditor = function GlobalCommentEditor(_ref) {
     collaborators: collaborators,
     participants: participants,
     api: {
-      uploadLocalImage: _context["default"].uploadLocalImage
+      uploadLocalImage: _context["default"].uploadCommentImage
     }
   };
   return /*#__PURE__*/_react["default"].createElement("div", {

package/dist/constants/index.js

@@ -76,7 +76,8 @@ var INTERNAL_EVENT = exports.INTERNAL_EVENT = {
   CREATE_WIKI_PAGE: 'create_wiki_page',
   IMAGE_COLUMN_TOGGLE: 'Image_column_toggle',
   CREATE_WHITEBOARD_FILE: 'create_whiteboard_file',
-  GENERATE_EXDRAW_READ_ONLY_LINK: 'generate_exdraw_read_only_link'
+  GENERATE_EXDRAW_READ_ONLY_LINK: 'generate_exdraw_read_only_link',
+  TRANSFER_PREVIEW_FILE_ID: 'transfer_preview_file_id'
 };
 var PAGE_EDIT_AREA_WIDTH = exports.PAGE_EDIT_AREA_WIDTH = 672; // 672 = 794 - 2[borderLeft + borderRight] - 120[paddingLeft + paddingRight]
 var COMMENT_EDITOR_EDIT_AREA_WIDTH = exports.COMMENT_EDITOR_EDIT_AREA_WIDTH = 364;

package/dist/context.js

@@ -42,6 +42,16 @@ var Context = /*#__PURE__*/function () {
         return relative_path;
       });
     });
+    (0, _defineProperty2["default"])(this, "uploadCommentImage", function (imageFiles) {
+      var docUuid = _this.getSetting('docUuid');
+      var serviceUrl = context.getSetting('serviceUrl');
+      var assetsUrl = context.getSetting('assetsUrl');
+      return _this.api.uploadSdocImage(docUuid, imageFiles).then(function (res) {
+        var relative_path = res.data.relative_path;
+        var filePath = serviceUrl + assetsUrl + relative_path[0];
+        return [filePath];
+      });
+    });
     (0, _defineProperty2["default"])(this, "uploadLocalVideo", function (videoFiles) {
       var docUuid = _this.getSetting('docUuid');
       return _this.api.uploadSdocVideo(docUuid, videoFiles).then(function (res) {
@@ -119,6 +129,11 @@ var Context = /*#__PURE__*/function () {
         return res;
       });
     }
+  }, {
+    key: "getFileContentByDocUuidAndAccessToken",
+    value: function getFileContentByDocUuidAndAccessToken(docUuid, access_token) {
+      return this.sdocServerApi.getFileContentByDocUuidAndAccessToken(docUuid, access_token);
+    }
   }, {
     key: "normalizeSdocContent",
     value: function normalizeSdocContent() {
@@ -364,6 +379,11 @@ var Context = /*#__PURE__*/function () {
       if (!this.config) return;
       this.config['docUuid'] = docUuid;
     }
+  }, {
+    key: "getTokenByDocUuid",
+    value: function getTokenByDocUuid(docUuid) {
+      return this.api.getTokenByDocUuid(docUuid);
+    }
   }]);
 }();
 var context = new Context();

package/dist/extension/commons/file-link-preview/helper.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.saveSdocToken = exports.getSdocToken = void 0;
+var saveSdocToken = exports.saveSdocToken = function saveSdocToken(docUuid, token) {
+  var now = Date.now();
+  // 3 days is the valid time token set by back-end
+  var expireTime = now + 3 * 24 * 60 * 60 * 1000;
+  localStorage.setItem("access_token_".concat(docUuid), token);
+  localStorage.setItem("access_token_".concat(docUuid, "_expire"), expireTime.toString());
+};
+var getSdocToken = exports.getSdocToken = function getSdocToken(docUuid) {
+  var token = localStorage.getItem("access_token_".concat(docUuid));
+  var expire = localStorage.getItem("access_token_".concat(docUuid, "_expire"));
+  if (!token || !expire) return null;
+  if (Date.now() > parseInt(expire)) {
+    localStorage.removeItem("access_token_".concat(docUuid));
+    localStorage.removeItem("access_token_".concat(docUuid, "_expire"));
+    return null;
+  }
+  return token;
+};

package/dist/extension/commons/file-link-preview/index.css

@@ -0,0 +1,148 @@
+.sdoc-file-preview-drawer {
+  width: 100%;
+  height: 100%;
+}
+
+.sdoc-file-preview-drawer .file-preview-panel-wrapper {
+  /* 100vh - toolbar height*/
+  height: calc(100vh - 93px);
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+}
+
+.sdoc-file-preview-drawer .file-preview-panel-header {
+  padding: 0 16px;
+  height: 46px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #EAECEF;
+}
+
+.sdoc-file-preview-drawer .file-preview-panel-header .file-preview-panel-header-left {
+  display: flex;
+  align-items: center;
+}
+
+.sdoc-file-preview-drawer .file-preview-panel-header-right .file-preview-full-screen {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  height: 24px;
+  justify-content: center;
+  width: 24px;
+  margin-right: 8px;
+}
+
+.sdoc-file-preview-drawer .file-preview-panel-header-right .file-preview-full-screen:hover {
+  border-radius: 3px;
+  background-color: #EFEFEF;
+}
+
+.sdoc-file-preview-drawer .file-preview-panel-header-right .file-preview-full-screen .icon-font {
+  color: #999;
+  font-size: 14px;
+}
+
+
+.sdoc-file-preview-drawer .file-preview-panel-header .file-preview-panel-header-left .detail-header-icon-container {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  height: 32px;
+  justify-content: center;
+  width: 32px
+}
+
+.sdoc-file-preview-drawer .file-preview-panel-header .file-preview-panel-header-left .name.ellipsis {
+  color: var(--bs-body-color);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  margin: 0 .5rem 0 6px;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sdoc-file-preview-drawer .file-preview-panel-header .file-preview-panel-header-left .sdoc-file-preview-drawer .file-preview-panel-header .file-preview-panel-header-left .title {
+  color: #212529;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.sdoc-file-preview-drawer .file-preview-panel-header .file-preview-panel-header-right {
+  display: flex;
+}
+
+.sdoc-file-preview-drawer .file-preview-panel-body {
+  display: flex;
+  flex: 1 1;
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.file-preview-panel-body .file-preview-container {
+  overflow: auto;
+}
+
+.sdoc-file-preview-drawer .file-preview-panel-body .sdoc-article-container {
+  width: 100% !important;
+  padding: 0px;
+  pointer-events: none;
+  user-select: auto;
+}
+
+.file-preview-panel-body .sdoc-article-container .article.sdoc-editor__article {
+  border: none;
+  box-shadow: none;
+  padding: 8px;
+}
+
+.file-preview-panel-body .file-preview-container:fullscreen .sdoc-editor__article {
+  padding: calc(100vw / 794 * 40) calc(100vw / 794 * 60) !important;
+  font-size: calc(100vw / 794 * 14.7) !important;
+}
+
+.file-preview-panel-body .file-preview-container:fullscreen .sdoc-checkbox-input {
+  width: calc(100vw / 794 * 13) !important;
+}
+
+.file-preview-panel-body .file-preview-container:fullscreen .sdoc-code-block-pre {
+  font-size: calc(100vw / 794 * 13.3) !important;
+}
+
+.file-preview-panel-body .file-preview-container:fullscreen .sdoc-header-title {
+  font-size: calc(100vw / 794 * 33.7) !important;
+}
+
+.file-preview-panel-body .file-preview-container:fullscreen .sdoc-header-subtitle {
+  font-size: calc(100vw / 794 * 20) !important;
+}
+
+.file-preview-panel-body .file-preview-container:fullscreen .sdoc-header-1 {
+  font-size: calc(100vw / 794 * 26.7) !important;
+}
+
+.file-preview-panel-body .file-preview-container:fullscreen .sdoc-header-2 {
+  font-size: calc(100vw / 794 * 21.3) !important;
+}
+
+.file-preview-panel-body .file-preview-container:fullscreen .sdoc-header-3 {
+  font-size: calc(100vw / 794 * 18.7) !important;
+}
+
+.file-preview-panel-body .file-preview-container:fullscreen .sdoc-header-4 {
+  font-size: calc(100vw / 794 * 16) !important;
+}
+
+.file-preview-panel-body .file-preview-container:fullscreen .sdoc-header-5,
+.file-preview-panel-body .file-preview-container:fullscreen .sdoc-header-6 {
+  font-size: calc(100vw / 794 * 14.7) !important;
+}
+
+.file-preview-panel-body .sdoc-article-container .sdoc-table-wrapper {
+  max-width: none !important;
+}

package/dist/extension/commons/file-link-preview/index.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _regenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _fileLoading = _interopRequireDefault(require("../../../components/file-loading"));
+var _context2 = _interopRequireDefault(require("../../../context"));
+var _usePlugins2 = require("../../../hooks/use-plugins");
+var _useScrollContext = require("../../../hooks/use-scroll-context");
+var _readonlyArticle = _interopRequireDefault(require("../../../views/readonly-article"));
+var _helpers = require("../select-file-dialog/helpers");
+var _helper = require("./helper");
+require("./index.css");
+var FilePreviewWrapper = function FilePreviewWrapper(_ref) {
+  var docUuid = _ref.docUuid,
+    title = _ref.title;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    fileContent = _useState2[0],
+    setFileContent = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    Component = _useState4[0],
+    setComponent = _useState4[1];
+  var _useState5 = (0, _react.useState)(true),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    isReloading = _useState6[0],
+    setIsReloading = _useState6[1];
+  var readonlyEditor = (0, _react.useMemo)(function () {
+    return (0, _slateReact.withReact)((0, _slate.createEditor)());
+  }, [docUuid]);
+  var _usePlugins = (0, _usePlugins2.usePlugins)(),
+    closePlugin = _usePlugins.closePlugin;
+  var filePreviewRef = (0, _react.useRef)();
+  var fileTypeIcon = (0, _helpers.parcelFileTypeIcon)(title);
+  var openFullscreen = function openFullscreen() {
+    if (filePreviewRef.current.requestFullscreen) {
+      // Chrome
+      filePreviewRef.current.requestFullscreen();
+    } else if (filePreviewRef.current.webkitRequestFullscreen) {
+      // Safari
+      filePreviewRef.current.webkitRequestFullscreen();
+    } else if (filePreviewRef.current.msRequestFullscreen) {
+      // IE11
+      filePreviewRef.current.msRequestFullscreen();
+    }
+  };
+  (0, _react.useEffect)(function () {
+    var fetchFileContent = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/(0, _regenerator2["default"])().m(function _callee() {
+        var token, tokenRes, result, _t;
+        return (0, _regenerator2["default"])().w(function (_context) {
+          while (1) switch (_context.p = _context.n) {
+            case 0:
+              _context.p = 0;
+              token = (0, _helper.getSdocToken)(docUuid);
+              if (token) {
+                _context.n = 2;
+                break;
+              }
+              _context.n = 1;
+              return _context2["default"].getTokenByDocUuid(docUuid);
+            case 1:
+              tokenRes = _context.v;
+              (0, _helper.saveSdocToken)(docUuid, tokenRes.data.access_token);
+              token = tokenRes.data.access_token;
+            case 2:
+              _context.n = 3;
+              return _context2["default"].getFileContentByDocUuidAndAccessToken(docUuid, token);
+            case 3:
+              result = _context.v;
+              setIsReloading(false);
+              setFileContent(result.data.elements);
+              setComponent(function () {
+                return _readonlyArticle["default"];
+              });
+              _context.n = 5;
+              break;
+            case 4:
+              _context.p = 4;
+              _t = _context.v;
+              console.log(_t);
+              setFileContent(null);
+              setIsReloading(false);
+            case 5:
+              return _context.a(2);
+          }
+        }, _callee, null, [[0, 4]]);
+      }));
+      return function fetchFileContent() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    if (docUuid) {
+      setIsReloading(true);
+      fetchFileContent();
+    }
+  }, [docUuid]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-file-preview-drawer"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "file-preview-panel-wrapper"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "file-preview-panel-header"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "file-preview-panel-header-left"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "detail-header-icon-container"
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: fileTypeIcon,
+    width: "32px",
+    height: "32px",
+    alt: ""
+  })), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "name ellipsis",
+    title: title
+  }, title)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "file-preview-panel-header-right"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    id: "file-preview_full_screen_mode",
+    role: "button",
+    className: "file-preview-full-screen",
+    onClick: openFullscreen
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-fullscreen icon-font"
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-icon-btn",
+    onClick: closePlugin
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-sm-close"
+  })))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "file-preview-panel-body"
+  }, isReloading && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "h-100 w-100 d-flex align-items-center justify-content-center"
+  }, /*#__PURE__*/_react["default"].createElement(_fileLoading["default"], null)), Component && !isReloading && /*#__PURE__*/_react["default"].createElement(_useScrollContext.ScrollContext.Provider, {
+    value: {
+      scrollRef: {
+        current: null
+      }
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "file-preview-container",
+    ref: filePreviewRef
+  }, /*#__PURE__*/_react["default"].createElement(Component, {
+    key: docUuid,
+    editor: readonlyEditor,
+    slateValue: fileContent
+  }))))));
+};
+var _default = exports["default"] = FilePreviewWrapper;

package/dist/extension/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -43,8 +43,10 @@ var _plugins = _interopRequireWildcard(require("./plugins"));
 var _renderElement = _interopRequireDefault(require("./render/render-element"));
 var _renderLeaf = _interopRequireDefault(require("./render/render-leaf"));
 var _toolbar = require("./toolbar");
+var _ref;
 var baseEditor = (0, _slateHistory.withHistory)((0, _slateReact.withReact)((0, _slate.createEditor)()));
-var defaultEditor = _plugins["default"] === null || _plugins["default"] === void 0 ? void 0 : _plugins["default"].reduce(function (editor, pluginItem) {
+var defaultEditor = (_ref = _plugins["default"] || []) === null || _ref === void 0 ? void 0 : _ref.reduce(function (editor, pluginItem) {
+  if (!pluginItem) return editor;
   var withPlugin = pluginItem.editorPlugin;
   if (withPlugin) {
     return withPlugin(editor);

package/dist/extension/plugins/callout/render-elem/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
@@ -77,10 +78,8 @@ var renderCallout = function renderCallout(_ref, editor) {
   var handleScroll = (0, _react.useCallback)(function (e) {
     if (readOnly) return;
     if (!isShowColorSelector) return;
-    if (e.currentTarget.scrollTop) {
-      var menuPosition = (0, _utils.getMenuPosition)(calloutRef.current, editor);
-      setPopoverPosition(menuPosition);
-    }
+    var menuPosition = (0, _utils.getMenuPosition)(calloutRef.current, editor);
+    setPopoverPosition(menuPosition);
   }, [editor, isShowColorSelector, readOnly]);
   (0, _react.useEffect)(function () {
     var eventBus = _eventBus["default"].getInstance();
@@ -90,12 +89,33 @@ var renderCallout = function renderCallout(_ref, editor) {
   (0, _react.useEffect)(function () {
     if (readOnly) return;
     var observerRefValue = null;
+    var resizeObserver = null;
     if (scrollRef.current) {
       scrollRef.current.addEventListener('scroll', handleScroll);
       observerRefValue = scrollRef.current;
+      resizeObserver = new ResizeObserver(function (entries) {
+        var _iterator = (0, _createForOfIteratorHelper2["default"])(entries),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var entry = _step.value;
+            if (resizeObserver) {
+              handleScroll();
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      });
+      resizeObserver.observe(scrollRef.current);
     }
     return function () {
       observerRefValue.removeEventListener('scroll', handleScroll);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
     };
   }, [handleScroll, readOnly, scrollRef]);
   (0, _react.useEffect)(function () {

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

@@ -99,17 +99,15 @@ var CodeBlock = function CodeBlock(_ref) {
   var onScroll = (0, _react.useCallback)(function (e) {
     if (readOnly) return;
     if (!showHoverMenu) return;
-    if (e.currentTarget.scrollTop) {
-      var _codeBlockRef$current2 = codeBlockRef.current.getBoundingClientRect(),
-        top = _codeBlockRef$current2.top,
-        left = _codeBlockRef$current2.left;
-      var menuTop = top - 42; // top = top distance - menu height
-      var newMenuPosition = {
-        top: menuTop,
-        left: left // left = code-block left distance
-      };
-      setMenuPosition(newMenuPosition);
-    }
+    var _codeBlockRef$current2 = codeBlockRef.current.getBoundingClientRect(),
+      top = _codeBlockRef$current2.top,
+      left = _codeBlockRef$current2.left;
+    var menuTop = top - 42; // top = top distance - menu height
+    var newMenuPosition = {
+      top: menuTop,
+      left: left // left = code-block left distance
+    };
+    setMenuPosition(newMenuPosition);
   }, [readOnly, showHoverMenu]);
   (0, _react.useEffect)(function () {
     if (readOnly) return;

package/dist/extension/plugins/file-link/render-elem.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _slateReact = require("@seafile/slate-react");
@@ -73,9 +74,27 @@ var FileLink = function FileLink(_ref) {
   }, []);
   (0, _react.useEffect)(function () {
     var observerRefValue = null;
+    var resizeObserver = null;
     if (isShowInsertHoverMenu) {
       scrollRef.current && scrollRef.current.addEventListener('scroll', onScroll);
       observerRefValue = scrollRef.current;
+      resizeObserver = new ResizeObserver(function (entries) {
+        var _iterator = (0, _createForOfIteratorHelper2["default"])(entries),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var entry = _step.value;
+            if (resizeObserver) {
+              onScroll();
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      });
+      resizeObserver.observe(scrollRef.current);
     } else {
       scrollRef.current && scrollRef.current.removeEventListener('scroll', onScroll);
     }
@@ -83,6 +102,9 @@ var FileLink = function FileLink(_ref) {
       if (observerRefValue) {
         observerRefValue.removeEventListener('scroll', onScroll);
       }
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isShowInsertHoverMenu]);

package/dist/extension/plugins/image/render-elem.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.renderImage = renderImage;
 exports.renderImageBlock = renderImageBlock;
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -169,6 +170,7 @@ var Image = function Image(_ref) {
   }, [isResizing]);
   (0, _react.useEffect)(function () {
     var observerRefValue = null;
+    var resizeObserver = null;
     if (isShowImageHoverMenu) {
       registerEvent([{
         'eventName': 'click',
@@ -176,6 +178,23 @@ var Image = function Image(_ref) {
       }]);
       scrollRef.current && scrollRef.current.addEventListener('scroll', onScroll);
       observerRefValue = scrollRef.current;
+      resizeObserver = new ResizeObserver(function (entries) {
+        var _iterator = (0, _createForOfIteratorHelper2["default"])(entries),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var entry = _step.value;
+            if (resizeObserver) {
+              onScroll();
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      });
+      resizeObserver.observe(scrollRef.current);
     } else {
       unregisterEvent([{
         'eventName': 'click',
@@ -191,6 +210,9 @@ var Image = function Image(_ref) {
       if (observerRefValue) {
         observerRefValue.removeEventListener('scroll', onScroll);
       }
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isShowImageHoverMenu, onHideImageHoverMenu]);
@@ -271,8 +293,8 @@ var Image = function Image(_ref) {
     onMouseOver: function onMouseOver(e) {
       return (0, _helpers.selectImageWhenSelectPartial)(e, editor, element, isSelected);
     },
-    contentEditable: "false",
     "data-src": (0, _helpers.getImageURL)(data, editor),
+    contentEditable: "false",
     suppressContentEditableWarning: true
   }), /*#__PURE__*/_react["default"].createElement("img", {
     ref: imageRef,
@@ -287,8 +309,8 @@ var Image = function Image(_ref) {
     onMouseOver: function onMouseOver(e) {
       return (0, _helpers.selectImageWhenSelectPartial)(e, editor, element, isSelected);
     },
-    contentEditable: "false",
     "data-src": data.src,
+    contentEditable: "false",
     suppressContentEditableWarning: true
   }), /*#__PURE__*/_react["default"].createElement(_copyImageErrorSvg["default"], {
     t: t,
@@ -298,12 +320,12 @@ var Image = function Image(_ref) {
     "data-id": element.id,
     className: (0, _classnames["default"])('sdoc-image-wrapper', className)
   }, attributes, {
+    contentEditable: "true",
+    suppressContentEditableWarning: true,
     style: (0, _objectSpread2["default"])({}, style),
     onMouseOver: function onMouseOver(e) {
       return (0, _helpers.selectImageWhenSelectPartial)(e, editor, element, isSelected);
-    },
-    contentEditable: "false",
-    suppressContentEditableWarning: true
+    }
   }), /*#__PURE__*/_react["default"].createElement("span", {
     className: "sdoc-image-inner"
   }, /*#__PURE__*/_react["default"].createElement("span", {
@@ -410,7 +432,7 @@ function renderImageBlock(props, editor) {
     onMouseOver: function onMouseOver(e) {
       return (0, _helpers.selectImageWhenSelectPartial)(e, editor, element, isSelected);
     },
-    contentEditable: "false",
+    contentEditable: "true",
     suppressContentEditableWarning: true
   }), children);
 }

package/dist/extension/plugins/link/render-elem.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
 var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/callSuper"));
@@ -24,11 +25,27 @@ var Link = /*#__PURE__*/function (_React$Component) {
     var _this;
     (0, _classCallCheck2["default"])(this, Link);
     _this = (0, _callSuper2["default"])(this, Link, [props]);
+    (0, _defineProperty2["default"])(_this, "resizeObserver", null);
     (0, _defineProperty2["default"])(_this, "registerEventHandle", function () {
       document.addEventListener('click', _this.onHideLinkMenu);
       var scrollRef = _this.context.scrollRef;
       if (scrollRef.current) {
         scrollRef.current.addEventListener('scroll', _this.onScroll);
+        _this.resizeObserver = new ResizeObserver(function (entries) {
+          var _iterator = (0, _createForOfIteratorHelper2["default"])(entries),
+            _step;
+          try {
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              var entry = _step.value;
+              _this.onScroll();
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+        });
+        _this.resizeObserver.observe(scrollRef.current);
       }
     });
     (0, _defineProperty2["default"])(_this, "unregisterEventHandle", function () {
@@ -37,6 +54,10 @@ var Link = /*#__PURE__*/function (_React$Component) {
       if (scrollRef.current) {
         scrollRef.current.addEventListener('scroll', _this.onScroll);
       }
+      if (_this.resizeObserver) {
+        _this.resizeObserver.disconnect();
+        _this.resizeObserver = null;
+      }
     });
     (0, _defineProperty2["default"])(_this, "onHideLinkMenu", function () {
       _this.setState({

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _slate = require("@seafile/slate");
@@ -69,13 +70,34 @@ var RenderQuickInsert = function RenderQuickInsert(_ref, editor, readonly) {
   (0, _react.useEffect)(function () {
     if (readonly) return;
     if (!sideMenuRef.current) return;
+    var resizeObserver = null;
     var scrollDom = scrollRef.current;
     handleInsertMenuStyle();
     document.addEventListener('click', handleClick);
     scrollDom.addEventListener('scroll', handleScroll);
+    resizeObserver = new ResizeObserver(function (entries) {
+      var _iterator = (0, _createForOfIteratorHelper2["default"])(entries),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var entry = _step.value;
+          if (resizeObserver) {
+            handleScroll();
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    });
+    resizeObserver.observe(scrollDom);
     return function () {
       document.removeEventListener('click', handleClick);
       scrollDom.removeEventListener('scroll', handleScroll);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
     };
   }, [editor, element, handleClick, handleInsertMenuStyle, handleScroll, readonly, scrollRef]);
   var handleInsertBlock = function handleInsertBlock(node) {

package/dist/extension/plugins/sdoc-link/hover-menu/index.js

@@ -13,8 +13,12 @@ var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _toast = _interopRequireDefault(require("../../../../components/toast"));
+var _constants = require("../../../../constants");
+var _usePlugins2 = require("../../../../hooks/use-plugins");
+var _outline = require("../../../../outline");
+var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
 var _commons = require("../../../commons");
-var _constants = require("../constants");
+var _constants2 = require("../constants");
 var _helpers = require("../helpers");
 require("./index.css");
 var SdocLinkHoverMenu = function SdocLinkHoverMenu(_ref) {
@@ -25,6 +29,8 @@ var SdocLinkHoverMenu = function SdocLinkHoverMenu(_ref) {
     onHideInsertHoverMenu = _ref.onHideInsertHoverMenu,
     t = _ref.t,
     url = _ref.url;
+  var _usePlugins = (0, _usePlugins2.usePlugins)(),
+    updateDisplayPlugin = _usePlugins.updateDisplayPlugin;
   var readOnly = (0, _slateReact.useReadOnly)();
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -56,10 +62,25 @@ var SdocLinkHoverMenu = function SdocLinkHoverMenu(_ref) {
     onHideInsertHoverMenu();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var selectedType = element.display_type || _constants.SDOC_LINK_TYPE.TEXT_LINK;
+  var handleOpenLinkPreview = (0, _react.useCallback)(function (pluginName) {
+    updateDisplayPlugin(pluginName, true);
+    var doc_uuid = element.doc_uuid,
+      title = element.title,
+      type = element.type;
+    var eventBus = _eventBus["default"].getInstance();
+    eventBus.dispatch(_constants.INTERNAL_EVENT.TRANSFER_PREVIEW_FILE_ID, {
+      doc_uuid: doc_uuid,
+      title: title,
+      type: type
+    });
+    setTimeout(function () {
+      onHideInsertHoverMenu();
+    }, 0);
+  }, [updateDisplayPlugin]);
+  var selectedType = element.display_type || _constants2.SDOC_LINK_TYPE.TEXT_LINK;
   var id = "sdoc-link-display-type-".concat(element.id);
-  var newSdocFileTypes = _constants.SDOC_LINK_TYPES.filter(function (sdocLinkType) {
-    return (0, _helpers.isInTable)(editor, element) ? sdocLinkType !== _constants.SDOC_LINK_TYPE.CARD_LINK : true;
+  var newSdocFileTypes = _constants2.SDOC_LINK_TYPES.filter(function (sdocLinkType) {
+    return (0, _helpers.isInTable)(editor, element) ? sdocLinkType !== _constants2.SDOC_LINK_TYPE.CARD_LINK : true;
   });
   return /*#__PURE__*/_react["default"].createElement(_commons.ElementPopover, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-link-hover-menu-container",
@@ -78,7 +99,7 @@ var SdocLinkHoverMenu = function SdocLinkHoverMenu(_ref) {
     target: "_blank",
     rel: "noopener noreferrer",
     className: "link-op-menu-link"
-  }, t('Open_link')))), !readOnly && /*#__PURE__*/_react["default"].createElement("span", {
+  }, t('Open_link')))), !readOnly && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "op-group-item"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     role: "button",
@@ -92,16 +113,26 @@ var SdocLinkHoverMenu = function SdocLinkHoverMenu(_ref) {
     onClick: onShowProver,
     id: id
   }, /*#__PURE__*/_react["default"].createElement("i", {
-    className: (0, _classnames["default"])('icon-font mr-1', _constants.SDOC_LINK_TYPE_CONFIG[selectedType].icon)
+    className: (0, _classnames["default"])('icon-font mr-1', _constants2.SDOC_LINK_TYPE_CONFIG[selectedType].icon)
   }), /*#__PURE__*/_react["default"].createElement("i", {
     className: "sdocfont sdoc-drop-down icon-font"
-  })), /*#__PURE__*/_react["default"].createElement("span", {
+  }))), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "op-group-item"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
     role: "button",
     className: 'op-item',
     onClick: onUnwrapFileLinkNode
   }, /*#__PURE__*/_react["default"].createElement("i", {
     className: "sdocfont sdoc-unlink icon-font"
-  })))), isShowDisplayStylePopover && /*#__PURE__*/_react["default"].createElement("div", {
+  })), /*#__PURE__*/_react["default"].createElement("span", {
+    role: "button",
+    className: "op-item",
+    onClick: function onClick() {
+      return handleOpenLinkPreview('sdoc-file-preview');
+    }
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont eye icon-font"
+  }))))), isShowDisplayStylePopover && /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-file-display-style-popover sdoc-dropdown-menu"
   }, newSdocFileTypes.map(function (sdocLinkType) {
     return /*#__PURE__*/_react["default"].createElement("div", {
@@ -114,8 +145,8 @@ var SdocLinkHoverMenu = function SdocLinkHoverMenu(_ref) {
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "sdoc-dropdown-item-content"
     }, /*#__PURE__*/_react["default"].createElement("i", {
-      className: (0, _classnames["default"])('sdoc-dropdown-item-content-icon', _constants.SDOC_LINK_TYPE_CONFIG[sdocLinkType].icon)
-    }), /*#__PURE__*/_react["default"].createElement("span", null, t(_constants.SDOC_LINK_TYPE_CONFIG[sdocLinkType].text))), selectedType === sdocLinkType && /*#__PURE__*/_react["default"].createElement("i", {
+      className: (0, _classnames["default"])('sdoc-dropdown-item-content-icon', _constants2.SDOC_LINK_TYPE_CONFIG[sdocLinkType].icon)
+    }), /*#__PURE__*/_react["default"].createElement("span", null, t(_constants2.SDOC_LINK_TYPE_CONFIG[sdocLinkType].text))), selectedType === sdocLinkType && /*#__PURE__*/_react["default"].createElement("i", {
       className: "sdocfont sdoc-check-mark sdoc-dropdown-item-right-icon"
     }));
   }))));

package/dist/extension/plugins/sdoc-link/render/render-elem.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _slate = require("@seafile/slate");
@@ -75,9 +76,27 @@ var SdocFileLink = function SdocFileLink(_ref) {
   }, []);
   (0, _react.useEffect)(function () {
     var observerRefValue = null;
+    var resizeObserver = null;
     if (isShowInsertHoverMenu) {
       scrollRef.current && scrollRef.current.addEventListener('scroll', onScroll);
       observerRefValue = scrollRef.current;
+      resizeObserver = new ResizeObserver(function (entries) {
+        var _iterator = (0, _createForOfIteratorHelper2["default"])(entries),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var entry = _step.value;
+            if (resizeObserver) {
+              onScroll();
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      });
+      resizeObserver.observe(scrollRef.current);
     } else {
       scrollRef.current && scrollRef.current.removeEventListener('scroll', onScroll);
     }
@@ -85,6 +104,9 @@ var SdocFileLink = function SdocFileLink(_ref) {
       if (observerRefValue) {
         observerRefValue.removeEventListener('scroll', onScroll);
       }
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isShowInsertHoverMenu]);

package/dist/extension/plugins/whiteboard/render-elem.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderWhiteboard = renderWhiteboard;
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _slate = require("@seafile/slate");
@@ -80,27 +81,46 @@ var Whiteboard = function Whiteboard(_ref) {
   var handleScroll = (0, _react.useCallback)(function (e) {
     if (readOnly) return;
     if (!isSelected) return;
-    if (e.currentTarget.scrollTop) {
-      var _menuPosition = (0, _utils.getMenuPosition)(whiteboardRef.current, editor);
-      setMenuPosition(_menuPosition);
-    }
+    var menuPosition = (0, _utils.getMenuPosition)(whiteboardRef.current, editor);
+    setMenuPosition(menuPosition);
   }, [editor, isSelected, readOnly]);
   (0, _react.useEffect)(function () {
     if (readOnly) return;
     var observerRefValue = null;
+    var resizeObserver = null;
     if (scrollRef.current) {
       scrollRef.current.addEventListener('scroll', handleScroll);
       observerRefValue = scrollRef.current;
+      resizeObserver = new ResizeObserver(function (entries) {
+        var _iterator = (0, _createForOfIteratorHelper2["default"])(entries),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var entry = _step.value;
+            if (resizeObserver) {
+              handleScroll();
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      });
+      resizeObserver.observe(scrollRef.current);
     }
     return function () {
       observerRefValue.removeEventListener('scroll', handleScroll);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
     };
   }, [handleScroll, readOnly, scrollRef]);
   var handleOnClick = (0, _react.useCallback)(function () {
     if (readOnly) return;
     if (isSelected) {
-      var _menuPosition2 = (0, _utils.getMenuPosition)(whiteboardRef.current, editor);
-      setMenuPosition(_menuPosition2);
+      var _menuPosition = (0, _utils.getMenuPosition)(whiteboardRef.current, editor);
+      setMenuPosition(_menuPosition);
     }
   }, [editor, isSelected, readOnly]);
   var openFullscreen = function openFullscreen() {

package/dist/hooks/use-plugins.js

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _comment = _interopRequireDefault(require("../comment"));
 var _commentOperation = _interopRequireDefault(require("../comment/components/comment-operation"));
 var _constants = require("../constants");
+var _fileLinkPreview = _interopRequireDefault(require("../extension/commons/file-link-preview"));
 var PluginsContext = /*#__PURE__*/_react["default"].createContext(null);
 var PluginsProvider = exports.PluginsProvider = function PluginsProvider(_ref) {
   var showComment = _ref.showComment,
@@ -29,6 +30,12 @@ var PluginsProvider = exports.PluginsProvider = function PluginsProvider(_ref) {
   }, []);
   var plugins = (0, _react.useMemo)(function () {
     var allPlugins = propsPlugins;
+    allPlugins.push({
+      name: 'sdoc-file-preview',
+      resizable_width: true,
+      display_type: _constants.PLUGIN_DISPLAY_TYPE.RIGHT_PANEL,
+      component: _fileLinkPreview["default"]
+    });
     if (showComment) {
       allPlugins.push({
         name: 'sdoc-comment',
@@ -41,7 +48,8 @@ var PluginsProvider = exports.PluginsProvider = function PluginsProvider(_ref) {
     return allPlugins;
   }, [showComment, propsPlugins]);
   var updateDisplayPlugin = (0, _react.useCallback)(function (name) {
-    if (!name || displayName === name) {
+    var isFilePreview = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if ((!name || displayName === name) && !isFilePreview) {
       setDisplayName('');
       return;
     }

package/dist/right-panel/index.js

@@ -25,10 +25,18 @@ var RightPanel = function RightPanel(_ref) {
     plugins = _usePlugins.plugins,
     displayPluginName = _usePlugins.displayPluginName,
     closePlugin = _usePlugins.closePlugin;
-  var _useState = (0, _react.useState)(MIN_PANEL_WIDTH),
+  var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    width = _useState2[0],
-    setWidth = _useState2[1];
+    title = _useState2[0],
+    setTitle = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    docUuid = _useState4[0],
+    setDocUuid = _useState4[1];
+  var _useState5 = (0, _react.useState)(MIN_PANEL_WIDTH),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    width = _useState6[0],
+    setWidth = _useState6[1];
   if (editor.editorType === _constants.WIKI_EDITOR) {
     plugins = [{
       name: 'sdoc-comment',
@@ -88,6 +96,22 @@ var RightPanel = function RightPanel(_ref) {
     var eventBus = _eventBus["default"].getInstance();
     eventBus.dispatch(_constants.INTERNAL_EVENT.RESIZE_ARTICLE);
   }, [displayPluginName]);
+  var updateFilePreviewPlugin = (0, _react.useCallback)(function (_ref2) {
+    var doc_uuid = _ref2.doc_uuid,
+      title = _ref2.title,
+      type = _ref2.type;
+    if (type && type === 'sdoc_link') {
+      setTitle(title + '.sdoc');
+    }
+    setDocUuid(doc_uuid);
+  }, []);
+  (0, _react.useEffect)(function () {
+    var eventBus = _eventBus["default"].getInstance();
+    var unsubscribeTransferFileId = eventBus.subscribe(_constants.INTERNAL_EVENT.TRANSFER_PREVIEW_FILE_ID, updateFilePreviewPlugin);
+    return function () {
+      unsubscribeTransferFileId();
+    };
+  }, []);
   if (!displayPluginName) return null;
   var plugin = plugins.find(function (p) {
     return p.name === displayPluginName;
@@ -111,7 +135,9 @@ var RightPanel = function RightPanel(_ref) {
     editor: editor,
     type: "global",
     onClose: closePlugin,
-    width: width
+    width: width,
+    title: title,
+    docUuid: docUuid
   })));
 };
 var _default = exports["default"] = RightPanel;

package/dist/utils/default-mode.js

@@ -15,7 +15,7 @@ var getStyleByDefaultMode = exports.getStyleByDefaultMode = function getStyleByD
   } : {};
 
   // Has outline
-  if (isShowOutline && editor.editorType !== _constants.WIKI_EDITOR) {
+  if (isShowOutline && scrollRef.current && editor.editorType !== _constants.WIKI_EDITOR) {
     var rect = scrollRef.current.getBoundingClientRect();
     if ((rect.width - Number(_constants.ARTICLE_DEFAULT_WIDTH.slice(0, 3))) / 2 < 280) {
       containerStyle['marginLeft'] = "".concat(_constants.LEFT_OUTLINE_WIDTH, "px");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "2.0.145",
+  "version": "2.0.147",
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",
@@ -17,7 +17,7 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "@seafile/comment-editor": "0.0.7",
+    "@seafile/comment-editor": "^0.0.12",
     "@seafile/print-js": "1.6.6",
     "@seafile/react-image-lightbox": "4.0.2",
     "@seafile/slate": "0.91.8",
@@ -71,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4282c45e1f08d62085784c803721b16afb2fb65f"
+  "gitHead": "c3c26480c7f0959a1425e0f6f7048154f5aa87f4"
 }