Implement extended emoji picker for reactions

[tiltec]

Right now, we hardcoded a selection of 5 in the frontend:

It would be nice if people could choose from more emoji when giving reactions.

Our implementation already supports all of twemoji, so the only thing that's left is a nice way to select emoji. A few commonly used emoji should still be easy to access, and a full text search (in emoji names) could be added to aid emoji power users :)

https://github.com/missive/emoji-mart/ seems the best open-source implementation out there, but it might be a bit too heavy - and it's only available for React.
https://github.com/jm-david/emoji-mart-vue exists for Vue, but the last time @mrkvon tried it there were some problems (I remember that it used non-standard emoji names).

Some time ago, I started an implementation based on simple text input: https://github.com/yunity/karrot-frontend/compare/emoji-autocomplete
Maybe it could be used as a starting point.

[tiltec]

Githubs mobile emoji picker seems to have quite good UX and it could be extended to support more emoji.

[djahnie]

This would be really awesome to have and it's a frontend only task, so I'd naturally be interested normally. It's just that I can't quite imagine hoe to approach this - feels somehow different to what I did before. I might request coaching for this and have a look at some point, but I'd be much more happy if a random person from the internet showed up and made this a thing... ;)

[andreseg9726]

Hello, is this something you still need help with? I'd be more than glad to try to work on it!

[tiltec]

Hi @andreseg9726, yes please!
Did you work with VueJS already?

[andreseg9726]

I've used it only at a small scale for some coursework but I'm willing to self learn more! I'd like to hear more about the way you started implementing it if that's okay with you. I've also joined the slack channel in case that's better for communicating.

[tiltec]

Nice! I'll dump the issue-related information here.

My experiment was https://github.com/yunity/karrot-frontend/compare/emoji-autocomplete - essentially just an autocomplete in case the user wants to choose an emoji that's not in the selection. It takes the list of emoji from markdown-it-emoji as we already have that as dependency.

The user would need to know the emoji short name they want to pick (e.g. "thumbsup", "pizza" or "smile"), which is not the best choice for UX.

I had a quick look at existing Vue libraries that might offer better UX and found those:

• https://github.com/DCzajkowski/vue-emoji-picker
• https://github.com/shershen08/emoji-vue

You could have a look at those and figure out if you want to try one of them or rather code your own.

[andreseg9726]

Hey, I noticed that you mentioned that the emoji-mart was a bit too 'heavy'. Would you prefer then if the picker looked just as it does now but with a functioning search bar at the top (Kind of like the GitHub one looks like)? Or is a slack-like emoji-mart implementation better?

[tiltec]

Would you prefer then if the picker looked just as it does now but with a functioning search bar at the top?

Yeah, I would prefer that, based on the assuption that there are ~10 frequently used emoji. The others would be for power users who are comfortable using text search.

But maybe one of those ready made implementations is also nice and allows us to have a good picker with less code to maintain ourselves?

[andreseg9726]

@tiltec So I just finished an implementation based on the markdown-it-emoji list with a working search bar that looks like the following:

However, I'm running into an issue that perhaps you mentioned earlier where a few names that the backend normalizes are not the same ones used on this list. When this happens, I chose to just show a carrot by default right now as I'm struggling to find a solution. This happens for example with the flags:

What do you think about this? Is this okay?

[tiltec]

Hey, looks great! Can you open a pull request?

Don't worry about the normalized emoji, I'll change that in the backend.

---

A bit more details about emoji names:

There's no standard about emoji names (also called shortcodes). It seems every system implements their own variation.

The backend uses EmojiOne shortcode, via https://github.com/facelessuser/pymdown-extensions
The frontend uses Github emoji shortcodes, via https://github.com/markdown-it/markdown-it-emoji

Backend knows 2829 unique emoji names, frontend knows 1480. I compared both lists:

• frontend doesn't understand 1830 names from the backend
• backend doesn't understand 386 names from the frontend

I considered these workarounds --

1. remove backend normalization & validation; frontend would takes care of merging equal emoji
2. store unicode: frontend would convert emoji shortcode into unicode; backend validation checks it against standardized tables
3. use frontend emoji list for backend validation: copy full.json into the backend repository; skip normalization as there are no alias definitions (I'm leaning towards this)

[tiltec]

I resolved the problem in the backend, it accepts all emoji from markdown-it-emoji full.json.

Sometimes different names point to the same unicode symbol. I introduced a mapping to normalize this.
Here's the list: https://github.com/yunity/karrot-backend/blob/394ad414c0b8d7064161a7481cecb8dddd4f74f2/karrot/conversations/emoji_db.py#L1429
For example, "phone": "telephone" means that :phone: gets rewritten into :telephone:.