User should be able to write `:smile:` for 😄 and use other emoji codes

[pdurbin]

As a keyboard junkie, in Slack, GitHub, Zulip, and Element I very frequently write :smile: to get the 😄 emoji. I would prefer not to reach for the mouse to click the emoji button in Quiet:

I'm aware that a workaround on Mac is to hit Ctrl-Cmd-Spacebar to bring up a native emoji picker...

... but it's faster and easier for me to just type :smile: like I do in other places.

Tab completion and search/autocomplete would be nice (see https://github.blog/2012-10-12-emoji-autocomplete/ ). That is, here on GitHub I only have to type :smi and then hit the Tab key to select from a list. Element and Slack work the same way.

Some places such as https://github.com/ikatyang/emoji-cheat-sheet seem to refer to these as emoji shortcodes for anyone searching issues for that term.

https://github.com/wooorm/gemoji maps GitHub emoji codes to emoji and back.

It looks like emoji were first added to Quiet it 654b3151e though the https://www.npmjs.com/package/emoji-picker-react / https://github.com/ealush/emoji-picker-react library. The data is available in https://github.com/ealush/emoji-picker-react/blob/4.0.0/src/data/emojis.json but not but with spaces rather than underscores, like this:

{
  "n": [
    "sweat smile",
    "smiling face with open mouth and cold sweat"
  ],
  "u": "1f605",
  "a": "0.6"
},

Here's a issue about exporting that data, which we would need to do lookup:

• https://github.com/ealush/emoji-picker-react/issues/349

[holmesworcester]

Thanks for this!

Just noting for when we get to this that the visual autocomplete interacts with @ mentions, as the UI is similar, so we might want to tackle it at the same time. This library might work for both, or we could use the existing @ mention code: https://github.com/webscopeio/react-textarea-autocomplete.

We could also look at what other editors or open source chat apps use for this.

[pdurbin]

https://github.com/nolanlawson/emoji-picker-element seems promising. I heard about it at https://shoptalkshow.com/451/ when they interviewed @nolanlawson.

Here's me typing :rock for 🚀

[holmesworcester]

This seems like a good proposal! https://chat.openai.com/share/1491b99e-d50c-463f-af00-d8e389644bc1

[holmesworcester]

@pdurbin should we assign this to you?

[pdurbin]

@holmesworcester no, I'm not actively working on it. I just closed my draft pull request:

• 1822

I'm also happy to close this issue if it helps keeps things tidy.

By the way, https://messages.google.com suffers from the same problem. Typing :smile: doesn't create an emoji:

[agiledev24]

Implemented this feature and created a PR: https://github.com/TryQuiet/quiet/pull/2354

Followed discord design. @holmesworcester

[holmesworcester]

Thank you @agiledev24 !!!

[holmesworcester]

@leblowl how easy is it to make a build for kinda so that she can test this feature and provide feedback or approve quickly?

@jgaylor do you have any feedback on the design? We could have a look at this Friday too.

[leblowl]

@holmesworcester It's easy, but mobile is sort of broken at the moment for @kingalg due to the app crashing, I'm looking into it.

[holmesworcester]

What about starting a desktop-only release?

[leblowl]

Sure, we can

[leblowl]

We generally have been merging into develop before releasing, so I'd probably need to change some things if we want to release this and test before merging. Also we've generally been releasing one thing at a time and 2.1.2 is getting backed up due to some bugs that @kingalg found, so I'll have to think about how we can handle this.

[kingalg]

@holmesworcester In our current situation, I would advise waiting to fix mobiles before releasing. Normally, it wouldn't be a huge problem releasing only one feature for part of the platforms, but we bumped React Native in this version, and there was also some refactoring. It would be better to have it all checked together because there may be some unexpected things.