JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<div id="write-mail">
			<div style="position: relative;">
      <div id="new-mail-content" contenteditable="true">
          <div>How to return the caret where it was in the sentence after clicking the buttons?</div>
          <div>Maybe prevent the caret from being removed after clicking the buttons?</div>
          <div>I know I can store the current selection by using window.getSelection(). If I would be able to reactivate this selection, that would be great!</div>
      </div>
				<div id="emotepicker">
					<button><span>&#10004;</span></button>
					<button><span>&#10031;</span></button>
					<button><span>&#10008;</span></button>
          <button id='close'>
          close
          </button>
				</div>
			</div>
				<button class="add-icon">Add Icon</button>	
			</div>
      
      
      <div id='caretposition'>
      
      </div>

CSS

#new-mail-content{
  background-color: white;
  min-height: 5em;
}
#write-mail button{
  height: 30px;
}
#emotepicker{
  display: none; 
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0,0,0,0.1);
  text-align: center;
}
div{
  padding: 2px;
}

JavaScript

var caretpos =0 ;
$(".add-icon").click(function(){
	$("#emotepicker").toggle();
});

$('#close').click(function(e){
	$("#emotepicker").toggle();
  $("#new-mail-content").focus();
  var node = document.querySelector("new-mail-content");
  node.focus();
  var textNode = node.firstChild;
  var caret = caretpos;
  var range = document.createRange();
  range.setStart(textNode, caret);
  range.setEnd(textNode, caret);
  var sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
})

function getCaretCharacterOffsetWithin(element) {
    var caretOffset = 0;
    var doc = element.ownerDocument || element.document;
    var win = doc.defaultView || doc.parentWindow;
    var sel;
    if (typeof win.getSelection != "undefined") {
        sel = win.getSelection();
        if (sel.rangeCount > 0) {
            var range = win.getSelection().getRangeAt(0);
            var preCaretRange = range.cloneRange();
            preCaretRange.selectNodeContents(element);
            preCaretRange.setEnd(range.endContainer, range.endOffset);
            caretOffset = preCaretRange.toString().length;
        }
    } else if ( (sel = doc.selection) && sel.type != "Control") {
        var textRange = sel.createRange();
        var preCaretTextRange = doc.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    return caretOffset;
}

function showCaretPos() {
    var el = document.getElementById("new-mail-content");
    var caretPosEl = document.getElementById("caretposition");
    caretpos = getCaretCharacterOffsetWithin(el);
    caretPosEl.innerHTML = "Caret position: " + carePosEl;
}

document.body.onkeyup = showCaretPos;
document.body.onmouseup = showCaretPos;