@seafile/sdoc-editor 3.0.246 → 3.0.248

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

@@ -27,12 +27,25 @@ 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 isEventInCurrentEditor = (0, _react.useCallback)(function (event) {
+    var _sideToolbarContainer;
+    var editorContainer = (_sideToolbarContainer = sideToolbarContainerRef.current) === null || _sideToolbarContainer === void 0 ? void 0 : _sideToolbarContainer.closest('.sdoc-article-container');
+    var eventTarget = event.target || event.currentTarget;
+    return Boolean(editorContainer && eventTarget && editorContainer.contains(eventTarget));
+  }, []);
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     slateNode = _useState2[0],
@@ -255,6 +268,7 @@ var SideToolbar = function SideToolbar() {
   }, [editor, isShowSideMenu, slateNode]);
   var dragStart = (0, _react.useCallback)(function (event) {
     event.stopPropagation();
+    sourceElementRef.current = null;
     // 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 +299,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,26 +307,29 @@ 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) {
+    if (!isEventInCurrentEditor(event)) return;
     var dragTypes = event.dataTransfer.types;
     if (!dragTypes.includes(_event.DRAG_SDOC_EDITOR_ELEMENT)) return;
     var overElement = event.currentTarget;
     if (!overElement.classList.contains('sdoc-dragging')) {
       overElement.classList.add('sdoc-dragging');
     }
-  }, []);
+  }, [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;
+    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;
@@ -322,16 +339,18 @@ var SideToolbar = function SideToolbar() {
 
     // 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 +406,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 +607,8 @@ var SideToolbar = function SideToolbar() {
     }
 
     // reset
-    sourceElement = null;
-    targetElement = null;
-  }, [editor]);
+    sourceElementRef.current = null;
+  }, [editor, isEventInCurrentEditor]);
   (0, _react.useEffect)(function () {
     var eventBus = _eventBus["default"].getInstance();
     var unSubscribeDragOver = eventBus.subscribe(_constants.INTERNAL_EVENT.ON_DRAG_OVER_BLOCK, dragOver);
@@ -606,20 +626,38 @@ 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;
+  }, []);
   var handleDragover = (0, _react.useCallback)(function (event) {
-    var _target, _target2, _target3;
+    var _event$dataTransfer, _target;
     event.preventDefault();
-    var _getNodeEntry7 = (0, _helpers2.getNodeEntry)(editor, sourceElement),
-      _getNodeEntry8 = (0, _slicedToArray2["default"])(_getNodeEntry7, 2),
-      sourceNode = _getNodeEntry8[0],
-      sourcePath = _getNodeEntry8[1];
-    if (!sourceNode || !sourcePath) return;
+    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],
+      sourcePath = _getSafeNodeEntry8[1];
+    if (!sourceNode || !sourcePath) {
+      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;
@@ -654,23 +692,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
@@ -678,7 +731,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');
       });
@@ -702,7 +758,7 @@ var SideToolbar = function SideToolbar() {
         activeColumn.classList.add("sdoc-dragging-".concat(activeDirection));
         activeDragElRef.current = activeColumn;
       } else {
-        activeDragElRef.current = null;
+        clearAllDragStyles();
       }
       return;
     }
@@ -723,25 +779,22 @@ var SideToolbar = function SideToolbar() {
       target.el.classList.remove('sdoc-dragging');
       activeDragElRef.current = target.el;
     } 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]);
   var handleDrop = (0, _react.useCallback)(function () {
     var targetEl = activeDragElRef.current;
-    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];
-    if (!targetPath || !sourcePath) return;
+    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 _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
     var topSourceNode = _slate.Node.get(editor, [sourcePath[0]]);
@@ -759,6 +812,7 @@ var SideToolbar = function SideToolbar() {
           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')) {
@@ -767,8 +821,9 @@ var SideToolbar = function SideToolbar() {
           at: [sourcePath[0]],
           to: [targetPath[0], targetPath[1], 0]
         });
+        return true;
       }
-      return;
+      return false;
     }
 
     // Drop non-multi column into non-multi column situation
@@ -776,7 +831,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 +841,7 @@ var SideToolbar = function SideToolbar() {
       leftNode = targetNode;
       rightNode = sourceNode;
     } else {
-      return;
+      return false;
     }
 
     // Form multi column first and then remove source and target node
@@ -797,25 +852,50 @@ var SideToolbar = function SideToolbar() {
     _slate.Transforms.removeNodes(editor, {
       at: [sourcePath[0]]
     });
-    return;
+    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;
+    var handled = handleDrop();
+    if (!handled) {
+      clearAllDragStyles();
+      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]);
   (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);
+    var _sideToolbarContainer2;
+    var editorContainer = (_sideToolbarContainer2 = sideToolbarContainerRef.current) === null || _sideToolbarContainer2 === void 0 ? void 0 : _sideToolbarContainer2.closest('.sdoc-article-container');
+    if (!editorContainer) return undefined;
+
+    // Capture dragover/drop because block-level 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]);
+  }, [clearAllDragStyles, 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
     }),

package/package.json

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