-
Notifications
You must be signed in to change notification settings - Fork 24.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Remove option to paste rich text from Android EditText context menu #38189
Conversation
Base commit: bae63d4 |
Building the main branch with head 06668fc triggers a runtime when opening the RNTester Text examples: CLICK TO OPEN STACKTRACE
2023-07-14.16-34-10.mp4Related 823839b |
...eact-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java
Outdated
Show resolved
Hide resolved
Could you explain why you think the current behavior is a bug? At a glance, overriding a context menu command to paste rich text, to instead coerce to plain text, seems at odds with platform expectations. |
Thanks @NickGerleman
FIRST REASON: It was reported as a react-native TextInput Issue in different chat applications:
zulip/zulip-mobile#4660 (comment)
SECOND REASON: React Native Controlled TextInput Component does not support paste with rich text.
Example of a use case: The user pastes rich text in a JavaScript Controlled TextInput. Expected behaviour:
Actual behaviour:
2023-06-28.21-56-29.mp4more info in comment Expensify/App#21411 (comment)
The fix is published as two PRs:
The final result is that the option
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could we combine #38210 into this so that we get both changes at once? Otherwise this makes sense to me, if the application can never have visibility into the rich text.
@NickGerleman has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator. |
@NickGerleman merged this pull request in b1ceea4. |
…acebook#38189) Summary: Text is copy pasted as rich text on Android TextInput instead of Plain Text. ### 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) | | ----------- | ----------- | | <video src="https://user-images.githubusercontent.com/24992535/249170968-8fde35f0-a53c-4c5c-bd89-ee822c08eadf.mp4" width="350" /> | <video src="https://user-images.githubusercontent.com/24992535/249171968-bf0915a0-4060-4586-b267-7c2b463d76f6.mov" width="350" /> | ### What changes do you think we should make in order to solve the problem? The issue is a bug in react-native facebook#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 Expensify/App#21411 (comment) The solution consists of: 1) **Over-riding onTextContextMenuItem in ReactEditText to copy/paste plain text instead of rich-text** (https://stackoverflow.com/a/45319485/7295772). 2) **Removing the `Paste as plaintext` option from the insert and selection context menu** fixes facebook#31442 ## Changelog: [ANDROID] [FIXED] - Remove option to paste rich text from Android EditText context menu Pull Request resolved: facebook#38189 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 Reviewed By: mdvacca Differential Revision: D47824730 Pulled By: NickGerleman fbshipit-source-id: 35525e7d52e664b0f78649d23941262ee45a00cd
…acebook#38189) Summary: Text is copy pasted as rich text on Android TextInput instead of Plain Text. ### 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) | | ----------- | ----------- | | <video src="https://user-images.githubusercontent.com/24992535/249170968-8fde35f0-a53c-4c5c-bd89-ee822c08eadf.mp4" width="350" /> | <video src="https://user-images.githubusercontent.com/24992535/249171968-bf0915a0-4060-4586-b267-7c2b463d76f6.mov" width="350" /> | ### What changes do you think we should make in order to solve the problem? The issue is a bug in react-native facebook#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 Expensify/App#21411 (comment) The solution consists of: 1) **Over-riding onTextContextMenuItem in ReactEditText to copy/paste plain text instead of rich-text** (https://stackoverflow.com/a/45319485/7295772). 2) **Removing the `Paste as plaintext` option from the insert and selection context menu** fixes facebook#31442 ## Changelog: [ANDROID] [FIXED] - Remove option to paste rich text from Android EditText context menu Pull Request resolved: facebook#38189 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 Reviewed By: mdvacca Differential Revision: D47824730 Pulled By: NickGerleman fbshipit-source-id: 35525e7d52e664b0f78649d23941262ee45a00cd
…acebook#38189) Summary: Text is copy pasted as rich text on Android TextInput instead of Plain Text. ### 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) | | ----------- | ----------- | | <video src="https://user-images.githubusercontent.com/24992535/249170968-8fde35f0-a53c-4c5c-bd89-ee822c08eadf.mp4" width="350" /> | <video src="https://user-images.githubusercontent.com/24992535/249171968-bf0915a0-4060-4586-b267-7c2b463d76f6.mov" width="350" /> | ### What changes do you think we should make in order to solve the problem? The issue is a bug in react-native facebook#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 Expensify/App#21411 (comment) The solution consists of: 1) **Over-riding onTextContextMenuItem in ReactEditText to copy/paste plain text instead of rich-text** (https://stackoverflow.com/a/45319485/7295772). 2) **Removing the `Paste as plaintext` option from the insert and selection context menu** fixes facebook#31442 ## Changelog: [ANDROID] [FIXED] - Remove option to paste rich text from Android EditText context menu Pull Request resolved: facebook#38189 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 Reviewed By: mdvacca Differential Revision: D47824730 Pulled By: NickGerleman fbshipit-source-id: 35525e7d52e664b0f78649d23941262ee45a00cd
…38189) Summary: Text is copy pasted as rich text on Android TextInput instead of Plain Text. ### 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) | | ----------- | ----------- | | <video src="https://user-images.githubusercontent.com/24992535/249170968-8fde35f0-a53c-4c5c-bd89-ee822c08eadf.mp4" width="350" /> | <video src="https://user-images.githubusercontent.com/24992535/249171968-bf0915a0-4060-4586-b267-7c2b463d76f6.mov" width="350" /> | ### What changes do you think we should make in order to solve the problem? The issue is a bug in react-native #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 Expensify/App#21411 (comment) The solution consists of: 1) **Over-riding onTextContextMenuItem in ReactEditText to copy/paste plain text instead of rich-text** (https://stackoverflow.com/a/45319485/7295772). 2) **Removing the `Paste as plaintext` option from the insert and selection context menu** fixes #31442 ## Changelog: [ANDROID] [FIXED] - Remove option to paste rich text from Android EditText context menu Pull Request resolved: #38189 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 Reviewed By: mdvacca Differential Revision: D47824730 Pulled By: NickGerleman fbshipit-source-id: 35525e7d52e664b0f78649d23941262ee45a00cd
…acebook#38189) Summary: Text is copy pasted as rich text on Android TextInput instead of Plain Text. ### 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) | | ----------- | ----------- | | <video src="https://user-images.githubusercontent.com/24992535/249170968-8fde35f0-a53c-4c5c-bd89-ee822c08eadf.mp4" width="350" /> | <video src="https://user-images.githubusercontent.com/24992535/249171968-bf0915a0-4060-4586-b267-7c2b463d76f6.mov" width="350" /> | ### What changes do you think we should make in order to solve the problem? The issue is a bug in react-native facebook#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 Expensify/App#21411 (comment) The solution consists of: 1) **Over-riding onTextContextMenuItem in ReactEditText to copy/paste plain text instead of rich-text** (https://stackoverflow.com/a/45319485/7295772). 2) **Removing the `Paste as plaintext` option from the insert and selection context menu** fixes facebook#31442 ## Changelog: [ANDROID] [FIXED] - Remove option to paste rich text from Android EditText context menu Pull Request resolved: facebook#38189 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 Reviewed By: mdvacca Differential Revision: D47824730 Pulled By: NickGerleman fbshipit-source-id: 35525e7d52e664b0f78649d23941262ee45a00cd
Summary:
Text is copy pasted as rich text on Android TextInput instead of Plain Text.
What is the root cause of that problem?
Android EditText and iOS UITextField/UITextView have different copy/paste behavior.
Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-06-27.at.21.41.04.mp4
repro_android.mov
What changes do you think we should make in order to solve the problem?
The issue is a bug in react-native #31442:
More info at Expensify/App#21411 (comment)
The solution consists of:
Paste as plaintext
option from the insert and selection context menufixes #31442
Changelog:
[ANDROID] [FIXED] - Remove option to paste rich text from Android EditText context menu
Test Plan:
Reproducing the issue on Android
2023-06-27.22-28-06.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
2023-06-28.21-26-53.mp4
Testing the solution on React Native
2023-06-29.17-49-09.mp4