logseq/tldraw/packages/react/src/hooks/useKeyboardEvents.ts

import * as React from 'react'
import { useApp, useRendererContext } from '~hooks'
import { TLTargetType } from '@tldraw/core'
import type { TLReactCustomEvents } from '~types'

export function useKeyboardEvents() {
  const app = useApp()
  const { callbacks } = useRendererContext()

  React.useEffect(() => {
    const onKeyDown: TLReactCustomEvents['keyboard'] = e => {
      callbacks.onKeyDown?.({ type: TLTargetType.Canvas, order: -1 }, e)
    }
    const onKeyUp: TLReactCustomEvents['keyboard'] = e => {
      callbacks.onKeyUp?.({ type: TLTargetType.Canvas, order: -1 }, e)
    }
    window.addEventListener('keydown', onKeyDown)
    window.addEventListener('keyup', onKeyUp)
    document.addEventListener('paste', e => {
      e.preventDefault()
      app.paste(e)
    })
    document.addEventListener('copy', e => {
      e.preventDefault()
      app.copy()
    })
    return () => {
      window.removeEventListener('keydown', onKeyDown)
      window.removeEventListener('keyup', onKeyUp)
    }
  }, [])
}