editor: close tab on middle-click

Fixes: https://github.com/pybricks/support/issues/758

CHANGELOG.md

@@ -4,6 +4,11 @@
 
 ## [Unreleased]
 
+### Added
+- Added feature to close editor tab on middle click ([support#758]).
+
+[support#758]: https://github.com/pybricks/support/issues/758
+
 ## [2.0.0-beta.8] - 2022-10-25
 
 ### Fixed

src/editor/Editor.test.tsx

@@ -81,6 +81,22 @@ describe('Editor', () => {
 
             expect(dispatch).toHaveBeenCalledWith(editorCloseFile(testFile.uuid));
         });
+
+        it('should dispatch close action when tab is middle clicked', async () => {
+            jest.mocked(useFileStorageMetadata).mockReturnValue([testFile]);
+            jest.mocked(useFileStoragePath).mockReturnValue(testFile.path);
+
+            const [user, editor, dispatch] = testRender(<Editor />, {
+                editor: { openFileUuids: [testFile.uuid] },
+            });
+
+            await user.pointer({
+                keys: '[MouseMiddle]',
+                target: editor.getByRole('tab', { name: 'test.file' }),
+            });
+
+            expect(dispatch).toHaveBeenCalledWith(editorCloseFile(testFile.uuid));
+        });
     });
 
     describe('context menu', () => {

src/editor/Editor.tsx

@@ -265,6 +265,18 @@ const EditorTabs: React.VoidFunctionComponent<EditorTabsProps> = ({ onChange })
         [dispatch],
     );
 
+    // close tab when middle-clicked
+    const handleMouseDown = useCallback(
+        (e: React.MouseEvent, uuid: UUID) => {
+            if (e.button === 1) {
+                dispatch(editorCloseFile(uuid));
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        },
+        [dispatch],
+    );
+
     const tabsRef = useRef<Tabs>(null);
 
     // HACK: call private Tabs method to fix selection indicator animation when
@@ -287,6 +299,7 @@ const EditorTabs: React.VoidFunctionComponent<EditorTabsProps> = ({ onChange })
                     key={uuid}
                     id={uuid}
                     onKeyDown={(e) => handleKeyDown(e, uuid)}
+                    onMouseDown={(e) => handleMouseDown(e, uuid)}
                 >
                     <TabLabel
                         id={`${labelId}.${uuid}`}