Inserting inline emojis into a textarea (EmojiOne)

Question

I have a chat composer component where the user can type a message and add emojis. I have an <EmojiPicker /> component which has a callback that will be called with the :shortname: of the emoji.

Example:

emojiPickerCallback(shortname) {
        let input = ReactDOM.findDOMNode(this.refs.textInput).value;
        let output = emojione.shortnameToImage(input + shortname);
        ReactDOM.findDOMNode(this.refs.textInput).value = output;
}

<EmojiPicker callback={this.emojiPickerCallback.bind(this)} />

The issue is, this will output the following into the textarea, instead of just an emoji:

<img class="emojione" alt="" title=":zipper_mouth:" src="https://cdn.jsdelivr.net/emojione/assets/png/1f910.png?v=2.2.7"/>

What do I need to do to get inline emojies using EmojiOne into a textarea?

Answer 1

Looks like answer is "nothing you can do", as enojione is bunch of HTML tags, and textarea cannot render it (textarea can show just plain text).

Please replace textarea with appropriate container that can render html tags. For instance, TinyMCE, CKEditor or Quill or Trumbowyg or another lightweight WYSIWYG html editor (hundreds of it)