@seafile/sdoc-editor 3.0.38 → 3.0.40

package/dist/api/seafile-api.js

@@ -331,6 +331,16 @@ var SeafileAPI = /*#__PURE__*/function () {
       form.append('view_id', viewId);
       return this.req.post(url, form);
     }
+  }, {
+    key: "modifyView",
+    value: function modifyView(wikiId, viewId, viewData) {
+      var url = '/api/v2.1/wiki2/' + wikiId + '/views/';
+      var data = {
+        view_id: viewId,
+        view_data: viewData
+      };
+      return this.req.put(url, data);
+    }
   }]);
 }();
 var _default = exports["default"] = SeafileAPI;

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/context.js

@@ -432,6 +432,12 @@ var Context = /*#__PURE__*/function () {
       var docUuid = this.getSetting('docUuid');
       return this.api.duplicateWikiView(wikiId, docUuid, viewId);
     }
+  }, {
+    key: "modifyView",
+    value: function modifyView(viewId, viewData) {
+      var wikiId = this.getSetting('wikiId');
+      return this.api.modifyView(wikiId, viewId, viewData);
+    }
   }]);
 }();
 var context = new Context();

package/dist/extension/plugins/file-view/rename/index.css

@@ -0,0 +1,25 @@
+.sdoc-file-view-rename {
+  max-width: 100%;
+  width: 100%;
+  white-space: nowrap;
+  word-break: break-word;
+  caret-color: var(--c-texPri);
+  min-width: 0px;
+  flex: 1 1 0%;
+  overflow: auto;
+  font-weight: 700;
+  font-size: 22px;
+  margin-inline-end: 4px;
+  scrollbar-width: none;
+  height: 48px;
+  line-height: 48px;
+}
+
+.sdoc-file-view-rename input {
+  border-width: 0;
+  padding: 0;
+}
+
+.sdoc-file-view-rename input:focus-visible {
+  outline: none;
+}

