[Due for payment 2025-04-17] [Due for payment 2025-04-10] [$250] Markdown - Nested markdown not displayed in conversation

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.1.13-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5740356
Issue reported by: Applause Internal Team
Device used: Windows 11/ Chrome, Android 13/ chrome
App Component: Other

Action Performed:

1. sign in to staging.new.expensify.com
2. Navigate to a conversation
3. Send a comment with a nested markdown (eg. bold or bold)

Expected Result:

All markdown applied are shown in conversation.

Actual Result:

Only a single markdown of nested markdown is displayed in a conversation.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.1.13-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: Windows 11/ Chrome, Android 13/ chrome
App Component: Other

Action Performed:

1. sign in to staging.new.expensify.com
2. Navigate to a conversation
3. Send a comment with a nested markdown (eg. _*bold*_ or *_bold_*)

Expected Result:

All markdown applied are shown in conversation.

Actual Result:

Only a single markdown of nested markdown is displayed in a conversation.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6770480_1741944295410.bandicam_2025-03-14_12-10-17-815.1.mp4

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021901686536886743365
• Upwork Job ID: 1901686536886743365
• Last Price Increase: 2025-03-17

Issue Owner

Current Issue Owner: @OfstadC

[melvin-bot]

Triggered auto assignment to @OfstadC (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[andriivitiv]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Nested markdown is not displayed in conversation.

What is the root cause of that problem?

In both EMRenderer.ts and StrongRenderer.ts we use styles.webViewStyles.baseFontStyle which sets fontWeight: 400 and fontStyle: normal.

To make text italic we apply fontStyle: italic;
to make text bold we apply fontWeight: 700.

When we have nested tags like this

<strong>
    <em>text</em>
</strong>

the following properties are applied

• strong => fontStyle: normal; fontWeight: 700.
• em => fontStyle: italic; fontWeight: 400.

You can see that the em tag has fontWeight set to 400 when it should be 700. This is caused by styles.webViewStyles.baseFontStyle setting properties that should instead be inherited.

What changes do you think we should make in order to solve the problem?

One solution would be to apply fontStyle: 'inherit' in EMRenderer.ts and fontWeight: 'inherit' in StrongRenderer.ts. This approach would work, but the compiler will show an error because React Native does not allow style values to be set to inherit.

Instead we can manually apply the correct font family depending on whether strong is a child of em or vice versa. First, add these new functions to htmlEngineUtils.ts

function isChildOfStrong(tnode: TNode): boolean {
    return isChildOfNode(tnode, (node) => node.domNode?.name !== undefined && node.domNode.name.toLowerCase() === 'strong');
}
function isChildOfEm(tnode: TNode): boolean {
    return isChildOfNode(tnode, (node) => node.domNode?.name !== undefined && node.domNode.name.toLowerCase() === 'em');
}

Then modify StrongRenderer.ts so that it uses bold+italic font when the strong tag is a child of em, and bold font otherwise

Code

 function StrongRenderer({tnode}: CustomRendererProps<TText | TPhrasing>) {
     const styles = useThemeStyles();
     const isChildOfTaskTitle = HTMLEngineUtils.isChildOfTaskTitle(tnode);
+    const isChildOfEm = HTMLEngineUtils.isChildOfEm(tnode);
+
+    const fontFamily = isChildOfEm
+        ? FontUtils.fontFamily.platform.EXP_NEUE_BOLD_ITALIC
+        : FontUtils.fontFamily.platform.EXP_NEUE_BOLD;
 
     return 'data' in tnode ? (
-        <Text style={[styles.webViewStyles.baseFontStyle, styles.strong, isChildOfTaskTitle && styles.taskTitleMenuItem]}>{tnode.data}</Text>
+        <Text style={[styles.webViewStyles.baseFontStyle, fontFamily, isChildOfTaskTitle && styles.taskTitleMenuItem]}>{tnode.data} </Text>
     ) : (
         <TNodeChildrenRenderer
             tnode={tnode}
             renderChild={(props) => {
                 return (
                     <Text
-                        style={[styles.webViewStyles.baseFontStyle, styles.strong, isChildOfTaskTitle && styles.taskTitleMenuItem]}
+                        style={[styles.webViewStyles.baseFontStyle, fontFamily, isChildOfTaskTitle && styles.taskTitleMenuItem]}
                         key={props.key}
                     >

Similarly update EMRenderer.ts. However, instead of using HTMLEngineUtils.isChildOfEm use HTMLEngineUtils.isChildOfStrong

Code

 function EMRenderer({tnode}: CustomRendererProps<TText | TPhrasing>) {
     const styles = useThemeStyles();
     const isChildOfTaskTitle = HTMLEngineUtils.isChildOfTaskTitle(tnode);
+    const isChildOfStrong = HTMLEngineUtils.isChildOfStrong(tnode);
+
+    const fontFamily = isChildOfStrong 
+        ? FontUtils.fontFamily.platform.EXP_NEUE_BOLD_ITALIC
+        : FontUtils.fontFamily.platform.EXP_NEUE_ITALIC;
     
     return 'data' in tnode ? (
-        <Text style={[styles.webViewStyles.baseFontStyle, styles.webViewStyles.tagStyles.em, isChildOfTaskTitle && styles.taskTitleMenuItemItalic]}>{tnode.data}</Text>
+        <Text style={[styles.webViewStyles.baseFontStyle, fontFamily, isChildOfTaskTitle && styles.taskTitleMenuItemItalic]}>{tnode.data}</Text>
     ) : (
         <TNodeChildrenRenderer
             tnode={tnode}
             renderChild={(props) => {
                 return (
                     <Text
-                        style={[styles.webViewStyles.baseFontStyle, styles.strong, isChildOfTaskTitle && styles.taskTitleMenuItem]}
+                        style={[styles.webViewStyles.baseFontStyle, fontFamily, isChildOfTaskTitle && styles.taskTitleMenuItemItalic]}
                         key={props.key}
                     >

Result:

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Render markdown such as _*text*_ and *_text_* and validate that the correct styles are applied to these tags.

[bernhardoj]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Nested markdown doesn't have correct style.

What is the root cause of that problem?

We now have a custom rendered for bold, italic, etc. If we look at the bold renderer, for example, we kinda "hardcoded" the style to only be a bold text, without considering a nested markdown style.

App/src/components/HTMLEngineProvider/HTMLRenderers/StrongRenderer.tsx

Lines 8 to 15 in ebbc565

	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

What changes do you think we should make in order to solve the problem?

We need to replace styles.webViewStyles.baseFontStyle with the style props.

App/src/components/HTMLEngineProvider/HTMLRenderers/StrongRenderer.tsx

Lines 13 to 20 in ebbc565

	<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]}

<Text style={[style, styles.strong, isChildOfTaskTitle && styles.taskTitleMenuItem]}>{tnode.data}</Text>

style props contain all the computed styles from the parents.

We need to apply this to bold, italic, etc renderer where nested markdown is allowed.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021901686536886743365

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rojiphil (External)

[melvin-bot]

@rojiphil Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!