Add support for emojis

[thibaudcolas]

Feature. It should be easy to add emojis in text, in a cross-platform compatible, accessible way.

What is the current behavior?

The editor works in UTF-8, so emojis can be entered manually like any character.

What is the expected behavior?

There should be an emoji picker, and emojis should be annotated to make sure they are renderable in a site's front-end.

As of #171, it should now be possible to include the emoji picker of Draft.js Plugins: https://www.draft-js-plugins.com/plugin/emoji. I would really like to see this done in the Draftail demo site.

[thibaudcolas]

This is now somewhat easier thanks to #171. #192 contains an example.

Draft.js seems to have issues with emojis that will need to be addressed: https://github.com/facebook/draft-js/issues/1105, https://github.com/facebook/draft-js/issues/1969.

[michael-yin]

@thibaudcolas

I already used draftail in my project and now I want to add emoji and mention feature to the editor.

I did some tests on https://demo.draftail.org/storybook/?path=/story/plugins--emoji and below are some problems I found.

EmojiSelect

The popup window did not work well on mobile devices.

I have no idea is it easy to change the order of buttons in toolbar, so we can put emoji at first and this can make things better.

Another way is to use some SCSS (media query?) to solve this problem.

EmojiSuggestions

Can not do auto refresh, you can test by typing :smile

Arrow key seems not working in popup

If I use Mention plugin to reference some people, then the emoji suggest feature is not working any more.

Thx.

[mrolafsson]

Re:

Arrow key seems not working in popup

Is it possible that keyBindingFn is no longer working for plugins? I've defined a simple one that works except that one doesn't seem to fire.

[fridaystreet]

I have both of these plugins working together, they don't use keyBindingsFn they use the onChange hook.

In regards to display of the select box, you can replace the popover component with your own. Just copy the popover component out of the plugin, modify it how you want, and pass your own into the EmojiSelect props.

We use material-ui and so used a <Popper /> as we also wanted to anchor the box above our chat message input and be displayed above it. Couldn't find a nice way to do that using the positionSuggestions stuff in the plugin, so we just don't use that.

[ramibch]

@michael-yin

Michael, thank you for the demo. Do you have the source code of that? I need to add that to my RichtTextField in the admin interface and I dont know how.

Thank you very much.