use ahook keypress

src/components/editor.tsx

@@ -9,7 +9,7 @@ import { NodeModel, TreeGraphData, TreeModel } from "@/misc/b3type";
 import * as b3util from "@/misc/b3util";
 import { message } from "@/misc/hooks";
 import i18n from "@/misc/i18n";
-import { Hotkey, isHotkeyPressed, isMacos, useHotkeys } from "@/misc/keys";
+import { Hotkey, isMacos, useKeyUp } from "@/misc/keys";
 import Path from "@/misc/path";
 import { mergeClassNames } from "@/misc/util";
 import { ArrowDownOutlined, ArrowUpOutlined, CloseOutlined } from "@ant-design/icons";
@@ -956,38 +956,15 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
     }
   };
 
-  const keysRef = useHotkeys<HTMLDivElement>(
-    [
-      Hotkey.Copy,
-      Hotkey.Paste,
-      Hotkey.Save,
-      Hotkey.Replace,
-      Hotkey.Undo,
-      Hotkey.Redo,
-      Hotkey.Insert,
-      Hotkey.Delete,
-      Hotkey.Enter,
-      Hotkey.Backspace,
-    ],
-    (event) => {
-      event.preventDefault();
-      if (isHotkeyPressed(Hotkey.Copy)) {
-        copyNode();
-      } else if (isHotkeyPressed(Hotkey.Replace)) {
-        replaceNode();
-      } else if (isHotkeyPressed(Hotkey.Paste)) {
-        pasteNode();
-      } else if (isHotkeyPressed(Hotkey.Redo)) {
-        redo();
-      } else if (isHotkeyPressed(Hotkey.Undo)) {
-        undo();
-      } else if (isHotkeyPressed(Hotkey.Insert) || isHotkeyPressed(Hotkey.Enter)) {
-        createNode();
-      } else if (isHotkeyPressed(Hotkey.Delete) || isHotkeyPressed(Hotkey.Backspace)) {
-        deleteNode();
-      }
-    }
-  );
+  const keysRef = useRef<HTMLDivElement>(null);
+
+  useKeyUp(Hotkey.Copy, keysRef, () => copyNode());
+  useKeyUp(Hotkey.Replace, keysRef, () => replaceNode());
+  useKeyUp(Hotkey.Paste, keysRef, () => pasteNode());
+  useKeyUp(Hotkey.Undo, keysRef, () => undo());
+  useKeyUp(Hotkey.Redo, keysRef, () => redo());
+  useKeyUp([Hotkey.Insert, Hotkey.Enter], keysRef, () => createNode());
+  useKeyUp([Hotkey.Delete, Hotkey.Backspace], keysRef, () => deleteNode());
 
   editor.dispatch = (event: EditEvent, data: unknown) => {
     switch (event) {

src/components/explorer.tsx

@@ -3,14 +3,14 @@ import { NodeDef, getNodeType } from "@/misc/b3type";
 import * as b3util from "@/misc/b3util";
 import { modal } from "@/misc/hooks";
 import i18n from "@/misc/i18n";
-import { Hotkey, isHotkeyPressed, isMacos, useHotkeys } from "@/misc/keys";
+import { Hotkey, isMacos, useKeyUp } from "@/misc/keys";
 import Path from "@/misc/path";
 import { DownOutlined } from "@ant-design/icons";
 import { Button, Dropdown, Flex, FlexProps, Input, MenuProps, Space, Tree } from "antd";
 import { ItemType } from "antd/es/menu/interface";
 import { ipcRenderer } from "electron";
 import * as fs from "fs";
-import React, { FC, useEffect, useMemo, useState } from "react";
+import React, { FC, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { BsBoxFill } from "react-icons/bs";
 import { FaExclamationTriangle, FaSwatchbook } from "react-icons/fa";
@@ -397,48 +397,56 @@ export const Explorer: FC = () => {
     }
   }, [t, workspace.editingNodeDef]);
 
-  const keysRef = useHotkeys<HTMLDivElement>(
-    [
-      Hotkey.F2,
-      Hotkey.Enter,
-      Hotkey.Copy,
-      Hotkey.Paste,
-      Hotkey.Delete,
-      Hotkey.MacDelete,
-      Hotkey.Escape,
-      Hotkey.Duplicate,
-    ],
-    (event) => {
-      event.preventDefault();
-      const node = findFile(selectedKeys[0], workspace.fileTree!);
-      if (isHotkeyPressed(Hotkey.F2) || (isMacos && isHotkeyPressed(Hotkey.Enter))) {
-        if (node && node !== workspace.fileTree) {
-          dispatch("rename", node);
-        }
-      } else if (isHotkeyPressed(Hotkey.Delete) || isHotkeyPressed(Hotkey.MacDelete)) {
-        if (node && node !== workspace.fileTree) {
-          dispatch("delete", node);
-        }
-      } else if (isHotkeyPressed(Hotkey.Escape)) {
-        if (node) {
-          node.editing = false;
-          setNewName(null);
-        }
-      } else if (isHotkeyPressed(Hotkey.Duplicate)) {
-        if (node && node.isLeaf) {
-          dispatch("duplicate", node);
-        }
-      } else if (isHotkeyPressed(Hotkey.Copy)) {
-        if (node && node.isLeaf) {
-          dispatch("copy", node);
-        }
-      } else if (isHotkeyPressed(Hotkey.Paste)) {
-        if (node) {
-          dispatch("paste", node);
-        }
-      }
+  const keysRef = useRef<HTMLDivElement>(null);
+
+  useKeyUp([Hotkey.F2, isMacos ? Hotkey.Enter : ""], keysRef, (event) => {
+    event.preventDefault();
+    const node = findFile(selectedKeys[0], workspace.fileTree!);
+    if (node && node !== workspace.fileTree) {
+      dispatch("rename", node);
     }
-  );
+  });
+
+  useKeyUp([Hotkey.Delete, isMacos ? Hotkey.MacDelete : ""], keysRef, (event) => {
+    event.preventDefault();
+    const node = findFile(selectedKeys[0], workspace.fileTree!);
+    if (node && node !== workspace.fileTree) {
+      dispatch("delete", node);
+    }
+  });
+
+  useKeyUp(Hotkey.Escape, keysRef, (event) => {
+    event.preventDefault();
+    const node = findFile(selectedKeys[0], workspace.fileTree!);
+    if (node) {
+      node.editing = false;
+      setNewName(null);
+    }
+  });
+
+  useKeyUp(Hotkey.Duplicate, keysRef, (event) => {
+    event.preventDefault();
+    const node = findFile(selectedKeys[0], workspace.fileTree!);
+    if (node && node.isLeaf) {
+      dispatch("duplicate", node);
+    }
+  });
+
+  useKeyUp(Hotkey.Copy, keysRef, (event) => {
+    event.preventDefault();
+    const node = findFile(selectedKeys[0], workspace.fileTree!);
+    if (node && node.isLeaf) {
+      dispatch("copy", node);
+    }
+  });
+
+  useKeyUp(Hotkey.Paste, keysRef, (event) => {
+    event.preventDefault();
+    const node = findFile(selectedKeys[0], workspace.fileTree!);
+    if (node) {
+      dispatch("paste", node);
+    }
+  });
 
   const submitRename = (node: FileTreeType) => {
     if (!newName) {

src/components/workspace.tsx

@@ -1,11 +1,12 @@
 import { useSetting } from "@/contexts/setting-context";
 import { EditorStore, useWorkspace } from "@/contexts/workspace-context";
 import { modal } from "@/misc/hooks";
-import { Hotkey, isHotkeyPressed, isMacos, setInputFocus, useHotkeys } from "@/misc/keys";
+import { Hotkey, isMacos, setInputFocus, useKeyUp } from "@/misc/keys";
 import Path from "@/misc/path";
 import { app } from "@electron/remote";
+import { useKeyPress } from "ahooks";
 import { Button, Flex, Layout, Space, Tabs, Tag, Tooltip } from "antd";
-import { FC, useEffect, useState } from "react";
+import { FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FaExclamationTriangle } from "react-icons/fa";
 import { PiTreeStructureFill } from "react-icons/pi";
@@ -43,44 +44,48 @@ export const Workspace: FC = () => {
   const forceUpdate = useForceUpdate();
   const { width = 0, height = 0 } = useWindowSize();
 
-  const keysRef = useHotkeys<HTMLDivElement>(
-    [
-      Hotkey.Save,
-      Hotkey.CloseEditor,
-      Hotkey.SearchTree,
-      Hotkey.Build,
-      Hotkey.SearchNode,
-      Hotkey.JumpNode,
-    ],
-    (event) => {
-      if (isHotkeyPressed(Hotkey.Save)) {
-        event.preventDefault();
-        workspace.save();
-      } else if (isHotkeyPressed(Hotkey.CloseEditor)) {
-        if (workspace.editing) {
-          event.preventDefault();
-          if (workspace.editing.unsave) {
-            showSaveDialog(workspace.editing);
-          } else {
-            workspace.close(workspace.editing.path);
-          }
-        }
-        keysRef.current?.focus();
-      } else if (isHotkeyPressed(Hotkey.SearchTree)) {
-        event.preventDefault();
-        workspace.onShowingSearch(true);
-      } else if (isHotkeyPressed(Hotkey.Build)) {
-        event.preventDefault();
-        workspace.buildProject();
-      } else if (isHotkeyPressed(Hotkey.SearchNode)) {
-        event.preventDefault();
-        workspace.editing?.dispatch("searchNode");
-      } else if (isHotkeyPressed(Hotkey.JumpNode)) {
-        event.preventDefault();
-        workspace.editing?.dispatch("jumpNode");
+  const keysRef = useRef<HTMLDivElement>(null);
+
+  useKeyUp(Hotkey.Build, keysRef, (event) => {
+    event.preventDefault();
+    workspace.buildProject();
+  });
+
+  useKeyUp(Hotkey.Save, keysRef, (event) => {
+    event.preventDefault();
+    workspace.save();
+  });
+
+  useKeyPress(Hotkey.CloseEditor, (event) => {
+    event.preventDefault();
+  });
+
+  useKeyUp(Hotkey.CloseEditor, null, (event) => {
+    if (workspace.editing) {
+      event.preventDefault();
+      if (workspace.editing.unsave) {
+        showSaveDialog(workspace.editing);
+      } else {
+        workspace.close(workspace.editing.path);
       }
     }
-  );
+    keysRef.current?.focus();
+  });
+
+  useKeyUp(Hotkey.SearchTree, keysRef, (event) => {
+    event.preventDefault();
+    workspace.onShowingSearch(true);
+  });
+
+  useKeyUp(Hotkey.SearchNode, keysRef, (event) => {
+    event.preventDefault();
+    workspace.editing?.dispatch("searchNode");
+  });
+
+  useKeyUp(Hotkey.JumpNode, keysRef, (event) => {
+    event.preventDefault();
+    workspace.editing?.dispatch("jumpNode");
+  });
 
   useEffect(() => {
     if (!workspace.isShowingSearch && !isShowingSave) {