react-native icon indicating copy to clipboard operation
react-native copied to clipboard

Published 20 hours ago • verified publisher icon facebook

Removing the Paste as plaintext option from the insert and selection context menu

Open fabOnReact opened this issue 2 years ago • 1 comments

Summary:

Remove Paste as plaintext from Android EditText context menu. Related PR Over-riding onTextContextMenuItem in ReactEditText to copy/paste plain text instead of rich-text #38189.

What is the root cause of that problem?

Android EditText and iOS UITextField/UITextView have different copy/paste behavior.

  • Android TextInput copies/pastes rich text
  • iOS UITextField copies/pastes plain text.
iOS (react-native) Android (react-native)

What changes do you think we should make in order to solve the problem?

The issue is a bug in react-native https://github.com/facebook/react-native/issues/31442:

  1. The JavaScript TextInput and ReactEditText Android state are not in sync
  2. The TextInput Android Native state over-rides the JavaScript state.
  3. onChangeText passes a plain text string to JavaScript, not rich text (text with spans and styles).

More info at https://github.com/Expensify/App/issues/21411#issuecomment-1611591137

The solution consists of:

  1. PR Over-riding onTextContextMenuItem in ReactEditText to copy/paste plain text instead of rich-text #38189 (https://stackoverflow.com/a/45319485/7295772).
  2. PR Removing the Paste as plaintext option from the insert and selection context menu #38210

Changelog:

[ANDROID] [FIXED] - Remove Paste as plaintext from Android EditText context menu.

Test Plan:

Reproducing the issue on Android

https://user-images.githubusercontent.com/24992535/249185416-76f8a687-1aca-4dc9-9abe-3d73d6e2893c.mp4

Fixing the issue on Android

Sourcecode https://github.com/fabriziobertoglio1987/text-input-cursor-flickering-android/blob/fix-copy-paste/app/src/main/java/com/example/myapplication/CustomEditText.java

https://user-images.githubusercontent.com/24992535/249486339-95449bb9-71b6-430c-8207-f5672f034fa9.mp4

Testing the solution on React Native

https://github.com/Expensify/App/assets/24992535/b302237b-99e5-44a2-996d-8bc50bbbc95c

More tests at https://github.com/Expensify/App/issues/21411#issuecomment-1611587431

fabOnReact avatar Jul 06 '23 06:07 fabOnReact

Platform Engine Arch Size (bytes) Diff
android hermes arm64-v8a 8,835,301 +218
android hermes armeabi-v7a 8,144,868 +201
android hermes x86 9,340,077 +208
android hermes x86_64 9,183,184 +213
android jsc arm64-v8a 9,447,189 +187
android jsc armeabi-v7a 8,628,813 +193
android jsc x86 9,529,290 +200
android jsc x86_64 9,773,072 +204

Base commit: 8ab9a776707d386a2a7742d90932626e5effb6b1 Branch: main

analysis-bot avatar Jul 06 '23 06:07 analysis-bot

https://github.com/facebook/react-native/pull/38189#issuecomment-1635514336

fabOnReact avatar Jul 14 '23 08:07 fabOnReact

Changes from this PR moved to https://github.com/facebook/react-native/pull/38189#pullrequestreview-1542055466

fabOnReact avatar Jul 22 '23 07:07 fabOnReact