Fix for enable/disable shortcut keys globally

Author: matt-aitken

apps/webapp/app/components/primitives/ShortcutsProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState, type ReactNode } from "react";
+import { createContext, useContext, useState, useCallback, useMemo, type ReactNode } from "react";
 
 type ShortcutsContextType = {
   areShortcutsEnabled: boolean;
@@ -15,20 +15,19 @@ type ShortcutsProviderProps = {
 export function ShortcutsProvider({ children }: ShortcutsProviderProps) {
   const [areShortcutsEnabled, setAreShortcutsEnabled] = useState(true);
 
-  const disableShortcuts = () => setAreShortcutsEnabled(false);
-  const enableShortcuts = () => setAreShortcutsEnabled(true);
-
-  return (
-    <ShortcutsContext.Provider
-      value={{
-        areShortcutsEnabled,
-        disableShortcuts,
-        enableShortcuts,
-      }}
-    >
-      {children}
-    </ShortcutsContext.Provider>
+  const disableShortcuts = useCallback(() => setAreShortcutsEnabled(false), []);
+  const enableShortcuts = useCallback(() => setAreShortcutsEnabled(true), []);
+
+  const value = useMemo(
+    () => ({
+      areShortcutsEnabled,
+      disableShortcuts,
+      enableShortcuts,
+    }),
+    [areShortcutsEnabled, disableShortcuts, enableShortcuts]
   );
+
+  return <ShortcutsContext.Provider value={value}>{children}</ShortcutsContext.Provider>;
 }
 
 const throwIfNoProvider = () => {

apps/webapp/app/hooks/useShortcutKeys.tsx

@@ -8,6 +8,7 @@ export type Shortcut = {
   key: string;
   modifiers?: Modifier[];
   enabledOnInputElements?: boolean;
+  enabled?: boolean;
 };
 
 export type ShortcutDefinition =
@@ -37,15 +38,20 @@ export function useShortcutKeys({
     shortcut && "mac" in shortcut ? (isMac ? shortcut.mac : shortcut.windows) : shortcut;
 
   const keys = createKeysFromShortcut(relevantShortcut);
+
+  const isEnabled = !disabled && areShortcutsEnabled && relevantShortcut?.enabled !== false;
+
   useHotkeys(
     keys,
     (event, hotkeysEvent) => {
       action(event);
     },
     {
-      enabled: !disabled && areShortcutsEnabled,
-      enableOnFormTags: enabledOnInputElements ?? relevantShortcut?.enabledOnInputElements,
-      enableOnContentEditable: enabledOnInputElements ?? relevantShortcut?.enabledOnInputElements,
+      enabled: isEnabled,
+      enableOnFormTags:
+        isEnabled && (enabledOnInputElements ?? relevantShortcut?.enabledOnInputElements),
+      enableOnContentEditable:
+        isEnabled && (enabledOnInputElements ?? relevantShortcut?.enabledOnInputElements),
     }
   );
 }