@seafile/sdoc-editor 2.0.156 → 2.0.158

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

@@ -168,6 +168,7 @@ var EditorComment = function EditorComment(_ref) {
     };
     var handleClickCommentedText = function handleClickCommentedText(event) {
       var parentDom = event.target.parentElement;
+      if (!parentDom) return;
       if (typeof parentDom.className !== 'string') return;
       if (parentDom !== null && parentDom !== void 0 && parentDom.className.split(/\s+/).some(function (cls) {
         return cls.startsWith('sdoc_comment');

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

@@ -101,48 +101,30 @@
   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 .sdoc-article-container .sdoc-table-wrapper {
+  max-width: none !important;
 }
 
-.file-preview-panel-body .file-preview-container:fullscreen .sdoc-header-4 {
-  font-size: calc(100vw / 794 * 16) !important;
+.zoom-out-container {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
 }
 
-.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-zoom-out-container {
+  pointer-events: auto;
+  background: #fff;
+  border-radius: 12px;
+  max-width: 80%;
+  max-height: 80%;
+  overflow: auto;
 }
 
-.file-preview-panel-body .sdoc-article-container .sdoc-table-wrapper {
-  max-width: none !important;
+.file-preview-zoom-out-container .article {
+  padding: 40px;
+  pointer-events: none;
 }

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

@@ -10,6 +10,7 @@ var _regenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/r
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
 var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
 var _fileLoading = _interopRequireDefault(require("../../../components/file-loading"));
@@ -35,29 +36,27 @@ var FilePreviewWrapper = function FilePreviewWrapper(_ref) {
     _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 _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    isShowZoomOut = _useState8[0],
+    setIsShowZoomOut = _useState8[1];
   var _usePlugins = (0, _usePlugins2.usePlugins)(),
     closePlugin = _usePlugins.closePlugin;
   var filePreviewRef = (0, _react.useRef)();
+  var readonlyEditor = (0, _react.useMemo)(function () {
+    var editor = (0, _slateReact.withReact)((0, _slate.createEditor)());
+    editor.preview_docUuid = docUuid;
+    return editor;
+  }, [docUuid]);
   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();
-    }
+  var openFullscreen = function openFullscreen(e) {
+    e.stopPropagation();
+    setIsShowZoomOut(true);
   };
   (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;
+        var token, tokenRes, result, fileContentElements, _t;
         return (0, _regenerator2["default"])().w(function (_context) {
           while (1) switch (_context.p = _context.n) {
             case 0:
@@ -78,8 +77,9 @@ var FilePreviewWrapper = function FilePreviewWrapper(_ref) {
               return _context2["default"].getFileContentByDocUuidAndAccessToken(docUuid, token);
             case 3:
               result = _context.v;
+              fileContentElements = result.data.elements;
               setIsReloading(false);
-              setFileContent(result.data.elements);
+              setFileContent(fileContentElements);
               setComponent(function () {
                 return _readonlyArticle["default"];
               });
@@ -105,7 +105,20 @@ var FilePreviewWrapper = function FilePreviewWrapper(_ref) {
       fetchFileContent();
     }
   }, [docUuid]);
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  (0, _react.useEffect)(function () {
+    var handleKeyDown = function handleKeyDown(e) {
+      if (e.key === 'Escape') {
+        setIsShowZoomOut(false);
+      }
+    };
+    if (isShowZoomOut) {
+      document.addEventListener('keydown', handleKeyDown);
+    }
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isShowZoomOut, setIsShowZoomOut]);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-file-preview-drawer"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "file-preview-panel-wrapper"
@@ -154,6 +167,27 @@ var FilePreviewWrapper = function FilePreviewWrapper(_ref) {
     key: docUuid,
     editor: readonlyEditor,
     slateValue: fileContent
-  }))))));
+  })))))), isShowZoomOut && Component && (/*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement("div", {
+    className: "zoom-out-container",
+    onClick: function onClick() {
+      return setIsShowZoomOut(false);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_useScrollContext.ScrollContext.Provider, {
+    value: {
+      scrollRef: {
+        current: null
+      }
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "file-preview-zoom-out-container",
+    ref: filePreviewRef,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/_react["default"].createElement(Component, {
+    key: docUuid,
+    editor: readonlyEditor,
+    slateValue: fileContent
+  })))), document.body)));
 };
 var _default = exports["default"] = FilePreviewWrapper;

package/dist/extension/commons/select-file-dialog/index.js

@@ -55,7 +55,7 @@ var SelectSdocFileDialog = function SelectSdocFileDialog(_ref) {
       modalTitle = 'Select_video_file';
       break;
     case _constants.ELEMENT_TYPE.WHITEBOARD:
-      modalTitle = 'Select_Excalidraw_file';
+      modalTitle = 'Link_Excalidraw_file';
       break;
     default:
       break;

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

@@ -10,6 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
 var _react = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _tooltip = _interopRequireDefault(require("../../../../../components/tooltip"));
 var _commons = require("../../../../commons");
 var _helper = require("../../helper");
 var _calloutColorSelector = _interopRequireDefault(require("../callout-color-selector"));
@@ -29,6 +30,13 @@ function CalloutHoverMenu(_ref) {
     setIsShowIcon = _useState4[1];
   var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
     t = _useTranslation.t;
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    isShowTooltip = _useState6[0],
+    setIsShowTooltip = _useState6[1];
+  (0, _react.useEffect)(function () {
+    setIsShowTooltip(true);
+  }, []);
   var onColorSelectorToggle = (0, _react.useCallback)(function (event) {
     event.stopPropagation();
     if (!isShowColorSelector) {
@@ -62,22 +70,32 @@ function CalloutHoverMenu(_ref) {
     className: "sdoc-callout-hover-menu",
     style: popoverPosition
   }, /*#__PURE__*/_react["default"].createElement("div", {
+    id: "select_callout_color",
     className: firstItemClass,
     onClick: onColorSelectorToggle
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "sdocfont sdoc-callout-color mr-1"
   }), /*#__PURE__*/_react["default"].createElement("span", {
     className: "sdocfont sdoc-drop-down"
-  })), /*#__PURE__*/_react["default"].createElement("div", {
+  })), isShowTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: "select_callout_color",
+    placement: "top",
+    fade: true
+  }, t('Background_color')), /*#__PURE__*/_react["default"].createElement("div", {
     className: "callout-menu-divider"
   }), /*#__PURE__*/_react["default"].createElement("div", {
+    id: "select_callout_icon",
     className: secondItemClass,
     onClick: onIconToggle
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "sdocfont sdoc-callout-icon mr-1"
   }), /*#__PURE__*/_react["default"].createElement("span", {
     className: "sdocfont sdoc-drop-down"
-  })), isShowColorSelector && /*#__PURE__*/_react["default"].createElement(_calloutColorSelector["default"], {
+  })), isShowTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: "select_callout_icon",
+    placement: "top",
+    fade: true
+  }, t('Icon')), isShowColorSelector && /*#__PURE__*/_react["default"].createElement(_calloutColorSelector["default"], {
     editor: editor,
     element: element,
     onCloseSelector: onCloseSelector

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

@@ -13,6 +13,7 @@ var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _toast = _interopRequireDefault(require("../../../../components/toast"));
+var _tooltip = _interopRequireDefault(require("../../../../components/tooltip"));
 var _commons = require("../../../commons");
 var _constants = require("../../../constants");
 var _core = require("../../../core");
@@ -31,6 +32,13 @@ var FileLinkHoverMenu = function FileLinkHoverMenu(_ref) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isShowDisplayStylePopover = _useState2[0],
     setIsShowDisplayStylePopover = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isShowTooltip = _useState4[0],
+    setIsShowTooltip = _useState4[1];
+  (0, _react.useEffect)(function () {
+    setIsShowTooltip(true);
+  }, []);
   var onCopy = (0, _react.useCallback)(function (e) {
     e.stopPropagation();
     (0, _helpers.onCopyFileLinkNode)(editor, element);
@@ -82,29 +90,43 @@ var FileLinkHoverMenu = function FileLinkHoverMenu(_ref) {
   }, t('Open_link')))), !readOnly && /*#__PURE__*/_react["default"].createElement("span", {
     className: "op-group-item"
   }, /*#__PURE__*/_react["default"].createElement("span", {
+    id: "copy_link",
     role: "button",
     className: "op-item",
     onClick: onCopy
   }, /*#__PURE__*/_react["default"].createElement("i", {
     className: "sdocfont sdoc-copy icon-font"
-  })), /*#__PURE__*/_react["default"].createElement("span", {
+  })), isShowTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: "copy_link",
+    placement: "top",
+    fade: true
+  }, t('Copy')), /*#__PURE__*/_react["default"].createElement("span", {
+    id: "select_style",
     role: "button",
     className: (0, _classnames["default"])('op-item', {
       'link-style-icon-active': isShowDisplayStylePopover
     }),
-    onClick: onShowProver,
-    id: id
+    onClick: onShowProver
   }, /*#__PURE__*/_react["default"].createElement("i", {
     className: (0, _classnames["default"])('icon-font mr-1', _constants2.FILE_LINK_TYPE_CONFIG[selectedType].icon)
   }), /*#__PURE__*/_react["default"].createElement("i", {
     className: "sdocfont sdoc-drop-down icon-font"
-  })), /*#__PURE__*/_react["default"].createElement("span", {
+  })), isShowTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: "select_style",
+    placement: "top",
+    fade: true
+  }, t('Select_style')), /*#__PURE__*/_react["default"].createElement("span", {
+    id: "delete_link",
     role: "button",
     className: "op-item",
     onClick: onUnwrapFileLinkNode
   }, /*#__PURE__*/_react["default"].createElement("i", {
     className: "sdocfont sdoc-unlink icon-font"
-  })))), isShowDisplayStylePopover && /*#__PURE__*/_react["default"].createElement("div", {
+  })), isShowTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: "delete_link",
+    placement: "top",
+    fade: true
+  }, t('Remove_link')))), isShowDisplayStylePopover && /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-file-display-style-popover sdoc-dropdown-menu"
   }, newFileLinkTypes.map(function (fileLinkType) {
     return /*#__PURE__*/_react["default"].createElement("div", {

package/dist/extension/plugins/image/helpers.js

@@ -180,6 +180,14 @@ var getImageURL = exports.getImageURL = function getImageURL(data, editor) {
   if (isImageUrlIsFromCopy(url)) return url;
   var serviceUrl = _context2["default"].getSetting('serviceUrl');
   var assetsUrl = _context2["default"].getSetting('assetsUrl');
+
+  // If in sdoc link preview
+  var docUuid = editor.preview_docUuid;
+  if (docUuid) {
+    var baseUrl = assetsUrl.split('/');
+    baseUrl[baseUrl.length - 1] = docUuid;
+    assetsUrl = baseUrl.join('/');
+  }
   return (0, _urlJoin["default"])(serviceUrl, assetsUrl, url);
 };
 var hasSdocImages = exports.hasSdocImages = function hasSdocImages(originSdocUuid, fragmentData) {

package/dist/extension/plugins/link/hover/index.js

@@ -1,14 +1,17 @@
 "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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
 var _reactI18next = require("react-i18next");
 var _slateReact = require("@seafile/slate-react");
+var _tooltip = _interopRequireDefault(require("../../../../components/tooltip"));
 var _helpers = require("../helpers");
 require("./index.css");
 var LinkHover = function LinkHover(_ref) {
@@ -20,6 +23,13 @@ var LinkHover = function LinkHover(_ref) {
   var readOnly = (0, _slateReact.useReadOnly)();
   var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
     t = _useTranslation.t;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isShowTooltip = _useState2[0],
+    setIsShowTooltip = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setIsShowTooltip(true);
+  }, []);
   var onMouseDown = (0, _react.useCallback)(function (event) {
     event.stopPropagation();
     if (!(0, _helpers.isWeChat)()) {
@@ -41,17 +51,27 @@ var LinkHover = function LinkHover(_ref) {
   }, t('Open_link')), !readOnly && /*#__PURE__*/_react["default"].createElement("div", {
     className: "link-op-icons d-flex"
   }, /*#__PURE__*/_react["default"].createElement("span", {
+    id: "edit-link",
     role: "button",
     className: "link-op-icon",
     onClick: onEditLink
   }, /*#__PURE__*/_react["default"].createElement("i", {
     className: "sdocfont sdoc-rename"
-  })), /*#__PURE__*/_react["default"].createElement("span", {
+  })), isShowTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: "edit-link",
+    placement: "top",
+    fade: true
+  }, t('Edit_link')), /*#__PURE__*/_react["default"].createElement("span", {
+    id: "delete-link",
     role: "button",
     className: "link-op-icon",
     onClick: onDeleteLink
   }, /*#__PURE__*/_react["default"].createElement("i", {
     className: "sdocfont sdoc-unlink"
-  })))), document.body));
+  })), isShowTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: "delete-link",
+    placement: "top",
+    fade: true
+  }, t('Remove_link')))), document.body));
 };
 var _default = exports["default"] = LinkHover;

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

