[PAID] [$250] 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:

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

Screenshots/Videos

Bug6682769_1733215534106.20241203_164413.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021880252308731745145
• Upwork Job ID: 1880252308731745145
• Last Price Increase: 2025-01-17

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @strepanier03

[melvin-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]

@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]

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

[melvin-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]

@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 )

2024-12-18.20.28.21.mov

@Skalakid
I remember that you fixed a very similar issue

Expensify/react-native-live-markdown#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 🧐

[melvin-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]

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

• Bump expensify common to 2.0.115 #55391

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

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]

@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]

[strepanier03]

@ZhenjaHorbach - In anticipation of the payment hold ending tomorrow I created and hired you to an Upwork job.

I'll check for the checklist tomorrow, and if it's posted, I'll take the next steps. Chat with you then 👋

[ZhenjaHorbach]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

Unfortunately, I did not find a suitable PR
But the issue is most likely related to react-native-live-markdown

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

NA

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Test:

1. Go to any Report
2. Write # Hello ' ' (replace ' with `)
3. Verify if markdown was applied inside the Input
4. Verify if there is no error inside the console
5. Send the message
6. Verify if the (inline code block with space inside) is normally rendered in the message

Do we agree 👍 or 👎

[ZhenjaHorbach]

@strepanier03
Sorry for the delay
Done!
And I accepted the offer

[strepanier03]

no worries at all @ZhenjaHorbach - this is right on time.

I'll take next steps.

[strepanier03]

Payment Summary

• $250 - @ZhenjaHorbach via Upwork

[strepanier03]

REg test created and job paid and closed, closing this GH now. Thanks everyone!