[$250] Emoji appears as larger when writing with a text in the composer

@twisterdotcom

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: 1.4.61-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @twisterdotcom
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1712399898397189

Action Performed:

Open any chat
Write some text and add an emoji

Expected Result:

Emoji should not appear as bigger in size

Actual Result:

Emoji appears bigger and after sending the emoji reduced in size.

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

Screenshots/Videos

Add any screenshot/video evidence

Recording.2954.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~0133c309a7b0cbb650
Upwork Job ID: 1778610583524839424
Last Price Increase: 2024-04-19
Automatic offers:

rayane-djouah | Contributor | 0

@greg-schroeder

Triggered auto assignment to @greg-schroeder (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

Is this actually a bug? This is how Whatsapp works

Oh nevermind I see what you mean, it's larger in the composer than when inline, not that it's larger with no text accompanying it in general (which is expected I think)

Proposal

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

The emoji is shown larger in live markdown preview when it should be normal size when there is a text other than emoji, just like in the sent message.

What is the root cause of that problem?

When there is an emoji, we wrap it with <emoji> tag. For the emoji tag, we set the font size to 20.
https://github.com/Expensify/react-native-live-markdown/blob/4a87a7a83898091f6c4521f895cbb1949a9dd39d/src/styleUtils.ts#L26-L28

The style is applied without checking whether the text contains only emojis or not, compared to the sent message where we only make the emojis larger if the text only contains emojis (by passing the islarge attribute).

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

Lines 59 to 60 in b0c4178

    
           const htmlContent = containsOnlyEmojis ? Str.replaceAll(htmlWithDeletedTag, '<emoji>', '<emoji islarge>') : htmlWithDeletedTag; 
        
           let htmlWithTag = editedTag ? `${htmlContent}${editedTag}` : htmlContent;

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

We also should conditionally applied the emoji only font size if the text only contains emoji. We can do the simplest fix in our App by passing the custom markdown style.

const customMarkdownStyle = useMemo(() => ({
    ...markdownStyle,
    ...(!EmojiUtils.containsOnlyEmojis(value ?? '') ? {emoji: {fontSize: undefined}} : {}),
}), [markdownStyle, value]);

<RNMarkdownTextInput markdownStyle={customMarkdownStyle}

What alternative solutions did you explore? (Optional)

If we want to go with a hard path, we can update expensify-common by adding islarge attribute to the emoji tag when parsing the markdown and then update react-native-live-markdown to conditionally apply the emoji font size when islarge is present.

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

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

Sending through to External

@rayane-djouah

Please review these now @rayane-djouah.

I can reproduce the bug only on production, not on staging or dev:

Recording.2024-04-16.112540.mp4

It's already fixed in #39597

We can close this then

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

@greg-schroeder

@greg-schroeder The bug is not reproducible; we can close this issue

@greg-schroeder

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

@greg-schroeder

@greg-schroeder Whoops! This issue is 2 days overdue. Let's get this updated quick!

Let's close.

Navigation Menu

Repository navigation

[$250] Emoji appears as larger when writing with a text in the composer #39867

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

10 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	const htmlContent = containsOnlyEmojis ? Str.replaceAll(htmlWithDeletedTag, '<emoji>', '<emoji islarge>') : htmlWithDeletedTag;
	let htmlWithTag = editedTag ? `${htmlContent}${editedTag}` : htmlContent;

[$250] Emoji appears as larger when writing with a text in the composer #39867

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Apr 8, 2024

greg-schroeder commented on Apr 9, 2024

greg-schroeder commented on Apr 9, 2024

bernhardoj commented on Apr 9, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

melvin-bot commented on Apr 12, 2024

melvin-bot commented on Apr 12, 2024

greg-schroeder commented on Apr 12, 2024

10 remaining items

twisterdotcom commented on Apr 16, 2024

rayane-d commented on Apr 16, 2024

bernhardoj commented on Apr 16, 2024

rayane-d commented on Apr 16, 2024

melvin-bot commented on Apr 19, 2024

rayane-d commented on Apr 19, 2024

melvin-bot commented on Apr 22, 2024

melvin-bot commented on Apr 22, 2024

twisterdotcom commented on Apr 22, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions