How to keep the caret on the same place in my contenteditable div while clicking buttons?

Question

I am trying to create an icon in my contenteditable div after clicking on a button with the icon. The issue is that while selecting the icon/button I lose the caret in the text. I want this caret back at its old place after closing the buttons.

I made a JS-Fiddle to illustrate the issue: JSFiddle

PS: The question is especially about the caret. It doesn't matter a lot to me if the icon is inserted or not. That part should be easy to figure out :).

html

<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>
      </div>
  </div>
        <button class="add-icon">Add Icon</button>
</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;
}

jquery/javascript

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

Answer 1

Use the jquery focus method in your click event method.

You might want to make the new-mail-content div into a text area. Something like this should work.

$(".add-icon").click(function(){
    $("#emotepicker").toggle();
    $("#new-mail-content").focus();
});

Here is a link to the documentation: https://api.jquery.com/focus/

Answer 2

This should do what you need:

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;

https://jsfiddle.net/bdy2Ltwo/4/