@seafile/sdoc-editor 3.0.38 → 3.0.39

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

@@ -32,6 +32,36 @@
   font-weight: bold;
 }
 
+.sdoc-editor__article .list-container li {
+  position: relative;
+  padding-left: 8px !important;
+}
+
+.sdoc-editor__article .list-container .sdoc-li-control {
+  user-select: none;
+  cursor: pointer;
+}
+
+.sdoc-editor__article .list-container .sdoc-li-prefix {
+  font-size: 12px;
+  color: #666;
+  position: absolute;
+  left: -32px;
+  top: 7px;
+  cursor: pointer;
+}
+
+.sdoc-editor__article .list-container .sdoc-li-divider {
+  width: 1px;
+  height: calc(100% - 38px);
+  background-color: #ccc;
+  position: absolute;
+  left: -12px;
+  top: 28px;
+  user-select: none;
+  pointer-events: none;
+}
+
 /* check list  */
 .sdoc-editor__article .sdoc-checkbox-container {
   padding: 0px 2px;

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

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.renderListLic = exports.renderListItem = exports.renderList = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
 var renderList = exports.renderList = function renderList(props, editor) {
@@ -22,6 +24,7 @@ var renderListItem = exports.renderListItem = function renderListItem(props, edi
   var attributes = props.attributes,
     children = props.children,
     element = props.element;
+  var collapsed = !!element.collapsed;
   var align = element.children[0].align;
   var className = '';
   switch (align) {
@@ -37,13 +40,34 @@ var renderListItem = exports.renderListItem = function renderListItem(props, edi
   var isBold = element.children[0].children.every(function (item) {
     return item.bold === true;
   });
+  var togglePrefix = function togglePrefix(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    var path = _slateReact.ReactEditor.findPath(editor, element);
+    _slate.Transforms.setNodes(editor, {
+      collapsed: !collapsed
+    }, {
+      at: path
+    });
+  };
+  var newChildren = !collapsed ? children : children[0];
   return /*#__PURE__*/_react["default"].createElement("li", Object.assign({
     "data-id": element.id
   }, attributes, {
     className: (0, _classnames["default"])(className, {
       'sdoc-li-bold': isBold
     })
-  }), children);
+  }), element.children.length > 1 && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "sdoc-li-control",
+    contentEditable: "false"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: (0, _classnames["default"])('sdoc-li-prefix', 'sdocfont', !collapsed ? 'sdoc-arrow-down' : 'sdoc-next-page'),
+    onMouseDown: togglePrefix
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "sdoc-li-divider"
+  })), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "sdoc-li-content"
+  }, newChildren));
 };
 var renderListLic = exports.renderListLic = function renderListLic(props, editor) {
   var attributes = props.attributes,

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.videoFileIcon = exports.parseVideoLink = exports.onCopyVideoNode = exports.isInsertVideoMenuDisabled = exports.insertVideo = exports.getVideoURL = exports.generateVideoNode = exports.formatFileSize = void 0;
+exports.videoFileIcon = exports.updateVideo = 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");
@@ -81,7 +81,7 @@ var parseVideoLink = exports.parseVideoLink = function parseVideoLink(url) {
   // Bilibili url conversion
   if (url.includes('bilibili.com')) {
     var _vidMatch = url.match(/\/video\/(BV[0-9A-Za-z]+)/);
-    var _videoUrl2 = _vidMatch !== null && _vidMatch !== void 0 && _vidMatch[1] ? "https://player.bilibili.com/player.html?bvid=".concat(_vidMatch[1]) : false;
+    var _videoUrl2 = _vidMatch !== null && _vidMatch !== void 0 && _vidMatch[1] ? "https://player.bilibili.com/player.html?bvid=".concat(_vidMatch[1], "&autoplay=0") : false;
     return _videoUrl2;
   }
 
@@ -219,4 +219,15 @@ var onCopyVideoNode = exports.onCopyVideoNode = function onCopyVideoNode(editor,
       });
     }
   });
+};
+var updateVideo = exports.updateVideo = function updateVideo(editor, data, id) {
+  _slate.Transforms.setNodes(editor, {
+    data: data
+  }, {
+    match: function match(n) {
+      return (0, _core.getNodeType)(n) === _constants.VIDEO && n.id === id;
+    },
+    at: editor.selection,
+    voids: true
+  });
 };

package/dist/extension/plugins/video/index.css

@@ -35,16 +35,19 @@
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
+  0% {
+    transform: rotate(0deg);
+  }
 
-.sdoc-video-wrapper{
-  display: flex;
+  100% {
+    transform: rotate(360deg);
+  }
 }
+
 .sdoc-video-wrapper {
   position: relative;
   display: flex;
+  justify-content: center;
 }
 
 .sdoc-video-wrapper .sdoc-video-inner {
@@ -54,9 +57,10 @@
   display: flex;
   margin-top: 5px;
   margin-bottom: 10px;
+  max-width: 100%;
 }
 
-.sdoc-video-inner .sdoc-video-element{
+.sdoc-video-inner .sdoc-video-element {
   width: 100%;
 }
 
@@ -66,8 +70,10 @@
 
 .sdoc-video-inner .sdoc-video-play {
   position: absolute;
-  top: 36.75%;
+  top: 50%;
+  transform: translateY(-50%);
   left: 46.3%;
   font-size: 48px;
   pointer-events: none;
+  color: #666666;
 }

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

@@ -19,11 +19,15 @@ var _helpers = require("./helpers");
 var _hoverMenu = _interopRequireDefault(require("./hover-menu"));
 require("./index.css");
 var Video = function Video(_ref) {
-  var _videoStates$element$;
+  var _videoStates$element$, _videoRef$current;
   var element = _ref.element,
     editor = _ref.editor;
   var data = element.data;
   var videoRef = (0, _react.useRef)(null);
+  var wrapperRef = (0, _react.useRef)(null);
+  var resizerRef = (0, _react.useRef)(null);
+  var resizeStartXRef = (0, _react.useRef)(0);
+  var resizeStartWidthRef = (0, _react.useRef)(0);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isLoaded = _useState2[0],
@@ -40,11 +44,21 @@ var Video = function Video(_ref) {
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
     menuPosition = _useState8[0],
     setMenuPosition = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
+    isResizing = _useState0[0],
+    setIsResizing = _useState0[1];
+  var _useState1 = (0, _react.useState)(null),
+    _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
+    movingWidth = _useState10[0],
+    setMovingWidth = _useState10[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 _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
   var handlePlay = function handlePlay() {
     setVideoStates(function (prev) {
       return (0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, prev), {}, (0, _defineProperty2["default"])({}, element.id, false));
@@ -65,12 +79,6 @@ var Video = function Video(_ref) {
     _slate.Transforms.select(editor, path);
     setIsSelected(true);
   }, [editor, element]);
-  var onClickOutside = (0, _react.useCallback)(function (e) {
-    e.stopPropagation();
-    if (videoRef.current && !videoRef.current.contains(e.target)) {
-      setIsSelected(false);
-    }
-  }, []);
   var setPosition = (0, _react.useCallback)(function (elem) {
     if (elem) {
       var _elem$getBoundingClie = elem.getBoundingClientRect(),
@@ -90,6 +98,81 @@ var Video = function Video(_ref) {
     setPosition(videoRef.current);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  var getIframePointerEvents = (0, _react.useCallback)(function () {
+    if (readOnly) return 'auto';
+    if (isResizing) return 'none';
+    return isSelected ? 'auto' : 'none';
+  }, [isResizing, isSelected, readOnly]);
+  var getVideoWidthStyle = (0, _react.useCallback)(function () {
+    var videoWidth = movingWidth || element.data.width || '100%';
+    return {
+      width: videoWidth
+    };
+  }, [element.data.width, movingWidth]);
+  var registerEvent = (0, _react.useCallback)(function (eventList) {
+    eventList.forEach(function (element) {
+      document.addEventListener(element.eventName, element.event);
+    });
+  }, []);
+  var unregisterEvent = (0, _react.useCallback)(function (eventList) {
+    eventList.forEach(function (element) {
+      document.removeEventListener(element.eventName, element.event);
+    });
+  }, []);
+  var onMouseMove = (0, _react.useCallback)(function (event) {
+    var deltaX = event.clientX - resizeStartXRef.current;
+    var nextWidth = resizeStartWidthRef.current + deltaX;
+    if (nextWidth < 150) return;
+    if (wrapperRef.current) {
+      wrapperRef.current.style.width = "".concat(nextWidth, "px");
+    }
+    setMovingWidth(nextWidth);
+  }, []);
+  var onResizeEnd = (0, _react.useCallback)(function (event) {
+    var _wrapperRef$current;
+    event === null || event === void 0 ? void 0 : event.preventDefault();
+    event === null || event === void 0 ? void 0 : event.stopPropagation();
+    unregisterEvent([{
+      eventName: 'mousemove',
+      event: onMouseMove
+    }, {
+      eventName: 'mouseup',
+      event: onResizeEnd
+    }]);
+    var finalWidth = movingWidth || ((_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.getBoundingClientRect().width);
+    var newData = (0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, element.data), {}, {
+      width: finalWidth
+    });
+    (0, _helpers.updateVideo)(editor, newData, element.id);
+    setIsResizing(false);
+    setTimeout(function () {
+      return setPosition(wrapperRef.current);
+    }, 0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, element.id, movingWidth, onMouseMove, registerEvent]);
+  var onResizeStart = (0, _react.useCallback)(function (event) {
+    var _wrapperRef$current2;
+    event.preventDefault();
+    event.stopPropagation();
+    setMenuPosition(null);
+    setIsResizing(true);
+    resizeStartXRef.current = event.clientX;
+    resizeStartWidthRef.current = ((_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.getBoundingClientRect().width) || element.data.width || 0;
+    registerEvent([{
+      eventName: 'mousemove',
+      event: onMouseMove
+    }, {
+      eventName: 'mouseup',
+      event: onResizeEnd
+    }]);
+  }, [element.data.width, onMouseMove, onResizeEnd, registerEvent]);
+  var onClickOutside = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+      onResizeEnd();
+      setIsSelected(false);
+    }
+  }, [onResizeEnd]);
   (0, _react.useEffect)(function () {
     var videoElement = videoRef.current;
     if (videoElement) {
@@ -157,26 +240,28 @@ var Video = function Video(_ref) {
     "data-id": element.id,
     className: "sdoc-video-wrapper",
     style: {
-      display: isLoaded ? 'block' : 'none'
+      display: isLoaded ? 'flex' : 'none'
     }
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-video-inner",
-    style: {
+    ref: wrapperRef,
+    style: (0, _objectSpread4["default"])({
       visibility: isLoaded ? 'visible' : 'hidden'
-    }
+    }, getVideoWidthStyle()),
+    onClick: onClickVideo
   }, !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, editor),
     controls: true,
     controlsList: readOnly ? 'nofullscreen' : undefined,
-    onClick: onClickVideo,
     draggable: false,
     onPlay: handlePlay,
     onPause: handlePause,
     onCanPlay: handleVideoLoad,
     style: {
-      boxShadow: isSelected ? '0 0 0 2px #007bff' : 'none'
+      boxShadow: isSelected ? '0 0 0 2px #007bff' : 'none',
+      pointerEvents: getIframePointerEvents()
     }
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-video-play sdocfont sdoc-play",
@@ -186,17 +271,25 @@ var Video = function Video(_ref) {
     contentEditable: "false"
   })), isEmbeddableLink && /*#__PURE__*/_react["default"].createElement("iframe", {
     className: "sdoc-video-element",
+    ref: videoRef,
     title: data.src,
     allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
     allowFullScreen: true,
     src: (0, _helpers.getVideoURL)(data, editor),
     onLoad: handleVideoLoad,
     style: {
-      width: '100%',
       height: '100%',
-      border: 'none'
+      border: 'none',
+      boxShadow: isSelected ? '0 0 0 2px #007bff' : 'none',
+      pointerEvents: getIframePointerEvents()
     }
-  }))), isSelected && !isEmbeddableLink && !readOnly && editor.selection && _slate.Range.isCollapsed(editor.selection) && /*#__PURE__*/_react["default"].createElement(_hoverMenu["default"], {
+  }), !readOnly && isSelected && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "image-resizer",
+    ref: resizerRef,
+    onMouseDown: onResizeStart
+  }), isResizing && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "image-size"
+  }, /*#__PURE__*/_react["default"].createElement("span", null, t('Width'), ':', parseInt(movingWidth || ((_videoRef$current = videoRef.current) === null || _videoRef$current === void 0 ? void 0 : _videoRef$current.clientWidth))), /*#__PURE__*/_react["default"].createElement("span", null, "\xA0\xA0"), /*#__PURE__*/_react["default"].createElement("span", null, t('Height'), ':', videoRef.current.clientHeight)))), isSelected && !isEmbeddableLink && !readOnly && editor.selection && _slate.Range.isCollapsed(editor.selection) && /*#__PURE__*/_react["default"].createElement(_hoverMenu["default"], {
     editor: editor,
     menuPosition: menuPosition,
     element: element,
@@ -210,7 +303,7 @@ function renderVideo(props, editor) {
     children = props.children,
     attributes = props.attributes;
   return /*#__PURE__*/_react["default"].createElement("div", Object.assign({
-    className: "sdoc-video-wrapper"
+    className: "sdoc-video-outer-wrapper"
   }, attributes, {
     contentEditable: "true",
     suppressContentEditableWarning: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "3.0.38",
+  "version": "3.0.39",
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c89a3c31a2f1885ca2f237d98f70affbd8981102"
+  "gitHead": "8d184c224586d5b7a253f40d2fa2c680f8c46d53"
 }