Mark down - Live mark down preview disappears after entering empty single backtick code block

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.70-0 Reproducible in staging?: Y Reproducible in production?: Y If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y Email or phone of affected tester (no customers): [email protected] Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to chat.
3. Type any text with mark down.
4. Then, type empty single backtick code block.

Expected Result:

The text with mark down in Step 3 will still display live mark down preview after entering empty single backtick code block.

Actual Result:

The text with mark down in Step 3 no longer displays live mark down preview after entering empty single backtick code block.

Workaround:

Unknown

Platforms:

• [x] Android: Standalone
• [x] Android: HybridApp
• [x] Android: mWeb Chrome
• [x] iOS: Standalone
• [x] iOS: HybridApp
• [x] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [x] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/84deb559-8acd-4236-9616-620390c41ee4

View all open jobs on GitHub

[melvin-bot[bot]]

Triggered auto assignment to @strepanier03 (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot[bot]]

@strepanier03 Huh... This is 4 days overdue. Who can take care of this?

[strepanier03]

Hmm, I'm trying to repro and can only reproduce after a second empty back tick.

Will revisit tomorrow, running on fumes atm.

[melvin-bot[bot]]

@strepanier03 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot[bot]]

@strepanier03 this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot[bot]]

@strepanier03 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[strepanier03]

Back from ooo being sick. I'm testing again.

[strepanier03]

I am unable to reproduce still.

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[strepanier03]

Auto post in contributor plus here

[ZhenjaHorbach]

@strepanier03 I may be wrong but this issue may not be reproduced since we have another issue (On staging we have just error in console why markdown is not applied )

https://github.com/user-attachments/assets/6804569c-bd4f-4f9e-a9a8-9c43996ab5d6

@Skalakid I remember that you fixed a very similar issue

https://github.com/Expensify/react-native-live-markdown/issues/580

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[strepanier03]

@ZhenjaHorbach - Thank for sharing and thanks for testing @mvtglobally - I'll continue to follow along.

[Skalakid]

Good catch @ZhenjaHorbach! The error that I was trying to fix still occurs and appears when there are only spaces between backticks in the inline code markdown. It's caused by this line in the ExpensiMark parser which escapes spaces inside the inline codeblock and changes them into  '

 {
                name: 'inlineCodeBlock',

                // Use the URL escaped version of a backtick (`) symbol. Mobile platforms do not support lookbehinds,
                // so capture the first and third group and place them in the replacement.
                // but we should not replace backtick symbols if they include <pre> tags between them.
                // At least one non-whitespace character or a specific whitespace character (" " and "\u00A0")
                // must be present inside the backticks.
                regex: /(\B|_|)&#x60;(.*?)&#x60;(\B|_|)(?!(?!<pre>)[^<]*(?:<(?!pre>)[^<]*)*<\/pre>|[^<]*<\/video>)/gm,
                replacement: (_extras, _match, g1, g2, g3) => {
                    const g2Value = g2.trim() === '' ? g2.replaceAll(' ', '&nbsp;') : g2; // <- this line
                    if (!g2Value) {
                        return _match;
                    }
                    return `${g1}<code>${g2Value}</code>${g3}`;
                },
            },

How about removing this logic and blocking rendering inline code block when there are only whitespaces between backticks? In Expensify users can't send something like this as a message:

` `

After sending the message the space will be trimmed and the sent message will look like this:

``

So, it seems like it's an unnecessary case. Removing it will help us and prevent sending '  to the Live Markdown Parser, which can be either a space or just plain text. Let me know what you think about it.

[ZhenjaHorbach]

So, it seems like it's an unnecessary case. Removing it will help us and prevent sending '  to the Live Markdown Parser, which can be either a space or just plain text. Let me know what you think about it.

Thanks for your proposal! I will check today !

[ZhenjaHorbach]

@Skalakid Actually your idea looks good as for me ! I can't think of any practical use for the old implementation and the empty string between `` Plus as far as I can see the main issue is also not reproduced with your proposal

But on the other hand in github which use markdown is a valid value 🧐

[Skalakid]

To fix this issue, we have two options:

1. Modify parsing logic so it doesn't accept inline code blocks with only white characters between backticks. I think it can be safely removed since can't be sent in Expensify as the message because whitespaces are being trimmed when sending and the final message is equal to ``
2. Don't change the current behavior for the E/App and return normal unescaped spaces only for Live Markdown Input. In this case, the user will see the grey background when writing but when sending the message it will be trimmed and changed to ``

Created a Slack Thread and waiting for the response from the internals on should we parse spaces between backticks or not

[mvtglobally]

Issue not reproducible during KI retests. (Second week)

[Skalakid]

Okay, the issue has been discussed internally and we agreed on solving this issue by enabling rendering the inline codeblock with whitespaces inside. I will create the PR with the fix in the expensify-common later today

[ZhenjaHorbach]

Okay, the issue has been discussed internally and we agreed on solving this issue by enabling rendering the inline codeblock with whitespaces inside. I will create the PR with the fix in the expensify-common later today

Sounds good Thanks ! You can ping me if need help with review !

@strepanier03 Could you assign me here, please ? I think after we fix the issue with codeblock with whitespaces inside We will be able to fix main issue or just close it if the bug is no longer reproducible

[Skalakid]

Here is the PR with the fix

[Skalakid]

PR with the fix inside the expensify-common has been merged, here is a PR to the E/App

[melvin-bot[bot]]

Triggered auto assignment to @arosiclair, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~021880252308731745145

[melvin-bot[bot]]

Current assignee @ZhenjaHorbach is eligible for the External assigner, not assigning anyone new.

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[Skalakid]

The PR has been merged, the issue should be fixed now

[arosiclair]

We're just waiting on deployment now

[melvin-bot[bot]]

The solution for this issue has been :rocket: deployed to production :rocket: in version 9.0.88-7 and is now subject to a 7-day regression period :calendar:. Here is the list of pull requests that resolve this issue:

• https://github.com/Expensify/App/pull/55391

If no regressions arise, payment will be issued on 2025-01-30. :confetti_ball:

For reference, here are some details about the assignees on this issue:

• @Skalakid does not require payment (Contractor)
• @ZhenjaHorbach requires payment (Needs manual offer from BZ)

[melvin-bot[bot]]

@ZhenjaHorbach @strepanier03 @ZhenjaHorbach The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]