Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement Live Markdown for task descriptions #39519

Merged
merged 11 commits into from
Apr 12, 2024
Merged

Implement Live Markdown for task descriptions #39519

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
699a61a
Enable live markdown in form text inputs
Skalakid Apr 3, 2024
1f331cd
Bump react-native-live-markdown version to fix onSubmitEditing prop
Skalakid Apr 3, 2024
da3a7fa
Add live markdown to new task description page
Skalakid Apr 3, 2024
d82b1c0
Change markdown enabling prop name
Skalakid Apr 4, 2024
2e6e9e3
Merge branch 'main' into @Skalakid/new-task-page-live-markdown
Skalakid Apr 4, 2024
cb7ae41
Update Podfile
Skalakid Apr 4, 2024
17cd16e
Merge branch 'main' into @Skalakid/new-task-page-live-markdown
Skalakid Apr 5, 2024
77813bb
Enable live markdown in native BaseTextInput
Skalakid Apr 5, 2024
a47a00b
Merge branch 'main' into @Skalakid/new-task-page-live-markdown
Skalakid Apr 10, 2024
bf7cced
Add markdown styles on native platforms
Skalakid Apr 10, 2024
a0cd3d7
Change prop name
Skalakid Apr 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 14 additions & 4 deletions src/components/TextInput/BaseTextInput/index.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -54,13 +58,17 @@ function BaseTextInput(
autoCorrect = true,
prefixCharacter = '',
inputID,
isMarkdownEnabled = false,
...props
}: BaseTextInputProps,
ref: ForwardedRef<BaseTextInputRef>,
) {
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();

Expand Down Expand Up @@ -321,13 +329,14 @@ function BaseTextInput(
</Text>
</View>
)}
<RNTextInput
ref={(element) => {
<InputComponent
ref={(element: AnimatedTextInputRef | AnimatedMarkdownTextInputRef | null): void => {
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;
Expand Down Expand Up @@ -370,6 +379,7 @@ function BaseTextInput(
selection={inputProps.selection}
readOnly={isReadOnly}
defaultValue={defaultValue}
markdownStyle={markdownStyle}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Markdown does not grow correctly in room descriptions resulting in half cut lines, ref: #48281

/>
{inputProps.isLoading && (
<ActivityIndicator
Expand Down
18 changes: 14 additions & 4 deletions src/components/TextInput/BaseTextInput/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -56,12 +60,16 @@ function BaseTextInput(
autoCorrect = true,
prefixCharacter = '',
inputID,
isMarkdownEnabled = false,
...inputProps
}: BaseTextInputProps,
ref: ForwardedRef<BaseTextInputRef>,
) {
const InputComponent = isMarkdownEnabled ? RNMarkdownTextInput : RNTextInput;

const theme = useTheme();
const styles = useThemeStyles();
const markdownStyle = useMarkdownStyle();
const {hasError = false} = inputProps;
const StyleUtils = useStyleUtils();
const {translate} = useLocalize();
Expand Down Expand Up @@ -341,13 +349,14 @@ function BaseTextInput(
</Text>
</View>
)}
<RNTextInput
ref={(element) => {
<InputComponent
ref={(element: AnimatedTextInputRef | AnimatedMarkdownTextInputRef | null): void => {
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;
Expand Down Expand Up @@ -396,6 +405,7 @@ function BaseTextInput(
selection={inputProps.selection}
readOnly={isReadOnly}
defaultValue={defaultValue}
markdownStyle={markdownStyle}
/>
{inputProps.isLoading && (
<ActivityIndicator
Expand Down
3 changes: 3 additions & 0 deletions src/components/TextInput/BaseTextInput/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,9 @@ type CustomBaseTextInputProps = {

/** Type of autocomplete */
autoCompleteType?: string;

/** Should live markdown be enabled. Changes RNTextInput component to RNMarkdownTextInput */
isMarkdownEnabled?: boolean;
};

type BaseTextInputRef = HTMLFormElement | AnimatedTextInputRef;
Expand Down
1 change: 1 addition & 0 deletions src/pages/tasks/NewTaskDescriptionPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ function NewTaskDescriptionPage({task}: NewTaskDescriptionPageProps) {
autoGrowHeight
shouldSubmitForm
containerStyles={styles.autoGrowHeightMultilineInput}
isMarkdownEnabled
/>
</View>
</FormProvider>
Expand Down
1 change: 1 addition & 0 deletions src/pages/tasks/NewTaskDetailsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@ function NewTaskDetailsPage({task}: NewTaskDetailsPageProps) {
defaultValue={parser.htmlToMarkdown(parser.replace(taskDescription))}
value={taskDescription}
onValueChange={setTaskDescription}
isMarkdownEnabled
/>
</View>
</FormProvider>
Expand Down
1 change: 1 addition & 0 deletions src/pages/tasks/TaskDescriptionPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ function TaskDescriptionPage({report, currentUserPersonalDetails}: TaskDescripti
autoGrowHeight
shouldSubmitForm
containerStyles={[styles.autoGrowHeightMultilineInput]}
isMarkdownEnabled
/>
</View>
</FormProvider>
Expand Down
Loading