Add onPaste to TextInput

packages/react-native/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js

@@ -455,6 +455,21 @@ export type NativeProps = $ReadOnly<{|
     |}>,
   >,
 
+  /**
+   * Invoked when the user performs the paste action.
+   */
+  onPaste?: ?DirectEventHandler<
+    $ReadOnly<{|
+      target: Int32,
+      items: $ReadOnlyArray<
+        $ReadOnly<{|
+          type: string,
+          data: string,
+        |}>,
+      >,
+    |}>,
+  >,
+
   /**
    * The string that will be rendered before text input has been entered.
    */
@@ -658,6 +673,9 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     topScroll: {
       registrationName: 'onScroll',
     },
+    topPaste: {
+      registrationName: 'onPaste',
+    },
   },
   validAttributes: {
     maxFontSizeMultiplier: true,
@@ -712,6 +730,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     textBreakStrategy: true,
     onScroll: true,
     onContentSizeChange: true,
+    onPaste: true,
     disableFullscreenUI: true,
     includeFontPadding: true,
     fontWeight: true,

packages/react-native/Libraries/Components/TextInput/RCTTextInputViewConfig.js

@@ -85,6 +85,9 @@ const RCTTextInputViewConfig = {
     topContentSizeChange: {
       registrationName: 'onContentSizeChange',
     },
+    topPaste: {
+      registrationName: 'onPaste',
+    },
   },
   validAttributes: {
     fontSize: true,
@@ -150,6 +153,7 @@ const RCTTextInputViewConfig = {
       onSelectionChange: true,
       onContentSizeChange: true,
       onScroll: true,
+      onPaste: true,
     }),
   },
 };

packages/react-native/Libraries/Components/TextInput/TextInput.d.ts

@@ -487,6 +487,16 @@ export interface TextInputSubmitEditingEventData {
   text: string;
 }
 
+/**
+ * @see TextInputProps.onPaste
+ */
+export interface TextInputPasteEventData extends TargetedEvent {
+  items: Array<{
+    type: string;
+    data: string;
+  }>;
+}
+
 /**
  * @see https://reactnative.dev/docs/textinput#props
  */
@@ -831,6 +841,13 @@ export interface TextInputProps
     | ((e: NativeSyntheticEvent<TextInputKeyPressEventData>) => void)
     | undefined;
 
+  /**
+   * Invoked when the user performs the paste action.
+   */
+  onPaste?:
+    | ((e: NativeSyntheticEvent<TextInputPasteEventData>) => void)
+    | undefined;
+
   /**
    * The string that will be rendered before text input has been entered
    */

packages/react-native/Libraries/Components/TextInput/TextInput.flow.js

@@ -94,6 +94,18 @@ export type EditingEvent = SyntheticEvent<
   |}>,
 >;
 
+export type PasteEvent = SyntheticEvent<
+  $ReadOnly<{|
+    target: number,
+    items: $ReadOnlyArray<
+      $ReadOnly<{|
+        type: string,
+        data: string,
+      |}>,
+    >,
+  |}>,
+>;
+
 type DataDetectorTypesType =
   | 'phoneNumber'
   | 'link'
@@ -812,6 +824,11 @@ export type Props = $ReadOnly<{|
    */
   onScroll?: ?(e: ScrollEvent) => mixed,
 
+  /**
+   * Invoked when the user performs the paste action.
+   */
+  onPaste?: ?(e: PasteEvent) => mixed,
+
   /**
    * The string that will be rendered before text input has been entered.
    */

packages/react-native/Libraries/Components/TextInput/TextInput.js

@@ -134,6 +134,18 @@ export type EditingEvent = SyntheticEvent<
   |}>,
 >;
 
+export type PasteEvent = SyntheticEvent<
+  $ReadOnly<{|
+    target: number,
+    items: $ReadOnlyArray<
+      $ReadOnly<{|
+        type: string,
+        data: string,
+      |}>,
+    >,
+  |}>,
+>;
+
 type DataDetectorTypesType =
   | 'phoneNumber'
   | 'link'
