[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 ?