Merge pull request #53367 from daledah/fix/52681

src/components/TextInput/BaseTextInput/index.native.tsx

@@ -16,6 +16,7 @@ import Text from '@components/Text';
 import * as styleConst from '@components/TextInput/styleConst';
 import TextInputClearButton from '@components/TextInput/TextInputClearButton';
 import TextInputLabel from '@components/TextInput/TextInputLabel';
+import useHtmlPaste from '@hooks/useHtmlPaste';
 import useLocalize from '@hooks/useLocalize';
 import useMarkdownStyle from '@hooks/useMarkdownStyle';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -98,6 +99,7 @@ function BaseTextInput(
     const labelTranslateY = useRef(new Animated.Value(initialActiveLabel ? styleConst.ACTIVE_LABEL_TRANSLATE_Y : styleConst.INACTIVE_LABEL_TRANSLATE_Y)).current;
     const input = useRef<TextInput | null>(null);
     const isLabelActive = useRef(initialActiveLabel);
+    useHtmlPaste(input, undefined, false, isMarkdownEnabled);
 
     // AutoFocus which only works on mount:
     useEffect(() => {

src/components/TextInput/BaseTextInput/index.tsx

@@ -1,7 +1,7 @@
 import {Str} from 'expensify-common';
-import type {ForwardedRef} from 'react';
+import type {ForwardedRef, MutableRefObject} from 'react';
 import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import type {GestureResponderEvent, LayoutChangeEvent, NativeSyntheticEvent, StyleProp, TextInputFocusEventData, ViewStyle} from 'react-native';
+import type {GestureResponderEvent, LayoutChangeEvent, NativeSyntheticEvent, StyleProp, TextInput, TextInputFocusEventData, ViewStyle} from 'react-native';
 import {ActivityIndicator, Animated, StyleSheet, View} from 'react-native';
 import Checkbox from '@components/Checkbox';
 import FormHelpMessage from '@components/FormHelpMessage';
@@ -17,6 +17,7 @@ import Text from '@components/Text';
 import * as styleConst from '@components/TextInput/styleConst';
 import TextInputClearButton from '@components/TextInput/TextInputClearButton';
 import TextInputLabel from '@components/TextInput/TextInputLabel';
+import useHtmlPaste from '@hooks/useHtmlPaste';
 import useLocalize from '@hooks/useLocalize';
 import useMarkdownStyle from '@hooks/useMarkdownStyle';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -103,6 +104,7 @@ function BaseTextInput(
     const labelTranslateY = useRef(new Animated.Value(initialActiveLabel ? styleConst.ACTIVE_LABEL_TRANSLATE_Y : styleConst.INACTIVE_LABEL_TRANSLATE_Y)).current;
     const input = useRef<HTMLInputElement | null>(null);
     const isLabelActive = useRef(initialActiveLabel);
+    useHtmlPaste(input as MutableRefObject<TextInput | null>, undefined, false, isMarkdownEnabled);
 
     // AutoFocus which only works on mount:
     useEffect(() => {

src/hooks/useHtmlPaste/index.ts

@@ -4,6 +4,7 @@ import Parser from '@libs/Parser';
 import type UseHtmlPaste from './types';
 
 const insertByCommand = (text: string) => {
+    // eslint-disable-next-line deprecation/deprecation
     document.execCommand('insertText', false, text);
 };
 
@@ -27,7 +28,7 @@ const insertAtCaret = (target: HTMLElement, text: string) => {
     }
 };
 
-const useHtmlPaste: UseHtmlPaste = (textInputRef, preHtmlPasteCallback, removeListenerOnScreenBlur = false) => {
+const useHtmlPaste: UseHtmlPaste = (textInputRef, preHtmlPasteCallback, removeListenerOnScreenBlur = false, isMarkdownEnabled = true) => {
     const navigation = useNavigation();
 
     /**
@@ -129,6 +130,9 @@ const useHtmlPaste: UseHtmlPaste = (textInputRef, preHtmlPasteCallback, removeLi
     );
 
     useEffect(() => {
+        if (!isMarkdownEnabled) {
+            return;
+        }
         // we need to re-register listener on navigation focus/blur if the component (like Composer) is not unmounting
         // when navigating away to different screen (report) to avoid paste event on other screen being wrongly handled
         // by current screen paste listener
@@ -149,7 +153,7 @@ const useHtmlPaste: UseHtmlPaste = (textInputRef, preHtmlPasteCallback, removeLi
             document.removeEventListener('paste', handlePaste, true);
         };
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    }, []);
+    }, [isMarkdownEnabled]);
 };
 
 export default useHtmlPaste;

src/hooks/useHtmlPaste/types.ts

@@ -5,6 +5,7 @@ type UseHtmlPaste = (
     textInputRef: MutableRefObject<(HTMLTextAreaElement & TextInput) | TextInput | null>,
     preHtmlPasteCallback?: (event: ClipboardEvent) => boolean,
     removeListenerOnScreenBlur?: boolean,
+    isMarkdownEnabled?: boolean,
 ) => void;
 
 export default UseHtmlPaste;