diff --git a/src/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenu/FloatingMenu.tsx b/src/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenu/FloatingMenu.tsx index 5c86f4d1..8b08506f 100644 --- a/src/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenu/FloatingMenu.tsx +++ b/src/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenu/FloatingMenu.tsx @@ -23,7 +23,10 @@ export type FloatingMenuProps = { canDrag: boolean; anchorElement: Element; dropdownItems: DropdownMenuProps['items']; - switcherMouseProps?: Pick; + switcherMouseProps?: Pick< + ButtonButtonProps, + 'onMouseDown' | 'onMouseMove' | 'onMouseUp' | 'onMouseLeave' + >; onOpenToggle: NonNullable['onOpenToggle']>; }; diff --git a/src/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenuControl/FloatingMenuControl.tsx b/src/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenuControl/FloatingMenuControl.tsx index e6cbd427..8d8586eb 100644 --- a/src/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenuControl/FloatingMenuControl.tsx +++ b/src/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenuControl/FloatingMenuControl.tsx @@ -103,6 +103,7 @@ export const FloatingMenuControl: React.FC = switcherMouseProps={ dndHandler ? { + onMouseLeave: dndHandler.control_handleMouseLeave, onMouseDown: dndHandler.control_handleMouseDown, onMouseMove: dndHandler.control_handleMouseMove, onMouseUp: dndHandler.control_handleMouseUp, diff --git a/src/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd.ts b/src/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd.ts index c3c1f67f..556f601b 100644 --- a/src/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd.ts +++ b/src/extensions/yfm/YfmTable/plugins/YfmTableControls/dnd/dnd.ts @@ -38,6 +38,7 @@ export type DnDControlHandler = { control_handleMouseDown: React.MouseEventHandler; control_handleMouseMove: React.MouseEventHandler; control_handleMouseUp: React.MouseEventHandler; + control_handleMouseLeave: React.MouseEventHandler; }; interface TableHandler { @@ -122,6 +123,10 @@ abstract class YfmTableDnDAbstractHandler implements TableHandler, DnDControlHan this.__dragMouseDown = false; }; + control_handleMouseLeave: React.MouseEventHandler = () => { + this.__dragMouseDown = false; + }; + control_handleMouseMove: React.MouseEventHandler = (event) => { if (!this._dragMouseDown || !isDragThresholdPassed(this._dragMouseDown, event)) return;