[HOLD for payment 2024-05-14] [$500] The bold markdown text entered after a codeblock text in the composer does not render correctly as bolded

[m-natarajan]

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: 1.4.54-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @quinthar
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1710548240738149

Action Performed:

1. Open any report
2. Compose a multiline message with bold and codeblock
   '' bold
   *not a bold*
   This is * bold * "

Expected Result:

Should render
bold
*not a bold*
This is bold

Actual Result:

bold
*not a bold*
This is bold

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Recording.2859.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01835d45018b65a8ed
• Upwork Job ID: 1770178926683250688
• Last Price Increase: 2024-04-09
• Automatic offers:
• fedirjh | Reviewer | 0
• tienifr | Contributor | 0

[melvin-bot]

Triggered auto assignment to @garrettmknight (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[nexarvo]

Proposal

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

The bold markdown text entered after a codeblock text in the composer does not render correctly as bolded

What is the root cause of that problem?

The REGEX for bolding text includes a negative lookahead assertion to avoid matching text within <pre>, <code>, or <a> tags. As a result, the negative lookahead assertion in the regex, which is intended to exclude text within certain HTML tags like <pre> or <code>, does not sufficiently prevent matching bold text that follows these tags here.

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

We can change the REGEX to lookout for<pre> or <code> that will make sure that there are no <pre>, <code>, or <a> opening tags ahead, allowing bolding even after code blocks:

- regex: /\B\*((?![\s*])[\s\S]*?[^\s*])\*\B(?![^<]*(<\/pre>|<\/code>|<\/a>))/g
+ regex: /\B\*((?![\s*])[\s\S]*?[^\s*])\*\B(?![^<]*(<(\/)?(pre|code|a)[^>]*>))/g

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[abzokhattab]

Proposal

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

The bold markdown text entered after a code block text in the composer isn't rendered correctly as bolded

What is the root cause of that problem?

the current regex doesn't look if the current bold matching is inside an opening and closing code tag or not
https://github.com/Expensify/expensify-common/blob/cef0e5d57c093edfef8ad9c4d4a58df7bdb3ec5f/lib/ExpensiMark.js#L284

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

its quite complex to fix the current issue using one regex..

so i suggest removing the regex line and add the process function instead, the same as we do in other tags

process: (textToProcess, replacement) => {
                    // Combine matching bold patterns outside specific tags and the tags themselves into one regex.
                    // It alternately matches bold text or the entire content of <pre>, <code>, or <a> tags.
                    const combinedRegex =
                        /(\*([^*]+)\*)|(<(?:pre|code|a)[^>]*>.*?<\/(?:pre|code|a)>)/gs;

                    return textToProcess.replace(
                        combinedRegex,
                        (match, boldPattern, boldText, protectedTag) => {
                            if (boldPattern) {
                                // Utilize the original replacement logic for bold patterns.
                                return replacement(match, boldText);
                            } else {
                                // For matches within <pre>, <code>, or <a> tags, return them unchanged.
                                return match;
                            }
                        }
                    );
                },
    ```

[iammudassirali]

Proposal

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

The issue involves incorrect rendering of bold markdown text entered after a codeblock text in the composer. When composing a multiline message with bold and codeblock, the bold markdown does not render correctly as bolded.

What is the root cause of that problem?

The root cause of this problem lies in the rendering mechanism of the composer, which fails to recognize and correctly format the bold markdown text after a codeblock.

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

To resolve this issue, we need to update the rendering logic of the composer to properly interpret and render bold markdown text following a codeblock. This may involve adjusting the parsing rules to ensure that bold markdown is correctly applied in all scenarios.

What alternative solutions did you explore? (Optional)

Alternative solutions may include examining the sequence of markdown parsing and rendering steps to identify any conflicts or inconsistencies that may be causing the issue. Additionally, exploring different markdown rendering libraries or approaches could provide alternative paths to resolving the problem.

This proposed solution aims to address the issue and ensure consistent and accurate rendering of markdown text in the composer.

Please let me know if you need further clarification or assistance with implementing this solution.

Best regards,
Mudassir Ali