listen hotkey in workspace

src/components/editor.tsx

@@ -8,7 +8,6 @@ import { FiDelete } from "react-icons/fi";
 import { IoMdReturnLeft } from "react-icons/io";
 import { RiFocus3Line } from "react-icons/ri";
 import { VscCaseSensitive } from "react-icons/vsc";
-import { mergeRefs } from "react-merge-refs";
 import { useDebounceCallback } from "usehooks-ts";
 import { useShallow } from "zustand/react/shallow";
 import {
@@ -19,7 +18,7 @@ import {
   useWorkspace,
 } from "../contexts/workspace-context";
 import i18n from "../misc/i18n";
-import { Hotkey, isMacos, useKeyPress } from "../misc/keys";
+import { Hotkey, isMacos } from "../misc/keys";
 import { mergeClassNames } from "../misc/util";
 import { FilterOption, Graph } from "./graph";
 import "./register-node";
@@ -109,18 +108,6 @@ const createMenu = () => {
   return arr;
 };
 
-const hotkeyMap: Record<string, EditEvent> = {
-  [Hotkey.Copy]: "copy",
-  [Hotkey.Replace]: "replace",
-  [Hotkey.Paste]: "paste",
-  [Hotkey.Insert]: "insert",
-  [Hotkey.Enter]: "insert",
-  [Hotkey.Delete]: "delete",
-  [Hotkey.Backspace]: "delete",
-  [Hotkey.Undo]: "undo",
-  [Hotkey.Redo]: "redo",
-};
-
 export const Editor: FC<EditorProps> = ({ onChange, data: editor, ...props }) => {
   const workspace = useWorkspace(
     useShallow((state) => ({
@@ -128,34 +115,6 @@ export const Editor: FC<EditorProps> = ({ onChange, data: editor, ...props }) =>
     }))
   );
 
-  const keysRef = useRef<HTMLDivElement>(null);
-  useKeyPress(
-    [
-      Hotkey.Copy,
-      Hotkey.Replace,
-      Hotkey.Paste,
-      Hotkey.Insert,
-      Hotkey.Enter,
-      Hotkey.Delete,
-      Hotkey.Backspace,
-    ],
-    keysRef,
-    (e, key) => {
-      e.preventDefault();
-      e.stopImmediatePropagation();
-      e.stopPropagation();
-      editor.dispatch?.(hotkeyMap[key]);
-    }
-  );
-
-  useKeyPress([Hotkey.Undo, Hotkey.Redo], null, (e, key) => {
-    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
-      return;
-    }
-    e.stopPropagation();
-    editor.dispatch?.(hotkeyMap[key]);
-  });
-
   const searchInputRef = useRef<InputRef>(null);
   const graphRef = useRef(null);
   const sizeRef = useRef(null);
@@ -309,7 +268,6 @@ export const Editor: FC<EditorProps> = ({ onChange, data: editor, ...props }) =>
     } else if (event === "clickVar") {
       graph.clickVar(data as string);
     }
-    keysRef.current?.focus();
   };
 
   if (graph) {
@@ -369,7 +327,7 @@ export const Editor: FC<EditorProps> = ({ onChange, data: editor, ...props }) =>
     <div
       {...props}
       className="b3-editor"
-      ref={mergeRefs([sizeRef, keysRef])}
+      ref={sizeRef}
       tabIndex={-1}
       style={{ maxWidth: "inherit", maxHeight: "inherit" }}
     >
@@ -491,7 +449,6 @@ export const Editor: FC<EditorProps> = ({ onChange, data: editor, ...props }) =>
                   filterType: "content",
                   placeholder: "",
                 });
-                keysRef.current?.focus();
               }}
             />
           </Flex>

src/components/workspace.tsx

@@ -9,7 +9,7 @@ import useForceUpdate from "use-force-update";
 import { useWindowSize } from "usehooks-ts";
 import { useShallow } from "zustand/react/shallow";
 import { useSetting } from "../contexts/setting-context";
-import { EditorStore, useWorkspace } from "../contexts/workspace-context";
+import { EditEvent, EditorStore, useWorkspace } from "../contexts/workspace-context";
 import { modal } from "../misc/hooks";
 import { Hotkey, isMacos, setInputFocus, useKeyPress } from "../misc/keys";
 import Path from "../misc/path";
@@ -20,6 +20,18 @@ import { TitleBar } from "./titlebar";
 
 const { Header, Content, Sider } = Layout;
 
+const hotkeyMap: Record<string, EditEvent> = {
+  [Hotkey.Copy]: "copy",
+  [Hotkey.Replace]: "replace",
+  [Hotkey.Paste]: "paste",
+  [Hotkey.Insert]: "insert",
+  [Hotkey.Enter]: "insert",
+  [Hotkey.Delete]: "delete",
+  [Hotkey.Backspace]: "delete",
+  [Hotkey.Undo]: "undo",
+  [Hotkey.Redo]: "redo",
+};
+
 export const Workspace: FC = () => {
   const workspace = useWorkspace(
     useShallow((state) => ({
@@ -93,6 +105,33 @@ export const Workspace: FC = () => {
     }
   }, [workspace.isShowingSearch]);
 
+  useKeyPress(
+    [
+      Hotkey.Copy,
+      Hotkey.Replace,
+      Hotkey.Paste,
+      Hotkey.Insert,
+      Hotkey.Enter,
+      Hotkey.Delete,
+      Hotkey.Backspace,
+    ],
+    keysRef,
+    (e, key) => {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      e.stopPropagation();
+      workspace.editing?.dispatch?.(hotkeyMap[key]);
+    }
+  );
+
+  useKeyPress([Hotkey.Undo, Hotkey.Redo], null, (e, key) => {
+    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+      return;
+    }
+    e.stopPropagation();
+    workspace.editing?.dispatch?.(hotkeyMap[key]);
+  });
+
   useEffect(() => {
     const editor = workspace.editing;
     if (editor?.alertReload) {

src/misc/b3type.ts

@@ -1,6 +1,6 @@
 import { NodeDef } from "../behavior3/src/behavior3";
 
-export const VERSION = "1.8.1";
+export const VERSION = "1.8.2";
 
 export type NodeType = NodeDef["type"] | "Other" | "Error";
 export type NodeArg = Exclude<NodeDef["args"], undefined>[number];