@@ -812,6 +824,11 @@ export type Props = $ReadOnly<{|
    */
   onScroll?: ?(e: ScrollEvent) => mixed,
 
+  /**
+   * Invoked when the user performs the paste action.
+   */
+  onPaste?: ?(e: PasteEvent) => mixed,
+
   /**
    * The string that will be rendered before text input has been entered.
    */

packages/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.mm

@@ -13,6 +13,10 @@
 #import <React/RCTBackedTextInputDelegateAdapter.h>
 #import <React/RCTTextAttributes.h>
 
+#import <MobileCoreServices/MobileCoreServices.h>
+#import <MobileCoreServices/UTType.h>
+#import <UIKit/UIKit.h>
+
 @implementation RCTUITextView {
   UILabel *_placeholderView;
   UITextView *_detachedTextView;
@@ -172,7 +176,32 @@ - (void)scrollRangeToVisible:(NSRange)range
 - (void)paste:(id)sender
 {
   _textWasPasted = YES;
-  [super paste:sender];
+  UIPasteboard *clipboard = [UIPasteboard generalPasteboard];
+  if (clipboard.hasImages) {
+    for (NSItemProvider *itemProvider in clipboard.itemProviders) {
+      if ([itemProvider hasItemConformingToTypeIdentifier:(NSString *)kUTTypeImage]) {
+        for (NSString *identifier in itemProvider.registeredTypeIdentifiers) {
+          if (UTTypeConformsTo((__bridge CFStringRef)identifier, kUTTypeImage)) {
+            NSString *MIMEType = (__bridge_transfer NSString *)UTTypeCopyPreferredTagWithClass((__bridge CFStringRef)identifier, kUTTagClassMIMEType);
+            NSString *fileExtension = (__bridge_transfer NSString *)UTTypeCopyPreferredTagWithClass((__bridge CFStringRef)identifier, kUTTagClassFilenameExtension);
+            NSString *fileName = [NSString stringWithFormat:@"%@.%@", [[NSUUID UUID] UUIDString], fileExtension];
+            NSString *filePath = [NSTemporaryDirectory() stringByAppendingPathComponent:fileName];
+            NSURL *fileURL = [NSURL fileURLWithPath:filePath];
+            NSData *fileData = [clipboard dataForPasteboardType:identifier];
+            [fileData writeToFile:filePath atomically:YES];
+            [_textInputDelegateAdapter didPaste:MIMEType withData:[fileURL absoluteString]];
+            break;
+          }
+        }
+        break;
+      }
+    }
+  } else {
+    if (clipboard.hasStrings) {
+      [_textInputDelegateAdapter didPaste:@"text/plain" withData:clipboard.string];
+    }
+    [super paste:sender];
+  }
 }
 
 // Turn off scroll animation to fix flaky scrolling.
@@ -264,6 +293,10 @@ - (BOOL)canPerformAction:(SEL)action withSender:(id)sender
     return NO;
   }
 
+  if (action == @selector(paste:) && [UIPasteboard generalPasteboard].hasImages) {
+    return YES;
+  }
+
   return [super canPerformAction:action withSender:sender];
 }
 

packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegate.h

@@ -36,6 +36,7 @@ NS_ASSUME_NONNULL_BEGIN
 - (void)textInputDidChange;
 
 - (void)textInputDidChangeSelection;
+- (void)textInputDidPaste:(NSString *)type withData:(NSString *)data;
 
 @optional
 

packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.h

@@ -20,6 +20,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 - (void)skipNextTextInputDidChangeSelectionEventWithTextRange:(UITextRange *)textRange;
 - (void)selectedTextRangeWasSet;
+- (void)didPaste:(NSString *)type withData:(NSString *)data;
 
 @end
 
@@ -30,6 +31,7 @@ NS_ASSUME_NONNULL_BEGIN
 - (instancetype)initWithTextView:(UITextView<RCTBackedTextInputViewProtocol> *)backedTextInputView;
 
 - (void)skipNextTextInputDidChangeSelectionEventWithTextRange:(UITextRange *)textRange;
+- (void)didPaste:(NSString *)type withData:(NSString *)data;
 
 @end
 

packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm

@@ -147,6 +147,11 @@ - (void)selectedTextRangeWasSet
   [self textFieldProbablyDidChangeSelection];
 }
 
+- (void)didPaste:(NSString *)type withData:(NSString *)data
+{
+  [_backedTextInputView.textInputDelegate textInputDidPaste:type withData:data];
+}
+
 #pragma mark - Generalization
 
 - (void)textFieldProbablyDidChangeSelection
@@ -292,6 +297,11 @@ - (void)skipNextTextInputDidChangeSelectionEventWithTextRange:(UITextRange *)tex
   _previousSelectedTextRange = textRange;
 }
 
+- (void)didPaste:(NSString *)type withData:(NSString *)data
+{
+  [_backedTextInputView.textInputDelegate textInputDidPaste:type withData:data];
+}
+
 #pragma mark - Generalization
 
 - (void)textViewProbablyDidChangeSelection

packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.h

@@ -37,6 +37,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, copy, nullable) RCTDirectEventBlock onChange;
 @property (nonatomic, copy, nullable) RCTDirectEventBlock onChangeSync;
 @property (nonatomic, copy, nullable) RCTDirectEventBlock onScroll;
+@property (nonatomic, copy, nullable) RCTDirectEventBlock onPaste;
 
 @property (nonatomic, assign) NSInteger mostRecentEventCount;
 @property (nonatomic, assign, readonly) NSInteger nativeEventCount;

packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm

@@ -546,6 +546,26 @@ - (void)textInputDidChangeSelection
   });
 }
 
+- (void)textInputDidPaste:(NSString *)type withData:(NSString *)data
+{
+  if (!_onPaste) {
+    return;
+  }
+
+  NSMutableArray *items = [NSMutableArray new];
+  [items addObject:@{
+    @"type" : type,
+    @"data" : data,
+  }];
+
+  NSDictionary *payload = @{
+    @"target" : self.reactTag,
+    @"items" : items,
+  };
+
+  _onPaste(payload);
+}
+
 - (void)updateLocalData
 {
   [self enforceTextAttributesIfNeeded];

packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputViewManager.mm

@@ -65,6 +65,7 @@ @implementation RCTBaseTextInputViewManager {
 RCT_EXPORT_VIEW_PROPERTY(onChangeSync, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onSelectionChange, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onScroll, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onPaste, RCTDirectEventBlock)
 
 RCT_EXPORT_VIEW_PROPERTY(mostRecentEventCount, NSInteger)
 

packages/react-native/Libraries/Text/TextInput/Singleline/RCTUITextField.mm

@@ -12,6 +12,10 @@
 #import <React/RCTUtils.h>
 #import <React/UIView+React.h>
 
+#import <MobileCoreServices/MobileCoreServices.h>
+#import <MobileCoreServices/UTType.h>
+#import <UIKit/UIKit.h>
+
 @implementation RCTUITextField {
   RCTBackedTextFieldDelegateAdapter *_textInputDelegateAdapter;
   NSDictionary<NSAttributedStringKey, id> *_defaultTextAttributes;
@@ -139,6 +143,10 @@ - (BOOL)canPerformAction:(SEL)action withSender:(id)sender
     return NO;
   }
 
+  if (action == @selector(paste:) && [UIPasteboard generalPasteboard].hasImages) {
+    return YES;
+  }
+
   return [super canPerformAction:action withSender:sender];
 }
 
@@ -222,7 +230,32 @@ - (void)scrollRangeToVisible:(NSRange)range
 - (void)paste:(id)sender
 {
   _textWasPasted = YES;
-  [super paste:sender];
+  UIPasteboard *clipboard = [UIPasteboard generalPasteboard];
+  if (clipboard.hasImages) {
+    for (NSItemProvider *itemProvider in clipboard.itemProviders) {
+      if ([itemProvider hasItemConformingToTypeIdentifier:(NSString *)kUTTypeImage]) {
+        for (NSString *identifier in itemProvider.registeredTypeIdentifiers) {
+          if (UTTypeConformsTo((__bridge CFStringRef)identifier, kUTTypeImage)) {
+            NSString *MIMEType = (__bridge_transfer NSString *)UTTypeCopyPreferredTagWithClass((__bridge CFStringRef)identifier, kUTTagClassMIMEType);
+            NSString *fileExtension = (__bridge_transfer NSString *)UTTypeCopyPreferredTagWithClass((__bridge CFStringRef)identifier, kUTTagClassFilenameExtension);
+            NSString *fileName = [NSString stringWithFormat:@"%@.%@", [[NSUUID UUID] UUIDString], fileExtension];
+            NSString *filePath = [NSTemporaryDirectory() stringByAppendingPathComponent:fileName];
+            NSURL *fileURL = [NSURL fileURLWithPath:filePath];
+            NSData *fileData = [clipboard dataForPasteboardType:identifier];
+            [fileData writeToFile:filePath atomically:YES];
+            [_textInputDelegateAdapter didPaste:MIMEType withData:[fileURL absoluteString]];
+            break;
+          }
+        }
+        break;
+      }
+    }
+  } else {
+    if (clipboard.hasStrings) {
+      [_textInputDelegateAdapter didPaste:@"text/plain" withData:clipboard.string];
+    }
+    [super paste:sender];
+  }
 }
 
 #pragma mark - Layout