@seafile/sdoc-editor 3.0.247 → 3.0.249

package/dist/extension/toolbar/side-toolbar/index.js

@@ -27,12 +27,32 @@ var _helpers2 = require("./helpers");
 var _sideMenu = _interopRequireDefault(require("./side-menu"));
 require("./index.css");
 var HORIZONTAL_DROP_ZONE_WIDTH = 48;
-var sourceElement = null;
-var targetElement = null;
+var getSafeNodeEntry = function getSafeNodeEntry(editor, element) {
+  try {
+    return (0, _helpers2.getNodeEntry)(editor, element);
+  } catch (error) {
+    return [];
+  }
+};
 var SideToolbar = function SideToolbar() {
   var editor = (0, _slateReact.useSlateStatic)();
   var scrollRef = (0, _useScrollContext.useScrollContext)();
   var menuRef = (0, _react.useRef)(null);
+  var sideToolbarContainerRef = (0, _react.useRef)(null);
+  var sourceElementRef = (0, _react.useRef)(null);
+  var isDraggingEditorElementRef = (0, _react.useRef)(false);
+  var getEditorContainer = (0, _react.useCallback)(function () {
+    var _sideToolbarContainer;
+    return (_sideToolbarContainer = sideToolbarContainerRef.current) === null || _sideToolbarContainer === void 0 ? void 0 : _sideToolbarContainer.closest('.sdoc-article-container');
+  }, []);
+  var isEventInCurrentEditor = (0, _react.useCallback)(function (event) {
+    var editorContainer = getEditorContainer();
+    var eventTarget = event.target || event.currentTarget;
+    return Boolean(editorContainer && eventTarget && editorContainer.contains(eventTarget));
+  }, [getEditorContainer]);
+  var isEditorDrag = (0, _react.useCallback)(function () {
+    return isDraggingEditorElementRef.current;
+  }, []);
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     slateNode = _useState2[0],
@@ -67,6 +87,7 @@ var SideToolbar = function SideToolbar() {
   var showSelectedNodesRef = (0, _react.useRef)(null);
   var draggedPreviewContainer = (0, _react.useRef)(null);
   var activeDragElRef = (0, _react.useRef)(null);
+  var pendingSideDropRef = (0, _react.useRef)(null);
   var onReset = (0, _react.useCallback)(function () {
     setShowSideMenu(false);
     setMenuPosition({});
@@ -255,6 +276,8 @@ var SideToolbar = function SideToolbar() {
   }, [editor, isShowSideMenu, slateNode]);
   var dragStart = (0, _react.useCallback)(function (event) {
     event.stopPropagation();
+    sourceElementRef.current = null;
+    isDraggingEditorElementRef.current = true;
     // Create the preview container when dragging more than one listNodes
     var noDrag = _slate.Path.equals(editor.selection.focus.path, editor.selection.anchor.path);
     if (showSelectedNodesRef.current && showSelectedNodesRef.current.length > 1 && !noDrag) {
@@ -285,7 +308,7 @@ var SideToolbar = function SideToolbar() {
       }, 0);
       return;
     }
-    sourceElement = _slateReact.ReactEditor.toDOMNode(editor, slateNode);
+    sourceElementRef.current = _slateReact.ReactEditor.toDOMNode(editor, slateNode);
     var path = _slateReact.ReactEditor.findPath(editor, slateNode);
 
     // Dragging the first element within the blockquote drags the entire blockquote by default.
@@ -293,45 +316,49 @@ var SideToolbar = function SideToolbar() {
       return p === 0;
     })) {
       var nodeEntry = _slate.Editor.node(editor, [path[0]]);
-      sourceElement = _slateReact.ReactEditor.toDOMNode(editor, nodeEntry[0]);
+      sourceElementRef.current = _slateReact.ReactEditor.toDOMNode(editor, nodeEntry[0]);
     }
-    event.dataTransfer.setDragImage(sourceElement, 0, 0);
+    event.dataTransfer.setDragImage(sourceElementRef.current, 0, 0);
     event.dataTransfer.setData(_event.DRAG_SDOC_EDITOR_ELEMENT, true);
   }, [editor, slateNode]);
   var dragOver = (0, _react.useCallback)(function (event) {
-    var dragTypes = event.dataTransfer.types;
-    if (!dragTypes.includes(_event.DRAG_SDOC_EDITOR_ELEMENT)) return;
+    if (!isEventInCurrentEditor(event)) return;
+    if (!isEditorDrag()) return;
     var overElement = event.currentTarget;
     if (!overElement.classList.contains('sdoc-dragging')) {
       overElement.classList.add('sdoc-dragging');
     }
-  }, []);
+  }, [isEditorDrag, isEventInCurrentEditor]);
   var dragLeave = (0, _react.useCallback)(function (event) {
+    if (!isEventInCurrentEditor(event)) return;
     var leaveElement = event.currentTarget;
     leaveElement.classList.remove('sdoc-dragging');
-  }, []);
+  }, [isEventInCurrentEditor]);
   var drop = (0, _react.useCallback)(function (event) {
-    var _parentNode$children$;
-    targetElement = event.currentTarget;
+    var _event$dataTransfer, _parentNode$children$;
+    if (!isEventInCurrentEditor(event)) return;
+    var targetElement = event.currentTarget;
     targetElement.classList.remove('sdoc-dragging');
-    var dragTypes = event.dataTransfer.types;
-    if (!dragTypes.includes(_event.DRAG_SDOC_EDITOR_ELEMENT) && dragTypes[0] !== 'Files') return;
+    var dragTypes = ((_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.types) || [];
+    if (!isEditorDrag() && dragTypes[0] !== 'Files') return;
 
     // Prevent dragging table data to the editor
     if (dragTypes.includes(_constants2.TABLE_DRAG_KEY)) return;
 
     // Drag local image files to sdoc
     if (event.dataTransfer.files.length > 0) {
-      var _getNodeEntry = (0, _helpers2.getNodeEntry)(editor, targetElement),
-        _getNodeEntry2 = (0, _slicedToArray2["default"])(_getNodeEntry, 2),
-        _targetPath = _getNodeEntry2[1];
+      var _getSafeNodeEntry = getSafeNodeEntry(editor, targetElement),
+        _getSafeNodeEntry2 = (0, _slicedToArray2["default"])(_getSafeNodeEntry, 2),
+        _targetPath = _getSafeNodeEntry2[1];
       (0, _helpers.insertImageFiles)(event.dataTransfer.files, editor, _targetPath);
       return;
     }
-    var _getNodeEntry3 = (0, _helpers2.getNodeEntry)(editor, targetElement),
-      _getNodeEntry4 = (0, _slicedToArray2["default"])(_getNodeEntry3, 2),
-      targetNode = _getNodeEntry4[0],
-      targetPath = _getNodeEntry4[1];
+    var _getSafeNodeEntry3 = getSafeNodeEntry(editor, targetElement),
+      _getSafeNodeEntry4 = (0, _slicedToArray2["default"])(_getSafeNodeEntry3, 2),
+      targetNode = _getSafeNodeEntry4[0],
+      targetPath = _getSafeNodeEntry4[1];
+    if (!targetNode || !targetPath) return;
+
     // Drag multiple list_items nodes
     if (draggedSourcePaths.current) {
       try {
@@ -387,10 +414,12 @@ var SideToolbar = function SideToolbar() {
         event.dataTransfer.clearData();
       }
     }
-    var _getNodeEntry5 = (0, _helpers2.getNodeEntry)(editor, sourceElement),
-      _getNodeEntry6 = (0, _slicedToArray2["default"])(_getNodeEntry5, 2),
-      sourceNode = _getNodeEntry6[0],
-      sourcePath = _getNodeEntry6[1];
+    var _getSafeNodeEntry5 = getSafeNodeEntry(editor, sourceElementRef.current),
+      _getSafeNodeEntry6 = (0, _slicedToArray2["default"])(_getSafeNodeEntry5, 2),
+      sourceNode = _getSafeNodeEntry6[0],
+      sourcePath = _getSafeNodeEntry6[1];
+    if (!sourceNode || !sourcePath) return;
+
     // Dragging into a quoteBlock is not supported
     if ([_constants2.CODE_BLOCK, _constants2.TABLE, _constants2.BLOCKQUOTE].includes(sourceNode.type) && (0, _helpers2.isBlockquote)(editor, [targetPath[0]]) && targetPath.length > 1) {
       return;
@@ -586,9 +615,8 @@ var SideToolbar = function SideToolbar() {
     }
 
     // reset
-    sourceElement = null;
-    targetElement = null;
-  }, [editor]);
+    sourceElementRef.current = null;
+  }, [editor, isEditorDrag, isEventInCurrentEditor]);
   (0, _react.useEffect)(function () {
     var eventBus = _eventBus["default"].getInstance();
     var unSubscribeDragOver = eventBus.subscribe(_constants.INTERNAL_EVENT.ON_DRAG_OVER_BLOCK, dragOver);
@@ -606,35 +634,49 @@ var SideToolbar = function SideToolbar() {
   var onMouseLeave = (0, _react.useCallback)(function () {
     setIsEnterMoreVertical(false);
   }, []);
+  var clearAllDragStyles = (0, _react.useCallback)(function () {
+    (0, _helpers2.clearDragClass)(activeDragElRef.current);
+    activeDragElRef.current = null;
+    pendingSideDropRef.current = null;
+  }, []);
+  var resetDragState = (0, _react.useCallback)(function () {
+    clearAllDragStyles();
+    sourceElementRef.current = null;
+    isDraggingEditorElementRef.current = false;
+  }, [clearAllDragStyles]);
   var handleDragover = (0, _react.useCallback)(function (event) {
-    var _target, _target2, _target3;
+    var _target;
+    if (!isEditorDrag()) return;
     event.preventDefault();
-    var dragTypes = event.dataTransfer.types;
-    if (!dragTypes.includes(_event.DRAG_SDOC_EDITOR_ELEMENT)) {
-      (0, _helpers2.clearDragClass)(activeDragElRef.current);
-      activeDragElRef.current = null;
-      return;
-    }
-    var _getNodeEntry7 = (0, _helpers2.getNodeEntry)(editor, sourceElement),
-      _getNodeEntry8 = (0, _slicedToArray2["default"])(_getNodeEntry7, 2),
-      sourceNode = _getNodeEntry8[0],
-      sourcePath = _getNodeEntry8[1];
+    var _getSafeNodeEntry7 = getSafeNodeEntry(editor, sourceElementRef.current),
+      _getSafeNodeEntry8 = (0, _slicedToArray2["default"])(_getSafeNodeEntry7, 2),
+      sourceNode = _getSafeNodeEntry8[0],
+      sourcePath = _getSafeNodeEntry8[1];
     if (!sourceNode || !sourcePath) {
-      (0, _helpers2.clearDragClass)(activeDragElRef.current);
-      activeDragElRef.current = null;
+      clearAllDragStyles();
       return;
     }
 
     // Not support node type in multi column
-    if ([_constants2.TABLE, _constants2.VIDEO, _constants2.CODE_BLOCK, _constants2.WHITEBOARD, _constants2.FORMULA].includes(sourceNode.type)) return;
+    if ([_constants2.TABLE, _constants2.VIDEO, _constants2.CODE_BLOCK, _constants2.WHITEBOARD, _constants2.FORMULA].includes(sourceNode.type)) {
+      clearAllDragStyles();
+      return;
+    }
     // Return if source node is from multi column
     var topNode = _slate.Node.get(editor, [sourcePath[0]]);
-    if ([_constants2.MULTI_COLUMN].includes(topNode.type)) return;
+    if ([_constants2.MULTI_COLUMN].includes(topNode.type)) {
+      clearAllDragStyles();
+      return;
+    }
 
     // Cursor position
     var x = event.clientX;
     var y = event.clientY;
-    var editorContainer = event.currentTarget;
+    var editorContainer = getEditorContainer();
+    if (!editorContainer) {
+      clearAllDragStyles();
+      return;
+    }
     var containerRect = editorContainer.getBoundingClientRect();
 
     // Current visible area of editor container
@@ -664,23 +706,38 @@ var SideToolbar = function SideToolbar() {
     } finally {
       _iterator2.f();
     }
-    if (!((_target = target) !== null && _target !== void 0 && _target.el)) return;
+    if (!((_target = target) !== null && _target !== void 0 && _target.el)) {
+      clearAllDragStyles();
+      return;
+    }
     var prevEl = activeDragElRef.current;
     if (prevEl && prevEl !== target.el) {
       (0, _helpers2.clearDragClass)(prevEl);
     }
-    if (((_target2 = target) === null || _target2 === void 0 ? void 0 : _target2.el) === sourceElement) return;
-    var _getNodeEntry9 = (0, _helpers2.getNodeEntry)(editor, (_target3 = target) === null || _target3 === void 0 ? void 0 : _target3.el),
-      _getNodeEntry0 = (0, _slicedToArray2["default"])(_getNodeEntry9, 2),
-      targetNode = _getNodeEntry0[0],
-      targetPath = _getNodeEntry0[1];
+    if (target.el === sourceElementRef.current) {
+      clearAllDragStyles();
+      return;
+    }
+    var _getSafeNodeEntry9 = getSafeNodeEntry(editor, target.el),
+      _getSafeNodeEntry0 = (0, _slicedToArray2["default"])(_getSafeNodeEntry9, 2),
+      targetNode = _getSafeNodeEntry0[0],
+      targetPath = _getSafeNodeEntry0[1];
 
     // Not support node type in multi column
-    if ([_constants2.TABLE, _constants2.VIDEO, _constants2.CODE_BLOCK, _constants2.WHITEBOARD, _constants2.FORMULA].includes(targetNode.type)) return;
-    if (!targetNode || targetPath.length === 0 && ![_constants2.ORDERED_LIST, _constants2.UNORDERED_LIST].includes(targetNode.type)) return;
+    if (!targetNode || !targetPath || [_constants2.TABLE, _constants2.VIDEO, _constants2.CODE_BLOCK, _constants2.WHITEBOARD, _constants2.FORMULA].includes(targetNode.type)) {
+      clearAllDragStyles();
+      return;
+    }
+    if (targetPath.length === 0 && ![_constants2.ORDERED_LIST, _constants2.UNORDERED_LIST].includes(targetNode.type)) {
+      clearAllDragStyles();
+      return;
+    }
 
     // Stop if target node is multi column node with four columns
-    if (targetNode.type === _constants2.MULTI_COLUMN && targetNode.children.length === 4) return;
+    if (targetNode.type === _constants2.MULTI_COLUMN && targetNode.children.length === 4) {
+      clearAllDragStyles();
+      return;
+    }
 
     // Add hover style for target node multi column children.
     // Only use a fixed-width zone around each column boundary so the drop
@@ -688,7 +745,10 @@ var SideToolbar = function SideToolbar() {
     if (targetNode.type === _constants2.MULTI_COLUMN) {
       var multiColumnEl = target.el;
       var columnEls = Array.from(multiColumnEl.querySelectorAll('.sdoc-column-container'));
-      if (!columnEls.length) return;
+      if (!columnEls.length) {
+        clearAllDragStyles();
+        return;
+      }
       columnEls.forEach(function (col) {
         return col.classList.remove('sdoc-dragging-left', 'sdoc-dragging', 'sdoc-dragging-right');
       });
@@ -711,8 +771,12 @@ var SideToolbar = function SideToolbar() {
       if (activeColumn) {
         activeColumn.classList.add("sdoc-dragging-".concat(activeDirection));
         activeDragElRef.current = activeColumn;
+        pendingSideDropRef.current = {
+          element: activeColumn,
+          direction: activeDirection
+        };
       } else {
-        activeDragElRef.current = null;
+        clearAllDragStyles();
       }
       return;
     }
@@ -727,32 +791,46 @@ var SideToolbar = function SideToolbar() {
       target.el.classList.remove('sdoc-dragging-right');
       target.el.classList.remove('sdoc-dragging');
       activeDragElRef.current = target.el;
+      pendingSideDropRef.current = {
+        element: target.el,
+        direction: 'left'
+      };
     } else if (isRightDropZone) {
       target.el.classList.add('sdoc-dragging-right');
       target.el.classList.remove('sdoc-dragging-left');
       target.el.classList.remove('sdoc-dragging');
       activeDragElRef.current = target.el;
+      pendingSideDropRef.current = {
+        element: target.el,
+        direction: 'right'
+      };
     } else {
-      activeDragElRef.current = null;
+      clearAllDragStyles();
     }
-  }, [editor]);
-  var clearAllDragStyles = (0, _react.useCallback)(function () {
-    var el = activeDragElRef.current;
-    (0, _helpers2.clearDragClass)(el);
-    activeDragElRef.current = null;
-  }, []);
+  }, [clearAllDragStyles, editor, getEditorContainer, isEditorDrag]);
+  var handleDragLeave = (0, _react.useCallback)(function (event) {
+    var editorContainer = event.currentTarget;
+    var relatedTarget = event.relatedTarget;
+
+    // Ignore dragleave events from descendants. Some browsers report a null
+    // relatedTarget when moving between block elements, so clearing here
+    // would remove the active drop zone before the drop event arrives.
+    var isLeavingEditor = event.target === editorContainer && (!relatedTarget || !editorContainer.contains(relatedTarget));
+    if (isLeavingEditor) clearAllDragStyles();
+  }, [clearAllDragStyles]);
   var handleDrop = (0, _react.useCallback)(function () {
-    var targetEl = activeDragElRef.current;
-    var hasSideDropClass = (targetEl === null || targetEl === void 0 ? void 0 : targetEl.classList.contains('sdoc-dragging-left')) || (targetEl === null || targetEl === void 0 ? void 0 : targetEl.classList.contains('sdoc-dragging-right'));
-    if (!hasSideDropClass) return false;
-    var _getNodeEntry1 = (0, _helpers2.getNodeEntry)(editor, targetEl),
-      _getNodeEntry10 = (0, _slicedToArray2["default"])(_getNodeEntry1, 2),
-      targetNode = _getNodeEntry10[0],
-      targetPath = _getNodeEntry10[1];
-    var _getNodeEntry11 = (0, _helpers2.getNodeEntry)(editor, sourceElement),
-      _getNodeEntry12 = (0, _slicedToArray2["default"])(_getNodeEntry11, 2),
-      sourceNode = _getNodeEntry12[0],
-      sourcePath = _getNodeEntry12[1];
+    var pendingDrop = pendingSideDropRef.current;
+    var targetEl = (pendingDrop === null || pendingDrop === void 0 ? void 0 : pendingDrop.element) || activeDragElRef.current;
+    var direction = (pendingDrop === null || pendingDrop === void 0 ? void 0 : pendingDrop.direction) || (targetEl !== null && targetEl !== void 0 && targetEl.classList.contains('sdoc-dragging-left') ? 'left' : null) || (targetEl !== null && targetEl !== void 0 && targetEl.classList.contains('sdoc-dragging-right') ? 'right' : null);
+    if (!targetEl || !direction) return false;
+    var _getSafeNodeEntry1 = getSafeNodeEntry(editor, targetEl),
+      _getSafeNodeEntry10 = (0, _slicedToArray2["default"])(_getSafeNodeEntry1, 2),
+      targetNode = _getSafeNodeEntry10[0],
+      targetPath = _getSafeNodeEntry10[1];
+    var _getSafeNodeEntry11 = getSafeNodeEntry(editor, sourceElementRef.current),
+      _getSafeNodeEntry12 = (0, _slicedToArray2["default"])(_getSafeNodeEntry11, 2),
+      sourceNode = _getSafeNodeEntry12[0],
+      sourcePath = _getSafeNodeEntry12[1];
     if (!targetNode || !targetPath || !sourceNode || !sourcePath) return false;
 
     // When source node is list child, it is equal to drag top list node
@@ -765,22 +843,24 @@ var SideToolbar = function SideToolbar() {
     if (_constants2.COLUMN === targetNode.type) {
       var topTargetNode = _slate.Node.get(editor, [targetPath[0]]); // Top multi column Node
       // Insert source node into last of multi column
-      if (targetEl.classList.contains('sdoc-dragging-right')) {
+      if (direction === 'right') {
         (0, _helper2.addLastColumnInMultiColumn)(editor, topTargetNode, targetPath);
         _slate.Transforms.moveNodes(editor, {
           at: [sourcePath[0]],
           to: [targetPath[0], targetPath[1] + 1, 0]
         });
+        return true;
       }
       // Insert source node into middle of multi column
-      if (targetEl.classList.contains('sdoc-dragging-left')) {
+      if (direction === 'left') {
         (0, _helper2.addMiddleColumnInMultiColumn)(editor, topTargetNode, targetPath);
         _slate.Transforms.moveNodes(editor, {
           at: [sourcePath[0]],
           to: [targetPath[0], targetPath[1], 0]
         });
+        return true;
       }
-      return true;
+      return false;
     }
 
     // Drop non-multi column into non-multi column situation
@@ -791,14 +871,14 @@ var SideToolbar = function SideToolbar() {
     if (_slate.Path.equals([sourcePath[0]], [targetPath[0]])) return true;
     var leftNode = null;
     var rightNode = null;
-    if (targetEl.classList.contains('sdoc-dragging-left')) {
+    if (direction === 'left') {
       leftNode = sourceNode;
       rightNode = targetNode;
-    } else if (targetEl.classList.contains('sdoc-dragging-right')) {
+    } else if (direction === 'right') {
       leftNode = targetNode;
       rightNode = sourceNode;
     } else {
-      return true;
+      return false;
     }
 
     // Form multi column first and then remove source and target node
@@ -812,40 +892,55 @@ var SideToolbar = function SideToolbar() {
     return true;
   }, [editor]);
   var handleDropCapture = (0, _react.useCallback)(function (event) {
-    var _event$dataTransfer;
-    var dragTypes = (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.types;
-    if (!(dragTypes !== null && dragTypes !== void 0 && dragTypes.includes(_event.DRAG_SDOC_EDITOR_ELEMENT)) || !activeDragElRef.current) return;
-    var handled = handleDrop();
-    if (!handled) return;
+    if (!isEditorDrag() || !pendingSideDropRef.current) return;
 
-    // Block-level onDrop handlers stop propagation. Capture the event on the
-    // article container so side drops are handled before those handlers run.
+    // Stop the normal block drop before mutating Slate. The actual target and
+    // direction were recorded during dragover, so this path does not depend
+    // on the final drop event target or on a final dragover being delivered.
     event.preventDefault();
     event.stopPropagation();
-    clearAllDragStyles();
-    sourceElement = null;
-    targetElement = null;
-  }, [clearAllDragStyles, handleDrop]);
+    var handled = handleDrop();
+    if (!handled) {
+      resetDragState();
+      return;
+    }
+    resetDragState();
+  }, [handleDrop, isEditorDrag, resetDragState]);
+  var handleDragEnd = (0, _react.useCallback)(function () {
+    // Both the document listener and React's onDragEnd can observe the same
+    // native event. Only the first one owns the drag session and may commit it.
+    if (!isDraggingEditorElementRef.current) return;
+
+    // Some deployed browsers do not deliver the drop event to the editor.
+    // The source draggable still receives dragend, so commit a pending side
+    // drop here as a fallback.
+    if (pendingSideDropRef.current) {
+      handleDrop();
+    }
+    resetDragState();
+  }, [handleDrop, resetDragState]);
   (0, _react.useEffect)(function () {
-    var editorContainer = document.querySelector('.sdoc-article-container');
+    var editorContainer = getEditorContainer();
     if (!editorContainer) return undefined;
 
-    // Use capture phase because block-level drag handlers stop propagation.
+    // Keep drag events scoped to the current editor container. Capture phase
+    // still lets this handler run before block-level handlers in the editor.
     editorContainer.addEventListener('dragover', handleDragover, true);
-    editorContainer.addEventListener('dragend', clearAllDragStyles, true);
-    editorContainer.addEventListener('dragleave', clearAllDragStyles, true);
+    editorContainer.addEventListener('dragend', handleDragEnd, true);
+    editorContainer.addEventListener('dragleave', handleDragLeave, true);
     editorContainer.addEventListener('drop', handleDropCapture, true);
     return function () {
       editorContainer.removeEventListener('dragover', handleDragover, true);
-      editorContainer.removeEventListener('dragend', clearAllDragStyles, true);
-      editorContainer.removeEventListener('dragleave', clearAllDragStyles, true);
+      editorContainer.removeEventListener('dragend', handleDragEnd, true);
+      editorContainer.removeEventListener('dragleave', handleDragLeave, true);
       editorContainer.removeEventListener('drop', handleDropCapture, true);
     };
-  }, [handleDragover, clearAllDragStyles, handleDropCapture]);
+  }, [getEditorContainer, handleDragEnd, handleDragLeave, handleDragover, handleDropCapture]);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !_commonUtils.isMobile && /*#__PURE__*/_react["default"].createElement("div", {
     onAnimationEnd: function onAnimationEnd() {
       return setIsMoving(false);
     },
+    ref: sideToolbarContainerRef,
     className: (0, _classnames["default"])('sdoc-side-toolbar-container d-print-none', {
       'fade-out': isMoving
     }),
@@ -855,6 +950,7 @@ var SideToolbar = function SideToolbar() {
     onMouseDown: onMouseDown,
     draggable: true,
     onDragStart: dragStart,
+    onDragEnd: handleDragEnd,
     className: "sdoc-side-op-icon",
     onClick: onShowSideMenuToggle,
     onMouseEnter: onMouseEnter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "3.0.247",
+  "version": "3.0.249",
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",
@@ -71,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "057969db030ac81ad1c976b6e961e9e4e86774e4"
+  "gitHead": "c7f6bb39019dd763b4a9bc3f55f04e397d09b04a"
 }