From 30f380bf74a0ab7a40c5063445c23c6dd8fefcc3 Mon Sep 17 00:00:00 2001 From: Abdelhafidh Belalia <16493223+s77rt@users.noreply.github.com> Date: Thu, 18 Jul 2024 17:32:01 +0100 Subject: [PATCH 1/6] Add onPaste to TextInput --- proposals/0000-textinput-onpaste.md | 58 +++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 proposals/0000-textinput-onpaste.md diff --git a/proposals/0000-textinput-onpaste.md b/proposals/0000-textinput-onpaste.md new file mode 100644 index 0000000..6307aa7 --- /dev/null +++ b/proposals/0000-textinput-onpaste.md @@ -0,0 +1,58 @@ +--- +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 + console.log("User pressed Paste")} /> +``` + +## Motivation + +Detect `Paste` event on TextInput. In our use case detecting paste event can be used to support image pasting. + +## Detailed design + +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 + +There is a PR for that change already https://github.com/facebook/react-native/pull/45425 + +## Drawbacks + +- onPaste callback timing is not the same in iOS vs Android. In iOS `onPaste` is called first then `onChange`. While in Android it's the other way around. + +## 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 + +- How to resolve the timing inconsistency? (Not a blocker) From b922a8de7a2015b8ec981ca084a0abd252314b3d Mon Sep 17 00:00:00 2001 From: Abdelhafidh Belalia <16493223+s77rt@users.noreply.github.com> Date: Sun, 21 Jul 2024 17:23:47 +0100 Subject: [PATCH 2/6] Fixed timing inconsistency --- proposals/0000-textinput-onpaste.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/proposals/0000-textinput-onpaste.md b/proposals/0000-textinput-onpaste.md index 6307aa7..ebd4fb1 100644 --- a/proposals/0000-textinput-onpaste.md +++ b/proposals/0000-textinput-onpaste.md @@ -39,7 +39,7 @@ There is a PR for that change already https://github.com/facebook/react-native/p ## Drawbacks -- onPaste callback timing is not the same in iOS vs Android. In iOS `onPaste` is called first then `onChange`. While in Android it's the other way around. +None ## Alternatives @@ -55,4 +55,4 @@ Update the docs https://github.com/facebook/react-native-website/pull/4161 ## Unresolved questions -- How to resolve the timing inconsistency? (Not a blocker) +- onPaste event does not expose any clipboard data. How can we add such data? From da98c194ae5cbf85f78cd3cfa4af84075db171ae Mon Sep 17 00:00:00 2001 From: Abdelhafidh Belalia <16493223+s77rt@users.noreply.github.com> Date: Sat, 27 Jul 2024 01:46:42 +0100 Subject: [PATCH 3/6] Added onPaste event section --- proposals/0000-textinput-onpaste.md | 28 ++++++++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/proposals/0000-textinput-onpaste.md b/proposals/0000-textinput-onpaste.md index ebd4fb1..161ae15 100644 --- a/proposals/0000-textinput-onpaste.md +++ b/proposals/0000-textinput-onpaste.md @@ -19,10 +19,22 @@ Add `onPaste` prop to `TextInput` component ## Motivation -Detect `Paste` event on TextInput. In our use case detecting paste event can be used to support image pasting. +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]` @@ -35,11 +47,17 @@ Android: 2. In `ReactTextInputManager` create and set the `PasteWatcher` instance for the view (`ReactEditText`) 3. Implement the `PasteWatcher` class to to disptach the `onPaste` event -There is a PR for that change already https://github.com/facebook/react-native/pull/45425 +### 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`, data URI (base64-encoded) otherwise. + +| Type | +| --------------------------------------------------------- | +| (`{nativeEvent: {target, items: [{type, data}]}`) => void | ## Drawbacks -None +- Implementation cost: If the clipboard contains an image, the whole image is read in memory and encoded to base64 ## Alternatives @@ -55,4 +73,6 @@ Update the docs https://github.com/facebook/react-native-website/pull/4161 ## Unresolved questions -- onPaste event does not expose any clipboard data. How can we add such data? +- Android: Pasting text using the clipboard suggestion option does not trigger the onPaste event + +