Implement code and pre blocks support on web

[BartoszGrajdek]

Details

Related Issues

GH_LINK

Manual Tests

Change codeFance rule in parser/node_modules/expensify-common/dist/ExpensiMark.js to code below, and build parser

            {
                name: 'codeFence',
                // ` is a backtick symbol we are matching on three of them before then after a new line character
                regex: /(?<![^^\r\n])(&#x60;&#x60;&#x60;(\r\n|\n))((?:\s*?(?!(?:\r\n|\n)?&#x60;&#x60;&#x60;(?!&#x60;))[\S])+\s*?(?:\r\n|\n))(&#x60;&#x60;&#x60;)/g,
                // We're using a function here to perform an additional replace on the content
                // inside the backticks because Android is not able to use <pre> tags and does
                // not respect whitespace characters at all like HTML does. We do not want to mess
                // with the new lines here since they need to be converted into <br>. And we don't
                // want to do this anywhere else since that would break HTML.
                // &nbsp; will create styling issues so use &#32;
                replacement: (_extras, _match, _g1, _g2, textWithinFences) => {
                    const group = textWithinFences.replace(/(?:(?![\n\r])\s)/g, '&#32;');
                    return `<pre>${group}</pre>`;
                },
                rawInputReplacement: (_extras, _match, _g1, newLineCharacter, textWithinFences) => {
                    const group = textWithinFences.replace(/(?:(?![\n\r])\s)/g, '&#32;').replace(/<emoji>|<\/emoji>/g, '');
                    return `<pre new-line-char="${newLineCharacter}">${group}</pre>`;
                },
            },

Linked PRs

[Skalakid]

Some check are failing, please take a look at them 👀

Also, I found some problems with code block background positioning when pasting the block next to other markdowns and the issue with disappearing newline after first backticks:

Screen.Recording.2024-10-16.at.11.40.50.mov

Screen.Recording.2024-10-16.at.11.42.01.mov

[Skalakid]

There are some problems with cursor positioning. After reloading the page, when I click after the third backtick, you can see how the cursor position is being moved to the line below.
The same situation happens when you start writing after the third backtick and then remove the written text. Like before, the cursor is moved to the line below.

Screen.Recording.2024-10-17.at.16.53.00.mov

[Skalakid]

Also please fix E2E tests connected to inline code and code blocks

[BartoszGrajdek]

Also please fix E2E tests connected to inline code and code blocks

I'll do that once we pass all manual tests - they are failing mainly due to inline styles being different which can change when adding fixes. As for the cursor positioning issue I'll look into it tomorrow 👀

[BartoszGrajdek]

Added fixes @Skalakid

[Skalakid]

Okay, thank you. All reported issues are fixed. However, now I found that the background width in changing when writing outside the codeblock...

Screen.Recording.2024-10-29.at.12.28.20.mov

[BartoszGrajdek]

Fixed! @Skalakid

[Skalakid]

Found couple of new bugs:

bug.1.mov

bug.2.mov