JSFiddle - React, Tailwind, and code Playground

by Florent2

HTML

<div id="editor" contenteditable="true">
</div>
<p id="range-infos"></p>

CSS

div {
    border: dotted;
}

JavaScript

$(function() {
  $("#editor").on("keypress", function(event) {
    var pressedChar = String.fromCharCode(event.which);
    if(/\s/.test(pressedChar)) {
      var selection   = window.getSelection();
      var range       = selection.getRangeAt(0);
      range.setStart(range.startContainer, range.startOffset - 4);

      $("#range-infos").html(range.toString());
        
      selection.removeAllRanges();
      selection.addRange(range);
      document.execCommand('bold', false);
    }
  });
});