[bug] Copy/Paste/Cut stealing focus from other inputs/components

[germanocaumo]

When embedding tldraw in another app that has other inputs for copy/paste/cut, for example a text area, if the user try to do such actions in the input field, the action occurs in tldraw instead.

Example to reproduce:

https://codesandbox.io/s/lbrkiq

1. Click on the text input
2. Try to copy/paste/cut the text

Expected behaviour: the action happens in the input with focus

Actual behavior: tldraw component gets focused and the action happens there

I digged it a bit and it seems it started happening after this: https://github.com/tldraw/tldraw/pull/881

[samlroberts]

I'm finding this issue as well.

I have an app with one or more tldraw whiteboards embedded, and they're breaking copy paste in other parts of the app. Messing around with useKeyboardShortcuts.tsx as well as embedded example, I believe a potential solution is to change these lines in useKeyboardShortcuts.tsx to use ref.current instead of document for adding and removing the event listeners for cut, copy and paste: https://github.com/tldraw/tldraw/blob/main/packages/tldraw/src/hooks/useKeyboardShortcuts.tsx#L46-L52.

In my limited testing with the embed example, and adding a text input, it seems to solve the problem, and doesn't seem to break anything else.