fix: involve focus in paste & copy

tldraw/packages/react/src/components/Canvas/Canvas.tsx

@@ -101,7 +101,7 @@ export const Canvas = observer(function Renderer<S extends TLReactShape>({
   useGestureEvents(rContainer)
   useCursor(rContainer, cursor, cursorRotation)
   useZoom(rContainer)
-  useKeyboardEvents()
+  useKeyboardEvents(rContainer)
   const events = useCanvasEvents()
   const onlySelectedShape = selectedShapes?.length === 1 && selectedShapes[0]
   const onlySelectedShapeWithHandles =

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

@@ -3,7 +3,7 @@ import { useApp, useRendererContext } from '~hooks'
 import { TLTargetType } from '@tldraw/core'
 import type { TLReactCustomEvents } from '~types'
 
-export function useKeyboardEvents() {
+export function useKeyboardEvents(ref: React.RefObject<HTMLDivElement>) {
   const app = useApp()
   const { callbacks } = useRendererContext()
 
@@ -11,26 +11,38 @@ export function useKeyboardEvents() {
     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 => {
-      if (!app.editingShape) {
+
+    const onPaste = (e: ClipboardEvent) => {
+      if (!app.editingShape && ref.current?.contains(document.activeElement)) {
         e.preventDefault()
         app.paste(e)
       }
-    })
-    document.addEventListener('copy', e => {
-      if (!app.editingShape && app.selectedShapes.size > 0) {
+    }
+
+    const onCopy = (e: ClipboardEvent) => {
+      if (
+        !app.editingShape &&
+        app.selectedShapes.size > 0 &&
+        ref.current?.contains(document.activeElement)
+      ) {
         e.preventDefault()
         app.copy()
       }
-    })
+    }
+
+    window.addEventListener('keydown', onKeyDown)
+    window.addEventListener('keyup', onKeyUp)
+    document.addEventListener('paste', onPaste)
+    document.addEventListener('copy', onCopy)
     return () => {
       window.removeEventListener('keydown', onKeyDown)
       window.removeEventListener('keyup', onKeyUp)
+      document.removeEventListener('paste', onPaste)
+      document.removeEventListener('copy', onCopy)
     }
   }, [])
 }