@@ -41,7 +41,7 @@
   background: #f1f1f1;
 }
 
-.sdoc-link-hover-menu-container .op-group-item:last-child .op-item {
+.sdoc-link-hover-menu-container .op-group-item:not(:first-child) .op-item {
   margin-left: 8px;
 }
 

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

@@ -13,9 +13,9 @@ var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _toast = _interopRequireDefault(require("../../../../components/toast"));
+var _tooltip = _interopRequireDefault(require("../../../../components/tooltip"));
 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 _constants2 = require("../constants");
@@ -36,6 +36,13 @@ var SdocLinkHoverMenu = function SdocLinkHoverMenu(_ref) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isShowDisplayStylePopover = _useState2[0],
     setIsShowDisplayStylePopover = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isShowTooltip = _useState4[0],
+    setIsShowTooltip = _useState4[1];
+  (0, _react.useEffect)(function () {
+    setIsShowTooltip(true);
+  }, []);
   var onCopy = (0, _react.useCallback)(function (e) {
     e.stopPropagation();
     (0, _helpers.onCopySdocLinkNode)(editor, element);
@@ -47,6 +54,7 @@ var SdocLinkHoverMenu = function SdocLinkHoverMenu(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var onShowProver = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
     setIsShowDisplayStylePopover(true);
   }, []);
   var onSelect = (0, _react.useCallback)(function (event, value) {
@@ -102,29 +110,44 @@ var SdocLinkHoverMenu = function SdocLinkHoverMenu(_ref) {
   }, 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", {
+    id: "sdoc_link_copy",
     role: "button",
     className: "op-item",
     onClick: onCopy
   }, /*#__PURE__*/_react["default"].createElement("i", {
     className: "sdocfont sdoc-copy icon-font"
-  })), /*#__PURE__*/_react["default"].createElement("span", {
+  })), isShowTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: "sdoc_link_copy",
+    placement: "top",
+    fade: true
+  }, t('Copy')), /*#__PURE__*/_react["default"].createElement("span", {
+    id: "display_sdoc_link",
     role: "button",
     className: "op-item ".concat(isShowDisplayStylePopover ? 'link-style-icon-active' : ''),
-    onClick: onShowProver,
-    id: id
+    onClick: onShowProver
   }, /*#__PURE__*/_react["default"].createElement("i", {
     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", {
+  })), isShowTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: "display_sdoc_link",
+    placement: "top",
+    fade: true
+  }, t('Select_style'))), /*#__PURE__*/_react["default"].createElement("span", {
     className: "op-group-item"
   }, /*#__PURE__*/_react["default"].createElement("span", {
+    id: "delete_sdoc_link",
     role: "button",
     className: 'op-item',
     onClick: onUnwrapFileLinkNode
   }, /*#__PURE__*/_react["default"].createElement("i", {
     className: "sdocfont sdoc-unlink icon-font"
-  })), /*#__PURE__*/_react["default"].createElement("span", {
+  })), isShowTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: "delete_sdoc_link",
+    placement: "top",
+    fade: true
+  }, t('Remove_link')), /*#__PURE__*/_react["default"].createElement("span", {
+    id: "sdoc_link_preview",
     role: "button",
     className: "op-item",
     onClick: function onClick() {
@@ -132,7 +155,11 @@ var SdocLinkHoverMenu = function SdocLinkHoverMenu(_ref) {
     }
   }, /*#__PURE__*/_react["default"].createElement("i", {
     className: "sdocfont eye icon-font"
-  }))))), isShowDisplayStylePopover && /*#__PURE__*/_react["default"].createElement("div", {
+  })), isShowTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: "sdoc_link_preview",
+    placement: "top",
+    fade: true
+  }, t('Preview'))))), 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", {

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

