Emoji Implementation

[luke-]

We should check whether the current implementation (via Twemoji) is state-of-the-art or whether there are better options.

Some features/problems which are missing:

• GIF support (ideally via customizable providers)
• In Twemoji there are some empty cards
• Localized Search
• Skin Tone?

Related: https://github.com/humhub/humhub/issues/6801

@serh-mosk Can you please do some research on what options we have here? Please do not implement anything yet.

As example I really like the Telegram Picker:

[serh-mosk]

@luke- I've looked into using stickers or gifs in the twemoji. These are essentially custom emoticons. twemoji does not support custom emojis as stated in the documentation. Regarding empty cards - when running the module tests, no such cards were visible that did not have emoji images, although several empty items <li class="atwho-emoji-entry"></li> were still detected. I think it can be fixed. There is no mention of skin tone support by the twomoji module, although the unicode-emoji-json module has a corresponding data structure. Therefore, I think that it is possible to implement skin tone support, but we will have to deal with it ourselves and write additional code. We will also have to do the localization of the search in the Twemoji module ourselves.

I also looked for a module that would support all these features by default and I found only one such - https://www.npmjs.com/package/emoji-mart. By the way, I had to use it on one of the Angular projects. In this module, it is possible to add custom emojis, choose the type of emojis used (Native, Apple, Google, Facebook or Twitter), there is support for skin tones and localization (although only for the interface), convenient methods and control parameters. See examples - https://missiveapp.com/open/emoji-mart

[luke-]

@serh-mosk Thanks for the investigation. I find emoji-mart very interesting. Maybe it makes sense to switch to this picker sooner or later.

Can you take a look into the empty cards? Maybe we find a quick fix for this.

[serh-mosk]

@luke- To fix the missing of some emoji images, I had to make changes not only in the module but also in the main project to add the missing images. Therefore, there are two PRs for this task: https://github.com/humhub/humhub/pull/6829 and https://github.com/humhub/humhub-prosemirror/pull/139.

[luke-]

@serh-mosk Thank you very much. Can you please explain a few details here about the changes you have made?

Where do the modified files come from? Can we also load this somehow via NPM?

[serh-mosk]

@luke- Judging by the history of the repository, these files were added by buddh4 02/08/2018, 15:28 - Added ProseMirror rich text editor. I just updated them and added new ones from the twemoji repository. Also, in the configuration of the project, the path from where to download emoji images for twemoji is indicated. See protected/humhub/config/common.php: 'twemoji' => [ 'path' => '@web-static/img/twemoji/', 'size' => '72x72' ],

[luke-]

@serh-mosk I see, some new emojis have now been added, e.g.

I can also find it using the search:

But I can't find it without searching in the categories. Perhaps something e.g. the mapping needs to be updated here as well?

[serh-mosk]

@luke- Yes, I think we should reconsider what new categories there are and add them if necessary.

[serh-mosk]

@luke- I checked - all available twemoji categories are added and all emojis are displayed correctly. See the screenshots:

[luke-]

@serh-mosk Ok thanks, then I probably overlooked it.

One more question: Is the Prosemirror Editor PR also compatible with older HumHub versions? (without the second PR) I think I saw an error message during tests (Undefined Replace Functions).

If not, do you see a way to make it backwards compatible?

[serh-mosk]

@luke- I tried the module humhub-prosemirror without the second PR for HumHub and there were no errors other than 404 for missing emoji images. We can try not to display those emojis whose images are missing, but this approach will greatly burden the opening of the emoji selection window, since it will be necessary to check for each emoji whether it has an image or not. And that's a pretty bad decision. The module itself does not contain errors, all tests pass correctly. So I don't see any other way to solve the problem other than updating HumHub and the module humhub-prosemirror at the same time.

[luke-]

@serh-mosk Thats fine as it is. Thanks for testing. the 404 are no problem.