@seafile/sdoc-editor 3.0.249 → 3.0.251

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

@@ -26,7 +26,8 @@ var _event = require("./event");
 var _helpers2 = require("./helpers");
 var _sideMenu = _interopRequireDefault(require("./side-menu"));
 require("./index.css");
-var HORIZONTAL_DROP_ZONE_WIDTH = 48;
+// Keep the visual drop indicator narrow, but make the invisible hit area easier to reach.
+var HORIZONTAL_DROP_ZONE_WIDTH = 72;
 var getSafeNodeEntry = function getSafeNodeEntry(editor, element) {
   try {
     return (0, _helpers2.getNodeEntry)(editor, element);
@@ -278,6 +279,7 @@ var SideToolbar = function SideToolbar() {
     event.stopPropagation();
     sourceElementRef.current = null;
     isDraggingEditorElementRef.current = true;
+    event.dataTransfer.effectAllowed = 'move';
     // 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) {
@@ -645,9 +647,8 @@ var SideToolbar = function SideToolbar() {
     isDraggingEditorElementRef.current = false;
   }, [clearAllDragStyles]);
   var handleDragover = (0, _react.useCallback)(function (event) {
-    var _target;
+    var _event$target, _event$target$closest, _target;
     if (!isEditorDrag()) return;
-    event.preventDefault();
     var _getSafeNodeEntry7 = getSafeNodeEntry(editor, sourceElementRef.current),
       _getSafeNodeEntry8 = (0, _slicedToArray2["default"])(_getSafeNodeEntry7, 2),
       sourceNode = _getSafeNodeEntry8[0],
@@ -677,6 +678,11 @@ var SideToolbar = function SideToolbar() {
       clearAllDragStyles();
       return;
     }
+    var eventEditorContainer = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : (_event$target$closest = _event$target.closest) === null || _event$target$closest === void 0 ? void 0 : _event$target$closest.call(_event$target, '.sdoc-article-container');
+    if (eventEditorContainer && eventEditorContainer !== editorContainer) {
+      clearAllDragStyles();
+      return;
+    }
     var containerRect = editorContainer.getBoundingClientRect();
 
     // Current visible area of editor container
@@ -769,6 +775,9 @@ var SideToolbar = function SideToolbar() {
         previousRect = rect;
       });
       if (activeColumn) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.dataTransfer.dropEffect = 'move';
         activeColumn.classList.add("sdoc-dragging-".concat(activeDirection));
         activeDragElRef.current = activeColumn;
         pendingSideDropRef.current = {
@@ -806,11 +815,20 @@ var SideToolbar = function SideToolbar() {
       };
     } else {
       clearAllDragStyles();
+      return;
     }
+    event.preventDefault();
+    event.stopPropagation();
+    event.dataTransfer.dropEffect = 'move';
   }, [clearAllDragStyles, editor, getEditorContainer, isEditorDrag]);
   var handleDragLeave = (0, _react.useCallback)(function (event) {
+    var _pendingSideDropRef$c;
     var editorContainer = event.currentTarget;
     var relatedTarget = event.relatedTarget;
+    var pendingDropElement = (_pendingSideDropRef$c = pendingSideDropRef.current) === null || _pendingSideDropRef$c === void 0 ? void 0 : _pendingSideDropRef$c.element;
+
+    // Preserve a pending move within this editor until drop or dragend.
+    if (pendingDropElement && editorContainer.contains(pendingDropElement)) return;
 
     // Ignore dragleave events from descendants. Some browsers report a null
     // relatedTarget when moving between block elements, so clearing here
@@ -892,48 +910,36 @@ var SideToolbar = function SideToolbar() {
     return true;
   }, [editor]);
   var handleDropCapture = (0, _react.useCallback)(function (event) {
-    if (!isEditorDrag() || !pendingSideDropRef.current) return;
+    if (!isEditorDrag()) 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) {
-      resetDragState();
-      return;
-    }
+    // Recheck the final position and stop the normal block drop for side hits.
+    handleDragover(event);
+    if (!pendingSideDropRef.current) return;
+    handleDrop();
     resetDragState();
-  }, [handleDrop, isEditorDrag, resetDragState]);
+  }, [handleDragover, 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.
+    // dragend also fires when the user cancels a drag or releases outside the
+    // editor. Only a confirmed drop event may mutate the Slate document.
     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]);
+  }, [resetDragState]);
   (0, _react.useEffect)(function () {
     var editorContainer = getEditorContainer();
     if (!editorContainer) return undefined;
 
-    // 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);
+    // Side hit areas can extend outside the editor container. Accept them at
+    // document level, while the handlers still validate this editor's drag.
+    var dragEventTarget = editorContainer.ownerDocument;
+    dragEventTarget.addEventListener('dragover', handleDragover, true);
     editorContainer.addEventListener('dragend', handleDragEnd, true);
     editorContainer.addEventListener('dragleave', handleDragLeave, true);
-    editorContainer.addEventListener('drop', handleDropCapture, true);
+    dragEventTarget.addEventListener('drop', handleDropCapture, true);
     return function () {
-      editorContainer.removeEventListener('dragover', handleDragover, true);
+      dragEventTarget.removeEventListener('dragover', handleDragover, true);
       editorContainer.removeEventListener('dragend', handleDragEnd, true);
       editorContainer.removeEventListener('dragleave', handleDragLeave, true);
-      editorContainer.removeEventListener('drop', handleDropCapture, true);
+      dragEventTarget.removeEventListener('drop', handleDropCapture, true);
     };
   }, [getEditorContainer, handleDragEnd, handleDragLeave, handleDragover, handleDropCapture]);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !_commonUtils.isMobile && /*#__PURE__*/_react["default"].createElement("div", {
@@ -950,7 +956,6 @@ 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.249",
+  "version": "3.0.251",
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",
@@ -71,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c7f6bb39019dd763b4a9bc3f55f04e397d09b04a"
+  "gitHead": "fff8d3dc8f019c7a0f0168e906ed6091e11ad0ab"
 }