Add prop to filter drag and drop pasting on iOS (facebook#50533)

Summary:
Pull Request resolved: facebook#50533

Builds upon facebook#49446

On iOS, by default, every EditText accepts DragEvent and will automatically focus themselves to accept these data. In some rare cases, it might not be desirable to allow data from arbitrary drag and drop events to be pasted into a text input.

This change adds a new prop `acceptDragAndDropTypes` to do exactly that: reject drag and drop events by telling the system to ignore certain types of drag data and, by proxy, disabling behavior that automatically focuses the text input.

The prop accepts a list of [Uniform Type Identifiers](https://developer.apple.com/documentation/uniformtypeidentifiers) that iOS supports. It's important to note that these are *not* MIME types. A MIME type would be something like `text/plain` but the equivalent for iOS is `public.plain-text`.

It's important to note that this is an experimental prop, as is evident by the `experimental_` prefix on the JS side. Its signature could change before the prop has fully matured, use at your own risk

Changelog: [iOS][Added] - Add new prop for filtering drag and drop targeting to text inputs

Reviewed By: javache

Differential Revision: D70992749

fbshipit-source-id: 22b5aa1b4ced14147bf16a844361acf6f99c5a40

Author: Abbondanzo

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

@@ -90,6 +90,7 @@ const RCTTextInputViewConfig = {
     },
   },
   validAttributes: {
+    acceptDragAndDropTypes: true,
     dynamicTypeRamp: true,
     fontSize: true,
     fontWeight: true,

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

@@ -405,19 +405,6 @@ export type TextInputIOSProps = $ReadOnly<{
 }>;
 
 export type TextInputAndroidProps = $ReadOnly<{
-  /**
-   * When provided, the text input will only accept drag and drop events for the specified
-   * mime types. If null or not provided, the text input will accept all types of drag and drop
-   * events.
-   * Defaults to null.
-   *
-   * *NOTE*: This prop is experimental and its API may change in the future. Use at your own risk.
-   *
-   * @platform android
-   * @see https://developer.android.com/reference/android/content/ClipData for more information on MIME types
-   */
-  experimental_acceptDragAndDropTypes?: ?$ReadOnlyArray<string>,
-
   /**
    * When provided it will set the color of the cursor (or "caret") in the component.
    * Unlike the behavior of `selectionColor` the cursor color will be set independently
@@ -527,6 +514,26 @@ export type TextInputAndroidProps = $ReadOnly<{
 }>;
 
 type TextInputBaseProps = $ReadOnly<{
+  /**
+   * When provided, the text input will only accept drag and drop events for the specified
+   * types. If null or not provided, the text input will accept all types of drag and drop events.
+   * An empty array will accept no drag and drop events.
+   * Defaults to null.
+   *
+   * On Android, types must correspond to MIME types from ClipData:
+   * https://developer.android.com/reference/android/content/ClipData
+   * (e.g. "text/plain" or "image/*")
+   *
+   * On iOS, types must correspond to UTIs:
+   * https://developer.apple.com/documentation/uniformtypeidentifiers
+   * (e.g. "public.plain-text" or "public.image")
+   *
+   * *NOTE*: This prop is experimental and its API may change in the future. Use at your own risk.
+   *
+   * @see https://developer.android.com/reference/android/content/ClipData for more information on MIME types
+   */
+  experimental_acceptDragAndDropTypes?: ?$ReadOnlyArray<string>,
+
   /**
    * Can tell `TextInput` to automatically capitalize certain characters.
    *

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

@@ -675,6 +675,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
         ref={(ref: $FlowFixMe)}
         {...otherProps}
         {...eventHandlers}
+        acceptDragAndDropTypes={props.experimental_acceptDragAndDropTypes}
         accessibilityState={_accessibilityState}
         accessible={accessible}
         submitBehavior={submitBehavior}

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

@@ -20,6 +20,7 @@ @implementation RCTUITextView {
   NSDictionary<NSAttributedStringKey, id> *_defaultTextAttributes;
   NSArray<UIBarButtonItemGroup *> *_initialValueLeadingBarButtonGroups;
   NSArray<UIBarButtonItemGroup *> *_initialValueTrailingBarButtonGroups;
+  NSArray<NSString *> *_acceptDragAndDropTypes;
 }
 
 static UIFont *defaultPlaceholderFont(void)
@@ -102,6 +103,16 @@ - (NSString *)accessibilityLabel
 
 #pragma mark - Properties
 
+- (void)setAcceptDragAndDropTypes:(NSArray<NSString *> *)acceptDragAndDropTypes
+{
+  _acceptDragAndDropTypes = acceptDragAndDropTypes;
+}
+
+- (nullable NSArray<NSString *> *)acceptDragAndDropTypes
+{
+  return _acceptDragAndDropTypes;
+}
+
 - (void)setPlaceholder:(NSString *)placeholder
 {
   _placeholder = placeholder;

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

@@ -11,7 +11,7 @@
 
 static void *TextFieldSelectionObservingContext = &TextFieldSelectionObservingContext;
 
-@interface RCTBackedTextFieldDelegateAdapter () <UITextFieldDelegate>
+@interface RCTBackedTextFieldDelegateAdapter () <UITextFieldDelegate, UITextDropDelegate>
 @end
 
 @implementation RCTBackedTextFieldDelegateAdapter {
@@ -25,6 +25,7 @@ - (instancetype)initWithTextField:(UITextField<RCTBackedTextInputViewProtocol> *
   if (self = [super init]) {
     _backedTextInputView = backedTextInputView;
     backedTextInputView.delegate = self;
+    backedTextInputView.textDropDelegate = self;
 
     [_backedTextInputView addTarget:self
                              action:@selector(textFieldDidChange)
@@ -159,11 +160,47 @@ - (void)textFieldProbablyDidChangeSelection
   [_backedTextInputView.textInputDelegate textInputDidChangeSelection];
 }
 
+#pragma mark - UITextDropDelegate
+
+- (UITextDropEditability)textDroppableView:(UIView<UITextDroppable> *)textDroppableView
+                 willBecomeEditableForDrop:(id<UITextDropRequest>)drop
+{
+  if (!_backedTextInputView.enabled) {
+    return UITextDropEditabilityNo;
+  }
+  if ([self _shouldAcceptDrop:drop]) {
+    return UITextDropEditabilityYes;
+  } else {
+    return UITextDropEditabilityNo;
+  }
+}
+
+- (UITextDropProposal *)textDroppableView:(UIView<UITextDroppable> *)textDroppableView
+                          proposalForDrop:(id<UITextDropRequest>)drop
+{
+  if ([self _shouldAcceptDrop:drop]) {
+    return drop.suggestedProposal;
+  } else {
+    return [[UITextDropProposal alloc] initWithDropOperation:UIDropOperationCancel];
+  }
+}
+
+- (bool)_shouldAcceptDrop:(id<UITextDropRequest>)drop
+{
+  if (_backedTextInputView.acceptDragAndDropTypes) {
+    // If we have accepted types, we should only accept drops that match one of them
+    return [drop.dropSession hasItemsConformingToTypeIdentifiers:_backedTextInputView.acceptDragAndDropTypes];
+  } else {
+    // If we don't have any accepted types, we should accept any drop
+    return true;
+  }
+}
+
 @end
 
 #pragma mark - RCTBackedTextViewDelegateAdapter (for UITextView)
 
-@interface RCTBackedTextViewDelegateAdapter () <UITextViewDelegate>
+@interface RCTBackedTextViewDelegateAdapter () <UITextViewDelegate, UITextDropDelegate>
 @end
 
 @implementation RCTBackedTextViewDelegateAdapter {
@@ -179,6 +216,7 @@ - (instancetype)initWithTextView:(UITextView<RCTBackedTextInputViewProtocol> *)b
   if (self = [super init]) {
     _backedTextInputView = backedTextInputView;
     backedTextInputView.delegate = self;
+    backedTextInputView.textDropDelegate = self;
   }
 
   return self;
@@ -304,4 +342,40 @@ - (void)textViewProbablyDidChangeSelection
   [_backedTextInputView.textInputDelegate textInputDidChangeSelection];
 }
 
+#pragma mark - UITextDropDelegate
+
+- (UITextDropEditability)textDroppableView:(UIView<UITextDroppable> *)textDroppableView
+                 willBecomeEditableForDrop:(id<UITextDropRequest>)drop
+{
+  if (!_backedTextInputView.isEditable) {
+    return UITextDropEditabilityNo;
+  }
+  if ([self _shouldAcceptDrop:drop]) {
+    return UITextDropEditabilityYes;
+  } else {
+    return UITextDropEditabilityNo;
+  }
+}
+
+- (UITextDropProposal *)textDroppableView:(UIView<UITextDroppable> *)textDroppableView
+                          proposalForDrop:(id<UITextDropRequest>)drop
+{
+  if ([self _shouldAcceptDrop:drop]) {
+    return drop.suggestedProposal;
+  } else {
+    return [[UITextDropProposal alloc] initWithDropOperation:UIDropOperationCancel];
+  }
+}
+
+- (bool)_shouldAcceptDrop:(id<UITextDropRequest>)drop
+{
+  if (_backedTextInputView.acceptDragAndDropTypes) {
+    // If we have accepted types, we should only accept drops that match one of them
+    return [drop.dropSession hasItemsConformingToTypeIdentifiers:(_backedTextInputView.acceptDragAndDropTypes)];
+  } else {
+    // If we don't have any accepted types, we should accept any drop
+    return true;
+  }
+}
+
 @end

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

@@ -38,6 +38,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, assign, readonly) CGPoint contentOffset;
 @property (nonatomic, assign, readonly) UIEdgeInsets contentInset;
 @property (nullable, nonatomic, copy) NSDictionary<NSAttributedStringKey, id> *typingAttributes;
+@property (nonatomic, strong, nullable) NSArray<NSString *> *acceptDragAndDropTypes;
 
 // This protocol disallows direct access to `selectedTextRange` property because
 // unwise usage of it can break the `delegate` behavior. So, we always have to

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

@@ -48,6 +48,7 @@ @implementation RCTBaseTextInputViewManager {
 RCT_REMAP_VIEW_PROPERTY(scrollEnabled, backedTextInputView.scrollEnabled, BOOL)
 RCT_REMAP_VIEW_PROPERTY(secureTextEntry, backedTextInputView.secureTextEntry, BOOL)
 RCT_REMAP_VIEW_PROPERTY(smartInsertDelete, backedTextInputView.smartInsertDeleteType, UITextSmartInsertDeleteType)
+
 RCT_EXPORT_VIEW_PROPERTY(autoFocus, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(submitBehavior, NSString)
 RCT_EXPORT_VIEW_PROPERTY(clearTextOnFocus, BOOL)
@@ -60,17 +61,16 @@ @implementation RCTBaseTextInputViewManager {
 RCT_EXPORT_VIEW_PROPERTY(inputAccessoryViewButtonLabel, NSString)
 RCT_EXPORT_VIEW_PROPERTY(textContentType, NSString)
 RCT_EXPORT_VIEW_PROPERTY(passwordRules, NSString)
+RCT_EXPORT_VIEW_PROPERTY(mostRecentEventCount, NSInteger)
+RCT_EXPORT_VIEW_PROPERTY(disableKeyboardShortcuts, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(acceptDragAndDropTypes, NSArray<NSString *>)
 
 RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onKeyPressSync, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onChangeSync, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onSelectionChange, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onScroll, RCTDirectEventBlock)
 
-RCT_EXPORT_VIEW_PROPERTY(mostRecentEventCount, NSInteger)
-
-RCT_EXPORT_VIEW_PROPERTY(disableKeyboardShortcuts, BOOL)
-
 RCT_EXPORT_SHADOW_PROPERTY(text, NSString)
 RCT_EXPORT_SHADOW_PROPERTY(placeholder, NSString)
 RCT_EXPORT_SHADOW_PROPERTY(onContentSizeChange, RCTDirectEventBlock)

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

@@ -17,6 +17,7 @@ @implementation RCTUITextField {
   NSDictionary<NSAttributedStringKey, id> *_defaultTextAttributes;
   NSArray<UIBarButtonItemGroup *> *_initialValueLeadingBarButtonGroups;
   NSArray<UIBarButtonItemGroup *> *_initialValueTrailingBarButtonGroups;
+  NSArray<NSString *> *_acceptDragAndDropTypes;
 }
 
 // This should not be needed but internal build were failing without it.
@@ -57,6 +58,16 @@ - (void)setIsAccessibilityElement:(BOOL)isAccessibilityElement
 
 #pragma mark - Properties
 
+- (void)setAcceptDragAndDropTypes:(NSArray<NSString *> *)acceptDragAndDropTypes
+{
+  _acceptDragAndDropTypes = acceptDragAndDropTypes;
+}
+
+- (nullable NSArray<NSString *> *)acceptDragAndDropTypes
+{
+  return _acceptDragAndDropTypes;
+}
+
 - (void)setTextContainerInset:(UIEdgeInsets)textContainerInset
 {
   _textContainerInset = textContainerInset;

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

@@ -2831,7 +2831,6 @@ export type TextInputIOSProps = $ReadOnly<{
   smartInsertDelete?: ?boolean,
 }>;
 export type TextInputAndroidProps = $ReadOnly<{
-  experimental_acceptDragAndDropTypes?: ?$ReadOnlyArray<string>,
   cursorColor?: ?ColorValue,
   selectionHandleColor?: ?ColorValue,
   disableFullscreenUI?: ?boolean,
@@ -2852,6 +2851,7 @@ export type TextInputAndroidProps = $ReadOnly<{
   underlineColorAndroid?: ?ColorValue,
 }>;
 type TextInputBaseProps = $ReadOnly<{
+  experimental_acceptDragAndDropTypes?: ?$ReadOnlyArray<string>,
   autoCapitalize?: ?AutoCapitalize,
   autoComplete?: ?(
     | \\"additional-name\\"

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

@@ -29,7 +29,10 @@
 
 using namespace facebook::react;
 
-@interface RCTTextInputComponentView () <RCTBackedTextInputDelegate, RCTTextInputViewProtocol>
+@interface RCTTextInputComponentView () <
+    RCTBackedTextInputDelegate,
+    RCTTextInputViewProtocol,
+    UIDropInteractionDelegate>
 @end
 
 static NSSet<NSNumber *> *returnKeyTypesSet;
@@ -307,6 +310,19 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
     _backedTextInputView.disableKeyboardShortcuts = newTextInputProps.disableKeyboardShortcuts;
   }
 
+  if (newTextInputProps.acceptDragAndDropTypes != oldTextInputProps.acceptDragAndDropTypes) {
+    if (!newTextInputProps.acceptDragAndDropTypes.has_value()) {
+      _backedTextInputView.acceptDragAndDropTypes = nil;
+    } else {
+      auto &vector = newTextInputProps.acceptDragAndDropTypes.value();
+      NSMutableArray<NSString *> *array = [NSMutableArray arrayWithCapacity:vector.size()];
+      for (const std::string &str : vector) {
+        [array addObject:[NSString stringWithUTF8String:str.c_str()]];
+      }
+      _backedTextInputView.acceptDragAndDropTypes = array;
+    }
+  }
+
   [super updateProps:props oldProps:oldProps];
 
   [self setDefaultInputAccessoryView];