[HOLD for payment 2025-01-21] [$250] Chat - Sending emoji message with markdown, top half is cut off

[izarutskaya]

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: 53504
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
If this was caught during regression testing, add the test name, ID and link from TestRail: N
Email or phone of affected tester (no customers): N
Issue reported by: Applause Internal Team

Action Performed:

1. Launch app
2. Open a chat
3. Send a emoji with markdown 😁😁

Expected Result:

Sending emoji message with markdown, top half must not be cut off.

Actual Result:

Sending emoji message with markdown, top half is cut off.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6683911_1733292611678.Screenrecorder-2024-12-04-11-36-07-266.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021864806387165915640
• Upwork Job ID: 1864806387165915640
• Last Price Increase: 2024-12-05
• Automatic offers:
• ZhenjaHorbach | Reviewer | 105276786

Issue Owner

Current Issue Owner: @Christinadobrzyn

[melvin-bot]

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

[Christinadobrzyn]

Asking if this can be fixed as part of - #53324

[bernhardoj]

Proposal

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

Emoji is cut off when it contains space and wrapped in a markdown.

What is the root cause of that problem?

This issue is similar to #43394 and #47899. The issue here is that, when the text only contains emoji, we apply a bigger font size and line height. However, in this specific case, there is a whitespace that has the default font size and line height which causes this issue. (this root cause is the same as the other 2 issues above)

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

We need to apply a bigger line height to the whole message when the message contains only emojis. Then, we can remove the other solutions from #43394 and #47899. To do this:

1. Pass containsOnlyEmojis to RenderCommentHTML component.
   

   App/src/pages/home/report/comment/TextCommentFragment.tsx

   Lines 89 to 90 in c686295

   	<RenderCommentHTML
   	source={source}

<RenderCommentHTML
    containsOnlyEmojis={containsOnlyEmojis}

2. In RenderCommentHTML, if containsOnlyEmojis, then we add the islarge attribute.
   

   App/src/pages/home/report/comment/RenderCommentHTML.tsx

   Lines 10 to 13 in c686295

   	function RenderCommentHTML({html, source}: RenderCommentHTMLProps) {
   	const commentHtml = source === 'email' ? `<email-comment>${html}</email-comment>` : `<comment>${html}</comment>`;
   	return <RenderHTML html={commentHtml} />;

const commentHtml = source === 'email' ? `<email-comment ${containsOnlyEmojis ? 'islarge' : ''}>${html}</email-comment>` : `<comment ${containsOnlyEmojis ? 'islarge' : ''}>${html}</comment>`;

3. In BaseHTMLEngineProvider, add the emoji-only line-height style if islarge is defined.
   

   App/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

   Lines 50 to 59 in c686295

   	comment: HTMLElementModel.fromCustomModel({
   	tagName: 'comment',
   	mixedUAStyles: {whiteSpace: 'pre'},
   	contentModel: HTMLContentModel.block,
   	}),
   	'email-comment': HTMLElementModel.fromCustomModel({
   	tagName: 'email-comment',
   	mixedUAStyles: {whiteSpace: 'normal'},
   	contentModel: HTMLContentModel.block,
   	}),

getMixedUAStyles: (tnode) => {
    if (tnode.attributes.islarge === undefined) {
        return {whiteSpace: 'pre'}; // normal for email-comment
    }
    return {whiteSpace: 'pre', ...styles.onlyEmojisTextLineHeight};
},

4. Then, remove the islarge from edited and blockquote tag solution
   

   App/src/pages/home/report/comment/TextCommentFragment.tsx

   Lines 71 to 77 in c686295

   	const editedTag = fragment?.isEdited ? `<edited ${styleAsDeleted ? 'deleted' : ''} ${containsOnlyEmojis ? 'islarge' : ''}></edited>` : '';
   	const htmlWithDeletedTag = styleAsDeleted ? `<del>${html}</del>` : html;
   	let htmlContent = htmlWithDeletedTag;
   	if (containsOnlyEmojis) {
   	htmlContent = Str.replaceAll(htmlContent, '<emoji>', '<emoji islarge>');
   	htmlContent = Str.replaceAll(htmlContent, '<blockquote>', '<blockquote isemojisonly>');

5. Since edited has a custom renderer, we should remove the islarge logic from the component too
   

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

   Lines 15 to 17 in c686295

   	const isLarge = !!(tnode.attributes.islarge !== undefined);
   	return (
   	<Text style={isLarge && styles.onlyEmojisTextLineHeight}>

and add fontSize={variables.fontSizeSmall} so our Text component won't apply a default line-height to it.

App/src/components/Text.tsx

Lines 44 to 46 in c686295

	if (!componentStyle.lineHeight && componentStyle.fontSize === variables.fontSizeNormal) {
	componentStyle.lineHeight = variables.fontSizeNormalHeight;
	}

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

N/A, it's a UI visual bug.

[melvin-bot]

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

[melvin-bot]

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

[ZhenjaHorbach]

@bernhardoj
Thanks for your proposal !
Could you create a draft PR please so that I don't miss anything ?

[bernhardoj]

Here is the draft PR: #53707

[ZhenjaHorbach]

Here is the draft PR: #53707

Thanks !
I'll check on Monday

[ZhenjaHorbach]

@bernhardoj
Thanks for your proposal !
Your proposal makes sense and works well !

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @ZhenjaHorbach 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[bernhardoj]

PR is ready. Left some questions on the PR

cc: @ZhenjaHorbach

[Christinadobrzyn]

monitoring PR #53707

[Christinadobrzyn]

monitoring PR #53707

[Christinadobrzyn]

monitoring PR #53707

[Christinadobrzyn]

monitoring #53707

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.84-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix emoji only is cut off if wrapped with markdown and contains whitespaces #53707

If no regressions arise, payment will be issued on 2025-01-21. 🎊

For reference, here are some details about the assignees on this issue:

• @bernhardoj requires payment through NewDot Manual Requests
• @ZhenjaHorbach requires payment automatic offer (Reviewer)

[melvin-bot]

@ZhenjaHorbach @Christinadobrzyn @ZhenjaHorbach The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[ZhenjaHorbach]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

Unfortunately, I did not find suitable PR

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

NA

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

https://github.com/Expensify/Expensify/issues/463328

Test:

1. Send emojis-only messages to any chat with whitespace (for example, 😸 😄)
2. Verify the emoji aren't getting cut off

Do we agree 👍 or 👎

[Christinadobrzyn]

Regression test created - https://github.com/Expensify/Expensify/issues/463328

Payment summary below

• Contributor: @bernhardoj paid $250 via NewDot
• Contributor+: @ZhenjaHorbach paid $250 via Upwork (https://www.upwork.com/nx/wm/workroom/39207806/overview)

Closing this as complete, @bernhardoj please make sure to request payment via NewDot. TY!

[bernhardoj]

Requested in ND.

[JmillsExpensify]

$250 approved for @bernhardoj