Feature: Render markdown in thread header

src/components/DisplayNames/DisplayNamesWithTooltip.tsx

@@ -1,11 +1,13 @@
-import React, {Fragment, useCallback, useRef} from 'react';
+import React, {Fragment, useCallback, useMemo, useRef} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import type {Text as RNText} from 'react-native';
 import {View} from 'react-native';
+import RenderHTML from '@components/RenderHTML';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ReportUtils from '@libs/ReportUtils';
+import StringUtils from '@libs/StringUtils';
 import DisplayNamesTooltipItem from './DisplayNamesTooltipItem';
 import type DisplayNamesProps from './types';
 
@@ -47,6 +49,8 @@ function DisplayNamesWithToolTip({shouldUseFullTitle, fullTitle, displayNamesWit
         return textNodeRight > containerRight ? -(tooltipX - newToolX) : 0;
     }, []);
 
+    const title = useMemo(() => (StringUtils.containsHtml(fullTitle) ? <RenderHTML html={fullTitle} /> : ReportUtils.formatReportLastMessageText(fullTitle)), [fullTitle]);
+
     return (
         // Tokenization of string only support prop numberOfLines on Web
         <Text
@@ -56,7 +60,7 @@ function DisplayNamesWithToolTip({shouldUseFullTitle, fullTitle, displayNamesWit
             testID={DisplayNamesWithToolTip.displayName}
         >
             {shouldUseFullTitle
-                ? ReportUtils.formatReportLastMessageText(fullTitle)
+                ? title
                 : displayNamesWithTooltips?.map(({displayName, accountID, avatar, login}, index) => (
                       // eslint-disable-next-line react/no-array-index-key
                       <Fragment key={index}>

src/components/DisplayNames/DisplayNamesWithoutTooltip.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import type {StyleProp, TextStyle} from 'react-native';
+import RenderHTML from '@components/RenderHTML';
 import Text from '@components/Text';
 import useThemeStyles from '@hooks/useThemeStyles';
+import StringUtils from '@libs/StringUtils';
 
 type DisplayNamesWithoutTooltipProps = {
     /** The full title of the DisplayNames component (not split up) */
@@ -19,12 +21,14 @@ type DisplayNamesWithoutTooltipProps = {
 
 function DisplayNamesWithoutTooltip({textStyles = [], numberOfLines = 1, fullTitle = '', renderAdditionalText}: DisplayNamesWithoutTooltipProps) {
     const styles = useThemeStyles();
+    const title = StringUtils.containsHtml(fullTitle) ? <RenderHTML html={fullTitle} /> : fullTitle;
+
     return (
         <Text
             style={[textStyles, numberOfLines === 1 ? styles.pre : styles.preWrap]}
             numberOfLines={numberOfLines}
         >
-            {fullTitle}
+            {title}
             {renderAdditionalText?.()}
         </Text>
     );

src/components/DisplayNames/index.native.tsx

@@ -1,11 +1,26 @@
 import React from 'react';
+import {View} from 'react-native';
+import RenderHTML from '@components/RenderHTML';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import StringUtils from '@libs/StringUtils';
 import type DisplayNamesProps from './types';
 
 // As we don't have to show tooltips of the Native platform so we simply render the full display names list.
 function DisplayNames({accessibilityLabel, fullTitle, textStyles = [], numberOfLines = 1, renderAdditionalText}: DisplayNamesProps) {
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
+
+    const containsHtml = StringUtils.containsHtml(fullTitle);
+    if (containsHtml) {
+        return (
+            <View style={styles.renderHTMLThreadTitle}>
+                <RenderHTML html={fullTitle} />
+            </View>
+        );
+    }
+
     return (
         <Text
             accessibilityLabel={accessibilityLabel}

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

@@ -57,6 +57,14 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
                 mixedUAStyles: {whiteSpace: 'pre'},
                 contentModel: HTMLContentModel.textual,
             }),
+            'thread-title': HTMLElementModel.fromCustomModel({
+                tagName: 'thread-title',
+                contentModel: HTMLContentModel.textual,
+                mixedUAStyles: {...styles.headerText, whiteSpace: 'pre'},
+                reactNativeProps: {
+                    text: {numberOfLines: 1},
+                },
+            }),
             'mention-user': HTMLElementModel.fromCustomModel({tagName: 'mention-user', contentModel: HTMLContentModel.textual}),
             'mention-here': HTMLElementModel.fromCustomModel({tagName: 'mention-here', contentModel: HTMLContentModel.textual}),
             'next-step': HTMLElementModel.fromCustomModel({
@@ -71,13 +79,13 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
                 contentModel: HTMLContentModel.block,
             }),
         }),
-        [styles.colorMuted, styles.formError, styles.mb0, styles.textLabelSupporting, styles.lh16],
+        [styles.colorMuted, styles.formError, styles.mb0, styles.textLabelSupporting, styles.lh16, styles.headerText],
     );
     /* eslint-enable @typescript-eslint/naming-convention */
 
     // We need to memoize this prop to make it referentially stable.
     const defaultTextProps: TextProps = useMemo(() => ({selectable: textSelectable, allowFontScaling: false, textBreakStrategy: 'simple'}), [textSelectable]);
-    const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText]};
+    const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText, styles.mw100]};
     return (
         <TRenderEngineProvider
             customHTMLElementModels={customHTMLElementModels}

src/libs/ReportUtils.ts

@@ -6,6 +6,7 @@ import lodashEscape from 'lodash/escape';
 import lodashFindLastIndex from 'lodash/findLastIndex';
 import lodashIntersection from 'lodash/intersection';
 import lodashIsEqual from 'lodash/isEqual';
+import lodashUnescape from 'lodash/unescape';
 import type {OnyxCollection, OnyxEntry, OnyxUpdate} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
@@ -68,6 +69,7 @@ import * as PolicyUtils from './PolicyUtils';
 import type {LastVisibleMessage} from './ReportActionsUtils';
 import * as ReportActionsUtils from './ReportActionsUtils';
 import shouldAllowRawHTMLMessages from './shouldAllowRawHTMLMessages';
+import StringUtils from './StringUtils';
 import * as TransactionUtils from './TransactionUtils';
 import * as Url from './Url';
 import * as UserUtils from './UserUtils';
@@ -2546,10 +2548,54 @@ function getAdminRoomInvitedParticipants(parentReportAction: ReportAction | Reco
     return roomName ? `${verb} ${users} ${preposition} ${roomName}` : `${verb} ${users}`;
 }
 
+/**
+ * Get the formatted title in HTML for a thread based on parent message.
+ * Only the first line of the message should display.
+ */
+function getThreadReportNameHtml(reportActionMessageHtml: string): string {
+    const blockTags = ['br', 'h1', 'pre', 'div', 'blockquote', 'p', 'li', 'div'];
+    const blockTagRegExp = `(?:<\\/?(?:${blockTags.join('|')})(?:[^>]*)>|\\r\\n|\\n|\\r)`;
+    const threadHeaderHtmlRegExp = new RegExp(`^(?:<([^>]+)>)?((?:(?!${blockTagRegExp}).)*)(${blockTagRegExp}.*)`, 'gmi');
+    return reportActionMessageHtml.replace(threadHeaderHtmlRegExp, (match, g1: string, g2: string) => {
+        if (!g1 || g1 === 'h1') {
+            return g2;
+        }
+        if (g1 === 'pre') {
+            return `<code>${g2}</code>`;
+        }
+        const parser = new ExpensiMark();
+        if (parser.containsNonPairTag(g2)) {
+            return `<${g1}>${g2}`;
+        }
+        return `<${g1}>${g2}</${g1}>`;
+    });
+}
+
+/**
+ * Get the title for a thread based on parent message.
+ * If render in html, only the first line of the message should display.
+ */
+function getThreadReportName(parentReportAction: OnyxEntry<ReportAction> | EmptyObject = {}, shouldRenderAsHTML = false, shouldRenderFirstLineOnly = true): string {
+    if (ReportActionsUtils.isApprovedOrSubmittedReportAction(parentReportAction)) {
+        return ReportActionsUtils.getReportActionMessageText(parentReportAction).replace(/(\r\n|\n|\r)/gm, ' ');
+    }
+    if (!shouldRenderAsHTML && !shouldRenderFirstLineOnly) {
+        return (parentReportAction?.message?.[0]?.text ?? '').replace(/(\r\n|\n|\r)/gm, ' ');
+    }
+
+    const threadReportNameHtml = getThreadReportNameHtml(parentReportAction?.message?.[0]?.html ?? '');
+
+    if (!shouldRenderAsHTML && shouldRenderFirstLineOnly) {
+        return lodashUnescape(Str.stripHTML(threadReportNameHtml));
+    }
+
+    return StringUtils.containsHtml(threadReportNameHtml) ? `<thread-title>${threadReportNameHtml}</thread-title>` : lodashUnescape(threadReportNameHtml);
+}
+
 /**
  * Get the title for a report.
  */
-function getReportName(report: OnyxEntry<Report>, policy: OnyxEntry<Policy> = null): string {
+function getReportName(report: OnyxEntry<Report>, policy: OnyxEntry<Policy> = null, shouldRenderAsHTML = false, shouldRenderFirstLineOnly = false): string {
     let formattedName: string | undefined;
     const parentReportAction = ReportActionsUtils.getParentReportAction(report);
     if (isChatThread(report)) {
@@ -2562,11 +2608,7 @@ function getReportName(report: OnyxEntry<Report>, policy: OnyxEntry<Policy> = nu
         }
 
         const isAttachment = ReportActionsUtils.isReportActionAttachment(!isEmptyObject(parentReportAction) ? parentReportAction : null);
-        const parentReportActionMessage = (
-            ReportActionsUtils.isApprovedOrSubmittedReportAction(parentReportAction)
-                ? ReportActionsUtils.getReportActionMessageText(parentReportAction)
-                : parentReportAction?.message?.[0]?.text ?? ''
-        ).replace(/(\r\n|\n|\r)/gm, ' ');
+        const parentReportActionMessage = getThreadReportName(parentReportAction, shouldRenderAsHTML, shouldRenderFirstLineOnly);
         if (isAttachment && parentReportActionMessage) {
             return `[${Localize.translateLocal('common.attachment')}]`;
         }

src/libs/SidebarUtils.ts

@@ -392,7 +392,7 @@ function getOptionData({
         result.phoneNumber = personalDetail?.phoneNumber;
     }
 
-    const reportName = ReportUtils.getReportName(report, policy);
+    const reportName = ReportUtils.getReportName(report, policy, false, true);
 
     result.text = reportName;
     result.subtitle = subtitle;

src/libs/StringUtils.ts

@@ -1,6 +1,15 @@
 import _ from 'lodash';
 import CONST from '@src/CONST';
 
+/**
+ * Check if the text contains HTML
+ * @param text
+ * @return whether the text contains HTML
+ */
+function containsHtml(text: string): boolean {
+    return /<\/?[a-z][\s\S]*>/i.test(text);
+}
+
 /**
  * Removes diacritical marks and non-alphabetic and non-latin characters from a string.
  * @param str - The input string to be sanitized.
@@ -72,4 +81,4 @@ function normalizeCRLF(value?: string): string | undefined {
     return value?.replace(/\r\n/g, '\n');
 }
 
-export default {sanitizeString, isEmptyString, removeInvisibleCharacters, normalizeCRLF};
+export default {containsHtml, sanitizeString, isEmptyString, removeInvisibleCharacters, normalizeCRLF};

src/pages/home/HeaderView.js

@@ -106,7 +106,7 @@ function HeaderView(props) {
     const isTaskReport = ReportUtils.isTaskReport(props.report);
     const reportHeaderData = !isTaskReport && !isChatThread && props.report.parentReportID ? props.parentReport : props.report;
     // Use sorted display names for the title for group chats on native small screen widths
-    const title = ReportUtils.isGroupChat(props.report) ? getGroupChatName(props.report) : ReportUtils.getReportName(reportHeaderData);
+    const title = ReportUtils.isGroupChat(props.report) ? getGroupChatName(props.report) : ReportUtils.getReportName(reportHeaderData, undefined, true);
     const subtitle = ReportUtils.getChatRoomSubtitle(reportHeaderData);
     const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(reportHeaderData);
     const isConcierge = ReportUtils.hasSingleParticipant(props.report) && _.contains(participants, CONST.ACCOUNT_ID.CONCIERGE);

src/styles/index.ts

@@ -1883,6 +1883,11 @@ const styles = (theme: ThemeColors) =>
             ...wordBreak.breakWord,
         },
 
+        renderHTMLThreadTitle: {
+            display: 'flex',
+            flexDirection: 'row',
+        },
+
         renderHTMLTitle: {
             color: theme.text,
             fontSize: variables.fontSizeNormal,