JSFiddle - React, Tailwind, and code Playground

by Andrey Izman

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://rawcdn.githack.com/mervick/emojionearea/ea6d8289cbb4d0e60668d215afd7ab2853e8fafb/js/emojionearea.min.js"></script>
<link rel="stylesheet" href="https://rawcdn.githack.com/mervick/emojionearea/ea6d8289cbb4d0e60668d215afd7ab2853e8fafb/css/emojionearea.min.css">
<span class="nickname">alex</span>
<textarea id="emojionearea1">Type here 😂</textarea>

CSS

* {
  font-family: Arial, Helvetica, san-serif;
}
.nickname {
  cursor: pointer;
}

JavaScript

function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

var emojioneArea1 = null;
$(document).ready(function() {
	emojioneArea1 = $("#emojionearea1").emojioneArea();
  
  $('.nickname').on('click', function(){
		var tmpText = emojioneArea1[0].emojioneArea.getText();
		emojioneArea1[0].emojioneArea.setText(tmpText + ' ' + $(this).text() + ', ');		
		emojioneArea1[0].emojioneArea.editor.focus();
		placeCaretAtEnd(emojioneArea1[0].emojioneArea.editor[0]);
});
  
});