Use :syntax: for inserting emoji in rich text

Description

Problems

Some people haven't discovered their native OS emoji selector, so they can't use emojis in rich text at all.
For those who've discovered the native picker, it's too heavy (at least on Windows it has GIFs and whatnot).

Also, the shortcut is not easy to remember compared to :pattern from Slack and Notion.

Emoji sets are inconsistent across OSes which sucks in a collaborative tool.
The sickest example is no flag emojis on Windows.
Add a custom emoji is not possible

Solution

Screenshot 2022-07-25 at 13.06.49 (1).png

Introduce the :emoji: pattern that uses a lightweight version of our unified emoji-icon picker.
1. no search input: the rich text is the input
2. no icons, emojis only
3. no background color
4. no skin tone selector
Add /Emoji slash command that opens our usual emoji picker.
(for pure discoverability, it's not the most convenient way)

Behavior

Emoji picker opens when you type :xx at the start of a line or after a space.
- text:xxx doesn't trigger the picker
- Although text:wave: is converted to text👋
The picker appears after you type :xx
✔️ After how many letters? The fewer — the better for discoverability, but this might hinder regular writing.
- 0 Google Docs
- 1 Notion
- ⭐ 2 Slack, Discord
- 3 Coda
🦄 Highlight matching characters when typing
:ligh → lighter
Outside click or ESC to close the picker and continue typing
The options are displayed in a list together with their aliases
We use Twemoji outside Apple devices
If you add a native emoji, we replace it with Fibery emoji
- if you add a native emoji which has no mapping in our dataset (Twemoji), don't replace
- no migration for native emojis that are already present in rich text
🦄 Use :emoji: syntax in text Fields (incl. Name)
Is it possible to add :syntax: support to text Fields like Name?
(Notion has it)
🦄 Support multi-word emojis :rotating light:

Markdown

How would emojis look like in markdown?

export-import
automations
(incl. Button: ask user to provide value)

This is how other tools do this:

Notion converts back to native emojis but they don't support custom ones in text:
Slack imports-exports :emoji:
Github emoji markup.

Since we want to have custom emojis in the future, these are the options:

🦄 convert to native emojis when there is a match
if there is no match, export as :emoji:

Representations

Turns out emojis can have different presentation mode, e.g. ⛱ and ⛱️ are basically the same character but the second one has one more unicode symbol in it telling to use different presentation mode.