Signal-desktop: Emoji with skin color modifier is shown as two glyphs (macOS)

[gasi]

• [x] I have searched open and closed issues for duplicates
  

---

Bug description

Ensure emojis with skin color modifiers, e.g. ✌🏻, are shown as single glyph instead of two.

Steps to reproduce

1. Open Signal Desktop on Mac
2. Send a message with ✌🏻

Actual result:

Preview shows two glyphs ✌️ 🏻 instead of one.

Expected result:

Show single ✌🏻glyph.

Screenshots

Platform info

Signal version:

Signal Desktop 1.3.0

Operating System:

macOS X 10.12.6

Linked device version:

iOS

[Noahsok]

Hi gasi,
In testing different emojis with different skin color modifiers on mac desktop with signal v1.3.0. and using ^⌘space system emojis, it seems like this is intermittent and dependent on specific emojis.

These four glyphs have this issue:
✌️:v
🖐:raised_hand_with_fingers_splayed
✍️:writing_hand
☝️:point_up

Testing on other electron apps and applications shows that this is not an universal error like in riot, slack, google hangouts, facebook messenger. However, It is an error in gmail hangouts.

With my admittedly limited experience it seems like this could be an issue with an out dated npm dependency, specifically emoji-datasource. Oh! in fact here is the link to the upstream issue (https://github.com/iamcal/emoji-data/issues/105) It was fixed in v4.0.1 and now they are up to v4.0.3.

I will try to put in a pull request soon.

Cheers

[Noahsok]

Here is an update on testing my theory:

built out the staging environment and then updated the emoji-datasource and emoji-datasource from v4.0.0 to v4.0.3. This did not fix the bug. According to emoji-data's closed issue this bug should of been fixed.

Next step was to look at emoji-js and emoji-panel both uses v4.0.0 of emoji-datasource as a dependency for the emoji-js library. Using resolutions with Selective version resolution feature should allow emoji-js to use emoji-datasources v4.0.3.

[jeremymasters]

Is this actually specific to MacOS? On Windows, I'm getting something similar except that something from an iPhone sends me a text with a face (skin-tone 2) and an airplane...which shows up on android client fine, but the desktop version shows a peach colored square, which when hovered over shows "skin-tone-2".

[scottnonnenberg-signal]

@jeremymasters Skin tone handling has been fixed with this PR, soon to be merged: https://github.com/signalapp/Signal-Desktop/pull/2399