feat: add toggle shortcut option and support tinykey keybindings

package.json

@@ -50,7 +50,8 @@
     "@reach/portal": "^0.16.0",
     "fast-equals": "^2.0.3",
     "match-sorter": "^6.3.0",
-    "react-virtual": "^2.8.2"
+    "react-virtual": "^2.8.2",
+    "tinykeys": "^1.2.0"
   },
   "peerDependencies": {
     "react": "^16.0.0 || ^17.0.0",

src/InternalEvents.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import tinykeys from "tinykeys";
 import { VisualState } from "./types";
 import useKBar from "./useKBar";
 import { getScrollbarWidth } from "./utils";
@@ -23,12 +24,12 @@ function useToggleHandler() {
   }));
 
   React.useEffect(() => {
-    function handleKeyDown(event: KeyboardEvent) {
-      if (
-        (event.metaKey || event.ctrlKey) &&
-        event.key === "k" &&
-        event.defaultPrevented === false
-      ) {
+    const keybinding = Array.isArray(options.shortcut)
+      ? options.shortcut.join(" ")
+      : options.shortcut || "$mod+k";
+
+    const unsubscribe = tinykeys(window, {
+      [keybinding]: (event: KeyboardEvent) => {
         event.preventDefault();
         query.toggle();
 
@@ -37,8 +38,8 @@ function useToggleHandler() {
         } else {
           options.callbacks?.onOpen?.();
         }
-      }
-      if (event.key === "Escape") {
+      },
+      Escape: (event: KeyboardEvent) => {
         if (showing) {
           event.stopPropagation();
           options.callbacks?.onClose?.();
@@ -50,12 +51,12 @@ function useToggleHandler() {
           }
           return VisualState.animatingOut;
         });
-      }
-    }
-
-    window.addEventListener("keydown", handleKeyDown, true);
-    return () => window.removeEventListener("keydown", handleKeyDown, true);
-  }, [options.callbacks, query, showing]);
+      },
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [options.callbacks, options.shortcut, query, showing]);
 
   const timeoutRef = React.useRef<Timeout>();
   const runAnimateTimer = React.useCallback(
@@ -153,55 +154,47 @@ function useShortcuts() {
 
     const inputs = ["input", "select", "button", "textarea"];
 
-    let buffer: string[] = [];
-    let lastKeyStrokeTime = Date.now();
-
-    function handleKeyDown(event: KeyboardEvent) {
-      const key = event.key?.toLowerCase();
-
-      const activeElement = document.activeElement;
-      const ignoreStrokes =
-        activeElement &&
-        (inputs.indexOf(activeElement.tagName.toLowerCase()) !== -1 ||
-          activeElement.attributes.getNamedItem("role")?.value === "textbox" ||
-          activeElement.attributes.getNamedItem("contenteditable")?.value ===
-            "true");
-
-      if (ignoreStrokes || event.metaKey || key === "shift") {
-        return;
+    const keyBindingMap = {};
+    for (let action of actionsList) {
+      if (!action.shortcut) {
+        continue;
       }
 
-      const currentTime = Date.now();
-
-      if (currentTime - lastKeyStrokeTime > 400) {
-        buffer = [];
-      }
-
-      buffer.push(key);
-      lastKeyStrokeTime = currentTime;
-      const bufferString = buffer.join("");
-
-      for (let action of actionsList) {
-        if (!action.shortcut) {
-          continue;
+      const keybinding = Array.isArray(action.shortcut)
+        ? action.shortcut.join(" ")
+        : action.shortcut;
+
+      keyBindingMap[keybinding] = (event: KeyboardEvent) => {
+        const activeElement = document.activeElement;
+        const ignoreStrokes =
+          activeElement &&
+          (inputs.indexOf(activeElement.tagName.toLowerCase()) !== -1 ||
+            activeElement.attributes.getNamedItem("role")?.value ===
+              "textbox" ||
+            activeElement.attributes.getNamedItem("contenteditable")?.value ===
+              "true");
+
+        if (ignoreStrokes) {
+          return;
         }
-        if (action.shortcut.join("") === bufferString) {
-          event.preventDefault();
-          if (action.children?.length) {
-            query.setCurrentRootAction(action.id);
-            query.toggle();
-          } else {
-            action.perform?.();
-          }
 
-          buffer = [];
-          break;
+        event.preventDefault();
+        if (action.children?.length) {
+          query.setCurrentRootAction(action.id);
+          query.toggle();
+        } else {
+          action.perform?.();
         }
-      }
+      };
     }
 
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
+    const unsubscribe = tinykeys(window, keyBindingMap, {
+      timeout: 400,
+    });
+
+    return () => {
+      unsubscribe();
+    };
   }, [actions, query]);
 }
 

src/types.ts

@@ -6,7 +6,7 @@ export type ActionId = string;
 export interface BaseAction {
   id: ActionId;
   name: string;
-  shortcut?: string[];
+  shortcut?: string | string[];
   keywords?: string;
   section?: string;
   icon?: string | React.ReactElement | React.ReactNode;
@@ -28,6 +28,7 @@ export interface ActionGroup {
 }
 
 export interface KBarOptions {
+  shortcut?: string | string[];
   animations?: {
     enterMs?: number;
     exitMs?: number;

src/useStore.tsx

@@ -50,6 +50,7 @@ export default function useStore(props: useStoreProps) {
       enterMs: 200,
       exitMs: 100,
     },
+    shortcut: "$mod+k",
     ...props.options,
   } as KBarOptions);