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]

The E2E test is failing because expensify-common changes are missing in the GitHub actions. Will create PR with required changes and then patch the library in Live Markdown

[jmusial]

the newline logic is confusing when adding codeblock after a codeblock or splitting one.
The input appears as in the new line, but it parses into the new codeblock only after manually pressing enter at the line break.

Screen.Recording.2025-06-16.at.18.08.56.mov

[Skalakid]

One of the main goals of the Live Markdown Input is to preview how the message from Expensify will look after sending. In all scenarios, the code block syntax moves the content around it into separate lines (display: block). I agree that it can be a bit confusing, but we do the same thing for inline images

[Skalakid]

Maybe to make it more intuitive, we should require a whitespace after the codeblock closing syntax to be able to add another markdown after it. What do you think about it?

[jmusial]

Feels different with demo image bc the image is adding w/o additional character between blocks. I think this is the expected behaviour here as well.

Screen.Recording.2025-06-18.at.10.57.05.mov

[jmusial]

Found this multiline problem while testing, but it works same on main. IMO can be fixed as a followup.

Screen.Recording.2025-06-16.at.18.17.11.mov

[Skalakid]

Okay, will fix that in follow up PR :D

[Skalakid]

Hello, here is the PR with required changes in the expensify-common library Expensify/expensify-common#865. Once it's merged we can proceed with with merging this PR