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

[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

[jmusial]

LGTM @tomekzaw do you want to take a look or it's ok if I merge it ? (on Monday 😄 )

[tomekzaw]

Feel free to merge if the PR is okay 😄

[os-botify]

🚀 Published to npm in 0.1.300 🎉

[Pujan92]

@BartoszGrajdek Why do we removed this part? It seems to cause an issue of not showing the placeholder

https://expensify.slack.com/archives/C049HHMV9SM/p1755884247194659

[mountiny]

Lets please get @Expensify/design involved whenever there are changes to how things look in the App. Was this look of the code block in composer vetted before? Apologies if that was already discussed somewhere else than this PR.

[dannymcclain]

Lets please get @Expensify/design involved whenever there are changes to how things look in the App. Was this look of the code block in composer vetted before? Apologies if that was already discussed somewhere else than this PR.

Yeah this composer style isn't looking right to me. I'm not against including the monospace font style & background + border styles in the composer, but if we're going to do that, we need the styles to match the end result (the sent message styles). Currently the colors look different and wrong to me. cc @dubielzyk-expensify

[mountiny]

I believe @Skalakid will update the styles of that in the App PR, so please let us know how you think it should look like Expensify/App#69158