refactor: the hotkeys for the grid (#554)

Author: Sky-FE

apps/nextjs-app/src/features/app/blocks/share/view/component/grid/GridViewBase.tsx

@@ -65,7 +65,7 @@ export const GridViewBase = () => {
   const ssrRecords = useSSRRecords();
   const ssrRecord = useSSRRecord();
   const isTouchDevice = useIsTouchDevice();
-  const { selection, setSelection, openStatisticMenu } = useGridViewStore();
+  const { setSelection, openStatisticMenu } = useGridViewStore();
   const { columns: originalColumns, cellValue2GridDisplay } = useGridColumns();
   const { columns, onColumnResize } = useGridColumnResize(originalColumns);
   const { columnStatistics } = useGridColumnStatistics(columns);
@@ -195,22 +195,6 @@ export const GridViewBase = () => {
     [columns, openStatisticMenu]
   );
 
-  useEffect(() => {
-    if (!selection) {
-      return;
-    }
-    const handleFocus = (event: FocusEvent) => {
-      const target = event.target as Node;
-      if (container.current && !container.current.contains(target)) {
-        gridRef.current?.resetState();
-      }
-    };
-    document.addEventListener('focus', handleFocus, true);
-    return () => {
-      document.removeEventListener('focus', handleFocus, true);
-    };
-  }, [selection]);
-
   return (
     <div ref={container} className="relative size-full overflow-hidden">
       {prepare ? (

apps/nextjs-app/src/features/app/blocks/view/grid/GridViewBase.tsx

@@ -605,22 +605,6 @@ export const GridViewBase: React.FC<IGridViewProps> = (props: IGridViewProps) =>
     gridRef.current?.resetState();
   });
 
-  useEffect(() => {
-    if (!selection) {
-      return;
-    }
-    const handleFocus = (event: FocusEvent) => {
-      const target = event.target as Node;
-      if (containerRef.current && !containerRef.current.contains(target)) {
-        gridRef.current?.resetState();
-      }
-    };
-    document.addEventListener('focus', handleFocus, true);
-    return () => {
-      document.removeEventListener('focus', handleFocus, true);
-    };
-  }, [selection]);
-
   useScrollFrameRate(gridRef.current?.scrollBy);
 
   return (

packages/sdk/package.json

@@ -57,7 +57,6 @@
     "@teable/icons": "workspace:*",
     "@teable/openapi": "workspace:*",
     "@teable/ui-lib": "workspace:*",
-    "@types/mousetrap": "1.6.15",
     "antlr4ts": "0.5.0-alpha.4",
     "axios": "1.6.8",
     "class-transformer": "0.5.1",
@@ -71,9 +70,9 @@
     "lodash": "4.17.21",
     "lru-cache": "10.2.0",
     "lucide-react": "0.363.0",
-    "mousetrap": "1.6.5",
     "react-day-picker": "8.10.0",
     "react-hammerjs": "1.0.1",
+    "react-hotkeys-hook": "4.5.0",
     "react-textarea-autosize": "8.5.3",
     "react-use": "17.5.0",
     "reconnecting-websocket": "4.4.0",

packages/sdk/src/components/expand-record/ExpandRecorder.tsx

@@ -63,8 +63,7 @@ export const ExpandRecorder = (props: IExpandRecorderProps) => {
   };
 
   return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    <div id={`${tableId}-${recordId}`} onKeyDown={(e) => e.stopPropagation()}>
+    <div id={`${tableId}-${recordId}`}>
       <Wrap tableId={tableId}>
         <ExpandRecord
           visible

packages/sdk/src/components/grid/components/editor/EditorContainer.tsx

@@ -2,8 +2,9 @@
 import { clamp } from 'lodash';
 import type { CSSProperties, ForwardRefRenderFunction } from 'react';
 import { useEffect, useRef, useMemo, useImperativeHandle, forwardRef } from 'react';
+import { HotkeysProvider } from 'react-hotkeys-hook';
 import type { IGridTheme } from '../../configs';
-import { useKeyboardSelection } from '../../hooks';
+import { GRID_HOTKEY_SCOPE, useKeyboardSelection } from '../../hooks';
 import type { IInteractionLayerProps } from '../../InteractionLayer';
 import type { IActiveCellBound, ICellItem, IRectangle, IScrollState } from '../../interface';
 import type { CombinedSelection } from '../../managers';
@@ -270,22 +271,24 @@ export const EditorContainerBase: ForwardRefRenderFunction<
   };
 
   return (
-    <div className="click-outside-ignore pointer-events-none absolute left-0 top-0 w-full">
-      <div
-        className="absolute z-10"
-        style={{
-          top: rect.y,
-          left: rect.x,
-          minWidth: width,
-          minHeight: height,
-        }}
-        onKeyDown={onKeyDown}
-        onPaste={onPasteInner}
-      >
-        {EditorRenderer}
-        <input className="opacity-0" ref={defaultFocusRef} />
+    <HotkeysProvider initiallyActiveScopes={[GRID_HOTKEY_SCOPE]}>
+      <div className="click-outside-ignore pointer-events-none absolute left-0 top-0 w-full">
+        <div
+          className="absolute z-10"
+          style={{
+            top: rect.y,
+            left: rect.x,
+            minWidth: width,
+            minHeight: height,
+          }}
+          onKeyDown={onKeyDown}
+          onPaste={onPasteInner}
+        >
+          {EditorRenderer}
+          <input className="opacity-0" ref={defaultFocusRef} />
+        </div>
       </div>
-    </div>
+    </HotkeysProvider>
   );
 };
 

packages/sdk/src/components/grid/hooks/index.ts

@@ -8,4 +8,3 @@ export * from './useVisibleRegion';
 export * from './useResizeObserver';
 export * from './useScrollFrameRate';
 export * from './useKeyboardSelection';
-export * from './useKeyboardNavigation';