Support image pasting on Native

patches/react-native+0.73.4+019+iOS-Image-Pasting.patch

@@ -0,0 +1,70 @@
+diff --git a/node_modules/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.mm b/node_modules/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.mm
+index 43c6c7d..5904762 100644
+--- a/node_modules/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.mm
++++ b/node_modules/react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.mm
+@@ -13,6 +13,8 @@
+ #import <React/RCTBackedTextInputDelegateAdapter.h>
+ #import <React/RCTTextAttributes.h>
+
++#import <UIKit/UIKit.h>
++
+ @implementation RCTUITextView {
+   UILabel *_placeholderView;
+   UITextView *_detachedTextView;
+@@ -166,7 +168,9 @@ - (void)setSelectedTextRange:(UITextRange *)selectedTextRange notifyDelegate:(BO
+ - (void)paste:(id)sender
+ {
+   _textWasPasted = YES;
+-  [super paste:sender];
++  if (![UIPasteboard generalPasteboard].hasImages) {
++    [super paste:sender];
++  }
+   [_textInputDelegateAdapter didPaste];
+ }
+
+@@ -259,6 +263,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];
+ }
+
+diff --git a/node_modules/react-native/Libraries/Text/TextInput/Singleline/RCTUITextField.mm b/node_modules/react-native/Libraries/Text/TextInput/Singleline/RCTUITextField.mm
+index 10009ff..273bc0a 100644
+--- a/node_modules/react-native/Libraries/Text/TextInput/Singleline/RCTUITextField.mm
++++ b/node_modules/react-native/Libraries/Text/TextInput/Singleline/RCTUITextField.mm
+@@ -12,6 +12,8 @@
+ #import <React/RCTUtils.h>
+ #import <React/UIView+React.h>
+
++#import <UIKit/UIKit.h>
++
+ @implementation RCTUITextField {
+   RCTBackedTextFieldDelegateAdapter *_textInputDelegateAdapter;
+   NSDictionary<NSAttributedStringKey, id> *_defaultTextAttributes;
+@@ -139,6 +141,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];
+ }
+
+@@ -204,7 +210,9 @@ - (void)setSelectedTextRange:(UITextRange *)selectedTextRange notifyDelegate:(BO
+ - (void)paste:(id)sender
+ {
+   _textWasPasted = YES;
+-  [super paste:sender];
++  if (![UIPasteboard generalPasteboard].hasImages) {
++    [super paste:sender];
++  }
+   [_textInputDelegateAdapter didPaste];
+ }
+

src/components/Composer/index.native.tsx

@@ -10,6 +10,7 @@ import useResetComposerFocus from '@hooks/useResetComposerFocus';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import Clipboard from '@libs/Clipboard';
 import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import type {ComposerProps} from './types';
@@ -21,6 +22,7 @@ function Composer(
     {
         shouldClear = false,
         onClear = () => {},
+        onPasteFile = () => {},
         isDisabled = false,
         maxLines,
         isComposerFullSize = false,
@@ -64,6 +66,15 @@ function Composer(
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, []);
 
+    const pasteImage = useCallback(() => {
+        Clipboard.getImage().then((image) => {
+            if (!image) {
+                return;
+            }
+            onPasteFile(image);
+        });
+    }, [onPasteFile]);
+
     useEffect(() => {
         if (!shouldClear) {
             return;
@@ -92,6 +103,7 @@ function Composer(
             /* eslint-disable-next-line react/jsx-props-no-spreading */
             {...props}
             readOnly={isDisabled}
+            onPaste={pasteImage}
             onBlur={(e) => {
                 if (!isFocused) {
                     // eslint-disable-next-line react-compiler/react-compiler

src/components/Composer/types.ts

@@ -1,4 +1,5 @@
 import type {NativeSyntheticEvent, StyleProp, TextInputProps, TextInputSelectionChangeEventData, TextStyle} from 'react-native';
+import {FileObject} from '@components/AttachmentModal';
 
 type TextSelection = {
     start: number;
@@ -31,7 +32,7 @@
     onChangeText?: (numberOfLines: string) => void;
 
     /** Callback method to handle pasting a file */
-    onPasteFile?: (file: File) => void;
+    onPasteFile?: (file: FileObject) => void;
 
     /** General styles to apply to the text input */
     // eslint-disable-next-line react/forbid-prop-types

src/libs/Clipboard/index.native.ts → src/libs/Clipboard/index.android.ts

@@ -1,5 +1,5 @@
 import Clipboard from '@react-native-clipboard/clipboard';
-import type {CanSetHtml, SetHtml, SetString} from './types';
+import type {CanSetHtml, GetImage, SetHtml, SetString} from './types';
 
 /**
  * Sets a string on the Clipboard object via @react-native-clipboard/clipboard
@@ -12,8 +12,18 @@
 const canSetHtml: CanSetHtml = () => false;
 const setHtml: SetHtml = () => {};
 
+const getImage: GetImage = () => {
+    return Clipboard.getImage().then((imageb64) => {
+        if (!imageb64) {
+            return undefined;
+        }
+        return {uri: imageb64, name: 'image.png', type: 'image/png'};
+    });
+};
+
 export default {
     setString,
     canSetHtml,
     setHtml,
+    getImage,
 };

src/libs/Clipboard/index.ios.ts

@@ -0,0 +1,36 @@
+import Clipboard from '@react-native-clipboard/clipboard';
+import type {CanSetHtml, GetImage, SetHtml, SetString} from './types';
+
+/**
+ * Sets a string on the Clipboard object via @react-native-clipboard/clipboard
+ */
+const setString: SetString = (text) => {
+    Clipboard.setString(text);
+};
+
+// We don't want to set HTML on native platforms so noop them.
+const canSetHtml: CanSetHtml = () => false;
+const setHtml: SetHtml = () => {};
+
+const getImage: GetImage = () => {
+    return Clipboard.hasImage()
+        .then((hasImage) => {
+            if (!hasImage) {
+                return undefined;
+            }
+            return Clipboard.getImagePNG();
+        })
+        .then((imageb64) => {
+            if (!imageb64) {
+                return undefined;
+            }
+            return {uri: imageb64, name: 'image.png', type: 'image/png'};
+        });
+};
+
+export default {
+    setString,
+    canSetHtml,
+    setHtml,
+    getImage,
+};

src/libs/Clipboard/index.ts

@@ -1,7 +1,7 @@
 import Clipboard from '@react-native-clipboard/clipboard';
 import * as Browser from '@libs/Browser';
 import CONST from '@src/CONST';
-import type {CanSetHtml, SetHtml, SetString} from './types';
+import type {CanSetHtml, GetImage, SetHtml, SetString} from './types';
 
 type ComposerSelection = {
     start: number;
@@ -136,8 +136,11 @@
     Clipboard.setString(text);
 };
 
+const getImage: GetImage = () => Promise.reject('getImage not supported on web');
+
 export default {
     setString,
     canSetHtml,
     setHtml,
+    getImage,
 };

src/libs/Clipboard/types.ts

@@ -1,5 +1,8 @@
+import {FileObject} from '@components/AttachmentModal';
+
 type SetString = (text: string) => void;
 type SetHtml = (html: string, text: string) => void;
 type CanSetHtml = (() => (...args: ClipboardItems) => Promise<void>) | (() => boolean);
+type GetImage = () => Promise<FileObject | undefined>;
 
-export type {SetString, CanSetHtml, SetHtml};
+export type {SetString, CanSetHtml, SetHtml, GetImage};