Emoji plugin

[mlewand]

Are you reporting a feature request or a bug?

Feature request

Provide detailed reproduction steps (if any)

Emojis are already out there for quite some time and are well supported by the latest OSes, it would make sense to incorporate them into CKEditor.

A common way to type emojis is by wrapping a emoji keyword with a colon, like :+1:, :slightly_smiling_face: etc.

Since we're already working on Autocomplete feature it make reuse it for Emoji plugin.

Features

Emoji autocomplete

When typing :sligh CKEditor should show a autocomplete with all the matched emojis.

Text conversion

Editor should automatically convert emojis when called with method like editor.insertText, editor.setData etc.

So calling editor.setData( '<p>This is emoji test :+1::+1:</p>' ) should set the editor content to a paragraph with This is emoji test 👍👍. Note that it should be integrated with undo, so that there's no extra snapshot.

There should be few elements where the emoji should not be automatically converted, for instance, code tag. Consider editor.setData( '<pre><code>This is emoji test :+1::+1:</code></pre>' ) - in this case Emoji should not be inlined.

It should be possible to disable this feature.

Configuration

It should be possible to customize lists of emojis. Doesn't matter if it's going to be through config option, or by a dedicated API in plugin namespace.

Browser Support

The complete list of supported browsers is to be determined.

We should target for all the latest browsers. Legacy browsers like IE8-IE10 could be skipped if that's an issue. are skipped due to their bad support for emojis.

Preview / Demo

Users interested in seeing how the feature looks today can preview it here.

[mlewand]

Sample implementation can be viewed at: https://codepen.io/mlewand/pen/WMmWyr

Note that we need to be clever about keeping good performance of the plugin.

This plugin has a good chance to replace the good old smileys plugin.

[msamsel]

@mlewand how emoji plugin should be integrated with undo plugin.
By default without any additional integration there is created additional step before autocomplete conversion. Example undo snaphot:

1. Foo^Bar
2. Foo:sm^Bar (here is pressing enter for autocomplete of :smile: face)
3. Foo😄^Bar

Should we preserve 2nd step or should be locked somehow.
I also wonder how it might behave when someone will type non valid emoji name.
E.g. ( Foo:something:Bar ) In such case locking snapshot shouldn't happen.
Also might be tricky to distinguish such situation. :s prefix will trigger smiley face which later on will be removed from autocomplete as non-valid value.

[mlewand]

The more I think about it, the more I like the option with keeping the :<tokenPart>.

Reason why I see having :sm in undo snapshot list is that you might have accidentally picked wrong autocompletion, and you want to ctrl/cmd+z it and choose other option.

So let's implement it that way.

[mlewand]

To clarify, we'll start with a limited number of features. So there's no need to store labels, there's no need to categroize emojis etc.