useKeyboardShortcuts() — supabase Function Reference

Architecture documentation for the useKeyboardShortcuts() function in Hooks.tsx from the supabase codebase.

Function tsx ContentManagement Collections calls 1 called by 1

Entity Profile

ContentManagement→ Collections→ useKeyboardShortcuts() — supabase Function Reference

Dependency Diagram

graph TD
  d5a90e0b_d991_9fb8_6ca6_119b33953104["useKeyboardShortcuts()"]
  6cf9a548_604f_645a_bb0a_2e847a9acc89["Shortcuts()"]
  6cf9a548_604f_645a_bb0a_2e847a9acc89 -->|calls| d5a90e0b_d991_9fb8_6ca6_119b33953104
  fdceb19f_91cf_35e4_a173_3d80d981a498["includes()"]
  d5a90e0b_d991_9fb8_6ca6_119b33953104 -->|calls| fdceb19f_91cf_35e4_a173_3d80d981a498
  style d5a90e0b_d991_9fb8_6ca6_119b33953104 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/grid/components/common/Hooks.tsx lines 17–81

export function useKeyboardShortcuts(
  keyMap: { [id: KeyboardEvent['key']]: (event: KeyboardEvent) => void },
  whitelistNodes: string[] = [],
  whitelistClasses: string[] = []
) {
  const [lastKeydown, setLastKeydown] = React.useState<string | null>()

  const handleKeydown = (event: any) => {
    if (
      !keyMap ||
      includes(whitelistNodes, event.target.nodeName) ||
      includes(whitelistClasses, event.target.className)
    ) {
      return
    }

    let keyPressed = getKeyPresses(event)

    if (keyMap[keyPressed]) {
      /**
       * combined keymap will trigger action on KeyDown event
       * while single keymap  will trigger action on KeyUp event
       */
      if (keyPressed.includes('+')) {
        event.preventDefault()
        keyMap[keyPressed](event)
        setLastKeydown(null)
      } else {
        setLastKeydown(event.key)
        event.preventDefault()
      }
    }
  }

  const handleKeyup = (event: any) => {
    if (!keyMap) return

    if (keyMap[event.key] && lastKeydown === event.key) {
      event.preventDefault()
      keyMap[event.key](event)
      setLastKeydown(null)
    }
  }

  function getKeyPresses(event: KeyboardEvent) {
    return event.metaKey && event.shiftKey
      ? `Command+Shift+${event.key}`
      : event.metaKey
        ? `Command+${event.key}`
        : event.shiftKey && event.key === 'Enter'
          ? `Shift+${event.key}`
          : event.ctrlKey && event.key
            ? `Control+${event.key}`
            : event.key
  }

  React.useEffect(() => {
    window.addEventListener('keydown', handleKeydown)
    window.addEventListener('keyup', handleKeyup)
    return () => {
      window.removeEventListener('keydown', handleKeydown)
      window.removeEventListener('keyup', handleKeyup)
    }
  })
}