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.

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

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.

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.

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

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

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

Here is the draft PR: #53707

Here is the draft PR: #53707

Thanks !
I'll check on Monday

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

🎀👀🎀 C reviewed

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

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

PR is ready. Left some questions on the PR

cc: @ZhenjaHorbach

monitoring PR #53707