From 699a61acdec808c959a74c4f4330fee3f1098b2a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Wed, 3 Apr 2024 12:16:25 +0200 Subject: [PATCH 1/8] Enable live markdown in form text inputs --- .../TextInput/BaseTextInput/index.tsx | 18 ++++++++++++++---- .../TextInput/BaseTextInput/types.ts | 2 ++ src/pages/tasks/NewTaskDetailsPage.tsx | 1 + 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/index.tsx b/src/components/TextInput/BaseTextInput/index.tsx index 9681f7e7fde5..64997f7be178 100644 --- a/src/components/TextInput/BaseTextInput/index.tsx +++ b/src/components/TextInput/BaseTextInput/index.tsx @@ -8,12 +8,16 @@ 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 SwipeInterceptPanResponder from '@components/SwipeInterceptPanResponder'; 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'; @@ -56,10 +60,13 @@ function BaseTextInput( autoCorrect = true, prefixCharacter = '', inputID, + liveMarkdown = false, ...inputProps }: BaseTextInputProps, ref: ForwardedRef, ) { + const InputComponent = liveMarkdown ? RNMarkdownTextInput : RNTextInput; + const theme = useTheme(); const styles = useThemeStyles(); const {hasError = false} = inputProps; @@ -81,6 +88,7 @@ function BaseTextInput( const labelTranslateY = useRef(new Animated.Value(initialActiveLabel ? styleConst.ACTIVE_LABEL_TRANSLATE_Y : styleConst.INACTIVE_LABEL_TRANSLATE_Y)).current; const input = useRef(null); const isLabelActive = useRef(initialActiveLabel); + const markdownStyle = useMarkdownStyle(); // AutoFocus which only works on mount: useEffect(() => { @@ -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 && ( From 1f331cd2da9a3c0caac29ec56fc1087f7a48b491 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Wed, 3 Apr 2024 18:14:14 +0200 Subject: [PATCH 2/8] Bump react-native-live-markdown version to fix onSubmitEditing prop --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4729cffea763..171d4cd72ea8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "license": "MIT", "dependencies": { "@dotlottie/react-player": "^1.6.3", - "@expensify/react-native-live-markdown": "0.1.35", + "@expensify/react-native-live-markdown": "0.1.37", "@expo/metro-runtime": "~3.1.1", "@formatjs/intl-datetimeformat": "^6.10.0", "@formatjs/intl-listformat": "^7.2.2", @@ -3097,9 +3097,9 @@ } }, "node_modules/@expensify/react-native-live-markdown": { - "version": "0.1.35", - "resolved": "https://registry.npmjs.org/@expensify/react-native-live-markdown/-/react-native-live-markdown-0.1.35.tgz", - "integrity": "sha512-W0FFIiU/sT+AwIrIOUHiNAHYjODAkEdYsf75tfBbkA6v2byHPxUlbzaJrZEQc0HgbvtAfTf9iQQqGWjNqe4pog==", + "version": "0.1.37", + "resolved": "https://registry.npmjs.org/@expensify/react-native-live-markdown/-/react-native-live-markdown-0.1.37.tgz", + "integrity": "sha512-XCiiyoDGUl+kXovqGOfKvOzyFpx8xrGhUjdn9F5wygecFCCS+0ynoyoQ6roKi539tkhd6IYFUr5KrOgiGMwaFg==", "engines": { "node": ">= 18.0.0" }, diff --git a/package.json b/package.json index 61e3557bbe67..fd8dc6184286 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ }, "dependencies": { "@dotlottie/react-player": "^1.6.3", - "@expensify/react-native-live-markdown": "0.1.35", + "@expensify/react-native-live-markdown": "0.1.37", "@expo/metro-runtime": "~3.1.1", "@formatjs/intl-datetimeformat": "^6.10.0", "@formatjs/intl-listformat": "^7.2.2", From da3a7fa95c012fc1a4c49673968995b90ad40290 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Wed, 3 Apr 2024 18:16:02 +0200 Subject: [PATCH 3/8] Add live markdown to new task description page --- src/pages/tasks/NewTaskDescriptionPage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/tasks/NewTaskDescriptionPage.tsx b/src/pages/tasks/NewTaskDescriptionPage.tsx index a5eb79497707..95d831859929 100644 --- a/src/pages/tasks/NewTaskDescriptionPage.tsx +++ b/src/pages/tasks/NewTaskDescriptionPage.tsx @@ -89,6 +89,7 @@ function NewTaskDescriptionPage({task}: NewTaskDescriptionPageProps) { autoGrowHeight shouldSubmitForm containerStyles={styles.autoGrowHeightMultilineInput} + liveMarkdown /> From d82b1c02326f17915257fe8a9f17572a75486b92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Thu, 4 Apr 2024 14:34:19 +0200 Subject: [PATCH 4/8] Change markdown enabling prop name --- src/components/TextInput/BaseTextInput/index.tsx | 4 ++-- src/components/TextInput/BaseTextInput/types.ts | 3 ++- src/pages/tasks/NewTaskDescriptionPage.tsx | 2 +- src/pages/tasks/NewTaskDetailsPage.tsx | 2 +- src/pages/tasks/TaskDescriptionPage.tsx | 1 + 5 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/index.tsx b/src/components/TextInput/BaseTextInput/index.tsx index 64997f7be178..165c4b6ef0b1 100644 --- a/src/components/TextInput/BaseTextInput/index.tsx +++ b/src/components/TextInput/BaseTextInput/index.tsx @@ -60,12 +60,12 @@ function BaseTextInput( autoCorrect = true, prefixCharacter = '', inputID, - liveMarkdown = false, + markdownEnabled = false, ...inputProps }: BaseTextInputProps, ref: ForwardedRef, ) { - const InputComponent = liveMarkdown ? RNMarkdownTextInput : RNTextInput; + const InputComponent = markdownEnabled ? RNMarkdownTextInput : RNTextInput; const theme = useTheme(); const styles = useThemeStyles(); diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts index baf0014d474d..c38f38a1697d 100644 --- a/src/components/TextInput/BaseTextInput/types.ts +++ b/src/components/TextInput/BaseTextInput/types.ts @@ -105,7 +105,8 @@ type CustomBaseTextInputProps = { /** Type of autocomplete */ autoCompleteType?: string; - liveMarkdown?: boolean; + /** Should live markdown be enabled. Changes RNTextInput component to RNMarkdownTextInput */ + markdownEnabled?: boolean; }; type BaseTextInputRef = HTMLFormElement | AnimatedTextInputRef; diff --git a/src/pages/tasks/NewTaskDescriptionPage.tsx b/src/pages/tasks/NewTaskDescriptionPage.tsx index 95d831859929..13708267fc8b 100644 --- a/src/pages/tasks/NewTaskDescriptionPage.tsx +++ b/src/pages/tasks/NewTaskDescriptionPage.tsx @@ -89,7 +89,7 @@ function NewTaskDescriptionPage({task}: NewTaskDescriptionPageProps) { autoGrowHeight shouldSubmitForm containerStyles={styles.autoGrowHeightMultilineInput} - liveMarkdown + markdownEnabled /> diff --git a/src/pages/tasks/NewTaskDetailsPage.tsx b/src/pages/tasks/NewTaskDetailsPage.tsx index 6ad6c4e5598f..4c16734ae0e7 100644 --- a/src/pages/tasks/NewTaskDetailsPage.tsx +++ b/src/pages/tasks/NewTaskDetailsPage.tsx @@ -117,7 +117,7 @@ function NewTaskDetailsPage({task}: NewTaskDetailsPageProps) { defaultValue={parser.htmlToMarkdown(parser.replace(taskDescription))} value={taskDescription} onValueChange={setTaskDescription} - liveMarkdown + markdownEnabled /> diff --git a/src/pages/tasks/TaskDescriptionPage.tsx b/src/pages/tasks/TaskDescriptionPage.tsx index ffc3d5880bba..24ea13e9987c 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]} + markdownEnabled /> From cb7ae41d0bc4f840643cbf3f711707646994d0ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Thu, 4 Apr 2024 15:08:53 +0200 Subject: [PATCH 5/8] Update Podfile --- ios/Podfile.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 24ef0704be25..ca867240e5d3 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -1363,7 +1363,7 @@ PODS: - RNGoogleSignin (10.0.1): - GoogleSignIn (~> 7.0) - React-Core - - RNLiveMarkdown (0.1.35): + - RNLiveMarkdown (0.1.37): - glog - RCT-Folly (= 2022.05.16.00) - React-Core @@ -1904,7 +1904,7 @@ SPEC CHECKSUMS: RNFS: 4ac0f0ea233904cb798630b3c077808c06931688 RNGestureHandler: 25b969a1ffc806b9f9ad2e170d4a3b049c6af85e RNGoogleSignin: ccaa4a81582cf713eea562c5dd9dc1961a715fd0 - RNLiveMarkdown: aaf5afb231515d8ddfdef5f2928581e8ff606ad4 + RNLiveMarkdown: 2f3bb37f2ca85a5bfb841be155a9e3ce502aaf53 RNLocalize: d4b8af4e442d4bcca54e68fc687a2129b4d71a81 rnmapbox-maps: fcf7f1cbdc8bd7569c267d07284e8a5c7bee06ed RNPermissions: 9b086c8f05b2e2faa587fdc31f4c5ab4509728aa From 77813bb557245eb13f009767ab09964cde9a3365 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Fri, 5 Apr 2024 12:08:15 +0200 Subject: [PATCH 6/8] Enable live markdown in native BaseTextInput --- .../TextInput/BaseTextInput/index.native.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/index.native.tsx b/src/components/TextInput/BaseTextInput/index.native.tsx index e7f4507df7c6..864c83d07cc7 100644 --- a/src/components/TextInput/BaseTextInput/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/index.native.tsx @@ -8,6 +8,9 @@ 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'; @@ -54,10 +57,13 @@ function BaseTextInput( autoCorrect = true, prefixCharacter = '', inputID, + markdownEnabled = false, ...props }: BaseTextInputProps, ref: ForwardedRef, ) { + const InputComponent = markdownEnabled ? RNMarkdownTextInput : RNTextInput; + const inputProps = {shouldSaveDraft: false, shouldUseDefaultValue: false, ...props}; const theme = useTheme(); const styles = useThemeStyles(); @@ -321,13 +327,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; From bf7ccedc641b0015af72b8bb364fabdd2f1432a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Wed, 10 Apr 2024 11:16:32 +0200 Subject: [PATCH 7/8] Add markdown styles on native platforms --- src/components/TextInput/BaseTextInput/index.native.tsx | 3 +++ src/components/TextInput/BaseTextInput/index.tsx | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/TextInput/BaseTextInput/index.native.tsx b/src/components/TextInput/BaseTextInput/index.native.tsx index 864c83d07cc7..9b25fbbba60e 100644 --- a/src/components/TextInput/BaseTextInput/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/index.native.tsx @@ -16,6 +16,7 @@ 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'; @@ -67,6 +68,7 @@ function BaseTextInput( const inputProps = {shouldSaveDraft: false, shouldUseDefaultValue: false, ...props}; const theme = useTheme(); const styles = useThemeStyles(); + const markdownStyle = useMarkdownStyle(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); @@ -377,6 +379,7 @@ function BaseTextInput( selection={inputProps.selection} readOnly={isReadOnly} defaultValue={defaultValue} + markdownStyle={markdownStyle} /> {inputProps.isLoading && ( (null); const isLabelActive = useRef(initialActiveLabel); - const markdownStyle = useMarkdownStyle(); // AutoFocus which only works on mount: useEffect(() => { From a0cd3d781caf5c8cab3cce216d31c3073785eeca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Fri, 12 Apr 2024 10:39:37 +0200 Subject: [PATCH 8/8] Change prop name --- src/components/TextInput/BaseTextInput/index.native.tsx | 4 ++-- src/components/TextInput/BaseTextInput/index.tsx | 4 ++-- src/components/TextInput/BaseTextInput/types.ts | 2 +- src/pages/tasks/NewTaskDescriptionPage.tsx | 2 +- src/pages/tasks/NewTaskDetailsPage.tsx | 2 +- src/pages/tasks/TaskDescriptionPage.tsx | 2 +- 6 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/index.native.tsx b/src/components/TextInput/BaseTextInput/index.native.tsx index 9b25fbbba60e..3039d7327d37 100644 --- a/src/components/TextInput/BaseTextInput/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/index.native.tsx @@ -58,12 +58,12 @@ function BaseTextInput( autoCorrect = true, prefixCharacter = '', inputID, - markdownEnabled = false, + isMarkdownEnabled = false, ...props }: BaseTextInputProps, ref: ForwardedRef, ) { - const InputComponent = markdownEnabled ? RNMarkdownTextInput : RNTextInput; + const InputComponent = isMarkdownEnabled ? RNMarkdownTextInput : RNTextInput; const inputProps = {shouldSaveDraft: false, shouldUseDefaultValue: false, ...props}; const theme = useTheme(); diff --git a/src/components/TextInput/BaseTextInput/index.tsx b/src/components/TextInput/BaseTextInput/index.tsx index 02f6a383cce0..519a52fd85ec 100644 --- a/src/components/TextInput/BaseTextInput/index.tsx +++ b/src/components/TextInput/BaseTextInput/index.tsx @@ -60,12 +60,12 @@ function BaseTextInput( autoCorrect = true, prefixCharacter = '', inputID, - markdownEnabled = false, + isMarkdownEnabled = false, ...inputProps }: BaseTextInputProps, ref: ForwardedRef, ) { - const InputComponent = markdownEnabled ? RNMarkdownTextInput : RNTextInput; + const InputComponent = isMarkdownEnabled ? RNMarkdownTextInput : RNTextInput; const theme = useTheme(); const styles = useThemeStyles(); diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts index c38f38a1697d..1529fbe4c7c6 100644 --- a/src/components/TextInput/BaseTextInput/types.ts +++ b/src/components/TextInput/BaseTextInput/types.ts @@ -106,7 +106,7 @@ type CustomBaseTextInputProps = { autoCompleteType?: string; /** Should live markdown be enabled. Changes RNTextInput component to RNMarkdownTextInput */ - markdownEnabled?: boolean; + isMarkdownEnabled?: boolean; }; type BaseTextInputRef = HTMLFormElement | AnimatedTextInputRef; diff --git a/src/pages/tasks/NewTaskDescriptionPage.tsx b/src/pages/tasks/NewTaskDescriptionPage.tsx index 13708267fc8b..e33241c52f4a 100644 --- a/src/pages/tasks/NewTaskDescriptionPage.tsx +++ b/src/pages/tasks/NewTaskDescriptionPage.tsx @@ -89,7 +89,7 @@ function NewTaskDescriptionPage({task}: NewTaskDescriptionPageProps) { autoGrowHeight shouldSubmitForm containerStyles={styles.autoGrowHeightMultilineInput} - markdownEnabled + isMarkdownEnabled /> diff --git a/src/pages/tasks/NewTaskDetailsPage.tsx b/src/pages/tasks/NewTaskDetailsPage.tsx index 4c16734ae0e7..9e857b22c5c4 100644 --- a/src/pages/tasks/NewTaskDetailsPage.tsx +++ b/src/pages/tasks/NewTaskDetailsPage.tsx @@ -117,7 +117,7 @@ function NewTaskDetailsPage({task}: NewTaskDetailsPageProps) { defaultValue={parser.htmlToMarkdown(parser.replace(taskDescription))} value={taskDescription} onValueChange={setTaskDescription} - markdownEnabled + isMarkdownEnabled /> diff --git a/src/pages/tasks/TaskDescriptionPage.tsx b/src/pages/tasks/TaskDescriptionPage.tsx index 24ea13e9987c..9abe15a5bb80 100644 --- a/src/pages/tasks/TaskDescriptionPage.tsx +++ b/src/pages/tasks/TaskDescriptionPage.tsx @@ -120,7 +120,7 @@ function TaskDescriptionPage({report, currentUserPersonalDetails}: TaskDescripti autoGrowHeight shouldSubmitForm containerStyles={[styles.autoGrowHeightMultilineInput]} - markdownEnabled + isMarkdownEnabled />