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

[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

[BartoszGrajdek]

We could potentially remove these lines, set before's content: "" and width: 100%.

I've tried making it work and it seems promising it's just that you'd need to force a linebreak whenever user tries to write something directly after closing backticks and that's something I didn't manage to implement cleanily @Skalakid

[Skalakid]

Left some small comments

[Skalakid]

Why 2? Shouldn't we use the default style value from makeDefaultMarkdownStyle here?

[BartoszGrajdek]

Pretty sure this is to account for border adding 1px on each side, but you can try to change this to see 👀

[Skalakid]

@tomekzaw bump :D