@@ -13,12 +13,15 @@ var _react = _interopRequireWildcard(require("react"));
 var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _constants = require("../../../../constants");
+var _usePlugins2 = require("../../../../hooks/use-plugins");
 var _useScrollContext = require("../../../../hooks/use-scroll-context");
-var _constants = require("../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
+var _constants2 = require("../../../constants");
 var _elementType = require("../../../constants/element-type");
 var _core = require("../../../core");
 var _helpers = require("../../wiki-link/helpers");
-var _constants2 = require("../constants");
+var _constants3 = require("../constants");
 var _helpers2 = require("../helpers");
 var _hoverMenu = _interopRequireDefault(require("../hover-menu"));
 require("./render-elem.css");
@@ -41,6 +44,8 @@ var SdocFileLink = function SdocFileLink(_ref) {
     setMenuPosition = _useState4[1];
   var readOnly = (0, _slateReact.useReadOnly)();
   var isSelected = (0, _slateReact.useSelected)();
+  var _usePlugins = (0, _usePlugins2.usePlugins)(),
+    updateDisplayPlugin = _usePlugins.updateDisplayPlugin;
   var registerEventHandle = (0, _react.useCallback)(function () {
     document.addEventListener('click', onHideInsertHoverMenu);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -120,8 +125,21 @@ var SdocFileLink = function SdocFileLink(_ref) {
         return;
       }
     }
-    if (isShowInsertHoverMenu) {
+    if (isShowInsertHoverMenu && element.type === _elementType.SDOC_LINK) {
       e.stopPropagation();
+      updateDisplayPlugin('sdoc-file-preview', 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);
     }
     var path = _slateReact.ReactEditor.findPath(editor, element);
     var focusPoint = _slate.Editor.end(editor, path);
@@ -145,9 +163,9 @@ var SdocFileLink = function SdocFileLink(_ref) {
   }, []);
   var style = {};
   if (element.add) {
-    style = (0, _objectSpread2["default"])({}, _constants.ADDED_STYLE);
+    style = (0, _objectSpread2["default"])({}, _constants2.ADDED_STYLE);
   } else if (element["delete"]) {
-    style = (0, _objectSpread2["default"])({}, _constants.DELETED_STYLE);
+    style = (0, _objectSpread2["default"])({}, _constants2.DELETED_STYLE);
   }
   if (style.computed_background_color) {
     style['backgroundColor'] = style.computed_background_color;
@@ -158,12 +176,12 @@ var SdocFileLink = function SdocFileLink(_ref) {
   return /*#__PURE__*/_react["default"].createElement("span", Object.assign({}, attributes, {
     "data-id": element.id,
     contentEditable: false,
-    className: "sdoc-file-render ".concat(isSelected ? 'sdoc-file-link-selected' : '', " ").concat(element.display_type === _constants2.SDOC_LINK_TYPE.CARD_LINK ? 'sdoc-file-card-link' : ''),
+    className: "sdoc-file-render ".concat(isSelected ? 'sdoc-file-link-selected' : '', " ").concat(element.display_type === _constants3.SDOC_LINK_TYPE.CARD_LINK ? 'sdoc-file-card-link' : ''),
     onClick: onClickFile,
-    style: element.display_type === _constants2.SDOC_LINK_TYPE.CARD_LINK ? style : {}
+    style: element.display_type === _constants3.SDOC_LINK_TYPE.CARD_LINK ? style : {}
   }), /*#__PURE__*/_react["default"].createElement("span", {
     ref: sdocFileRef
-  }, [_constants2.SDOC_LINK_TYPE.ICON_LINK, _constants2.SDOC_LINK_TYPE.CARD_LINK].includes(element.display_type) && /*#__PURE__*/_react["default"].createElement("span", {
+  }, [_constants3.SDOC_LINK_TYPE.ICON_LINK, _constants3.SDOC_LINK_TYPE.CARD_LINK].includes(element.display_type) && /*#__PURE__*/_react["default"].createElement("span", {
     className: "sdoc-file-link-icon",
     style: style
   }, element.type !== _elementType.WIKI_LINK && /*#__PURE__*/_react["default"].createElement("img", {
@@ -176,7 +194,7 @@ var SdocFileLink = function SdocFileLink(_ref) {
     className: "sf3-font sf3-font-file"
   })))), /*#__PURE__*/_react["default"].createElement("span", {
     className: (0, _classnames["default"])('sdoc-file-text-link', {
-      'sdoc-no-file-link-icon': ![_constants2.SDOC_LINK_TYPE.ICON_LINK, _constants2.SDOC_LINK_TYPE.CARD_LINK].includes(element.display_type)
+      'sdoc-no-file-link-icon': ![_constants3.SDOC_LINK_TYPE.ICON_LINK, _constants3.SDOC_LINK_TYPE.CARD_LINK].includes(element.display_type)
     }),
     style: style
   }, /*#__PURE__*/_react["default"].createElement("a", {

package/dist/extension/plugins/video/helpers.js

@@ -171,11 +171,19 @@ var insertVideo = exports.insertVideo = function insertVideo(editor, videoFiles,
   }
   (0, _core.focusEditor)(editor, videoEndSelection);
 };
-var getVideoURL = exports.getVideoURL = function getVideoURL(data) {
+var getVideoURL = exports.getVideoURL = function getVideoURL(data, editor) {
   var url = data.src;
   if (url && url.startsWith('http')) return url;
   var serviceUrl = _context["default"].getSetting('serviceUrl');
   var assetsUrl = _context["default"].getSetting('assetsUrl');
+
+  // If in sdoc link preview
+  var docUuid = editor.preview_docUuid;
+  if (docUuid) {
+    var baseUrl = assetsUrl.split('/');
+    baseUrl[baseUrl.length - 1] = docUuid;
+    assetsUrl = baseUrl.join('/');
+  }
   return (0, _urlJoin["default"])(serviceUrl, assetsUrl, url);
 };
 var formatFileSize = exports.formatFileSize = function formatFileSize(size) {

package/dist/extension/plugins/video/menu/index.js

@@ -68,6 +68,6 @@ var VideoMenu = function VideoMenu(_ref) {
   }, t('Add_video_link')), /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-dropdown-menu-item",
     onClick: openSelectVideoFileDialog
-  }, t('Link_Seafile_video_file')))));
+  }, t('Link_video_file')))));
 };
 var _default = exports["default"] = VideoMenu;

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

