feat(panel): add hotkey for adding word in panel

src/App.tsx

@@ -1,47 +1,78 @@
+import { useState, useEffect } from "react";
 import { MantineProvider, Tabs } from "@mantine/core";
-import { useHotkeys } from "react-hotkeys-hook";
+import {
-import { useState } from "react";
+  HotkeysProvider,
+  useHotkeys,
+  useHotkeysContext,
+} from "react-hotkeys-hook";
 import "@mantine/core/styles.css";
 
-function App() {
+function TabContent({ title, scopeName }: any) {
-  const [activeTab, setActiveTab] = useState<string | null>("1");
+  const [text, setText] = useState(`${title} panel `);
+  const [used, setUsed] = useState(false);
 
   useHotkeys(
-    "ctrl+1, ctrl+2, ctrl+3",
+    "ctrl+b",
-    (event, handler) => {
+    () => {
-      const key = handler.keys?.[0];
+      if (used) return;
-      if (key) {
+      setText((prev) => prev + `${title} `);
-        setActiveTab(key);
+      setUsed(true);
-      }
+    },
+    {
+      scopes: [scopeName],
+      preventDefault: true,
     },
-    { preventDefault: true, enableOnFormTags: true },
   );
 
+  return <>{text}</>;
+}
+
+function TabsPage() {
+  const { enableScope, disableScope } = useHotkeysContext();
+  const [activeTab, setActiveTab] = useState("1");
+
+  useEffect(() => {
+    const currentScope = `tab${activeTab}`;
+    enableScope(currentScope);
+
+    return () => {
+      disableScope(currentScope);
+    };
+  }, [activeTab, enableScope, disableScope]);
+
+  useHotkeys("ctrl+1", () => setActiveTab("1"), { preventDefault: true });
+  useHotkeys("ctrl+2", () => setActiveTab("2"), { preventDefault: true });
+  useHotkeys("ctrl+3", () => setActiveTab("3"), { preventDefault: true });
+
   return (
-    <MantineProvider>
+    <Tabs value={activeTab} onChange={(value) => value && setActiveTab(value)}>
-      <Tabs value={activeTab} onChange={setActiveTab} color="teal">
+      <Tabs.List>
-        <Tabs.List>
+        <Tabs.Tab value="1">First</Tabs.Tab>
-          <Tabs.Tab value="1">First tab</Tabs.Tab>
+        <Tabs.Tab value="2">Second</Tabs.Tab>
-          <Tabs.Tab value="2" color="blue">
+        <Tabs.Tab value="3">Third</Tabs.Tab>
-            Second tab
+      </Tabs.List>
-          </Tabs.Tab>
-          <Tabs.Tab value="3">Third tab</Tabs.Tab>
-        </Tabs.List>
 
-        <Tabs.Panel value="1" pt="xs">
+      <Tabs.Panel value="1">
-          First panel
+        <TabContent title="First" scopeName="tab1" />
-        </Tabs.Panel>
+      </Tabs.Panel>
 
-        <Tabs.Panel value="2" pt="xs">
+      <Tabs.Panel value="2">
-          Second panel
+        <TabContent title="Second" scopeName="tab2" />
-        </Tabs.Panel>
+      </Tabs.Panel>
 
-        <Tabs.Panel value="3" pt="xs">
+      <Tabs.Panel value="3">
-          Third panel
+        <TabContent title="Third" scopeName="tab3" />
-        </Tabs.Panel>
+      </Tabs.Panel>
-      </Tabs>
+    </Tabs>
-    </MantineProvider>
   );
 }
 
-export default App;
+export default function App() {
+  return (
+    <HotkeysProvider initiallyActiveScopes={["tab1"]}>
+      <MantineProvider>
+        <TabsPage />
+      </MantineProvider>
+    </HotkeysProvider>
+  );
+}