@seafile/sdoc-editor 2.0.190 → 2.0.192

package/dist/assets/css/sdoc-editor-plugins.css

@@ -221,6 +221,7 @@
   background-color: rgb(153 153 153 / 15%);
   padding: 3px 0;
   border-radius: 3px;
+  cursor: pointer;
 }
 
 /* code_block */

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

@@ -13,7 +13,7 @@
 
 .sdoc-file-preview-drawer .file-preview-panel-header {
   padding: 0 16px;
-  height: 46px;
+  height: 44px;
   display: flex;
   align-items: center;
   justify-content: space-between;

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

@@ -48,7 +48,9 @@ var parcelFileTypeIcon = exports.parcelFileTypeIcon = function parcelFileTypeIco
   var fileExtType = (_Object$entries$find = Object.entries(_constants.FILEEXT_TYPE).find(function (_ref) {
     var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
       extensions = _ref2[1];
-    return extensions.includes(newFileType);
+    return extensions.some(function (ext) {
+      return ext.toLowerCase() === newFileType.toLowerCase();
+    });
   })) === null || _Object$entries$find === void 0 ? void 0 : _Object$entries$find[0];
   var fileTypeResult = fileExtType ? _constants.FILEEXT_TYPE_MAP[fileExtType] : newFileType;
   var fileTypeIcon = getFileTypeIcon(fileTypeResult);

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

@@ -47,7 +47,7 @@ var ListView = function ListView(_ref) {
   (0, _react.useEffect)(function () {
     var getFileMetadata = /*#__PURE__*/function () {
       var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/(0, _regenerator2["default"])().m(function _callee() {
-        var res, sortedRecords, firstFile, filePath;
+        var res, sortedRecords;
         return (0, _regenerator2["default"])().w(function (_context) {
           while (1) switch (_context.n) {
             case 0:
@@ -61,15 +61,6 @@ var ListView = function ListView(_ref) {
               });
               setAllFileList(sortedRecords);
               setFileList(sortedRecords);
-              firstFile = sortedRecords[0];
-              if (firstFile) {
-                filePath = (firstFile._parent_dir === '/' ? '' : firstFile._parent_dir) + '/' + firstFile._name;
-                onSelectFile(null, {
-                  id: firstFile._id,
-                  name: firstFile._name,
-                  path: filePath
-                });
-              }
             case 2:
               return _context.a(2);
           }

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

@@ -5,6 +5,10 @@
   border-radius: 3px;
 }
 
+.sdoc-file-link-render:hover {
+  cursor: pointer;
+}
+
 .sdoc-file-link-render:hover .sdoc-file-text-link a {
   text-decoration: underline;
   text-underline-position: under;
@@ -44,7 +48,7 @@
 
 .sdoc-file-link-render .sdoc-file-link-icon {
   padding-right: 5px;
-  color: #ff9800;
+  color: #9aa0ac;
 }
 
 .sdoc-file-card-link .sdoc-file-link-icon :first-child {

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

@@ -75,18 +75,22 @@ var SdocLinkHoverMenu = function SdocLinkHoverMenu(_ref) {
     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, {
+    var data = {
       doc_uuid: doc_uuid,
       title: title,
       type: type
-    });
+    };
+    if (editor.editorType === _constants.WIKI_EDITOR) {
+      data = element;
+    }
+    var eventBus = _eventBus["default"].getInstance();
+    eventBus.dispatch(_constants.INTERNAL_EVENT.TRANSFER_PREVIEW_FILE_ID, data);
     setTimeout(function () {
       onHideInsertHoverMenu();
     }, 0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [updateDisplayPlugin]);
   var selectedType = element.display_type || _constants2.SDOC_LINK_TYPE.TEXT_LINK;
-  var id = "sdoc-link-display-type-".concat(element.id);
   var newSdocFileTypes = _constants2.SDOC_LINK_TYPES.filter(function (sdocLinkType) {
     return (0, _helpers.isInTable)(editor, element) ? sdocLinkType !== _constants2.SDOC_LINK_TYPE.CARD_LINK : true;
   });
@@ -154,7 +158,7 @@ var SdocLinkHoverMenu = function SdocLinkHoverMenu(_ref) {
       return handleOpenLinkPreview('sdoc-file-preview');
     }
   }, /*#__PURE__*/_react["default"].createElement("i", {
-    className: "sdocfont sodc-eye icon-font"
+    className: "sdocfont sdoc-eye icon-font"
   })), isShowTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
     target: "sdoc_link_preview",
     placement: "top",

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

@@ -5,6 +5,10 @@
   border-radius: 3px;
 }
 
+.sdoc-file-render:hover {
+  cursor: pointer;
+}
+
 .sdoc-file-render:hover .sdoc-file-text-link a {
   text-decoration: underline;
   text-underline-position: under;
@@ -27,7 +31,7 @@
 
 .sdoc-file-render .sdoc-file-link-icon {
   padding-right: 5px;
-  color: #ff9800;
+  color: #666;
 }
 
 .sdoc-file-card-link .sdoc-file-link-icon :first-child {

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

@@ -125,18 +125,22 @@ var SdocFileLink = function SdocFileLink(_ref) {
         return;
       }
     }
-    if (isShowInsertHoverMenu && element.type === _elementType.SDOC_LINK) {
+    if (isShowInsertHoverMenu && [_elementType.SDOC_LINK, _elementType.WIKI_LINK].includes(element.type)) {
       e.stopPropagation();
-      updateDisplayPlugin('sdoc-file-preview', true);
+      element.type === _elementType.SDOC_LINK && 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, {
+      var data = {
         doc_uuid: doc_uuid,
         title: title,
         type: type
-      });
+      };
+      if (element.type === _elementType.WIKI_LINK) {
+        data = element;
+      }
+      var eventBus = _eventBus["default"].getInstance();
+      eventBus.dispatch(_constants.INTERNAL_EVENT.TRANSFER_PREVIEW_FILE_ID, data);
       setTimeout(function () {
         onHideInsertHoverMenu();
       }, 0);

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

@@ -4,10 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.videoFileIcon = exports.parseVideoLink = exports.isInsertVideoMenuDisabled = exports.insertVideo = exports.getVideoURL = exports.generateVideoNode = exports.formatFileSize = void 0;
+exports.videoFileIcon = exports.parseVideoLink = exports.onCopyVideoNode = exports.isInsertVideoMenuDisabled = exports.insertVideo = exports.getVideoURL = exports.generateVideoNode = exports.formatFileSize = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
 var _urlJoin = _interopRequireDefault(require("url-join"));
 var _context = _interopRequireDefault(require("../../../context"));
 var _constants = require("../../constants");
@@ -204,4 +206,18 @@ var formatFileSize = exports.formatFileSize = function formatFileSize(size) {
 var videoFileIcon = exports.videoFileIcon = function videoFileIcon() {
   var server = _context["default"].getSetting('serviceUrl');
   return "".concat(server, "/media/img/file/256/video.png");
+};
+var onCopyVideoNode = exports.onCopyVideoNode = function onCopyVideoNode(editor, element) {
+  if (editor.selection == null || _slate.Range.isExpanded(editor.selection)) return;
+  var p = _slateReact.ReactEditor.findPath(editor, element);
+  _slate.Transforms.select(editor, p);
+  var newData = editor.setFragmentData(new DataTransfer());
+  (0, _copyToClipboard["default"])('copy', {
+    onCopy: function onCopy(clipboardData) {
+      newData.types.forEach(function (type) {
+        var data = newData.getData(type);
+        clipboardData.setData(type, data);
+      });
+    }
+  });
 };

package/dist/extension/plugins/video/hover-menu/index.css

@@ -0,0 +1,52 @@
+.video-hover-menu-container {
+  position: absolute;
+  height: 42px;
+  z-index: 101;
+  width: auto;
+}
+
+.video-hover-menu-container .hover-menu-container {
+  height: 36px;
+  padding: 7px 8px;
+  background-color: #fff;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
+  border: 1px solid #e8e8e8;
+}
+
+.video-hover-menu-container .hover-menu-container>span:not(:last-of-type) {
+  padding-right: 8px;
+  border-right: 1px solid #e5e5e5;
+}
+
+.video-hover-menu-container .hover-menu-container .op-item {
+  position: relative;
+  font-size: 12px;
+  color: #212529;
+  padding: 0 5px;
+  border-radius: 2px;
+  min-width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.video-hover-menu-container .hover-menu-container .op-item:hover {
+  color: #212529;
+  text-decoration: none;
+  background: #f1f1f1;
+}
+
+.video-hover-menu-container .op-group-item:first-child .op-item:last-child,
+.video-hover-menu-container .op-group-item:not(:first-child) .op-item {
+  margin-left: 8px;
+}
+
+.video-hover-menu-container .hover-menu-container .icon-font {
+  font-size: 12px;
+  color: #444;
+}

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

@@ -0,0 +1,102 @@
+"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 _reactI18next = require("react-i18next");
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _toast = _interopRequireDefault(require("../../../../components/toast"));
+var _tooltip = _interopRequireDefault(require("../../../../components/tooltip"));
+var _commons = require("../../../commons");
+var _core = require("../../../core");
+var _helpers = require("../helpers");
+require("./index.css");
+var VideoHoverMenu = function VideoHoverMenu(_ref) {
+  var editor = _ref.editor,
+    menuPosition = _ref.menuPosition,
+    element = _ref.element,
+    videoRef = _ref.videoRef,
+    setIsSelected = _ref.setIsSelected,
+    t = _ref.t;
+  var readOnly = (0, _slateReact.useReadOnly)();
+  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 onCopy = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    (0, _helpers.onCopyVideoNode)(editor, element);
+    _toast["default"].success(t('Copied'), {
+      hasCloseButton: false,
+      duration: 2
+    });
+    setIsSelected(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onDeleteVideo = (0, _react.useCallback)(function () {
+    var path = _slateReact.ReactEditor.findPath(editor, element);
+    _slate.Transforms.removeNodes(editor, {
+      at: path
+    });
+    (0, _core.focusEditor)(editor);
+    _slate.Transforms.select(editor, editor.selection);
+  }, [editor, element]);
+  var handleFullScreen = function handleFullScreen() {
+    var _videoRef$current;
+    setIsSelected(false);
+    (_videoRef$current = videoRef.current) === null || _videoRef$current === void 0 ? void 0 : _videoRef$current.requestFullscreen();
+  };
+  return /*#__PURE__*/_react["default"].createElement(_commons.ElementPopover, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "video-hover-menu-container",
+    style: menuPosition
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "hover-menu-container"
+  }, !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_video_copy",
+    role: "button",
+    className: "op-item",
+    onClick: onCopy
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-copy icon-font"
+  })), isShowTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: "sdoc_video_copy",
+    placement: "top",
+    fade: true
+  }, t('Copy')), /*#__PURE__*/_react["default"].createElement("span", {
+    id: "sdoc_video_delete",
+    role: "button",
+    className: "op-item",
+    onClick: onDeleteVideo
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-delete icon-font"
+  }), isShowTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: "sdoc_video_delete",
+    placement: "top",
+    fade: true
+  }, t('Delete')))), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "op-group-item"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    id: "sdoc_video_full_screen_mode",
+    role: "button",
+    className: "op-item",
+    onClick: handleFullScreen
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-fullscreen icon-font"
+  }), isShowTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: "sdoc_video_full_screen_mode",
+    placement: "top",
+    fade: true
+  }, t('Full_screen_mode'))))))));
+};
+var _default = exports["default"] = (0, _reactI18next.withTranslation)('sdoc-editor')(VideoHoverMenu);

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderVideo = renderVideo;
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
@@ -13,7 +14,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
 var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
