@seafile/sdoc-editor 2.0.191 → 2.0.192

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/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/package.json

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