[HOLD https://github.com/Expensify/react-native-live-markdown/pull/394][Live Markdown] Support inline code background style

[thienlnam]

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

Now that live markdown preview is out on production - let's add support for the background style for inline code

It should use the same font and background style, but currently doesn't.

[melvin-bot]

Triggered auto assignment to @lschurr (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[thienlnam]

Added to the main tracking issue as part of HIGH: #36071

[lschurr]

Anything needed from BZ on this one @thienlnam?

[thienlnam]

Not at this time, we'll probably need payment to the C+ that reviews in the future but that's further away

[tomekzaw]

We're working on it.

iOS

I've asked @maksg from SWM to implement the iOS part. Here's the draft PR to Live Markdown:

• Implement code and pre blocks support on iOS react-native-live-markdown#306

Android

@maksg from SWM is also working on the Android part.

Web

@Skalakid had a working PoC some time ago, I will ask him to submit a PR for web.

[lschurr]

Any update @thienlnam @tomekzaw?

[Skalakid]

Hi @lschurr, @BartoszGrajdek is working on it

[BartoszGrajdek]

Hi @lschurr so here's a quick update on what's happening:

There are 2 different blocks to handle here contrary to what the issue title/description may say namely: inline code & pre blocks (single / triple backticks).

Like we agreed here there will be some changes to ExpensiMark to limit the number of cases where the pre styling is applied - I have it roughly done, but we will likely need some additional refactors.

Currently, I'm working on implementing the pre block styles for web. That's a tricky case because of the limitations that the Live Markdown puts on us, but I'm trying to overcome it.

I'll keep you updated! 😄

[tomekzaw]

As for the Android part, @maksg is working on it.

[quinthar]

Hi, what's the next step and ETA on this?

[tomekzaw]

Here's the Android PR from @maksg:

• Implement code and pre blocks support on Android react-native-live-markdown#338

Currently waiting for @BartoszGrajdek's PR for web

Next step: Complete PR for web

ETA: ~2 weeks

[lschurr]

Any update @BartoszGrajdek @tomekzaw?

[BartoszGrajdek]

I've just added a PR to the expensify-common with some changes to how we treat code blocks. I'm currently solving the remaining bugs on Live Markdown for web to get it working on all browsers - after that we can move forward with the process of getting implementations for all platforms merged 😄 @lschurr

[dangrous]

PR has been merged (accidentally, by me, due to the merge freeze whoops)! So soon this will be good to go but don't merge any package.json changes yet! Also adding myself here for any further assistance since I think the issue linking got weird.

[lschurr]

Any update @BartoszGrajdek @dangrous?

[BartoszGrajdek]

Hi, it took us more time than we anticipated, mainly due to some bugs we have found that turned out to block us here. We're hoping to close this one in the coming days. There is one PR that will resolve an issue in the ExpensiMark itself which came to our attention after some extensive testing (I'll tag @dangrous to review it once it's ready). 🙏🏻

@Skalakid is currently testing it together with the web PR. Once we make sure there are no additional bugs we'll push the expensify-common PR & later all the PRs that are waiting in the react-native-live-markdown lib. 🤓

Starting today I'll give you daily updates to keep you posted, we're getting really close! 🤞🏻

cc @lschurr

[BartoszGrajdek]

Status for today - Michał has found 2 small bugs during the testing. I'm already onto them hoping to solve both tomorrow 😄

[BartoszGrajdek]

Status 5.06.2024

We've managed to track the root cause for both of the bugs. One is a regression created by another PR, the second one has appeared because of the changes we've made and it's almost fixed now. Since none of them are related to ExpensiMark itself I opened up the PR for review (@dangrous if you have the capacity please go ahead & review it 🙏🏻 ).

[BartoszGrajdek]

Status 6.06.2024

I was debugging quite a few things today. We currently have ~2 other blockers at hand that need to be solved before we can add any additional changes, but I managed to work on regression fixes for a bit.

[BartoszGrajdek]

Status 10.06.2024

Didn't forget about this issue, right now we're solving some of the bugs that came up during the bump of react-native-live-markdown so I'm busy with that 👀

[BartoszGrajdek]

Status 11.06.2024-13.06.2024

Giving an update here, since we have discussed this issue internally at length after encountering all of the regressions/bugs that we've been fighting for the past week. We think that the best course of action will be to wait temporarily for a refactor that @Skalakid is working on. This will allow us to implement a much cleaner solution on the web that won't be susceptible to regressions.

I'll try to regularly come back here and let you know what's going on 🙌🏻

[thienlnam]

@BartoszGrajdek Is there a PR we can link to that we're waiting on?

[BartoszGrajdek]

Of course, here you go: Expensify/react-native-live-markdown#394 🙌🏻

[lschurr]

On hold

[lschurr]

Hold