use keydown to handle shortcut key

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, isMacos, useKeyUp } from "@/misc/keys";
+import { Hotkey, isMacos, useKeyDown } from "@/misc/keys";
 import Path from "@/misc/path";
 import { mergeClassNames } from "@/misc/util";
 import { ArrowDownOutlined, ArrowUpOutlined, CloseOutlined } from "@ant-design/icons";
@@ -958,13 +958,13 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
 
   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());
+  useKeyDown(Hotkey.Copy, keysRef, () => copyNode());
+  useKeyDown(Hotkey.Replace, keysRef, () => replaceNode());
+  useKeyDown(Hotkey.Paste, keysRef, () => pasteNode());
+  useKeyDown(Hotkey.Undo, keysRef, () => undo());
+  useKeyDown(Hotkey.Redo, keysRef, () => redo());
+  useKeyDown([Hotkey.Insert, Hotkey.Enter], keysRef, () => createNode());
+  useKeyDown([Hotkey.Delete, Hotkey.Backspace], keysRef, () => deleteNode());
 
   editor.dispatch = (event: EditEvent, data: unknown) => {
     switch (event) {

src/components/explorer.tsx

@@ -3,7 +3,7 @@ import { NodeDef, getNodeType } from "@/misc/b3type";
 import * as b3util from "@/misc/b3util";
 import { modal } from "@/misc/hooks";
 import i18n from "@/misc/i18n";
-import { Hotkey, isMacos, useKeyUp } from "@/misc/keys";
+import { Hotkey, isMacos, useKeyDown } 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";
@@ -399,7 +399,7 @@ export const Explorer: FC = () => {
 
   const keysRef = useRef<HTMLDivElement>(null);
 
-  useKeyUp([Hotkey.F2, isMacos ? Hotkey.Enter : ""], keysRef, (event) => {
+  useKeyDown([Hotkey.F2, isMacos ? Hotkey.Enter : ""], keysRef, (event) => {
     event.preventDefault();
     const node = findFile(selectedKeys[0], workspace.fileTree!);
     if (node && node !== workspace.fileTree) {
@@ -407,7 +407,7 @@ export const Explorer: FC = () => {
     }
   });
 
-  useKeyUp([Hotkey.Delete, isMacos ? Hotkey.MacDelete : ""], keysRef, (event) => {
+  useKeyDown([Hotkey.Delete, isMacos ? Hotkey.MacDelete : ""], keysRef, (event) => {
     event.preventDefault();
     const node = findFile(selectedKeys[0], workspace.fileTree!);
     if (node && node !== workspace.fileTree) {
@@ -415,7 +415,7 @@ export const Explorer: FC = () => {
     }
   });
 
-  useKeyUp(Hotkey.Escape, keysRef, (event) => {
+  useKeyDown(Hotkey.Escape, keysRef, (event) => {
     event.preventDefault();
     const node = findFile(selectedKeys[0], workspace.fileTree!);
     if (node) {
@@ -424,7 +424,7 @@ export const Explorer: FC = () => {
     }
   });
 
-  useKeyUp(Hotkey.Duplicate, keysRef, (event) => {
+  useKeyDown(Hotkey.Duplicate, keysRef, (event) => {
     event.preventDefault();
     const node = findFile(selectedKeys[0], workspace.fileTree!);
     if (node && node.isLeaf) {
@@ -432,7 +432,7 @@ export const Explorer: FC = () => {
     }
   });
 
-  useKeyUp(Hotkey.Copy, keysRef, (event) => {
+  useKeyDown(Hotkey.Copy, keysRef, (event) => {
     event.preventDefault();
     const node = findFile(selectedKeys[0], workspace.fileTree!);
     if (node && node.isLeaf) {
@@ -440,7 +440,7 @@ export const Explorer: FC = () => {
     }
   });
 
-  useKeyUp(Hotkey.Paste, keysRef, (event) => {
+  useKeyDown(Hotkey.Paste, keysRef, (event) => {
     event.preventDefault();
     const node = findFile(selectedKeys[0], workspace.fileTree!);
     if (node) {

src/components/workspace.tsx

@@ -1,7 +1,7 @@
 import { useSetting } from "@/contexts/setting-context";
 import { EditorStore, useWorkspace } from "@/contexts/workspace-context";
 import { modal } from "@/misc/hooks";
-import { Hotkey, isMacos, setInputFocus, useKeyUp } from "@/misc/keys";
+import { Hotkey, isMacos, setInputFocus, useKeyDown } from "@/misc/keys";
 import Path from "@/misc/path";
 import { app } from "@electron/remote";
 import { useKeyPress } from "ahooks";
@@ -46,12 +46,12 @@ export const Workspace: FC = () => {
 
   const keysRef = useRef<HTMLDivElement>(null);
 
-  useKeyUp(Hotkey.Build, keysRef, (event) => {
+  useKeyDown(Hotkey.Build, keysRef, (event) => {
     event.preventDefault();
     workspace.buildProject();
   });
 
-  useKeyUp(Hotkey.Save, keysRef, (event) => {
+  useKeyDown(Hotkey.Save, keysRef, (event) => {
     event.preventDefault();
     workspace.save();
   });
@@ -60,7 +60,7 @@ export const Workspace: FC = () => {
     event.preventDefault();
   });
 
-  useKeyUp(Hotkey.CloseEditor, null, (event) => {
+  useKeyDown(Hotkey.CloseEditor, null, (event) => {
     if (workspace.editing) {
       event.preventDefault();
       if (workspace.editing.unsave) {
@@ -72,17 +72,17 @@ export const Workspace: FC = () => {
     keysRef.current?.focus();
   });
 
-  useKeyUp(Hotkey.SearchTree, keysRef, (event) => {
+  useKeyDown(Hotkey.SearchTree, keysRef, (event) => {
     event.preventDefault();
     workspace.onShowingSearch(true);
   });
 
-  useKeyUp(Hotkey.SearchNode, keysRef, (event) => {
+  useKeyDown(Hotkey.SearchNode, keysRef, (event) => {
     event.preventDefault();
     workspace.editing?.dispatch("searchNode");
   });
 
-  useKeyUp(Hotkey.JumpNode, keysRef, (event) => {
+  useKeyDown(Hotkey.JumpNode, keysRef, (event) => {
     event.preventDefault();
     workspace.editing?.dispatch("jumpNode");
   });

src/misc/keys.ts

@@ -13,17 +13,16 @@ const hotkey = (key: string) => {
   return key.toLowerCase();
 };
 
-export const useKeyUp = (
+export const useKeyDown = (
   keyFilter: KeyFilter,
   target: Target,
   eventHandler: (event: KeyboardEvent, key: KeyType) => void,
   option?: Options
 ) => {
   option = option || {};
-  option.events = ["keyup"];
   option.target = target;
   option.exactMatch = true;
-  return useKeyPress(keyFilter, eventHandler, option);
+  return useKeyPress(keyFilter, (e, key) => !e.repeat && eventHandler(e, key), option);
 };
 
 export const Hotkey = {