fix: fix select all action always select the editor content (#415)

* fix: fix select all action always select the editor content

* test: update the workbench snapshot

* test: add focusin test for menubar

* fix: fix keybinding didn't work

* test: update the snapshot

Author: mortalYoung

src/controller/menuBar.ts

@@ -24,14 +24,15 @@ import {
     MenuBarService,
     LayoutService,
 } from 'mo/services';
-import { ID_SIDE_BAR } from 'mo/common/id';
+import { ID_APP, ID_SIDE_BAR } from 'mo/common/id';
 import { IMonacoService, MonacoService } from 'mo/monaco/monacoService';
 import { CommandQuickSideBarViewAction } from 'mo/monaco/quickToggleSideBarAction';
 import { QuickTogglePanelAction } from 'mo/monaco/quickTogglePanelAction';
 
 export interface IMenuBarController {
     onSelect?: (key: string, item?: IActivityBarItem) => void;
     onClick: (event: React.MouseEvent<any, any>, item: IMenuBarItem) => void;
+    updateFocusinEle?: (ele: HTMLElement | null) => void;
     updateStatusBar?: () => void;
     updateMenuBar?: () => void;
     updateActivityBar?: () => void;
@@ -45,6 +46,8 @@ export class MenuBarController
     private readonly menuBarService: IMenuBarService;
     private readonly layoutService: ILayoutService;
     private readonly monacoService: IMonacoService;
+    private focusinEle: HTMLElement | null = null;
+
     private automation = {
         [ACTION_QUICK_CREATE_FILE]: () => this.createFile(),
         [ACTION_QUICK_UNDO]: () => this.undo(),
@@ -66,6 +69,11 @@ export class MenuBarController
         this.monacoService = container.resolve(MonacoService);
     }
 
+    public updateFocusinEle = (ele: HTMLElement | null) => {
+        if (ele?.id == ID_APP) return;
+        this.focusinEle = ele;
+    };
+
     public readonly onClick = (event: React.MouseEvent, item: IMenuBarItem) => {
         const menuId = item.id || '';
 
@@ -105,7 +113,8 @@ export class MenuBarController
 
     public selectAll = () => {
         this.monacoService.commandService.executeCommand(
-            ACTION_QUICK_SELECT_ALL
+            ACTION_QUICK_SELECT_ALL,
+            this.focusinEle
         );
     };
 

src/monaco/quickSelectAllAction.ts

@@ -32,10 +32,33 @@ export class QuickSelectAllAction extends Action2 {
         this.editorService = container.resolve(EditorService);
     }
 
-    run(): void {
-        this.editorService.editorInstance!.focus();
-        this.editorService.editorInstance!.setSelection(
-            this.editorService.editorInstance!.getModel()!.getFullModelRange()
-        );
+    selectEditorAll() {
+        const editor = this.editorService.editorInstance;
+        if (editor) {
+            editor.focus();
+            editor.setSelection(editor.getModel()!.getFullModelRange());
+        }
+    }
+
+    isTextdom(ele: Element): ele is HTMLInputElement {
+        return typeof (ele as HTMLInputElement).selectionStart === 'number';
+    }
+
+    run(accessor, ...args): void {
+        const focusinEle = args[0];
+        // execute the action via shortcut if focusinEle is undefined
+        const currentFocusinEle: Element | null =
+            focusinEle || document.activeElement;
+        if (
+            currentFocusinEle &&
+            this.isTextdom(currentFocusinEle) &&
+            !currentFocusinEle.className.includes('monaco')
+        ) {
+            // native element can select by the native method
+            currentFocusinEle.select();
+        } else {
+            // monaco component should use the method from instance
+            this.selectEditorAll();
+        }
     }
 }

src/workbench/menuBar/__tests__/menubar.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { fireEvent, render } from '@testing-library/react';
+import { cleanup, fireEvent, render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 import MenuBar, { actionClassName } from '../menuBar';
@@ -25,6 +25,8 @@ const menuData = [
 const TEST_FN: jest.Mock<any, any> = jest.fn();
 
 describe('Test MenuBar Component', () => {
+    afterEach(cleanup);
+
     test('Match the MenuBar snapshot', () => {
         const component = renderer.create(
             <MenuBar data={menuData} onClick={TEST_FN} />
@@ -48,4 +50,23 @@ describe('Test MenuBar Component', () => {
         const menuBar = getByRole('menu').firstElementChild as HTMLLIElement;
         expect(menuBar).toBeInTheDocument();
     });
+
+    test('Should support to get the focus element', () => {
+        const mockFn = jest.fn();
+        const {} = render(
+            <MenuBar
+                data={menuData}
+                onClick={TEST_FN}
+                updateFocusinEle={mockFn}
+            />
+        );
+
+        const input = document.createElement('input');
+        document.body.append(input);
+
+        input.focus();
+
+        expect(mockFn).toBeCalled();
+        expect(mockFn.mock.calls[0][0]).toEqual(input);
+    });
 });

src/workbench/menuBar/menuBar.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { getBEMElement, prefixClaName } from 'mo/common/className';
 import { IMenuBar, IMenuBarItem } from 'mo/model/workbench/menuBar';
 import { IMenuBarController } from 'mo/controller/menuBar';
@@ -11,7 +11,7 @@ export const defaultClassName = prefixClaName('menuBar');
 export const actionClassName = getBEMElement(defaultClassName, 'action');
 
 export function MenuBar(props: IMenuBar & IMenuBarController) {
-    const { data, onClick } = props;
+    const { data, onClick, updateFocusinEle } = props;
     const childRef = useRef<DropDownRef>(null);
 
     const addKeybindingForData = (
@@ -50,6 +50,18 @@ export function MenuBar(props: IMenuBar & IMenuBarController) {
             data={addKeybindingForData(data)}
         />
     );
+
+    const handleSaveFocusinEle = useCallback((e: FocusEvent) => {
+        updateFocusinEle?.(e.target as HTMLElement | null);
+    }, []);
+
+    useEffect(() => {
+        document.body.addEventListener('focusin', handleSaveFocusinEle);
+        return () => {
+            document.body.removeEventListener('focusin', handleSaveFocusinEle);
+        };
+    }, []);
+
     return (
         <div className={defaultClassName}>
             <DropDown