@@ -104,7 +104,7 @@ var Video = function Video(_ref) {
   }, !isEmbeddableLink && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("video", {
     className: "sdoc-video-element",
     ref: videoRef,
-    src: (0, _helpers.getVideoURL)(data),
+    src: (0, _helpers.getVideoURL)(data, editor),
     controls: true,
     controlsList: readonly && 'nofullscreen',
     onClick: onClickVideo,
@@ -126,7 +126,7 @@ var Video = function Video(_ref) {
     title: data.src,
     allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
     allowFullScreen: true,
-    src: (0, _helpers.getVideoURL)(data),
+    src: (0, _helpers.getVideoURL)(data, editor),
     onLoad: handleVideoLoad,
     style: {
       width: '100%',

package/dist/extension/plugins/whiteboard/menu/index.js

@@ -51,7 +51,7 @@ var WhiteboardMenu = function WhiteboardMenu(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-dropdown-menu-item",
     onClick: openSelectWhiteboardFileDialog
-  }, t('Select_Excalidraw_file')), /*#__PURE__*/_react["default"].createElement("div", {
+  }, t('Link_Excalidraw_file')), /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-dropdown-menu-item",
     onClick: onCreateFile
   }, t('New_Excalidraw_file')))));

package/dist/socket/socket-client.js

@@ -64,6 +64,8 @@ var SocketClient = /*#__PURE__*/(0, _createClass2["default"])(function SocketCli
   });
   (0, _defineProperty2["default"])(this, "onDisconnected", function (data) {
     if (data === 'ping timeout') {
+      var time = new Date().toLocaleString();
+      (0, _debug.clientDebug)('Current time is: %s', time);
       (0, _debug.clientDebug)('Disconnected due to ping timeout, trying to reconnect...');
       _this.socket.connect(function (err) {
         if (err) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "2.0.156",
+  "version": "2.0.158",
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",
@@ -71,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a5b608dd21479169503bb2fee3fb86a4ee6809d2"
+  "gitHead": "e4be651720eddbc08ae7d0f06ede189ec389d42d"
 }