fix(YfmTableControls): fix drag-n-drop false positives (#853)

Author: d3m1d0v

src/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenu/FloatingMenu.tsx

@@ -23,7 +23,10 @@ export type FloatingMenuProps = {
     canDrag: boolean;
     anchorElement: Element;
     dropdownItems: DropdownMenuProps<unknown>['items'];
-    switcherMouseProps?: Pick<ButtonButtonProps, 'onMouseDown' | 'onMouseMove' | 'onMouseUp'>;
+    switcherMouseProps?: Pick<
+        ButtonButtonProps,
+        'onMouseDown' | 'onMouseMove' | 'onMouseUp' | 'onMouseLeave'
+    >;
     onOpenToggle: NonNullable<DropdownMenuProps<unknown>['onOpenToggle']>;
 };
 

src/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenuControl/FloatingMenuControl.tsx

@@ -103,6 +103,7 @@ export const FloatingMenuControl: React.FC<FloatingMenuControlProps> =
                 switcherMouseProps={
                     dndHandler
                         ? {
+                              onMouseLeave: dndHandler.control_handleMouseLeave,
                               onMouseDown: dndHandler.control_handleMouseDown,
                               onMouseMove: dndHandler.control_handleMouseMove,
                               onMouseUp: dndHandler.control_handleMouseUp,

src/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd.ts

@@ -38,6 +38,7 @@ export type DnDControlHandler = {
     control_handleMouseDown: React.MouseEventHandler<HTMLButtonElement>;
     control_handleMouseMove: React.MouseEventHandler<HTMLButtonElement>;
     control_handleMouseUp: React.MouseEventHandler<HTMLButtonElement>;
+    control_handleMouseLeave: React.MouseEventHandler<HTMLButtonElement>;
 };
 
 interface TableHandler {
@@ -122,6 +123,10 @@ abstract class YfmTableDnDAbstractHandler implements TableHandler, DnDControlHan
         this.__dragMouseDown = false;
     };
 
+    control_handleMouseLeave: React.MouseEventHandler<HTMLButtonElement> = () => {
+        this.__dragMouseDown = false;
+    };
+
     control_handleMouseMove: React.MouseEventHandler<HTMLButtonElement> = (event) => {
         if (!this._dragMouseDown || !isDragThresholdPassed(this._dragMouseDown, event)) return;