JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<script src="//code.jquery.com/jquery-2.2.3.min.js"></script>
<div id="editText" contenteditable="true" placeholder="type message here or add some emojis"></div>
<div class="faces">
  <img src="http://cdn.jsdelivr.net/emojione/assets/svg/263a.svg" data-src="263a" />
  <img src="http://cdn.jsdelivr.net/emojione/assets/svg/1f60a.svg" data-src="1f60a" />
  <img src="http://cdn.jsdelivr.net/emojione/assets/svg/2639.svg" data-src="2639" />
  <img src="http://cdn.jsdelivr.net/emojione/assets/svg/1f60b.svg" data-src="1f60b" />
  <img src="http://cdn.jsdelivr.net/emojione/assets/svg/1f60c.svg" data-src="1f60c" />
  <img src="http://cdn.jsdelivr.net/emojione/assets/svg/1f60d.svg" data-src="1f60d" />
  <img src="http://cdn.jsdelivr.net/emojione/assets/svg/1f60e.svg" data-src="1f60e" />
  <img src="http://cdn.jsdelivr.net/emojione/assets/svg/1f60f.svg" data-src="1f60f" />
  <img src="http://cdn.jsdelivr.net/emojione/assets/svg/1f61a.svg" data-src="1f61a" />
</div>
<div style="clear:both"></div>

CSS

#editText img {
  width:1em;
}


[contenteditable]{
  width:100%;
  height:2em;
  background:#FFF;
  line-height:1em;
  font-size:0.8em;
  -webkit-appearance: textfield;
  appearance: textfield
}
input{
  width:100%;
  margin-top:1em;
  margin-bottom:1em;
}
.faces{
  margin-bottom:2em;
}
.faces{
  width:100%;
  height:auto;
}
.faces img {
  float:left;
  width:8vw;
  margin:1vw;
}
#val, #html{
  border:solid 1px red;
  margin-bottom:2em;
  padding:1em;
}

JavaScript

function getCaret(obj) {
	var caretPos = 0,
    sel, range;
	sel = window.getSelection();
    if (sel.rangeCount) {
      range = sel.getRangeAt(0);
      if (range.commonAncestorContainer.parentNode == obj) {
        caretPos = range.endOffset;
      }
    }
  return caretPos;
};
function setCaret(id, pos) {
    var el = document.getElementById(id);
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(el.childNodes[0], pos);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    el.focus();
}
$(function () {
	$('img').click(function () {
		var org =  $('#editText').html();
		var txt = this.outerHTML;
		var div = document.getElementById('editText');
		var caret = getCaret(div);
	   $('#editText').focus();
	   var caret_end = "";
		if (typeof window.getSelection != "undefined") {
			var sel = window.getSelection();
			if (sel.rangeCount) {
				var container = document.createElement("div");
				for (var i = 0, len = sel.rangeCount; i < len; ++i) {
					container.appendChild(sel.getRangeAt(i).cloneContents());
				}
				caret_end = container.innerHTML;
			}
		} else if (typeof document.selection != "undefined") {
			if (document.selection.type == "Text") {
				caret_end = document.selection.createRange().htmlText;
			}
		}
		if(caret_end.length == 0){
			if(caret == 0){
				$('#editText').html(txt + org);
				setCaret('editText', (caret + 1));
		   } else if(caret == $('#editText').text().length){
				$('#editText').html(org + txt);
				setCaret('editText', $('#editText').text().length);
		   } else {
				//insert in place
				var p1 = $('#editText').text().substring(0, caret);
				var p2 = $('#editText').text().substring(caret, $('#editText').text().length);
				$('#editText').html(p1 + txt + p2);
				setCaret('editText', (caret + 1));
		   }
		} else {
			//replace highlighted text
			var p1 = $('#editText').text().substring(0, caret);
			var p2 = $('#editText').text().substring(caret,...