diff --git a/proposals/0000-textinput-onpaste.md b/proposals/0000-textinput-onpaste.md new file mode 100644 index 00000000..f933ae3b --- /dev/null +++ b/proposals/0000-textinput-onpaste.md @@ -0,0 +1,99 @@ +--- +title: Add onPaste to TextInput +author: + - Abdelhafidh Belalia +date: 2024-07-18 +--- + +# RFC0000: Add onPaste to TextInput + +## Summary + +Add `onPaste` prop to `TextInput` component + +## Basic example + +```js + { + const clipboardContent = e.nativeEvent.items[0]; + + if (clipboardContent.type === "text/plain") { + console.log(`Pasting text: ${clipboardContent.data}`); + return; + } + + const fileURI = clipboardContent.data; + const fileName = fileURI.split("/").pop(); + const file = { + uri: fileURI, + name: fileName, + type: clipboardContent.type, + }; + console.log("Uploading file"); + uploadFile(file); + }} +/> +``` + +## Motivation + +Detect `Paste` event on TextInput. This can be used to support image pasting. + +## Detailed design + +1:1 PR https://github.com/facebook/react-native/pull/45425 + +### Allow pasting images + +iOS: + +1. In `RCTUITextField`/`RCTUITextView` override the `canPerformAction:` method to return `YES` if the action is paste and the clipboard has images + +Android: N/A (already allowed) + +### Detecting paste + +iOS: + +1. In `RCTUITextField`/`RCTUITextView` override the `paste:` method to call the delegate adapater `[didPaste]` +2. Implement the `didPaste` method on the delegate adapater and call the delegate input `[textInputDidPaste]` +3. Implement the `textInputDidPaste` method on the delegate input to disptach the `onPaste` event + +Android: + +1. In `ReactEditText` override the `onTextContextMenuItem` method to call the `PasteWatcher` insatnce +2. In `ReactTextInputManager` create and set the `PasteWatcher` instance for the view (`ReactEditText`) +3. Implement the `PasteWatcher` class to to disptach the `onPaste` event + +### onPaste event + +Invoked when the user performs the paste action. The `items` array contains one object where `type` and `data` are the MIME type and the content of the clipboard respectively. `data` is in plaintext if the type is `text/plain`, URI otherwise. + +| Type | +| --------------------------------------------------------- | +| (`{nativeEvent: {target, items: [{type, data}]}`) => void | + +Note: On iOS the clipboard items do not expose any URI. When a file is pasted, we copy its data into a temporarily file and provide that file's URI instead. + +## Drawbacks + +- iOS: Pasted image is copied into a temporarily file + +## Alternatives + +None + +## Adoption strategy + +This is not a breaking change. Developers can adopt the feature by simply adding `onPaste` prop to their components + +## How we teach this + +Update the docs https://github.com/facebook/react-native-website/pull/4161 + +## Unresolved questions + +- Android: Pasting text using the clipboard suggestion option does not trigger the onPaste event + +