Emojis: Show the emojis skin tones as a separate option

[MightyCreak]

The emoji popup can be cluttered quite fast, mainly because of the skin tones.

I find Slack's solution quite elegant, you can select the skin tone in the emoji popup in the text bar. The emoji completion popup doesn't propose the skin tones though, it takes the one selected in the emoji button popup.

Using the default tone

Emoji collection popup:

Emoji text completion:

Using a different skin tone

Emoji collection popup:

Emoji text completion:

[MightyCreak]

Part of #2984

[ara4n]

first of all we need the RTE emoji picker to land! but then yes, this would be cute.

[turt2live]

I'm going to close this in favour of https://github.com/vector-im/riot-web/issues/1107 as that seems like the best route to handle this.

[annevk]

Can this be reopened because there's still no support for skin tones as far as I can tell.

Edit: thanks!

[juliusv]

Is there currently any way to pick a skin tone at all, or would this have to get completely reintroduced? Reading https://github.com/vector-im/element-web/issues/4928 I gather that it must once have showed all skin tones, but now when I look at the emoji picker, I just see the yellow ones and no skin tone options anywhere that I can find?

[Mikaela]

Slack nowadays also has a separate option in settings for default skin tone which is then shown everywhere and it additionally has a nice stacking effect on different tones being used. I miss this in Elements which only allow reacting with different tones if there is another colour in reactions already.