diff --git a/src/components/TextInput/BaseTextInput/index.native.tsx b/src/components/TextInput/BaseTextInput/index.native.tsx index e7f4507df7c6..3039d7327d37 100644 --- a/src/components/TextInput/BaseTextInput/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/index.native.tsx @@ -8,11 +8,15 @@ import FormHelpMessage from '@components/FormHelpMessage'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; +import type {AnimatedMarkdownTextInputRef} from '@components/RNMarkdownTextInput'; +import RNMarkdownTextInput from '@components/RNMarkdownTextInput'; +import type {AnimatedTextInputRef} from '@components/RNTextInput'; import RNTextInput from '@components/RNTextInput'; import Text from '@components/Text'; import * as styleConst from '@components/TextInput/styleConst'; import TextInputLabel from '@components/TextInput/TextInputLabel'; import useLocalize from '@hooks/useLocalize'; +import useMarkdownStyle from '@hooks/useMarkdownStyle'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -54,13 +58,17 @@ function BaseTextInput( autoCorrect = true, prefixCharacter = '', inputID, + isMarkdownEnabled = false, ...props }: BaseTextInputProps, ref: ForwardedRef, ) { + const InputComponent = isMarkdownEnabled ? RNMarkdownTextInput : RNTextInput; + const inputProps = {shouldSaveDraft: false, shouldUseDefaultValue: false, ...props}; const theme = useTheme(); const styles = useThemeStyles(); + const markdownStyle = useMarkdownStyle(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); @@ -321,13 +329,14 @@ function BaseTextInput( )} - { + { + const baseTextInputRef = element as BaseTextInputRef | null; if (typeof ref === 'function') { - ref(element); + ref(baseTextInputRef); } else if (ref && 'current' in ref) { // eslint-disable-next-line no-param-reassign - ref.current = element; + ref.current = baseTextInputRef; } input.current = element; @@ -370,6 +379,7 @@ function BaseTextInput( selection={inputProps.selection} readOnly={isReadOnly} defaultValue={defaultValue} + markdownStyle={markdownStyle} /> {inputProps.isLoading && ( , ) { + const InputComponent = isMarkdownEnabled ? RNMarkdownTextInput : RNTextInput; + const theme = useTheme(); const styles = useThemeStyles(); + const markdownStyle = useMarkdownStyle(); const {hasError = false} = inputProps; const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); @@ -341,13 +349,14 @@ function BaseTextInput( )} - { + { + const baseTextInputRef = element as BaseTextInputRef | null; if (typeof ref === 'function') { - ref(element); + ref(baseTextInputRef); } else if (ref && 'current' in ref) { // eslint-disable-next-line no-param-reassign - ref.current = element; + ref.current = baseTextInputRef; } input.current = element as HTMLInputElement | null; @@ -396,6 +405,7 @@ function BaseTextInput( selection={inputProps.selection} readOnly={isReadOnly} defaultValue={defaultValue} + markdownStyle={markdownStyle} /> {inputProps.isLoading && ( diff --git a/src/pages/tasks/NewTaskDetailsPage.tsx b/src/pages/tasks/NewTaskDetailsPage.tsx index 15612e20afd7..9e857b22c5c4 100644 --- a/src/pages/tasks/NewTaskDetailsPage.tsx +++ b/src/pages/tasks/NewTaskDetailsPage.tsx @@ -117,6 +117,7 @@ function NewTaskDetailsPage({task}: NewTaskDetailsPageProps) { defaultValue={parser.htmlToMarkdown(parser.replace(taskDescription))} value={taskDescription} onValueChange={setTaskDescription} + isMarkdownEnabled /> diff --git a/src/pages/tasks/TaskDescriptionPage.tsx b/src/pages/tasks/TaskDescriptionPage.tsx index ffc3d5880bba..9abe15a5bb80 100644 --- a/src/pages/tasks/TaskDescriptionPage.tsx +++ b/src/pages/tasks/TaskDescriptionPage.tsx @@ -120,6 +120,7 @@ function TaskDescriptionPage({report, currentUserPersonalDetails}: TaskDescripti autoGrowHeight shouldSubmitForm containerStyles={[styles.autoGrowHeightMultilineInput]} + isMarkdownEnabled />