Implement code and pre blocks support on web

[BartoszGrajdek]

Details

Related Issues

GH_LINK

Manual Tests

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

             {
                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>${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

[Skalakid]

Found two smaller issues:

1. When typing in the codeblock and pressing enter, the view is scrolled to the top of the component instead of scrolling to the text cursor

Screen.Recording.2024-12-12.at.12.40.34.mov

2. The codeblock isn't responsive. When the text input width changes the layout breaks

Screen.Recording.2024-12-12.at.12.45.15.mov