From dd6e0b307e0f2ff65581809151a0b6c1912621d6 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 5 Apr 2024 15:33:11 +0700 Subject: [PATCH 1/3] Add markdown for workspace description --- src/components/TextInput/BaseTextInput/index.tsx | 12 ++++++++++-- src/components/TextInput/BaseTextInput/types.ts | 6 +++++- .../workspace/WorkspaceProfileDescriptionPage.tsx | 1 + 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/index.tsx b/src/components/TextInput/BaseTextInput/index.tsx index 9681f7e7fde5..5f80ef0a2260 100644 --- a/src/components/TextInput/BaseTextInput/index.tsx +++ b/src/components/TextInput/BaseTextInput/index.tsx @@ -8,12 +8,14 @@ import FormHelpMessage from '@components/FormHelpMessage'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; +import RNMarkdownTextInput from '@components/RNMarkdownTextInput'; 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 +58,13 @@ function BaseTextInput( autoCorrect = true, prefixCharacter = '', inputID, + shouldEnableMarkdown = false, ...inputProps }: BaseTextInputProps, ref: ForwardedRef, ) { + const InputComponent = shouldEnableMarkdown ? RNMarkdownTextInput : RNTextInput; + const theme = useTheme(); const styles = useThemeStyles(); const {hasError = false} = inputProps; @@ -82,6 +87,8 @@ function BaseTextInput( const input = useRef(null); const isLabelActive = useRef(initialActiveLabel); + const markdownStyle = useMarkdownStyle(); + // AutoFocus which only works on mount: useEffect(() => { // We are manually managing focus to prevent this issue: https://github.com/Expensify/App/issues/4514 @@ -341,8 +348,8 @@ function BaseTextInput( )} - { + { if (typeof ref === 'function') { ref(element); } else if (ref && 'current' in ref) { @@ -396,6 +403,7 @@ function BaseTextInput( selection={inputProps.selection} readOnly={isReadOnly} defaultValue={defaultValue} + markdownStyle={markdownStyle} /> {inputProps.isLoading && ( { updateMultilineInputRange(el); }} From faeba252b9be8cec5ec6e28f5f85f04f90b5308c Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 5 Apr 2024 15:46:48 +0700 Subject: [PATCH 2/3] Add native markdown textinput --- .../TextInput/BaseTextInput/index.native.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/index.native.tsx b/src/components/TextInput/BaseTextInput/index.native.tsx index e7f4507df7c6..5e539aba9d7e 100644 --- a/src/components/TextInput/BaseTextInput/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/index.native.tsx @@ -21,6 +21,8 @@ import isInputAutoFilled from '@libs/isInputAutoFilled'; import useNativeDriver from '@libs/useNativeDriver'; import variables from '@styles/variables'; import CONST from '@src/CONST'; +import RNMarkdownTextInput from '@components/RNMarkdownTextInput'; +import useMarkdownStyle from '@hooks/useMarkdownStyle'; import type {BaseTextInputProps, BaseTextInputRef} from './types'; function BaseTextInput( @@ -54,6 +56,7 @@ function BaseTextInput( autoCorrect = true, prefixCharacter = '', inputID, + shouldEnableMarkdown = false, ...props }: BaseTextInputProps, ref: ForwardedRef, @@ -63,6 +66,7 @@ function BaseTextInput( const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); + const InputComponent = shouldEnableMarkdown ? RNMarkdownTextInput : RNTextInput; const {hasError = false} = inputProps; // Disabling this line for safeness as nullish coalescing works only if the value is undefined or null @@ -82,6 +86,8 @@ function BaseTextInput( const input = useRef(null); const isLabelActive = useRef(initialActiveLabel); + const markdownStyle = useMarkdownStyle(); + // AutoFocus which only works on mount: useEffect(() => { // We are manually managing focus to prevent this issue: https://github.com/Expensify/App/issues/4514 @@ -321,8 +327,8 @@ function BaseTextInput( )} - { + { if (typeof ref === 'function') { ref(element); } else if (ref && 'current' in ref) { @@ -330,7 +336,7 @@ function BaseTextInput( ref.current = element; } - input.current = element; + input.current = element as TextInput | null; }} // eslint-disable-next-line {...inputProps} @@ -370,6 +376,7 @@ function BaseTextInput( selection={inputProps.selection} readOnly={isReadOnly} defaultValue={defaultValue} + markdownStyle={markdownStyle} /> {inputProps.isLoading && ( Date: Fri, 12 Apr 2024 23:20:06 +0700 Subject: [PATCH 3/3] fix lint --- src/components/TextInput/BaseTextInput/index.native.tsx | 2 +- src/components/TextInput/BaseTextInput/index.tsx | 2 +- src/components/TextInput/BaseTextInput/types.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/index.native.tsx b/src/components/TextInput/BaseTextInput/index.native.tsx index 7c8e99ad4cca..3039d7327d37 100644 --- a/src/components/TextInput/BaseTextInput/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/index.native.tsx @@ -456,4 +456,4 @@ function BaseTextInput( BaseTextInput.displayName = 'BaseTextInput'; -export default forwardRef(BaseTextInput); \ No newline at end of file +export default forwardRef(BaseTextInput); diff --git a/src/components/TextInput/BaseTextInput/index.tsx b/src/components/TextInput/BaseTextInput/index.tsx index f1fbec354bbb..519a52fd85ec 100644 --- a/src/components/TextInput/BaseTextInput/index.tsx +++ b/src/components/TextInput/BaseTextInput/index.tsx @@ -487,4 +487,4 @@ function BaseTextInput( BaseTextInput.displayName = 'BaseTextInput'; -export default forwardRef(BaseTextInput); \ No newline at end of file +export default forwardRef(BaseTextInput); diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts index b58530b96254..1529fbe4c7c6 100644 --- a/src/components/TextInput/BaseTextInput/types.ts +++ b/src/components/TextInput/BaseTextInput/types.ts @@ -113,4 +113,4 @@ type BaseTextInputRef = HTMLFormElement | AnimatedTextInputRef; type BaseTextInputProps = CustomBaseTextInputProps & TextInputProps; -export type {BaseTextInputProps, BaseTextInputRef, CustomBaseTextInputProps}; \ No newline at end of file +export type {BaseTextInputProps, BaseTextInputRef, CustomBaseTextInputProps};