Implement code and pre blocks support on web

[BartoszGrajdek]

trafficstars

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:

https://github.com/user-attachments/assets/72a4fe1f-abd6-4d02-b709-cc4ce9afacba

https://github.com/user-attachments/assets/5ea170ce-cb88-45fb-a782-9c761c3cc5ed

[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.

https://github.com/user-attachments/assets/60f6588f-bf51-4eab-b578-4256fb0e553e

[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...

https://github.com/user-attachments/assets/c07b04cf-05cb-4c53-9252-2629dfcb5c1a

[BartoszGrajdek]

Fixed! @Skalakid

[Skalakid]

Found couple of new bugs:

https://github.com/user-attachments/assets/18815f8c-0d34-49c3-af4e-c235e72d1adc

https://github.com/user-attachments/assets/b7ee443e-f23d-4f5d-9bae-c72d37010dad

[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

https://github.com/user-attachments/assets/d90f149f-78b6-4c6b-9f0a-69650bd2b3f4

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

https://github.com/user-attachments/assets/46b142c3-221b-4734-856a-a909063bf566

[Skalakid]

@tomekzaw bump :D

[tomekzaw]

Found a bug on Firefox (Chrome is okay):

https://github.com/user-attachments/assets/95d09add-0a45-4b72-8019-5fed1db1a83e

[Skalakid]

Codeblock height is changing when pasting text and replacing the whole content with it

https://github.com/user-attachments/assets/b9c3601a-9f20-4a6d-a8a9-ae8c381abbfd

[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

[Skalakid]

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

[tomekzaw]

Feel free to merge if the PR is okay 😄

[os-botify[bot]]

:rocket: Published to npm in 0.1.300 :tada:

[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 https://github.com/Expensify/App/pull/69158