[Due for payment 2025-04-10] [$250] Chat - Bold markdown is not applied after multi-markdown text

[vincdargento]

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.11-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
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): slottwo1+8@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13
App Component: Chat Report View

Action Performed:

1. Launch the app.
2. Open a chat.
3. Type the following text in the compose box:

~_**Zoom**_~
*Test*

4. Observe the Markdown formatting in the preview.

Expected Result:

In the preview, "Zoom" should appear with bold, italic, and strikethrough formatting, and "Test" should appear bold.

Actual Result:

In the preview, "Zoom" is formatted correctly, but "Test" does not appear bold, even though it is wrapped in asterisks.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021899964819841681499
• Upwork Job ID: 1899964819841681499
• Last Price Increase: 2025-03-19
• Automatic offers:
• mkzie2 | Contributor | 106621044

Issue Owner

Current Issue Owner: @slafortune

[melvin-bot]

Triggered auto assignment to @slafortune (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.

[slafortune]

@vincdargento
I am not able to recreate this with anything but the specific leading line of

~_**Zoom**_~

[mkzie2]

🚨 Edited by proposal-police: This proposal was edited at 2025-03-11 16:28:21 UTC.

Proposal

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

In the preview, "Zoom" is formatted correctly, but "Test" does not appear bold, even though it is wrapped in asterisks.

Input:

~_**Zoom**_~
*Test*

The current parsing output is:

<del><em>*<strong>Zoom</strong>*</em></del><br />*Test*

The expected parsing output should be:

<del><em>*<strong>Zoom</strong>*</em></del><br /><strong>Test</strong>

What is the root cause of that problem?

Let's first take a look at the regex for bold rule here.

Before running through the bold rule (after running italic rule), the text is:

We can see that *</em>~\n*Test* is considered a valid match for bold because it starts end ends with *. The problem is after the starting *, we have a closing html tag </em>. It should not be considered a match if it contains another closing html tag.

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

We should modify the regex so that: </em> tag should not follow the starting asterisk.

Create a negative lookahead for the starting asterisk that excludes closing </em> tag:

\*(?!(?:<\/em))

A negative lookahead group is a group that cannot match after the main expression - in this case, it's the starting asterisk \*. That means if </em> follows after the starting asterisk \*, it would not be considered a match.

So the full lookahead for starting asterisk turns from \*(?![^<]*(?:<\/pre>|<\/code>|<\/a>|<\/em>)) as currently to:

\*(?!(?:<\/em))(?![^<]*(?:<\/pre>|<\/code>|<\/a>|<\/video>))
  |-----------||-------------------------------------------|
      <\em>                        other tags

Why don't we just add </em> to the current lookahead group like </pre> or </video ((?:<\/pre>|<\/code>|<\/a>|<\/video>))?

Because it comes with the prefix [^<]* which means if the closing html tag comes after any other characters, it would be invalid.

For example:

• <em>*bold text*</em> is invalid because:
  • bold text * matches [^<]*
  • </em> matches (?:<\/pre>|<\/code>|<\/a>|<\/video>|<\/em>)

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

Update ExpensiMark-Markdown-test.js to include the case of a closing </em> tag enclosed in a asterisk pair *...*.

What alternative solutions did you explore? (Optional)

NA

[melvin-bot]

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

[melvin-bot]

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

[mkzie2]

@ishpaul777 Can you start reviewing?