Shortcuts() — supabase Function Reference

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

Function tsx ContentManagement MediaManagement calls 1

Entity Profile

ContentManagement→ MediaManagement→ Shortcuts() — supabase Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/studio/components/grid/components/common/Shortcuts.tsx lines 13–74

export function Shortcuts({ gridRef, rows }: ShortcutsProps) {
  const snap = useTableEditorTableStateSnapshot()

  const metaKey = useMemo(() => {
    function getClientOS() {
      return navigator?.appVersion.indexOf('Win') !== -1
        ? 'windows'
        : navigator?.appVersion.indexOf('Mac') !== -1
          ? 'macos'
          : 'unknown'
    }
    return getClientOS() === 'windows' ? 'Control' : 'Command'
  }, [])

  useKeyboardShortcuts(
    {
      [`${metaKey}+ArrowUp`]: (event) => {
        event.stopPropagation()
        if (snap.selectedCellPosition) {
          const position = {
            idx: snap.selectedCellPosition?.idx ?? 0,
            rowIdx: 0,
          }
          gridRef.current!.selectCell(position)
        } else {
          gridRef.current!.scrollToCell({ rowIdx: Number(0) })
        }
      },
      [`${metaKey}+ArrowDown`]: (event) => {
        event.stopPropagation()
        if (snap.selectedCellPosition) {
          const position = {
            idx: snap.selectedCellPosition?.idx ?? 0,
            rowIdx: rows.length > 1 ? rows.length - 1 : 0,
          }
          gridRef.current!.selectCell(position)
        } else {
          gridRef.current!.scrollToCell({ rowIdx: Number(rows.length) })
        }
      },
      [`${metaKey}+ArrowLeft`]: (event) => {
        event.stopPropagation()
        const fronzenColumns = snap.gridColumns.filter((x) => x.frozen)
        const position = {
          idx: fronzenColumns.length,
          rowIdx: snap.selectedCellPosition?.rowIdx ?? 0,
        }
        gridRef.current!.selectCell(position)
      },
      [`${metaKey}+ArrowRight`]: (event) => {
        event.stopPropagation()
        gridRef.current?.selectCell({
          idx: snap.gridColumns.length - 2, // -2 because we don't want to select the end extra col
          rowIdx: snap.selectedCellPosition?.rowIdx ?? 0,
        })
      },
    },
    ['INPUT', 'TEXTAREA', 'SELECT']
  )

  return null
}