Support for custom emojis like fontawesome icons

[ibudisteanu]

Hi @jpuri this library is a great example that uses react draft. Unfortunately the documentation doesn't show how to use custom fontawesome emojis or images(github uses images as emojis). I have been looking also in the emoji\index.js and the code doesn't look like it supports custom types of emojis.

emoji: {   
                  icon: "https://assets-cdn.github.com/images/icons/emoji/unicode/1f604.png",
                  className: "",
                  component: DraftWYSIWYGEmoji,
                  emojis: [
                    "https://assets-cdn.github.com/images/icons/emoji/unicode/1f604.png", '😁', '😂', '😃', '😉', '😋', '😎', '😍', '😗', '🤗', '🤔', '😣', '😫', '😴', '😌', '🤓',
                  ],
                  title: 'Emoji',
                },

It is really easy to implement custom emojis either you transform emojis into an object like

{
    emojiClassName: "fa fa",
    coment: MyVeryOwnEmojiComponent
    emojis: [...],
}

or the simplest way is with images

{
     emojis: [
          {code: ':)', res: 'https://assets-cdn.github.com/images/icons/emoji/unicode/1f604.png'},
          {code: ':D', res: 'https://assets-cdn.github.com/images/icons/emoji/unicode/1f60a.png'}
     ]
}

By doing the 2nd version, you can also wrap a very simple autocomplete for emojis, exactly like the decorator @ Mention

LE: Your solution with unicode emojis isn't working on all browser.. for instance on Chrome

[ibudisteanu]

Today, I have built a personal emojis decorator for your library: it works quite great, except the fact that the decorator mention is quite buggy - if you click with the mouse on the area of an element from the suggestion the software inserts the emojis, but also keep texts (or parts of the text). The bug is replicating by inserting the code and the emojis in the same time. . Probably the caret moves when you click on an element from Suggestion Popup menu and it inserts the emojis forgetting to delete the text)...

https://github.com/ibudisteanu/SkyHub-Frontend-React-Isomorphic/tree/master/src/client/components/util-components/text-editor/wysiwyg/wysiwyg-modified/js/src/Decorators/EmojisDecorator

Moreover, I also updated your emoji controller to accept objects described by a text and an image... Unfortunately, I don't know how to call the entity that adds the emoji from the emoji decorator.

https://github.com/ibudisteanu/SkyHub-Frontend-React-Isomorphic/blob/master/src/client/components/util-components/text-editor/wysiwyg/wysiwyg-modified/js/src/components/Controls/Emoji/index.js

Maybe you can look at my code improving your library. It would be great!

LE: I think React Draft WYSIWYG is of the best, if not the best Draft.JS open-source project and quite Simple to understand Editor

LE2: I personally found a solution to the bug described above using a simple CSS trick https://github.com/jpuri/react-draft-wysiwyg/issues/219

[harunme]

@ibudisteanu thanks for your code

[jpuri]

Thanks @yowangbin ! It will help me improve the lib, may be this can help you to add emoji from the decorator: https://github.com/jpuri/react-draft-wysiwyg/blob/master/src/decorators/Mention/addMention.js#L15

[harunme]

@jpuri Thanks for your reply!! I wish react-draft-wysiwyg support emojis as images, because unicode can not show emoji well.

[ibudisteanu]

@yowangbin see my implementation of images emojis in react. I will no longer maintain my emoji implementation because we switched from React to Vue.js and we use Quill for rich editors.

[jpuri]

@yowangbin : image emoji's have some complexity. I need to check inline images in DraftJS - its able to handle unicodes very nicely.