@seafile/sdoc-editor 3.0.246 → 3.0.247

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

@@ -609,11 +609,21 @@ var SideToolbar = function SideToolbar() {
   var handleDragover = (0, _react.useCallback)(function (event) {
     var _target, _target2, _target3;
     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];
-    if (!sourceNode || !sourcePath) return;
+    if (!sourceNode || !sourcePath) {
+      (0, _helpers2.clearDragClass)(activeDragElRef.current);
+      activeDragElRef.current = null;
+      return;
+    }
 
     // Not support node type in multi column
     if ([_constants2.TABLE, _constants2.VIDEO, _constants2.CODE_BLOCK, _constants2.WHITEBOARD, _constants2.FORMULA].includes(sourceNode.type)) return;
@@ -733,6 +743,8 @@ var SideToolbar = function SideToolbar() {
   }, []);
   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],
@@ -741,7 +753,7 @@ var SideToolbar = function SideToolbar() {
       _getNodeEntry12 = (0, _slicedToArray2["default"])(_getNodeEntry11, 2),
       sourceNode = _getNodeEntry12[0],
       sourcePath = _getNodeEntry12[1];
-    if (!targetPath || !sourcePath) return;
+    if (!targetNode || !targetPath || !sourceNode || !sourcePath) return false;
 
     // When source node is list child, it is equal to drag top list node
     var topSourceNode = _slate.Node.get(editor, [sourcePath[0]]);
@@ -768,7 +780,7 @@ var SideToolbar = function SideToolbar() {
           to: [targetPath[0], targetPath[1], 0]
         });
       }
-      return;
+      return true;
     }
 
     // Drop non-multi column into non-multi column situation
@@ -776,7 +788,7 @@ var SideToolbar = function SideToolbar() {
     if ([_constants2.ORDERED_LIST, _constants2.UNORDERED_LIST].includes(targetNode.type)) {
       targetPath = _slateReact.ReactEditor.findPath(editor, targetNode);
     }
-    if (_slate.Path.equals([sourcePath[0]], [targetPath[0]])) return;
+    if (_slate.Path.equals([sourcePath[0]], [targetPath[0]])) return true;
     var leftNode = null;
     var rightNode = null;
     if (targetEl.classList.contains('sdoc-dragging-left')) {
@@ -786,7 +798,7 @@ var SideToolbar = function SideToolbar() {
       leftNode = targetNode;
       rightNode = sourceNode;
     } else {
-      return;
+      return true;
     }
 
     // Form multi column first and then remove source and target node
@@ -797,21 +809,39 @@ var SideToolbar = function SideToolbar() {
     _slate.Transforms.removeNodes(editor, {
       at: [sourcePath[0]]
     });
-    return;
+    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;
+
+    // Block-level onDrop handlers stop propagation. Capture the event on the
+    // article container so side drops are handled before those handlers run.
+    event.preventDefault();
+    event.stopPropagation();
+    clearAllDragStyles();
+    sourceElement = null;
+    targetElement = null;
+  }, [clearAllDragStyles, handleDrop]);
   (0, _react.useEffect)(function () {
     var editorContainer = document.querySelector('.sdoc-article-container');
-    editorContainer.addEventListener('dragover', handleDragover);
-    editorContainer.addEventListener('dragend', clearAllDragStyles);
-    editorContainer.addEventListener('dragleave', clearAllDragStyles);
-    editorContainer.addEventListener('drop', handleDrop);
+    if (!editorContainer) return undefined;
+
+    // Use capture phase because block-level drag handlers stop propagation.
+    editorContainer.addEventListener('dragover', handleDragover, true);
+    editorContainer.addEventListener('dragend', clearAllDragStyles, true);
+    editorContainer.addEventListener('dragleave', clearAllDragStyles, true);
+    editorContainer.addEventListener('drop', handleDropCapture, true);
     return function () {
-      editorContainer.removeEventListener('dragover', handleDragover);
-      editorContainer.removeEventListener('dragend', clearAllDragStyles);
-      editorContainer.removeEventListener('dragleave', clearAllDragStyles);
-      editorContainer.removeEventListener('drop', handleDrop);
+      editorContainer.removeEventListener('dragover', handleDragover, true);
+      editorContainer.removeEventListener('dragend', clearAllDragStyles, true);
+      editorContainer.removeEventListener('dragleave', clearAllDragStyles, true);
+      editorContainer.removeEventListener('drop', handleDropCapture, true);
     };
-  }, [handleDragover, clearAllDragStyles, handleDrop]);
+  }, [handleDragover, clearAllDragStyles, handleDropCapture]);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !_commonUtils.isMobile && /*#__PURE__*/_react["default"].createElement("div", {
     onAnimationEnd: function onAnimationEnd() {
       return setIsMoving(false);

package/package.json

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