Element-web: Remove emojione

[turt2live]

• [x] Fix https://github.com/vector-im/riot-web/issues/5050

[nadonomy]

For completeness, the rationale for this is:

• Using custom emoji greatly impacts performance
• Emoji One changed their license structure, so now in order to upgrade we need to purchase a costly license
• Originally, the intention was to have cross-platform parity for emoji, however this was never implemented on mobile, and is no longer believed to be high enough priority to justify neither the maintenance or license cost
• We think it's a better use of resources all round for us to concentrate on building awesome app features, and let OS vendors concentrate on implementing emoji

[t3chguy]

Would solve https://github.com/vector-im/riot-web/issues/7356

[turt2live]

it would solve a lot of issues, which I'll gather later today

[t3chguy]

I was considering ripping this out later today, but we may need to leave the dependency in at least for now for the :) -> 😄 lookup map it provides

[turt2live]

I'd recommend swinging by #riot-dev so that @lampholder and co. can help communicate scope, urgency, etc as well as be kept in the loop :)

[evoL]

Heads up — if you want to remove EmojiOne and still keep a lookup table, here's a good source: https://github.com/iamcal/emoji-data

[aaronraimist]

Should fix #7398 as well

[koyuawsmbrtn]

Just saying Twemoji is freely available. Mastodon uses it too so no need to remove EmojiOne.

[jryans]

Marking this as potentially part of the reactions project, as that is using native emoji, which means there's two sets of emoji in app (emojione and native) until we do this work.

[ara4n]

So having played with reactions in the wild a bit, it's become very apparent that native emoji aren't up to the job:

• They are wildly inconsistent across platforms, which is particularly painful for reactions.
• Chances are high on linux that you don't have a recent emoji font installed anyway.

So, I took a look at whether we could switch for twemoji instead.

Turns out that these days, colour font support (via microsoft-style COLR/CPAL extensions to OTF) have landed in all the main browsers, as of last year, and conveniently the nice people at mozilla have written something which takes the twemoji SVG set (originally emojione, but they switched to twemoji a few years ago) and mangles them into such a font: https://github.com/mozilla/twemoji-colr/, which they then use for consistent emoji fallback on FF.

with the minor catch, that it's currently broken.

however, i think i got to the bottom of it: https://github.com/mozilla/twemoji-colr/issues/50

The resulting WOFF2 is 400KB, which I think we can handle fine.

So, i think we should rip out emojione with extreme prejudice, set twemoji as the fallback font after Nunito, and bask in the happiness of consistent emoji everywhere. Mobile can use it too (cc @manuroe).

Finally, we'll need to switch to emojibase-data or something to populate up the emoji autocomplete, at least until we switch to a better picker like emojimart.

[ara4n]

worth noting this will remove hoverover tooltips on emoji to tell you what the :smiley: style representation is, unless we do something new with JS onhoverover to do it manually.

[ara4n]

heads up that i started this over at https://github.com/matrix-org/matrix-react-sdk/tree/matthew/twemoji by blindly switching things over. haven't tried building/testing/profiling/optimising it yet.

Edit: now ready for review at https://github.com/matrix-org/matrix-react-sdk/pull/2995

[martindale]

Heads up — if you want to remove EmojiOne and still keep a lookup table, here's a good source: https://github.com/iamcal/emoji-data

Thanks! Super helpful.