Android - Chat - Sending code block message with italic is not applied& preview inconsistent

[lanitochka17]

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: 1.4.60 Reproducible in staging?: Y Reproducible in production?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4478250 Issue reported by: Applause - Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Tap on a report
3. Enter |||
4. Launch app
5. Tap on a report
6. Enter |||
7. Note the difference in preview in mweb and app
8. Send the message
9. Note italic markdown not applied

Expected Result:

Code block with italic preview must not be inconsistent in mweb and Android. Sending code block message with italic must be applied in Android

Actual Result:

Code block with italic preview is inconsistent in mweb and Android. Sending code block message with italic is not applied in Android

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/Expensify/App/assets/78819774/03504c85-9b50-4416-8f86-024f7bdaee3e

View all open jobs on GitHub

[melvin-bot[bot]]

Triggered auto assignment to @isabelastisser (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[lanitochka17]

@isabelastisser FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-vsp

[bernhardoj]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Italic/bold isn't applied to inline code block.

What is the root cause of that problem?

This was previously fixed in this old issue https://github.com/Expensify/App/pull/2648. In the renderer component, we set both font style and weight to undefined. https://github.com/Expensify/App/blob/8fe465d72fb95f50e9df8888dafaae55fff8364f/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.tsx#L32-L38

We do that because previously in the font family, it will pick the font based on bold/italic variant. For example, if it's italic, it will take ExpensifyMono-Italic font. This is how we get the font family. https://github.com/Expensify/App/blob/8fe465d72fb95f50e9df8888dafaae55fff8364f/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.tsx#L20-L23

getFontFamilyMonospace will return the correct font based on the font weight and font style. However, as you can notice above, both of weight and style is undefined and it's a regression from https://github.com/Expensify/App/pull/35462 https://github.com/Expensify/App/blob/8fe465d72fb95f50e9df8888dafaae55fff8364f/src/styles/utils/index.ts#L588-L594

The next issue is, we don't have the italic variant for ExpensiMono-Italic. We only have ExpensiMono-Regular and -Bold. https://github.com/Expensify/App/blob/8fe465d72fb95f50e9df8888dafaae55fff8364f/src/styles/utils/FontUtils/fontFamily/multiFontFamily.ts#L15-L18

Notice that we set ExpensiMono-Regular for italic and ExpensiMono-Bold for bold.

What changes do you think we should make in order to solve the problem?

Pass textStyle.fontStyle and textStyle.fontWeight to getFontFamilyMonospace. https://github.com/Expensify/App/blob/8fe465d72fb95f50e9df8888dafaae55fff8364f/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.tsx#L20-L23

Then, add a new font asset for ExpensiMono-Bold and ExpensiMono-BoldItalic

[melvin-bot[bot]]

@isabelastisser Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot[bot]]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @hoangzinh (External)

[hoangzinh]

Thanks for your proposal @bernhardoj. There are 2 things that is not clear in your proposal:

• Why does code block messages with italic is applied in Android mWeb but not native?
• How would we solve the inconsistent issue of live markdown of Code block with italic between mweb and Android?

[bernhardoj]

Why does code block messages with italic is applied in Android mWeb but not native?

The web can inherits the italic style from the tag.

But native can't.

How would we solve the inconsistent issue of live markdown of Code block with italic between mweb and Android?

I think we need help from SWM since it needs changes on the native code to conditionally apply different font family if it's italic/bold

[isabelastisser]

Not overdue.

[hoangzinh]

Discussing with @isabelastisser internally here https://expensify.slack.com/archives/C02NK2DQWUX/p1713270353215539

[hoangzinh]

I think we need help from SWM since it needs changes on the native code to conditionally apply different font family if it's italic/bold

Hi @bernhardoj if we allow external contributors to contribute to react-native-live-markdown. Are you able to fix this issue?

[bernhardoj]

@hoangzinh I will try to look if I can fix it in react-native-live-markdown too.

[hoangzinh]

Thanks @bernhardoj . @tomekzaw just wanna confirm if we've opened react-native-live-markdown for external contributors

[tomekzaw]

For the reference, here's how it currently looks across platforms (checked on 83d1166b51):

Web:

Android:

iOS:

Q: What's the expected behavior? Should the outside formatting (bold/italic) be reflected in inline code?

Also, the problem is not only related to Live Markdown Preview (in the composer box) but also in chat history (report item) so it will also require changes in E/App.

FYI Slack does support nesting styles for inline code:

just wanna confirm if we've opened react-native-live-markdown for external contributors

I think this issue can be made external, what do you think? @thienlnam

[hoangzinh]

Q: What's the expected behavior? Should the outside formatting (bold/italic) be reflected in inline code?

I'm inclined to "Web". What do you think? @isabelastisser

[melvin-bot[bot]]

@hoangzinh @isabelastisser this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot[bot]]

@hoangzinh, @isabelastisser Huh... This is 4 days overdue. Who can take care of this?

[hoangzinh]

@isabelastisser When you have time, could you check this comment https://github.com/Expensify/App/issues/39623#issuecomment-2060928016? TIA

[isabelastisser]

@hoangzinh I agree, let's move forward with this. Thanks!

[hoangzinh]

@bernhardoj we agreed to allow external contributors to repo react-native-live-markdown for this issue. Are you able to update your proposal again with this https://github.com/Expensify/App/issues/39623#issuecomment-2061327690? Thanks

[isabelastisser]

Bump @bernhardoj on the comment above. Thanks!

[bernhardoj]

I haven't find a fix for it.

[isabelastisser]

@hoangzinh, what's next here? Thanks!

[hoangzinh]

I think we can set the initial price for this issue, and then wait for other proposals.

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[melvin-bot[bot]]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[melvin-bot[bot]]

@hoangzinh @isabelastisser this issue is now 4 weeks old, please consider:

• Finding a contributor to fix the bug
• Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[isabelastisser]

still waiting for proposals.

[isabelastisser]

still waiting for proposals.