feat(fabric): Implement Paste for TextInput (#2715)

## Summary:

Implement onPaste for TextInput. This is fairly heavy as it involves
heavily refactoring the `DataTransfer` object that is created and sent
to JS:

Notable changes:
- Expose a `dataTransferPayload` method on
`HostPlatformViewEventEmitter`. This means we now have a public method
that returns a `JSI::Value`, which feels a bit odd.
- Refactor the payload to not just be an array of items, but an object
with files/iterms/types. This matches the [paper
implementation](https://github.com/microsoft/react-native-macos/blob/258ce1ffac76cee44368ae3bb3bc6f911a14260e/packages/react-native/React/Views/RCTView.m#L1690-L1692)
and roughly the [DataTransfer Web
API](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer)
- Add a `pastedTypes` prop that matches paper to Fabric TextInput

## Test Plan:

Existing example in Drag and drop test page still works, and returns the
same object payload as paper.

---------

Co-authored-by: Nick Lefever <[email protected]>
Co-authored-by: Shawn Dempsey <[email protected]>
Co-authored-by: Tommy Nguyen <[email protected]>

Author: 4 people

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

@@ -10,6 +10,7 @@
 
 import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {
+  DataTransfer,
   GestureResponderEvent,
   NativeSyntheticEvent,
   ScrollEvent,
@@ -108,20 +109,7 @@ export type SettingChangeEvent = NativeSyntheticEvent<
 
 export type PasteEvent = NativeSyntheticEvent<
   $ReadOnly<{|
-    dataTransfer: {|
-      files: $ReadOnlyArray<{|
-        height: number,
-        size: number,
-        type: string,
-        uri: string,
-        width: number,
-      |}>,
-      items: $ReadOnlyArray<{|
-        kind: string,
-        type: string,
-      |}>,
-      types: $ReadOnlyArray<string>,
-    |},
+    dataTransfer: DataTransfer,
   |}>,
 >;
 

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

@@ -11,6 +11,7 @@
 import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {____TextStyle_Internal as TextStyleInternal} from '../../StyleSheet/StyleSheetTypes';
 import type {
+  DataTransfer,
   GestureResponderEvent,
   KeyEvent, // [macOS]
   HandledKeyEvent, // [macOS]
@@ -145,20 +146,7 @@ export type SettingChangeEvent = NativeSyntheticEvent<
 
 export type PasteEvent = NativeSyntheticEvent<
   $ReadOnly<{|
-    dataTransfer: {|
-      files: $ReadOnlyArray<{|
-        height: number,
-        size: number,
-        type: string,
-        uri: string,
-        width: number,
-      |}>,
-      items: $ReadOnlyArray<{|
-        kind: string,
-        type: string,
-      |}>,
-      types: $ReadOnlyArray<string>,
-    |},
+    dataTransfer: DataTransfer,
   |}>,
 >;
 

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

@@ -88,6 +88,7 @@ NS_ASSUME_NONNULL_BEGIN
 #if TARGET_OS_OSX // [macOS
 // UITextInput method for OSX
 - (CGSize)sizeThatFits:(CGSize)size;
+- (void)setReadablePasteBoardTypes:(NSArray<NSPasteboardType> *)readablePasteboardTypes;
 #endif // macOS]
 
 // This protocol disallows direct access to `text` property because

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

@@ -69,6 +69,8 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, strong, nullable) RCTUIColor *selectionColor;
 @property (weak, nullable) id<RCTUITextFieldDelegate> delegate;
 @property (nonatomic, assign) CGFloat pointScaleFactor;
+
+- (void)setReadablePasteBoardTypes:(NSArray<NSPasteboardType> *)readablePasteboardTypes;
 #endif // macOS]
 
 @property (nonatomic, getter=isGhostTextChanging) BOOL ghostTextChanging; // [macOS]

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

@@ -99,6 +99,7 @@ @implementation RCTUITextField {
 #endif // [macOS]
 #if TARGET_OS_OSX // [macOS
   BOOL _isUpdatingPlaceholderText;
+  NSArray<NSPasteboardType> *_readablePasteboardTypes;
 #endif // macOS]
 }
 
@@ -705,5 +706,12 @@ - (void)keyUp:(NSEvent *)event {
   }
 }
 #endif // macOS]
+  
+#if TARGET_OS_OSX // [macOS
+- (void)setReadablePasteBoardTypes:(NSArray<NSPasteboardType> *)readablePasteboardTypes
+{
+  _readablePasteboardTypes = readablePasteboardTypes;
+}
+#endif // macOS]
 
 @end

packages/react-native/Libraries/Types/CoreEventTypes.d.ts

@@ -307,19 +307,24 @@ export interface FocusEvent extends NativeSyntheticEvent<NativeFocusEvent> {}
 export interface BlueEvent extends NativeSyntheticEvent<NativeBlurEvent> {}
 
 // Drag and Drop types
-export interface DataTransferItem {
+export interface DataTransferFile {
   name: string;
-  kind: string;
-  type: string;
+  type: string | null | undefined;
   uri: string;
   size?: number | undefined;
   width?: number | undefined;
   height?: number | undefined;
 }
 
+export interface DataTransferItem {
+  kind: string;
+  type: string | null | undefined;
+}
+
 export interface DataTransfer {
-  files: ReadonlyArray<DataTransferItem>;
-  types: ReadonlyArray<string>;
+  files: ReadonlyArray<DataTransferFile>;
+  items: ReadonlyArray<DataTransferItem>;
+  types: ReadonlyArray<string | null | undefined>;
 }
 
 export interface DragEvent extends MouseEvent {

packages/react-native/Libraries/Types/CoreEventTypes.js

@@ -333,19 +333,24 @@ export type MouseEvent = NativeSyntheticEvent<
 >;
 
 // [macOS
-export type DataTransferItem = $ReadOnly<{
+export type DataTransferFile = $ReadOnly<{
   name: string,
-  kind: string,
-  type: string,
+  type: ?string,
   uri: string,
   size?: number,
   width?: number,
   height?: number,
 }>;
 
+export type DataTransferItem = $ReadOnly<{
+  kind: string,
+  type: ?string,
+}>;
+
 export type DataTransfer = $ReadOnly<{
-  files: $ReadOnlyArray<DataTransferItem>,
-  types: $ReadOnlyArray<string>,
+  files: $ReadOnlyArray<DataTransferFile>,
+  items: $ReadOnlyArray<DataTransferItem>,
+  types: $ReadOnlyArray<?string>,
 }>;
 
 export type DragEvent = NativeSyntheticEvent<

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -2711,20 +2711,7 @@ export type SettingChangeEvent = NativeSyntheticEvent<
 >;
 export type PasteEvent = NativeSyntheticEvent<
   $ReadOnly<{|
-    dataTransfer: {|
-      files: $ReadOnlyArray<{|
-        height: number,
-        size: number,
-        type: string,
-        uri: string,
-        width: number,
-      |}>,
-      items: $ReadOnlyArray<{|
-        kind: string,
-        type: string,
-      |}>,
-      types: $ReadOnlyArray<string>,
-    |},
+    dataTransfer: DataTransfer,
   |}>,
 >;
 export type SubmitKeyEvent = $ReadOnly<{|
@@ -3119,20 +3106,7 @@ export type SettingChangeEvent = NativeSyntheticEvent<
 >;
 export type PasteEvent = NativeSyntheticEvent<
   $ReadOnly<{|
-    dataTransfer: {|
-      files: $ReadOnlyArray<{|
-        height: number,
-        size: number,
-        type: string,
-        uri: string,
-        width: number,
-      |}>,
-      items: $ReadOnlyArray<{|
-        kind: string,
-        type: string,
-      |}>,
-      types: $ReadOnlyArray<string>,
-    |},
+    dataTransfer: DataTransfer,
   |}>,
 >;
 export type SubmitKeyEvent = $ReadOnly<{|
@@ -8552,18 +8526,22 @@ export type MouseEvent = NativeSyntheticEvent<
     timestamp: number,
   }>,
 >;
-export type DataTransferItem = $ReadOnly<{
+export type DataTransferFile = $ReadOnly<{
   name: string,
-  kind: string,
-  type: string,
+  type: ?string,
   uri: string,
   size?: number,
   width?: number,
   height?: number,
 }>;
+export type DataTransferItem = $ReadOnly<{
+  kind: string,
+  type: ?string,
+}>;
 export type DataTransfer = $ReadOnly<{
-  files: $ReadOnlyArray<DataTransferItem>,
-  types: $ReadOnlyArray<string>,
+  files: $ReadOnlyArray<DataTransferFile>,
+  items: $ReadOnlyArray<DataTransferItem>,
+  types: $ReadOnlyArray<?string>,
 }>;
 export type DragEvent = NativeSyntheticEvent<
   $ReadOnly<{

packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm

@@ -344,6 +344,13 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
     _backedTextInputView.disableKeyboardShortcuts = newTextInputProps.disableKeyboardShortcuts;
   }
 
+#if TARGET_OS_OSX // [macOS
+  if (newTextInputProps.traits.pastedTypes!= oldTextInputProps.traits.pastedTypes) {
+    NSArray<NSPasteboardType> *types = RCTPasteboardTypeArrayFromProps(newTextInputProps.traits.pastedTypes);
+    [_backedTextInputView setReadablePasteBoardTypes:types];
+  }
+#endif // macOS]
+
   [super updateProps:props oldProps:oldProps];
 
 #if TARGET_OS_IOS // [macOS] [visionOS]
@@ -602,7 +609,19 @@ - (BOOL)textInputShouldHandleKeyEvent:(nonnull NSEvent *)event {
 }
 
 - (BOOL)textInputShouldHandlePaste:(nonnull id<RCTBackedTextInputViewProtocol>)sender {
-  return YES;
+  NSPasteboard *pasteboard = [NSPasteboard generalPasteboard];
+  NSPasteboardType fileType = [pasteboard availableTypeFromArray:@[NSFilenamesPboardType, NSPasteboardTypePNG, NSPasteboardTypeTIFF]];
+  NSArray<NSPasteboardType>* pastedTypes = ((RCTUITextView*) _backedTextInputView).readablePasteboardTypes;
+      
+  // If there's a fileType that is of interest, notify JS. Also blocks notifying JS if it's a text paste
+  if (_eventEmitter && fileType != nil && [pastedTypes containsObject:fileType]) {
+    auto const &textInputEventEmitter = *std::static_pointer_cast<TextInputEventEmitter const>(_eventEmitter);
+  DataTransfer dataTransfer = [self dataTransferForPasteboard:pasteboard];
+  textInputEventEmitter.onPaste({.dataTransfer = std::move(dataTransfer)});
+  }
+
+  // Only allow pasting text.
+  return fileType == nil;
 }
 
 #endif // macOS]

packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.h

@@ -85,7 +85,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 #if TARGET_OS_OSX // [macOS
 - (BOOL)handleKeyboardEvent:(NSEvent *)event;
-- (void)buildDataTransferItems:(std::vector<facebook::react::DataTransferItem> &)dataTransferItems forPasteboard:(NSPasteboard *)pasteboard;
+- (facebook::react::DataTransfer)dataTransferForPasteboard:(NSPasteboard *)pasteboard;
 #endif // macOS]
 
 /*