Disabling middle click paste in favour of panning (#1335)

Specifically for linux OSes but this isn't a requirement here anywhere
that supports middle click paste will now only pan.

Previously when panning with middle mouse button on linux a paste event
would occur on `pointerup`. This is now fixed.

### Test Plan

1. On linux copy some text to the clipboard
2. Pan with middle mouse button
3. On mouse up there should be no text pasted into tldraw 

### Release Note

- Disabling middle click paste, in favour of panning

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
This commit is contained in:
Orange Mug 2023-05-15 14:13:12 +01:00 committed by GitHub
parent f1e9981aae
commit 2d4999322d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -1043,10 +1043,24 @@ export function useNativeClipboardEvents() {
trackEvent('cut', { source: 'kbd' }) trackEvent('cut', { source: 'kbd' })
} }
const paste = (e: ClipboardEvent) => { let disablingMiddleClickPaste = false
const pointerUpHandler = (e: PointerEvent) => {
if (e.button === 1) {
disablingMiddleClickPaste = true
requestAnimationFrame(() => {
disablingMiddleClickPaste = false
})
}
}
const paste = (event: ClipboardEvent) => {
if (disablingMiddleClickPaste) {
event.stopPropagation()
return
}
if (app.editingId !== null || disallowClipboardEvents(app)) return if (app.editingId !== null || disallowClipboardEvents(app)) return
if (e.clipboardData && !app.inputs.shiftKey) { if (event.clipboardData && !app.inputs.shiftKey) {
handleNativeDataTransferPaste(app, e.clipboardData) handleNativeDataTransferPaste(app, event.clipboardData)
} else { } else {
navigator.clipboard.read().then((clipboardItems) => { navigator.clipboard.read().then((clipboardItems) => {
if (Array.isArray(clipboardItems) && clipboardItems[0] instanceof ClipboardItem) { if (Array.isArray(clipboardItems) && clipboardItems[0] instanceof ClipboardItem) {
@ -1060,11 +1074,13 @@ export function useNativeClipboardEvents() {
document.addEventListener('copy', copy) document.addEventListener('copy', copy)
document.addEventListener('cut', cut) document.addEventListener('cut', cut)
document.addEventListener('paste', paste) document.addEventListener('paste', paste)
document.addEventListener('pointerup', pointerUpHandler)
return () => { return () => {
document.removeEventListener('copy', copy) document.removeEventListener('copy', copy)
document.removeEventListener('cut', cut) document.removeEventListener('cut', cut)
document.removeEventListener('paste', paste) document.removeEventListener('paste', paste)
document.removeEventListener('pointerup', pointerUpHandler)
} }
}, [app, trackEvent, appIsFocused]) }, [app, trackEvent, appIsFocused])
} }