[HOLD for payment 2024-04-09] [$500] Task - A new line is added to code block when saving unchanged description with 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:
Reproducible in staging?:
Reproducible in production?:
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: Applause - Internal team
Slack conversation:

Action Performed:

1. Go to staging.new.expensify.com
2. Create a task without description
3. Go to task report
4. Click description
5. Type a word in code block in one line
6. Save the description
7. Click on the description
8. Save the description
9. Repeat Step 7 and 8 several times

Expected Result:

No extra line will be added each time saving unchanged description with code block
The system message for task descrption will not appear each time saving unchanged description with code block

Actual Result:

An extra line will be added each time saving unchanged description with code block
The system message for task descrption appears each time saving unchanged description with code block

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

Bug6407279_1709922210048.20240309_021530.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e1f69c2987288ad8
• Upwork Job ID: 1767765440789991424
• Last Price Increase: 2024-03-13

[melvin-bot]

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

[lanitochka17]

@jliexpensify 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 #vip-vsp
CC @quinthar

[allgandalf]

Proposal

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

A new line is added to code block when saving unchanged description with code block

What is the root cause of that problem?

This is a issue with expensify-common library, we use replace which leads to this bug:

App/src/pages/tasks/TaskDescriptionPage.tsx

Line 114 in 39bd108

defaultValue={parser.htmlToMarkdown((report && parser.replace(report?.description ?? '')) || '')}

Everytime we use replace it adds a extra line to the start of the markdown

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

We can make use of the filterRules in replace:
https://github.com/Expensify/expensify-common/blob/77d0b150ba6bfbe7a64b3c3e30b65592b2e58c4a/lib/ExpensiMark.d.ts#L26-L27

In the taskDescriptionPage, we need to apply the following markdownInBackticks filter option:

defaultValue={parser.htmlToMarkdown((props.report && parser.replace(props.report.description, {
                                filterRules: ["markdownInBackticks"]
                            })) || '')}

Note: I won't recommend fixing this upstream as we use parser at many places and this is related to only markdown, so we can use the filterRules provided upstream to deal with this bug.

Result:

simplescreenrecorder-2024-03-09_02.03.02.mp4

[bernhardoj]

Proposal

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

Saving an unchanged codefence markdown will add 1 new line.

What is the root cause of that problem?

When we save a codefence markdown with new line,

```
hello
```

EditTask response will return the new line as \r\n. Currently, codefence markdown regex only matches ``` with \n as the opening tag.
https://github.com/Expensify/expensify-common/blob/77d0b150ba6bfbe7a64b3c3e30b65592b2e58c4a/lib/ExpensiMark.js#L33-L34

So, when we convert it to markdown, there will be an extra new line by \r\n in the codefence content/body.

It's know that the sever might returns \r\n as the new line as shown by the comment below.

App/src/pages/tasks/TaskDescriptionPage.tsx

Lines 50 to 51 in 9302ade

	// report.description might contain CRLF from the server
	if (StringUtils.normalizeCRLF(values.description) !== StringUtils.normalizeCRLF(report?.description) && !isEmptyObject(report)) {

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

To solve it case by case, we can also apply StringUtils.normalizeCRLF to the task description before converting it to markdown when showing the task description in both TaskDescriptionPage and TaskView.

What alternative solutions did you explore? (Optional)

Update the codefence regex to match either \r\n or \n.
https://github.com/Expensify/expensify-common/blob/77d0b150ba6bfbe7a64b3c3e30b65592b2e58c4a/lib/ExpensiMark.js#L33-L34

/(```(?:\r\n|\n)?)((?:\s*?(?!(?:\r\n|\n)?```(?!`))[\S])+\s*?)((?=(?:\r\n|\n)?)```)/g

// the difference is instead of using \n, we use (?:\r\n|\n)
// ?: to not capture it as a group as it will broke the replacement logic

[melvin-bot]

@jliexpensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

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