[HOLD for payment 2024-07-24] [$250] Expense - Console error shows up when opening description that contains code block

[lanitochka17]

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.83-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: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat
3. Submit an expense with code block as description
4. Go to transaction thread
5. Wait for a while
6. Click Description
7. Might need to reopen Description a few times to see console error

Expected Result:

Console error will not show up when opening description that contains code block

Actual Result:

Console error shows up when opening description that contains code block.
Typing inside the code block creates more console errors

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

Bug6512409_1718310569210.20240614_042601.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014b73c4727a3648d0
• Upwork Job ID: 1802541737368946970
• Last Price Increase: 2024-06-17
• Automatic offers:
• s77rt | Reviewer | 102859088
• bernhardoj | Contributor | 102859089

Issue Owner

Current Issue Owner: @kadiealexander

[melvin-bot]

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

[lanitochka17]

@kadiealexander FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #wave-collect - Release 1

[bernhardoj]

Proposal

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

Console error when open a money request description page that contains code block/fence.

What is the root cause of that problem?

The code block that we receive from the BE contains a \r\n as the newline. In live markdown, we will parse the markdown into tokens and tree and then parsed the tree back to the markdown to compare whether the original markdown equals to the processed markdown.
https://github.com/Expensify/react-native-live-markdown/blob/2ada06efda92c81f07044afc1467e77075206059/parser/index.ts#L242-L246

If it's different, then we get the error. As shown in the video, if we have the markdown as

```\r\nHello\r\n```

the processed input will be

```\nHello\r\n```

Why the first \r is gone? Let's first parse the markdown to tree based on the example above.

{
    tag: <>
    children: [{
        tag: "<pre>",
        children: ['Hello\r\n'],
    }],
}

Notice that the children already lost the first \r\n. When we parse the tree back to text, if it's a pre tag, the text is constructed as below:

``` + \n{children} + ```

https://github.com/Expensify/react-native-live-markdown/blob/2ada06efda92c81f07044afc1467e77075206059/parser/index.ts#L156-L160

We add the \n manually to replace the lost \r\n. However, as \r\n is not the same as \n, we got the error. Now, why the first \r\n is lost?

It's because of a markdown to HTML bug(?) in ExpensiMark.

```\r\nHello\r\n```

is parsed to

<pre>Hello\r\n</pre>

The current regex for code fence is
/(```(?:\r\n|\n))((?:\s*?(?!(?:\r\n|\n)?```(?!`))[\S])+\s*?(?:\r\n|\n))(```)/g

If matched, the parser will convert it to

<pre>{group}</pre>

group is the second group matched from the regex. The first group is
(```(?:\r\n|\n))
and the second group is
((?:\s*?(?!(?:\r\n|\n)?```(?!`))[\S])+\s*?(?:\r\n|\n))

Notice that the first group matches the first line break, that's why the first line break is lost.

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

The simplest and safest way to solve this is to replace every kind of line break (CONST.REGEX.LINE_BREAK) with \n on the description page.

App/src/pages/iou/request/step/IOURequestStepDescription.tsx

Line 168 in ab7060c

defaultValue={currentDescription}

But if we want to fix the root cause, then we need to:

Update the codefence regex to include the first line break to the second group.
updated regex:
/(```)((?:\r\n|\n)(?:\s*?(?!(?:\r\n|\n)?```(?!`))[\S])+\s*?(?:\r\n|\n))(```)/g
Then, remove the adding the \n manually in live markdown parser.
https://github.com/Expensify/react-native-live-markdown/blob/2ada06efda92c81f07044afc1467e77075206059/parser/index.ts#L159

-addChildrenWithStyle(`\n${content}`, 'pre');
+addChildrenWithStyle(content, 'pre');

What alternative solutions did you explore? (Optional)

We can apply the fix in react-native-live-markdown. In parseExpensiMarkToRanges, replace all kinds of newlines to \n of the markdown input.
https://github.com/Expensify/react-native-live-markdown/blob/aa5cbefa5e248159f81393b7a2dd8adfcc807e1c/parser/index.ts#L240-L242

const cleanedMarkdown = markdown.replace(/\r\n|\r/g, '\n');

Then replace all usages of markdown in parseExpensiMarkToRanges with cleanedMarkdown

[melvin-bot]

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

[melvin-bot]

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