Emoji Picker

[zbeyens]

Emoji Combobox

See #638

This reuses our vertical combobox.

Used by:

• Slack and Discord. Diff: they display the picker at the second character inserted after :x<here>. Not sure why.
• Confluence

Pros:

• good UX for chat editor

Cons:

• not compact

Emoji Mart Picker

Reference: Coda

• open the emoji picker from a slash-command
• on blur, save the editor selection in blurSelection
• pick the emoji
• insert it into the editor at blurSelection

Used by:

• Coda, Taskade

Pros:

• smallest implementation and maintenance

Cons:

• requires the slash-command feature or another trigger. Triggering it with : is not good UX.

Emoji Picker

Reference: Notion

• the picker is displayed when typing one character after :<here>
• the picker gets closed on deleting the first character :x to :
• the picker gets closed when inserting a space after 2 characters :xx<here>
• the picker captures all the arrow inputs to move horizontally and vertically
• the picker gets closed on click outside
• the picker gets closed on Escape input
• the picker doesn't get closed if inserting a space after 1 character :x<here> (weird rule, not important)

Used by:

• Notion
• Dropbox Paper

Pros:

• It keeps the editor focus while searching an emoji.
• It's a better alternative to the combobox as it's adds an horizontal direction.

Cons:

• custom implementation

[lukesmurray]

It looks like the Emojimart Picker you described actually relies on the combobox to implement slash commands.

Because both of the first two proposals rely on the combo box an immediate next step might be formalizing the combo box into the packages. Is the existing API something you're comfortable with moving out of stories? Also where would you want to put it if we moved the combobox out of stories?

Once we formalize the combobox I prefer the emoji combobox. The combobox is easier to type which is something I value when writing. For example to insert an emoji grin you would type :gri<enter> in the comobox vs /em<enter>gr<enter> in the slash command.

I don't think implementing the notion emoji picker is a great first step. Feels a bit unnecessary to maintain a full emoji picker as well as the plugins. emoji-mart has 700+ commits which goes to show that implementing an emoji picker is non-trivial. A simple list based emoji picker (emoji combobox) does seem relatively straightforward though.

[zbeyens]

We can create a slate-plugins-combobox package and move the stories/examples/combobox folder into it (and keep the tag example in the stories). It still needs to be polished for better reusability but good enough for a first release.

The emoji combobox is definitely the best start as you already have a working solution!

The notion emoji picker is just an alternative to people wanting a compact mode, I'm just exposing the specs to those who would like to try out this challenge, which is first to extend the combobox with a horizontal direction, that may fit other use cases 🙂 Low priority anyway.

[bojangles-m]

Hi, is there a POC or similar to look into?

[zbeyens]

#638

[bojangles-m]

Thnx for it, is this plugin gonna be further developed?
If not, is it useful to orientate self by the code for creating one or are on the way breaking changes and the way is not good approach?

[zbeyens]

There is plan to reopen it

[zbeyens]

Completed in 18.11.0

[jason-allen-oneal]

Is there documentation on emojis in Plate anywhere?