[$250] Android - Room - Bold+code block markdown pasted in room description is displayed with space above

[IuliiaHerets]

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: V9.1.3-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
Issue reported by: Applause Internal Team
Device used: Redmi note 10s android 13
App Component: Other

Action Performed:

1. Launch app in both mweb and android
2. Tap fab- room
3. Enter all the details and paste room description as - ********1223333************
4. Create room
5. Tap header
6. Note room description

Expected Result:

Bold+code block markdown pasted in room description must be displayed without space above.

Actual Result:

Bold+code block markdown pasted in room description is displayed with space above in android but not in mweb.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6749785_1740120668901.Screenrecorder-2025-02-21-12-15-25-270.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021894474220438538083
• Upwork Job ID: 1894474220438538083
• Last Price Increase: 2025-03-04

Issue Owner

Current Issue Owner: @sobitneupane

[melvin-bot]

Triggered auto assignment to @CortneyOfstad (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.

[bernhardoj]

Proposal

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

The room description has extra space above.

What is the root cause of that problem?

I can't tell exactly why, but it happens because we are pretending an LTR unicode here to the HTML.

App/src/components/MenuItem.tsx

Lines 532 to 534 in 97552e6

	if (shouldRenderAsHTML) {
	titleToWrap = title ? convertToLTR(title) : '';
	}

If it's prepended before an HTML tag, the issue happens. In our case, the HTML looks like:

\u2066<code>********1223333************</code>

The LTR unicode was added to force the text to be LTR.

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

We can remove the convertToLTR from the HTML content

App/src/components/MenuItem.tsx

Lines 530 to 546 in 97552e6

	const processedTitle = useMemo(() => {
	let titleToWrap = '';
	if (shouldRenderAsHTML) {
	titleToWrap = title ? convertToLTR(title) : '';
	}
	if (shouldParseTitle) {
	titleToWrap = html;
	}
	if (shouldTruncateTitle) {
	titleToWrap = Parser.truncateHTML(`<comment>${titleToWrap}</comment>`, characterLimit, {ellipsis: '...'});
	return titleToWrap;
	}
	return titleToWrap ? `<comment>${titleToWrap}</comment>` : '';
	}, [title, shouldRenderAsHTML, shouldParseTitle, characterLimit, shouldTruncateTitle, html]);

because we already do it on every text.

App/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

Lines 139 to 142 in 97552e6

	domVisitors={{
	// eslint-disable-next-line no-param-reassign
	onText: (text) => (text.data = convertToLTR(text.data)),
	}}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

[melvin-bot]

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021894474220438538083

[melvin-bot]

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