package/dist/extension/plugins/file-view/rename/index.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+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"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _reactI18next = require("react-i18next");
+var _toast = _interopRequireDefault(require("../../../../components/toast"));
+var _keyCodes = _interopRequireDefault(require("../../../../constants/key-codes"));
+require("./index.css");
+var Rename = /*#__PURE__*/function (_React$Component) {
+  function Rename(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, Rename);
+    _this = (0, _callSuper2["default"])(this, Rename, [props]);
+    (0, _defineProperty2["default"])(_this, "registerEventHandle", function () {
+      document.addEventListener('click', _this.onOutClick);
+    });
+    (0, _defineProperty2["default"])(_this, "onOutClick", function (event) {
+      if (!_this.inputRef.current.contains(event.target)) {
+        _this.onRenameConfirm();
+        document.removeEventListener('click', _this.onOutClick);
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "onClick", function (e) {
+      e.stopPropagation();
+      e.nativeEvent.stopImmediatePropagation();
+      _this.registerEventHandle();
+    });
+    (0, _defineProperty2["default"])(_this, "onChange", function (e) {
+      _this.setState({
+        name: e.target.value
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "onKeyDown", function (e) {
+      if (e.keyCode === _keyCodes["default"].Enter) {
+        _this.onRenameConfirm(e);
+      } else if (e.keyCode === _keyCodes["default"].Esc) {
+        _this.onRenameCancel(e);
+      }
+      e.nativeEvent.stopImmediatePropagation();
+    });
+    (0, _defineProperty2["default"])(_this, "onRenameConfirm", function (e) {
+      e && e.nativeEvent.stopImmediatePropagation();
+      var newName = _this.state.name.trim();
+      if (newName === _this.props.name) {
+        _this.props.onRenameCancel();
+        return;
+      }
+      var _this$validateInput = _this.validateInput(),
+        isValid = _this$validateInput.isValid,
+        errMessage = _this$validateInput.errMessage;
+      if (!isValid) {
+        _toast["default"].danger(errMessage);
+        _this.props.onRenameCancel();
+      } else {
+        _this.props.onRenameConfirm(newName);
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "onRenameCancel", function (e) {
+      document.removeEventListener('click', _this.onOutClick);
+      e.nativeEvent.stopImmediatePropagation();
+      _this.props.onRenameCancel();
+    });
+    (0, _defineProperty2["default"])(_this, "validateInput", function () {
+      var t = _this.props.t;
+      var newName = _this.state.name.trim();
+      var isValid = true;
+      var errMessage = '';
+      if (newName.indexOf('/') > -1) {
+        isValid = false;
+        // eslint-disable-next-line no-useless-concat
+        errMessage = t('Name should not include ' + '\'/\'' + '.');
+        return {
+          isValid: isValid,
+          errMessage: errMessage
+        };
+      }
+      return {
+        isValid: isValid,
+        errMessage: errMessage
+      };
+    });
+    _this.state = {
+      name: props.name
+    };
+    _this.inputRef = /*#__PURE__*/_react["default"].createRef();
+    return _this;
+  }
+  (0, _inherits2["default"])(Rename, _React$Component);
+  return (0, _createClass2["default"])(Rename, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "sdoc-file-view-rename"
+      }, /*#__PURE__*/_react["default"].createElement("input", {
+        ref: this.inputRef,
+        value: this.state.name,
+        onChange: this.onChange,
+        onKeyDown: this.onKeyDown,
+        onClick: this.onClick
+      }));
+    }
+  }]);
+}(_react["default"].Component);
+var _default = exports["default"] = (0, _reactI18next.withTranslation)('sdoc-editor')(Rename);

package/dist/extension/plugins/file-view/render-elem/index.css

@@ -6,15 +6,12 @@
 
 .sdoc-file-view-container .sdoc-file-view-title {
   position: absolute;
-  height: 44px;
-  line-height: 44px;
-  top: 0px;
+  height: 48px;
+  line-height: 48px;
+  top: 2px;
   left: 0px;
   z-index: 10;
-  height: 44px;
-  line-height: 44px;
   margin-left: 16px;
-  cursor: pointer;
 }
 
 .sdoc-file-view-container .sdoc-file-view-content {

package/dist/extension/plugins/file-view/render-elem/index.js

@@ -19,6 +19,7 @@ var _commonUtils = require("../../../../utils/common-utils");
 var _localStorageUtils = _interopRequireDefault(require("../../../../utils/local-storage-utils"));
 var _constants = require("../../../constants");
 var _helpers = require("../helpers");
+var _rename = _interopRequireDefault(require("../rename"));
 require("./index.css");
 var FileView = function FileView(_ref) {
   var element = _ref.element,
@@ -154,6 +155,16 @@ var FileView = function FileView(_ref) {
     }
     return null;
   }, [data]);
+  var onNameCancel = (0, _react.useCallback)(function () {}, []);
+  var onRename = (0, _react.useCallback)(function (newName) {
+    var newData = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, element.data), {}, {
+      view_name: newName
+    });
+    (0, _helpers.updateFileView)(newData, editor, element);
+
+    // TODO:
+    // context.modifyView(data.view_id, { view_name: newName });
+  }, [editor, element]);
   return /*#__PURE__*/_react["default"].createElement("div", Object.assign({
     "data-id": element.id
   }, attributes, {
@@ -162,7 +173,11 @@ var FileView = function FileView(_ref) {
     suppressContentEditableWarning: true
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-file-view-title"
-  }, data.view_name), /*#__PURE__*/_react["default"].createElement("div", {
+  }, /*#__PURE__*/_react["default"].createElement(_rename["default"], {
+    name: data.view_name,
+    onRenameConfirm: onRename,
+    onRenameCancel: onNameCancel
+  })), /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])('sdoc-file-view-content', {
       'is-selected': isSelected
     }),

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.40",
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c89a3c31a2f1885ca2f237d98f70affbd8981102"
+  "gitHead": "9b616f58a19029c6a345bcbb262068993e9b31a2"
 }