[HOLD][$250] 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?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6438153_1712246464359.use.mp4

View all open jobs on GitHub

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

Edited by proposal-police: This proposal was edited at 2024-10-02 16:04:19 UTC.

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?

The font-weight and style here are always set to undefined.

App/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.tsx

Lines 28 to 37 in 837152e

	const textStyleOverride = {
	fontSize,
	fontFamily: font,
	// We need to override this properties bellow that was defined in `textStyle`
	// Because by default the `react-native-render-html` add a style in the elements,
	// for example the <strong> tag has a fontWeight: "bold" and in the android it break the font
	fontWeight: undefined,
	fontStyle: undefined,
	};

But even after we remove it, the issue still persists. That's because the MONOSPACE style is set for code,

App/src/styles/index.ts

Lines 201 to 206 in 837152e

	code: {
	...baseCodeTagStyles(theme),
	...(codeStyles.codeTextStyle as MixedStyleDeclaration),
	paddingLeft: 5,
	paddingRight: 5,
	...FontUtils.fontFamily.platform.MONOSPACE,

and the style has font style and weight as normal.

App/src/styles/utils/FontUtils/fontFamily/singleFontFamily/index.ts

Lines 13 to 17 in 837152e

	MONOSPACE: {
	fontFamily: 'Expensify Mono',
	fontStyle: 'normal',
	fontWeight: fontWeight.normal,
	},

But it is still not enough because we don't have the italic and bold italic variants for ExpensiMono. We only have ExpensiMono-Regular and -Bold.

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

Remove the font style and weight override here.

App/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.tsx

Lines 28 to 37 in 837152e

	const textStyleOverride = {
	fontSize,
	fontFamily: font,
	// We need to override this properties bellow that was defined in `textStyle`
	// Because by default the `react-native-render-html` add a style in the elements,
	// for example the <strong> tag has a fontWeight: "bold" and in the android it break the font
	fontWeight: undefined,
	fontStyle: undefined,
	};

Then, only take the font family style from MONOSPACE.fontFamily

App/src/styles/index.ts

Line 206 in 837152e

...FontUtils.fontFamily.platform.MONOSPACE,

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

There is a docs regarding adding a new font.

Example where the font has regular, bold, italic, and bold italic variant.

App/android/app/src/main/res/font/expensify_neue.xml

Lines 2 to 6 in 1764d10

	<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
	<font app:fontStyle="italic" app:fontWeight="400" app:font="@font/expensifyneue_italic"/>
	<font app:fontStyle="normal" app:fontWeight="400" app:font="@font/expensifyneue_regular"/>
	<font app:fontStyle="italic" app:fontWeight="700" app:font="@font/expensifyneue_bolditalic"/>
	<font app:fontStyle="normal" app:fontWeight="700" app:font="@font/expensifyneue_bold"/>

[melvin-bot]

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

[melvin-bot]

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

[melvin-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 83d1166):

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]

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

[bernhardoj]

I think you forgot to apply this:

fontFamily: FontUtils.fontFamily.platform.MONOSPACE.fontFamily,

[hoangzinh]

Thanks @bernhardoj. @bernhardoj proposal looks good to me

Link to proposal #39623 (comment)

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[NikkiWines]

Yep, looks good 👍

[bernhardoj]

So, what's the process for getting the new font file? We need specifically:

1. ExpensiMono-Italic
2. ExpensiMono-BoldItalic

[hoangzinh]

Hi @Expensify/design, currently our App only have font ExpensiMono-Regular and ExpensiMono-Bold. We're looking for fonts below in order to fix this issue:

• ExpensiMono-Italic
• ExpensiMono-BoldItalic

They look like our custom fonts. Do our team have those missing fonts? Thanks in advance.

[dannymcclain]

Looking through our font files, I don't believe we have any Italic versions of Expensify Mono.

[dubielzyk-expensify]

Makes me wonder if we should check with the type foundry to see if this is something we'd wanna add. I'll add it to the list to discuss, but for now we don't have any.

[hoangzinh]

Thanks, @dubielzyk-expensify and @dannymcclain. I think, for now, we can mark this issue as Hold On while waiting Design team to discuss whether we want to add those fonts in our App.

[dannymcclain]

Sounds good. For something like this I'd prefer to wait until Shawn is back and can weigh in anyways.

[isabelastisser]

Moving to weekly until @shawnborton is back.

[shawnborton]

Hey, I'm back! We don't have our mono fonts in italic styles... but we could definitely ask for them!

Let me reach out to our font foundry and get their opinion. Will cc the @Expensify/design team.

[shawnborton]

Okay, we're going to get some updated Expensify Mono Italic font files for this, but we likely won't have them for quite some time (December?). So we might want to put a HOLD on this issue for the time being and come back to it once we actually have the new font files raedy for use.

[bernhardoj]

Thanks for the update! Just to confirm, are we getting both Mono Italic and Mono Italic Bold font files?

[shawnborton]

Yup, we'll get both of those files in all formats we could need (.otf, .woff, etc)

[bernhardoj]

Nice, thanks for the confirmation!

[NikkiWines]

Updating this issue to reflect that we'll be waiting a bit to get the updated fonts ⏰

[isabelastisser]

Not overdue, still on hold.