Markdown in task titles

src/CONST.ts

@@ -3429,6 +3429,7 @@ const CONST = {
     WORKSPACE_REPORT_FIELD_POLICY_MAX_LENGTH: 256,
     REPORT_NAME_LIMIT: 100,
     TITLE_CHARACTER_LIMIT: 100,
+    TASK_TITLE_CHARACTER_LIMIT: 10000,
     DESCRIPTION_LIMIT: 1000,
     SEARCH_QUERY_LIMIT: 1000,
     WORKSPACE_NAME_CHARACTER_LIMIT: 80,

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.tsx

@@ -9,15 +9,27 @@ import Tooltip from '@components/Tooltip';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import CONST from '@src/CONST';
 import type {BaseAnchorForCommentsOnlyProps, LinkProps} from './types';
 
 /*
  * This is a default anchor component for regular links.
  */
-function BaseAnchorForCommentsOnly({onPressIn, onPressOut, href = '', rel = '', target = '', children = null, style, onPress, linkHasImage, ...rest}: BaseAnchorForCommentsOnlyProps) {
+function BaseAnchorForCommentsOnly({
+    onPressIn,
+    onPressOut,
+    href = '',
+    rel = '',
+    target = '',
+    children = null,
+    style,
+    onPress,
+    linkHasImage,
+    wrapperStyle,
+    ...rest
+}: BaseAnchorForCommentsOnlyProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const linkRef = useRef<RNText>(null);
@@ -38,7 +50,7 @@ function BaseAnchorForCommentsOnly({onPressIn, onPressOut, href = '', rel = '',
     } else {
         linkProps.href = href;
     }
-    const defaultTextStyle = DeviceCapabilities.canUseTouchScreen() || shouldUseNarrowLayout ? {} : {...styles.userSelectText, ...styles.cursorPointer};
+    const defaultTextStyle = canUseTouchScreen() || shouldUseNarrowLayout ? {} : {...styles.userSelectText, ...styles.cursorPointer};
     const isEmail = Str.isValidEmail(href.replace(/mailto:/i, ''));
     const linkHref = !linkHasImage ? href : undefined;
 
@@ -62,6 +74,7 @@ function BaseAnchorForCommentsOnly({onPressIn, onPressOut, href = '', rel = '',
             onPressOut={onPressOut}
             role={CONST.ROLE.LINK}
             accessibilityLabel={href}
+            wrapperStyle={wrapperStyle}
         >
             <Tooltip text={linkHref}>
                 <Text

src/components/AnchorForCommentsOnly/types.ts

@@ -1,4 +1,4 @@
-import type {StyleProp, TextStyle} from 'react-native';
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
 type AnchorForCommentsOnlyProps = ChildrenProps & {
@@ -16,6 +16,9 @@ type AnchorForCommentsOnlyProps = ChildrenProps & {
     /** Any additional styles to apply */
     style: StyleProp<TextStyle>;
 
+    /** Any additional styles to apply to the wrapper */
+    wrapperStyle?: StyleProp<ViewStyle>;
+
     /** Press handler for the link, when not passed, default href is used to create a link like behaviour */
     onPress?: () => void;
 

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

@@ -32,6 +32,11 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
                 tagName: 'edited',
                 contentModel: HTMLContentModel.textual,
             }),
+            'task-title': HTMLElementModel.fromCustomModel({
+                tagName: 'task-title',
+                contentModel: HTMLContentModel.block,
+                mixedUAStyles: {...styles.taskTitleMenuItem},
+            }),
             'alert-text': HTMLElementModel.fromCustomModel({
                 tagName: 'alert-text',
                 mixedUAStyles: {...styles.formError, ...styles.mb0},
@@ -119,6 +124,7 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
             styles.mutedNormalTextLabel,
             styles.onlyEmojisText,
             styles.onlyEmojisTextLineHeight,
+            styles.taskTitleMenuItem,
         ],
     );
     /* eslint-enable @typescript-eslint/naming-convention */

src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.tsx

@@ -8,8 +8,8 @@ import * as HTMLEngineUtils from '@components/HTMLEngineProvider/htmlEngineUtils
 import Text from '@components/Text';
 import useEnvironment from '@hooks/useEnvironment';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {getInternalExpensifyPath, getInternalNewExpensifyPath, openLink} from '@libs/actions/Link';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
-import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
 
 type AnchorRendererProps = CustomRendererProps<TBlock> & {
@@ -27,22 +27,24 @@ function AnchorRenderer({tnode, style, key}: AnchorRendererProps) {
     const displayName = tNodeChild && 'data' in tNodeChild && typeof tNodeChild.data === 'string' ? tNodeChild.data : '';
     const attrHref = htmlAttribs.href || htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE] || '';
     const parentStyle = tnode.parent?.styles?.nativeTextRet ?? {};
-    const internalNewExpensifyPath = Link.getInternalNewExpensifyPath(attrHref);
-    const internalExpensifyPath = Link.getInternalExpensifyPath(attrHref);
+    const internalNewExpensifyPath = getInternalNewExpensifyPath(attrHref);
+    const internalExpensifyPath = getInternalExpensifyPath(attrHref);
     const isVideo = attrHref && Str.isVideo(attrHref);
     const linkHasImage = tnode.tagName === 'a' && tnode.children.some((child) => child.tagName === 'img');
 
     const isDeleted = HTMLEngineUtils.isDeletedNode(tnode);
+    const isChildOfTaskTitle = HTMLEngineUtils.isChildOfTaskTitle(tnode);
+
     const textDecorationLineStyle = isDeleted ? styles.underlineLineThrough : {};
 
-    if (!HTMLEngineUtils.isChildOfComment(tnode)) {
+    if (!HTMLEngineUtils.isChildOfComment(tnode) && !isChildOfTaskTitle) {
         // This is not a comment from a chat, the AnchorForCommentsOnly uses a Pressable to create a context menu on right click.
         // We don't have this behaviour in other links in NewDot
         // TODO: We should use TextLink, but I'm leaving it as Text for now because TextLink breaks the alignment in Android.
         return (
             <Text
                 style={styles.link}
-                onPress={() => Link.openLink(attrHref, environmentURL, isAttachment)}
+                onPress={() => openLink(attrHref, environmentURL, isAttachment)}
                 suppressHighlighting
             >
                 <TNodeChildrenRenderer tnode={tnode} />
@@ -70,10 +72,10 @@ function AnchorRenderer({tnode, style, key}: AnchorRendererProps) {
             // eslint-disable-next-line react/jsx-props-no-multi-spaces
             target={htmlAttribs.target || '_blank'}
             rel={htmlAttribs.rel || 'noopener noreferrer'}
-            style={[style, parentStyle, textDecorationLineStyle, styles.textUnderlinePositionUnder, styles.textDecorationSkipInkNone]}
+            style={[style, parentStyle, textDecorationLineStyle, styles.textUnderlinePositionUnder, styles.textDecorationSkipInkNone, isChildOfTaskTitle && styles.taskTitleMenuItem]}
             key={key}
             // Only pass the press handler for internal links. For public links or whitelisted internal links fallback to default link handling
-            onPress={internalNewExpensifyPath || internalExpensifyPath ? () => Link.openLink(attrHref, environmentURL, isAttachment) : undefined}
+            onPress={internalNewExpensifyPath || internalExpensifyPath ? () => openLink(attrHref, environmentURL, isAttachment) : undefined}
             linkHasImage={linkHasImage}
         >
             <TNodeChildrenRenderer

src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.tsx

@@ -22,8 +22,9 @@ function CodeRenderer({TDefaultRenderer, key, style, ...defaultRendererProps}: C
 
     // Determine the font size for the code based on whether it's inside an H1 element.
     const isInsideH1 = HTMLEngineUtils.isChildOfH1(defaultRendererProps.tnode);
+    const isInsideTaskTitle = HTMLEngineUtils.isChildOfTaskTitle(defaultRendererProps.tnode);
 
-    const fontSize = StyleUtils.getCodeFontSize(isInsideH1);
+    const fontSize = StyleUtils.getCodeFontSize(isInsideH1, isInsideTaskTitle);
 
     const textStyleOverride = {
         fontSize,

src/components/HTMLEngineProvider/HTMLRenderers/EMRenderer.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html';
+import {TNodeChildrenRenderer} from 'react-native-render-html';
+import * as HTMLEngineUtils from '@components/HTMLEngineProvider/htmlEngineUtils';
+import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+function EMRenderer({tnode}: CustomRendererProps<TText | TPhrasing>) {
+    const styles = useThemeStyles();
+    const isChildOfTaskTitle = HTMLEngineUtils.isChildOfTaskTitle(tnode);
+
+    return 'data' in tnode ? (
+        <Text style={[styles.webViewStyles.baseFontStyle, styles.webViewStyles.tagStyles.em, isChildOfTaskTitle && styles.taskTitleMenuItemItalic]}>{tnode.data}</Text>
+    ) : (
+        <TNodeChildrenRenderer
+            tnode={tnode}
+            renderChild={(props) => {
+                return (
+                    <Text
+                        style={[styles.webViewStyles.baseFontStyle, styles.strong, isChildOfTaskTitle && styles.taskTitleMenuItem]}
+                        key={props.key}
+                    >
+                        {props.childElement}
+                    </Text>
+                );
+            }}
+        />
+    );
+}
+
+EMRenderer.displayName = 'EMRenderer';
+
+export default EMRenderer;

src/components/HTMLEngineProvider/HTMLRenderers/HeadingRenderer.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html';
+import {TNodeChildrenRenderer} from 'react-native-render-html';
+import * as HTMLEngineUtils from '@components/HTMLEngineProvider/htmlEngineUtils';
+import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+function HeadingRenderer({tnode}: CustomRendererProps<TText | TPhrasing>) {
+    const styles = useThemeStyles();
+    const isChildOfTaskTitle = HTMLEngineUtils.isChildOfTaskTitle(tnode);
+
+    return (
+        <TNodeChildrenRenderer
+            tnode={tnode}
+            renderChild={(props) => {
+                return (
+                    <Text
+                        style={[styles.webViewStyles.baseFontStyle, styles.h1, isChildOfTaskTitle && styles.taskTitleMenuItem]}
+                        key={props.key}
+                    >
+                        {props.childElement}
+                    </Text>
+                );
+            }}
+        />
+    );
+}
+
+HeadingRenderer.displayName = 'HeadingRenderer';
+
+export default HeadingRenderer;

src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.tsx

@@ -2,11 +2,14 @@ import React from 'react';
 import {View} from 'react-native';
 import type {GestureResponderEvent} from 'react-native';
 import type {CustomRendererProps, TBlock} from 'react-native-render-html';
+import * as HTMLEngineUtils from '@components/HTMLEngineProvider/htmlEngineUtils';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext';
+import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as ReportUtils from '@libs/ReportUtils';
+import {isArchivedNonExpenseReport} from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 
 type PreRendererProps = CustomRendererProps<TBlock> & {
@@ -28,9 +31,13 @@ type PreRendererProps = CustomRendererProps<TBlock> & {
 
 function PreRenderer({TDefaultRenderer, onPressIn, onPressOut, onLongPress, ...defaultRendererProps}: PreRendererProps) {
     const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const isLast = defaultRendererProps.renderIndex === defaultRendererProps.renderLength - 1;
 
+    const isInsideTaskTitle = HTMLEngineUtils.isChildOfTaskTitle(defaultRendererProps.tnode);
+    const fontSize = StyleUtils.getCodeFontSize(false, isInsideTaskTitle);
+
     return (
         <View style={isLast ? styles.mt2 : styles.mv2}>
             <ShowContextMenuContext.Consumer>
@@ -43,15 +50,17 @@ function PreRenderer({TDefaultRenderer, onPressIn, onPressOut, onLongPress, ...d
                             if (isDisabled) {
                                 return;
                             }
-                            showContextMenuForReport(event, anchor, report?.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedNonExpenseReport(report, reportNameValuePairs));
+                            showContextMenuForReport(event, anchor, report?.reportID, action, checkIfContextMenuActive, isArchivedNonExpenseReport(report, reportNameValuePairs));
                         }}
                         shouldUseHapticsOnLongPress
                         role={CONST.ROLE.PRESENTATION}
                         accessibilityLabel={translate('accessibilityHints.prestyledText')}
                     >
                         <View>
-                            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-                            <TDefaultRenderer {...defaultRendererProps} />
+                            <Text style={{fontSize}}>
+                                {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+                                <TDefaultRenderer {...defaultRendererProps} />
+                            </Text>
                         </View>
                     </PressableWithoutFeedback>
                 )}

src/components/HTMLEngineProvider/HTMLRenderers/StrongRenderer.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html';
+import {TNodeChildrenRenderer} from 'react-native-render-html';
+import * as HTMLEngineUtils from '@components/HTMLEngineProvider/htmlEngineUtils';
+import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+function StrongRenderer({tnode}: CustomRendererProps<TText | TPhrasing>) {
+    const styles = useThemeStyles();
+    const isChildOfTaskTitle = HTMLEngineUtils.isChildOfTaskTitle(tnode);
+
+    return 'data' in tnode ? (
+        <Text style={[styles.webViewStyles.baseFontStyle, styles.strong, isChildOfTaskTitle && styles.taskTitleMenuItem]}>{tnode.data}</Text>
+    ) : (
+        <TNodeChildrenRenderer
+            tnode={tnode}
+            renderChild={(props) => {
+                return (
+                    <Text
+                        style={[styles.webViewStyles.baseFontStyle, styles.strong, isChildOfTaskTitle && styles.taskTitleMenuItem]}
+                        key={props.key}
+                    >
+                        {props.childElement}
+                    </Text>
+                );
+            }}
+        />
+    );
+}
+
+StrongRenderer.displayName = 'StrongRenderer';
+
+export default StrongRenderer;

src/components/HTMLEngineProvider/HTMLRenderers/TaskTitleRenderer.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html';
+import {TNodeChildrenRenderer} from 'react-native-render-html';
+import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+function TaskTitleRenderer({tnode}: CustomRendererProps<TText | TPhrasing>) {
+    const styles = useThemeStyles();
+
+    return (
+        <TNodeChildrenRenderer
+            tnode={tnode}
+            renderChild={(props) => {
+                return (
+                    <Text
+                        style={[styles.taskTitleMenuItem]}
+                        key={props.key}
+                    >
+                        {props.childElement}
+                    </Text>
+                );
+            }}
+        />
+    );
+}
+
+TaskTitleRenderer.displayName = 'TaskTitleRenderer';
+
+export default TaskTitleRenderer;

src/components/HTMLEngineProvider/HTMLRenderers/index.ts

@@ -4,12 +4,16 @@ import CodeRenderer from './CodeRenderer';
 import DeletedActionRenderer from './DeletedActionRenderer';
 import EditedRenderer from './EditedRenderer';
 import EmojiRenderer from './EmojiRenderer';
+import EMRenderer from './EMRenderer';
+import HeadingRenderer from './HeadingRenderer';
 import ImageRenderer from './ImageRenderer';
 import MentionHereRenderer from './MentionHereRenderer';
 import MentionReportRenderer from './MentionReportRenderer';
 import MentionUserRenderer from './MentionUserRenderer';
 import NextStepEmailRenderer from './NextStepEmailRenderer';
 import PreRenderer from './PreRenderer';
+import StrongRenderer from './StrongRenderer';
+import TaskTitleRenderer from './TaskTitleRenderer';
 import VideoRenderer from './VideoRenderer';
 
 /**
@@ -21,11 +25,15 @@ const HTMLEngineProviderComponentList: CustomTagRendererRecord = {
     code: CodeRenderer,
     img: ImageRenderer,
     video: VideoRenderer,
+    h1: HeadingRenderer,
+    strong: StrongRenderer,
+    em: EMRenderer,
 
     // Custom tag renderers
     edited: EditedRenderer,
     pre: PreRenderer,
     /* eslint-disable @typescript-eslint/naming-convention */
+    'task-title': TaskTitleRenderer,
     'mention-user': MentionUserRenderer,
     'mention-report': MentionReportRenderer,
     'mention-here': MentionHereRenderer,

src/components/HTMLEngineProvider/htmlEngineUtils.ts

@@ -59,6 +59,10 @@ function isChildOfH1(tnode: TNode): boolean {
     return isChildOfNode(tnode, (node) => node.domNode?.name !== undefined && node.domNode.name.toLowerCase() === 'h1');
 }
 
+function isChildOfTaskTitle(tnode: TNode): boolean {
+    return isChildOfNode(tnode, (node) => node.domNode?.name !== undefined && node.domNode.name.toLowerCase() === 'task-title');
+}
+
 /**
  * Check if the parent node has deleted style.
  */
@@ -67,4 +71,4 @@ function isDeletedNode(tnode: TNode): boolean {
     return 'textDecorationLine' in parentStyle && parentStyle.textDecorationLine === 'line-through';
 }
 
-export {computeEmbeddedMaxWidth, isChildOfComment, isCommentTag, isChildOfH1, isDeletedNode};
+export {computeEmbeddedMaxWidth, isChildOfComment, isCommentTag, isChildOfH1, isDeletedNode, isChildOfTaskTitle};