+var _useScrollContext = require("../../../hooks/use-scroll-context");
 var _helpers = require("./helpers");
+var _hoverMenu = _interopRequireDefault(require("./hover-menu"));
 require("./index.css");
 var Video = function Video(_ref) {
   var _videoStates$element$;
@@ -33,10 +36,15 @@ var Video = function Video(_ref) {
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     videoStates = _useState6[0],
     setVideoStates = _useState6[1];
+  var _useState7 = (0, _react.useState)({}),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    menuPosition = _useState8[0],
+    setMenuPosition = _useState8[1];
+  var scrollRef = (0, _useScrollContext.useScrollContext)();
   var videoName = (data === null || data === void 0 ? void 0 : data.name) || (data === null || data === void 0 ? void 0 : data.src);
   var videoSize = data === null || data === void 0 ? void 0 : data.size;
   var isEmbeddableLink = data === null || data === void 0 ? void 0 : data.is_embeddable_link;
-  var readonly = (0, _slateReact.useReadOnly)();
+  var readOnly = (0, _slateReact.useReadOnly)();
   var handlePlay = function handlePlay() {
     setVideoStates(function (prev) {
       return (0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, prev), {}, (0, _defineProperty2["default"])({}, element.id, false));
@@ -63,6 +71,25 @@ var Video = function Video(_ref) {
       setIsSelected(false);
     }
   }, []);
+  var setPosition = (0, _react.useCallback)(function (elem) {
+    if (elem) {
+      var _elem$getBoundingClie = elem.getBoundingClientRect(),
+        top = _elem$getBoundingClie.top,
+        left = _elem$getBoundingClie.left;
+      var menuTop = top - 42; // top = top distance - menu height
+      var menuLeft = left - 18; // left = left distance - (menu width / 2)
+      var newMenuPosition = {
+        top: menuTop,
+        left: menuLeft
+      };
+      setMenuPosition(newMenuPosition);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onScroll = (0, _react.useCallback)(function (e) {
+    setPosition(videoRef.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   (0, _react.useEffect)(function () {
     var videoElement = videoRef.current;
     if (videoElement) {
@@ -76,6 +103,42 @@ var Video = function Video(_ref) {
       document.removeEventListener('click', onClickOutside);
     };
   }, [onClickOutside]);
+  (0, _react.useEffect)(function () {
+    var observerRefValue = null;
+    var resizeObserver = null;
+    if (isSelected) {
+      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);
+    }
+    return function () {
+      if (observerRefValue) {
+        observerRefValue.removeEventListener('scroll', onScroll);
+      }
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSelected]);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !isLoaded && /*#__PURE__*/_react["default"].createElement("div", {
     className: "video-loading-placeholder"
   }, /*#__PURE__*/_react["default"].createElement("img", {
@@ -106,7 +169,7 @@ var Video = function Video(_ref) {
     ref: videoRef,
     src: (0, _helpers.getVideoURL)(data, editor),
     controls: true,
-    controlsList: readonly && 'nofullscreen',
+    controlsList: readOnly ? 'nofullscreen' : undefined,
     onClick: onClickVideo,
     draggable: false,
     onPlay: handlePlay,
@@ -133,7 +196,13 @@ var Video = function Video(_ref) {
       height: '100%',
       border: 'none'
     }
-  }))));
+  }))), isSelected && !isEmbeddableLink && !readOnly && editor.selection && _slate.Range.isCollapsed(editor.selection) && /*#__PURE__*/_react["default"].createElement(_hoverMenu["default"], {
+    editor: editor,
+    menuPosition: menuPosition,
+    element: element,
+    videoRef: videoRef,
+    setIsSelected: setIsSelected
+  }));
 };
 var SdocVideo = (0, _reactI18next.withTranslation)('sdoc-editor')(Video);
 function renderVideo(props, editor) {

package/dist/layout/article-container.js

@@ -17,8 +17,7 @@ var _fullWidthMode = require("../utils/full-width-mode");
 var _localStorageUtils = _interopRequireDefault(require("../utils/local-storage-utils"));
 function ArticleContainer(_ref) {
   var editor = _ref.editor,
-    children = _ref.children,
-    isShowCommentPanelInWiki = _ref.isShowCommentPanelInWiki;
+    children = _ref.children;
   var scrollRef = (0, _useScrollContext.useScrollContext)();
   var articleRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)({}),

package/dist/right-panel/index.js

@@ -111,6 +111,7 @@ var RightPanel = function RightPanel(_ref) {
     return function () {
       unsubscribeTransferFileId();
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   if (!displayPluginName) return null;
   var plugin = plugins.find(function (p) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "2.0.190",
+  "version": "2.0.192",
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",
@@ -71,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "759cb457e2ad7e89ef7c4bcb94a539b7fc387136"
+  "gitHead": "f693ae4b928675528ce40a396618c458f9316a45"
 }