App: [$250] Android - Chat - Sending code block message with italic is not applied& preview inconsistent

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com 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?

  • 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

About this issue

  • Original URL
  • State: open
  • Created 3 months ago
  • Comments: 27 (17 by maintainers)

Most upvoted comments

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

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

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

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

Web: Screenshot 2024-04-17 at 12 11 57

Android: Screenshot 2024-04-17 at 12 12 54

iOS: Screenshot 2024-04-17 at 12 14 38

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:

Screenshot 2024-04-17 at 12 17 35

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

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.

Screenshot 2024-04-13 at 13 59 48

But native can’t. Screenshot 2024-04-13 at 14 17 07

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