@seafile/sdoc-editor 3.0.248 → 3.0.249

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

@@ -40,11 +40,18 @@ var SideToolbar = function SideToolbar() {
   var menuRef = (0, _react.useRef)(null);
   var sideToolbarContainerRef = (0, _react.useRef)(null);
   var sourceElementRef = (0, _react.useRef)(null);
-  var isEventInCurrentEditor = (0, _react.useCallback)(function (event) {
+  var isDraggingEditorElementRef = (0, _react.useRef)(false);
+  var getEditorContainer = (0, _react.useCallback)(function () {
     var _sideToolbarContainer;
-    var editorContainer = (_sideToolbarContainer = sideToolbarContainerRef.current) === null || _sideToolbarContainer === void 0 ? void 0 : _sideToolbarContainer.closest('.sdoc-article-container');
+    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),
@@ -80,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({});
@@ -269,6 +277,7 @@ var SideToolbar = function SideToolbar() {
   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) {
@@ -314,25 +323,24 @@ var SideToolbar = function SideToolbar() {
   }, [editor, slateNode]);
   var dragOver = (0, _react.useCallback)(function (event) {
     if (!isEventInCurrentEditor(event)) return;
-    var dragTypes = event.dataTransfer.types;
-    if (!dragTypes.includes(_event.DRAG_SDOC_EDITOR_ELEMENT)) return;
+    if (!isEditorDrag()) return;
     var overElement = event.currentTarget;
     if (!overElement.classList.contains('sdoc-dragging')) {
       overElement.classList.add('sdoc-dragging');
     }
-  }, [isEventInCurrentEditor]);
+  }, [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$;
+    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;
@@ -608,7 +616,7 @@ var SideToolbar = function SideToolbar() {
 
     // reset
     sourceElementRef.current = null;
-  }, [editor, isEventInCurrentEditor]);
+  }, [editor, isEditorDrag, isEventInCurrentEditor]);
   (0, _react.useEffect)(function () {
     var eventBus = _eventBus["default"].getInstance();
     var unSubscribeDragOver = eventBus.subscribe(_constants.INTERNAL_EVENT.ON_DRAG_OVER_BLOCK, dragOver);
@@ -629,15 +637,17 @@ var SideToolbar = function SideToolbar() {
   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 _event$dataTransfer, _target;
+    var _target;
+    if (!isEditorDrag()) return;
     event.preventDefault();
-    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))) {
-      clearAllDragStyles();
-      return;
-    }
     var _getSafeNodeEntry7 = getSafeNodeEntry(editor, sourceElementRef.current),
       _getSafeNodeEntry8 = (0, _slicedToArray2["default"])(_getSafeNodeEntry7, 2),
       sourceNode = _getSafeNodeEntry8[0],
@@ -662,7 +672,11 @@ var SideToolbar = function SideToolbar() {
     // 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
@@ -757,6 +771,10 @@ var SideToolbar = function SideToolbar() {
       if (activeColumn) {
         activeColumn.classList.add("sdoc-dragging-".concat(activeDirection));
         activeDragElRef.current = activeColumn;
+        pendingSideDropRef.current = {
+          element: activeColumn,
+          direction: activeDirection
+        };
       } else {
         clearAllDragStyles();
       }
@@ -773,19 +791,38 @@ 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 {
       clearAllDragStyles();
     }
-  }, [clearAllDragStyles, editor]);
+  }, [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 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],
@@ -806,7 +843,7 @@ 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]],
@@ -815,7 +852,7 @@ var SideToolbar = function SideToolbar() {
         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]],
@@ -834,10 +871,10 @@ 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 {
@@ -855,42 +892,50 @@ var SideToolbar = function SideToolbar() {
     return true;
   }, [editor]);
   var handleDropCapture = (0, _react.useCallback)(function (event) {
-    var _event$dataTransfer2;
-    var dragTypes = (_event$dataTransfer2 = event.dataTransfer) === null || _event$dataTransfer2 === void 0 ? void 0 : _event$dataTransfer2.types;
-    if (!(dragTypes !== null && dragTypes !== void 0 && dragTypes.includes(_event.DRAG_SDOC_EDITOR_ELEMENT))) return;
-    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;
+    if (!isEditorDrag() || !pendingSideDropRef.current) return;
+
+    // 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();
     var handled = handleDrop();
     if (!handled) {
-      clearAllDragStyles();
+      resetDragState();
       return;
     }
-
-    // Only side drops create/extend a multi-column. Stop before the block
-    // handlers can process the same drop and mutate Slate a second time.
-    event.preventDefault();
-    event.stopPropagation();
-    clearAllDragStyles();
-    sourceElementRef.current = null;
-  }, [clearAllDragStyles, handleDrop]);
+    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 _sideToolbarContainer2;
-    var editorContainer = (_sideToolbarContainer2 = sideToolbarContainerRef.current) === null || _sideToolbarContainer2 === void 0 ? void 0 : _sideToolbarContainer2.closest('.sdoc-article-container');
+    var editorContainer = getEditorContainer();
     if (!editorContainer) return undefined;
 
-    // Capture dragover/drop because block-level 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);
     };
-  }, [clearAllDragStyles, handleDragover, 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);
@@ -905,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.248",
+  "version": "3.0.249",
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",
@@ -71,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "28da2fee93d686e9cf936d227566c47084d3ebf8"
+  "gitHead": "c7f6bb39019dd763b4a9bc3f55f04e397d09b04a"
 }