[$500] MEDIUM: Mouse over emoji to get name

[quinthar]

Strategy:
Making the workplace fun is good business. One way to do that is by supporting emoji, to make conversations more fun.

Problem:
Many emoji are kind of unclear, meaning the joke falls flat or whatever message you try to send might be missed.

Solution:
On desktop, when you hover over an emoji, show the name of that emoji. Pay particular attention to performance, as previous hover states have sometimes introduced major performance regressions -- ask in #expensify-open-source for advice.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01bf03f6fb12beb641
• Upwork Job ID: 1745259225093054464
• Last Price Increase: 2024-01-18
• Automatic offers:
• fedirjh | Reviewer | 28118473
• dukenv0307 | Contributor | 28118474

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @zanyrenney (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[melvin-bot]

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

[dukenv0307]

Proposal

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

We want to show emoji name on hover on emoji, I assume this only applies to Emojis that appear in the chat.

What is the root cause of that problem?

This is new feature

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

(All below are pseudocode and we can polish that and fix minor cases in the PR if the solution is accepted)

1. Add a rule in ExepnsifyMark that will wrap the emojis in the comment inside a <emoji></emoji> tag, based on the CONST.REG_EXP.EMOJIS Regex
2. Add an EmojiRenderer that's responsible for rendering the emoji, and put it in here to handle the emoji tag

'emoji': EmojiRenderer,

3. The EmojiRenderer will render the emoji inside a Tooltip, with renderTooltipContent that renders according to the design
4. Address minor cases like if the emojis are the only thing in a comment (no other texts), show an enlarged emojis

Some notes:

• The emoji name can be retrieved similar to here (we need to get the emoji by code and then get the name that way)
• The containsEmoji here currently has a bug because it's using a global regex so the regex validation result will be cached accross checks, we need to construct a new RegExp based on CONST.REGEX.EMOJI pattern inside containsEmoji so it will have a new regex every time.
• For platforms where tooltip is not available (like native), of course we'll return just pure Text inside EmojiRenderer so it doesn't affect those platforms in any way.

We can have custom design for the Tooltip, or use the default Tooltip style, based on design team's opinion.

What alternative solutions did you explore? (Optional)

I don't think we should apply the emoji tooltips for text inside TextInput because the user typing already knows the emoji name (need to know the name to search via autosuggestion or emoji picker), but if we do, we'll need additional handling.

[dragnoir]

Proposal

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

Hovering eùojies does not display names.

What is the root cause of that problem?

Missing the hover action when hovering emojies.

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

I suggest displaying the emoji name on this area:

Then it will be like that:

We can add a function here to set hevered emoji

App/src/components/EmojiPicker/EmojiPickerMenuItem/index.js

Line 82 in e54abdf

onHoverIn={() => {

Change the skin tone icon to the right

App/src/components/EmojiPicker/EmojiSkinToneList.js

Lines 37 to 49 in e54abdf

	<View style={[styles.flexRow, styles.p3, styles.ph4, styles.emojiPickerContainer]}>
	{!isSkinToneListVisible && (
	<PressableWithoutFeedback
	onPress={toggleIsSkinToneListVisible}
	style={[styles.flexRow, styles.alignSelfCenter, styles.justifyContentStart, styles.alignItemsCenter]}
	accessibilityLabel={translate('emojiPicker.skinTonePickerLabel')}
	role={CONST.ROLE.BUTTON}
	>
	<View style={[styles.emojiItem, styles.wAuto, styles.justifyContentCenter]}>
	<Text style={[styles.emojiText, styles.ph2, styles.textNoWrap]}>{currentSkinTone.code}</Text>
	</View>
	<Text style={[styles.emojiSkinToneTitle]}>{translate('emojiPicker.skinTonePickerLabel')}</Text>
	</PressableWithoutFeedback>

Add new component on the left for displaying the Emoj name.

[zanyrenney]

@fedirjh please review the proposals above for this!

[fedirjh]

@zanyrenney What sould the tooltip for the emoji contains ? is it just text , or text with emoji , similar to what's slack doing , for reference :

Slack	Just Text

[fedirjh]

cc @stitesExpensify I would like to get your inputs on this issue.

[zanyrenney]

Great question, thanks for bringing this up @fedirjh. I'm going to take this to the channel and I will tag Brandon and David for their input seeing as they are the ones that have reported/worked on this in the past.

[zanyrenney]

asked here - https://expensify.slack.com/archives/C01GTK53T8Q/p1705321349706809

[stitesExpensify]

@fedirjh we decided to go with the slack style version with an enlarged version of the emoji

[fedirjh]

@dukenv0307 Could you please update your proposal to match the expected style in #34307 (comment) ?

Regarding the solution, considering our prior successful implementation of a similar use case involving user mentions, which required a custom renderer within the HTMLEngineProvider, I would like to propose adopting a similar approach for the implementation of an emoji renderer. Could we explore this solution?

App/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js

Line 29 in e54abdf

function MentionUserRenderer(props) {

[dukenv0307]

@dukenv0307 Could you please update your proposal to match the expected style in #34307 (comment) ?

@fedirjh sure, we just need to pass custom renderTooltipContent to the Tooltip for the emoji.

Regarding the solution, considering our prior successful implementation of a similar use case involving user mentions, which required a custom renderer within the HTMLEngineProvider, I would like to propose adopting a similar approach for the implementation of an emoji renderer. Could we explore this solution?

@fedirjh sure, we can have a EmojiRenderer similar to MentionUserRenderer, I'll post the details for that soon

[melvin-bot]

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

[quinthar]

What are the next steps here? Who is doing them, and when will it happen?

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@fedirjh] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@zanyrenney] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[dukenv0307]

@fedirjh Create another PR Expensify/expensify-common#664 here since the previous PR is reverted for the new bump expensify-common.

[roryabraham]

removing the HOLD for payment since the first PR was reverted

[stitesExpensify]

I believe we're just waiting for the PR to be live for a week and then we can issue payment here. We just deployed to prod 2 days ago

[robertKozik]

Hey hey, coming with a simple question. Is it intended to parse an emoji inside code blocks? We are getting an error on parsing in react-native-live-markdown due to adding html tags inside html attributes when emoji is present there and I'm wondering if I can simply prohibit parsing emoji within code blocks 🤔🤔🤔

[fedirjh]

Is it intended to parse an emoji inside code blocks?

@robertKozik Nope, it's a bug that will be fixed in #14676, check this #34307 (comment)

[dukenv0307]

@zanyrenney The PR was deployed to production last week. Please add Awaiting payment label.

[stitesExpensify]

Hm looks like the bot doesn't want to add the payment comments? Do we need the bug label instead of new feature maybe?

[fedirjh]

I guess this needs a regression test:

Regression Test Proposal

1. Open App and select a chat.
2. Send a message containing emojis
3. Hover over the emoji and verify that a tooltip appears 
4. Verify tooltip displays an enlarged emoji and the emoji name

• Do we agree 👍 or 👎

[zanyrenney]

payment summary

paid @fedirjh $500 via upwork
paid @dukenv0307 $500 via upwork.

Closing!