Proposal: TextInput onPaste event

Proposal: TextInput onPaste event

In order to support pasting things like images or attachments into a TextBox, we need an event to notify React Native that something has been pasted.

Summary

A set of props to configure which clipboard formats should be handled by React Native JS when pasted into a TextInput and a corresponding event that fires when these formats are pasted.

Motivation

In order to support scenarios that allow for pasting attachments / images / rich text / etc. into React Native's TextInput, we may need to subscribe to the TextBox.Paste event.

This has been proposed in the past in React Native core, but was perceived as too risky without a thorough investigation of how this might be implemented outside of core:
https://github.com/facebook/react-native/pull/22794

I don't believe any such options exist, though we have proposed the concept of "view manager extensions" in the past:
https://github.com/microsoft/react-native-windows/pull/1618

Another alternative might be to implement keyDownEvents for Ctrl+V and override the native context menu for TextInput (to create your own menu item that wires up to the Clipboard module). However, if your scenario is to only override paste behaviors for files and images, then you'll also need to re-implement the native paste behaviors for text, rich text, HTML, URIs, etc.

Basic example

const handledPasteFormats = [ 'StorageItem', 'Bitmap' ];
const onPaste = () => {
  if (ClipboardModule.contains('StorageItem')) {
    // File attachment handling
  } else if (ClipboardModule.contains('Bitmap')) {
    // Image attachment handling
  }
};

...

<TextInput
  handledPasteFormats={handledPasteFormats}
  onPaste={onPaste} />

Open Questions

If we're implementing RN overrides for Paste, do we also want to expand this to copy and cut as well via the TextBox.CopyingToClipboard and TextBox.CuttingToClipboard events?

Start by reviewing the proposed TextInput props and onPaste event, then read the referenced React Native pull request and React Native Windows view manager extensions proposal. Investigate the native TextBox.Paste event and the open questions about copy and cut; done would require a settled API and implementation scope rather than only a proposal.