App: [HOLD for payment 2023-05-25] [$1000] Space appears for a brief moment in the LHN message before correcting it if a codeblock has a space at the beginning

@sakluger completed the checklist! Thanks! Please hire on account - https://www.upwork.com/freelancers/~01212e8255b02ae924

@miljakljajic thank you. I accepted the offer. I guess this issue can be assigned to me now and the Help Wanted label can be taken off

@honnamkuan @dhanashree-sawant @rushatgabhane contracts extended to all.

bump @miljakljajic 🙏 https://github.com/Expensify/App/issues/17896#issuecomment-1536502129

@robertjchen, @rushatgabhane, I would like to mention that the discussion in another issue https://github.com/Expensify/App/issues/17658#issuecomment-1525815579 seems to be driving towards the direction of removing usage of parser.htmlToText(htmlText).

If that is the case, then I believe my proposal would be the only working solution.

---

The issue highlighted in eh2077’s https://github.com/Expensify/App/issues/17896#issuecomment-1529819923 is about when the code block starts with first lines having only newline and optionally some space characters.

While newline is not exactly part the problem reported in this issue, it can also be handled within formatReportLastMessageText as well. e.g.

    return String(messageText)
        .replace(/^\s*/, '')  // will create REGEX const in actual PR
        .replace(CONST.REGEX.AFTER_FIRST_LINE_BREAK, '')
        .substring(0, CONST.REPORT.LAST_MESSAGE_TEXT_MAX_LENGTH)
        .trim();

Please let me know if I should include that in my proposal as well. Thanks.

Proposal

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

Space appears for a brief moment in the LHN message before correcting it if a codeblock has a space at the beginning.

What is the root cause of that problem?

When sending a code block with leading spaces

```   test```

We build optimistic report data through method buildOptimisticAddCommentReportAction and parse the markdown code fence into html through method ExpensiMark.replace. In the codeFence-to-html rule, we replace whitespace with html code  .

In method buildOptimisticAddCommentReportAction, the code block is translated into message html string

<pre>&#32;&#32;&#32;test</pre>

and the message html string is converted to message text string here through method ExpensiMark.htmlToText.

   test

Then we format optimistic data of lastMessageText for LHN here

https://github.com/Expensify/App/blob/8d661d22f85c23749ea2421131f9975551fed214/src/libs/actions/Report.js#L205-L209

by extracting the first row of message text,    test, and decode it with Str.htmlDecode to get lastMessageText, ' test'.

So before backend return the trimmed lastMessageText, the LHN message will display ' test'.

When editing the code block message, we also convert message html string into text string, extract the first line and decode it with Str.htmlDecode to get optimistic lastMessageText. So same issue with adding comment.

Based on the above analysis, the root cause of this issue can be that, in method ExpensiMark.htmlToText, we don’t replace   back to space and trim the text before return.

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

To fix this issue, we can replace   back to space and trim the text before return in method ExpensiMark.htmlToText.

We can add a new rule to htmlToTextRules to replace   to space, like

{
    name: 'replaceClassicSpaces',
    regex: / /gi,
    replacement: ' ',
}

And trim the text before return here.

What alternative solutions did you explore? (Optional)

N/A