Add MultilineTextInput paste support

[christophpurrer]

Please select one of the following

• I am removing an existing difference between facebook/react-native and microsoft/react-native-macos 👍
• I am cherry-picking a change from Facebook's react-native into microsoft/react-native-macos 👍
• I am making a fix / change for the macOS implementation of react-native
• I am making a change required for Microsoft usage of react-native

Summary

This adds an onPaste event for MultilineTextInput that is fired when a pasting into the input, and includes the same dataTransfer info as the onDrop callback which is discussed here #842
This also fixes a typo in the API name
This also adds logic to extract image size info from pasted images

Noteworthy:

• onPaste exists atm only for macOS, but we have the corresponding change to also add it rnw if that is desired
• Should we also add a property pasteTypes similar to drag&drag drag(ged)Types?

Changelog

[macOS] [Added] - Add MultilineTextInput paste support

Test Plan

Using this example with a paste handler. CMD+C, CMD+V

        <TextInput
          autoFocus={true}
          multiline={true}
          onPaste={e => console.log(e.nativeEvent.dataTransfer)}
          style={styles.default}
          accessibilityLabel="I am the accessibility label for text input"
        />

Screen.Recording.2022-08-10.at.4.05.26.PM.mov

Using that example w/o a paste handler. CMD+C, CMD+V and CMD+V again and again. And contextMenu paste

        <TextInput
          autoFocus={true}
          multiline={true}
          style={styles.default}
          accessibilityLabel="I am the accessibility label for text input"
        />

Screen.Recording.2022-08-10.at.4.06.00.PM.mov

[Saadnajmi]

Another dumb question: how much of this do you think might just work on iOS / iPadOS? Mostly curious =)

[Saadnajmi]

Can you resolve the conflicts in this one too? :)

[christophpurrer]

Can you resolve the conflicts in this one too? :)

Done ;-)

[Saadnajmi]

Would it be possible to add an example test in RN-Tester? Perhaps extend the one for Drag/Drop?

I extended the Drag/Drop by just having onPaste add a log statement. I verified that onPaste is definitely called when I have an image in the clipboard... but not much more than the simple log statement. Would be nice if there was more info / it was more obvious this what you can do with the pasted info in the test.

Screen.Recording.2022-09-08.at.10.37.41.AM.mov

[christophpurrer]

Would it be possible to add an example test in RN-Tester? Perhaps extend the one for Drag/Drop?

I extended the Drag/Drop by just having onPaste add a log statement. I verified that onPaste is definitely called when I have an image in the clipboard... but not much more than the simple log statement. Would be nice if there was more info / it was more obvious this what you can do with the pasted info in the test.

Screen.Recording.2022-09-08.at.10.37.41.AM.mov

I can add or extend an example. No big deal ;-)
When pasting an image you should get it's base64 representation.
So you can take 'it' and show it as an image

[christophpurrer]

@Saadnajmi here is a video from the sample added.
Adding images via Finder or from the clipboard

Screen.Recording.2022-09-08.at.12.12.42.PM.mov

[Saadnajmi]

Tested with the new test page example and it worked great! Thanks for the PR :)