JSFiddle - React, Tailwind, and code Playground

by Yair Even Or

HTML

<div id="msg" class="msg" style="border: 1px solid red; padding:10px;" contenteditable></div>

<button class="button">Add some text</button>

<strong>Cursor position:</strong> <span class="cursor">0</span>

SCSS

span{
  background:silver;
  padding:2px;
}

JavaScript

function getCaretPosition(editableDiv) {
	  var caretPos = 0,
	    sel, range;
	  if (window.getSelection) {
	    sel = window.getSelection();
	    if (sel.rangeCount) {
	      range = sel.getRangeAt(0);
	      if (range.commonAncestorContainer.parentNode == editableDiv) {
	        caretPos = range.endOffset;
	      }
	    }
	  } else if (document.selection && document.selection.createRange) {
	    range = document.selection.createRange();
	    if (range.parentElement() == editableDiv) {
	      var tempEl = document.createElement("span");
	      editableDiv.insertBefore(tempEl, editableDiv.firstChild);
	      var tempRange = range.duplicate();
	      tempRange.moveToElementText(tempEl);
	      tempRange.setEndPoint("EndToEnd", range);
	      caretPos = tempRange.text.length;
	    }
	  }
	  return caretPos;
	}

$('.button').on('click',function(e){
	var content = $('.msg').html();
	$('.msg').html(content+'<div contenteditable="false" style="font-weight:700;"><strong>Hello world!</strong></div>');
});

$('.msg').on('keyup',function(e){
	$('.cursor').html(getCaretPosition(document.getElementById('msg')));
})