When pasting files in Safari the DataTransfer doesn't include files

[wereHamster]

Description

When pasting files in Safari (eg. select a file in Finder, copy, focus editor, paste), the DataTransfer object doesn't include the selected files (dataTransfer.files.length is 0). The issue seems to be that Safari doesn't expose files in the beforeinput event (which is what Slate uses).

Sandbox

This codesandbox allows you to inspect the payload of the paste and beforeinput events: https://codesandbox.io/s/paste-vs-beforeinput-cjniw?file=/index.html

Safari

Chrome

Expectation
When pasting files, the files are available under the DataTransfer .files list

Environment

• Slate Version: 0.63.0
• Browser: Safari 14.1.2 and Safari Technology Preview 130 (Safari 15.0, WebKit 16612.1.26.1.5)

[wereHamster]

• https://bugs.webkit.org/show_bug.cgi?id=194921
• Encourage browsers to include files in beforeinput DataTransfer event w3c/input-events#120

[dylans]

@wereHamster thanks for including the links (I was going to respond with something similar).

There is talk that the newer async Clipboard API should solve this issue, but I've not tried it yet and slate-react doesn't use it yet. It does also have obstacles requiring user approval for reading the copy buffer (which is why I believe that Safari should work with the newer API for files but have chosen to not support files with the older API). I do think at some point we need to make the switch as my guess is that the existing approach we currently take will get deprecated

• https://www.w3.org/TR/clipboard-apis/
• https://web.dev/async-clipboard/
• https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard
• https://webkit.org/blog/10855/
• https://developer.mozilla.org/en-US/docs/Web/API/Clipboard