JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>
Create Span
</button>
<div id="editor" contenteditable="true">
This is a contenteditable area.
</div>

CSS

.inline-equation {
  background-color: red;
  display: inline-block;
}

#editor {
  width: 100%;
  height: 100%;
}

JavaScript

function createSpan() {
    let selection = document.getSelection();
    let range = selection.getRangeAt(0);
    let element = document.createElement("span");
    element.className = "inline-equation";
    range.surroundContents(element);

    let newRange = new Range();
    newRange.selectNodeContents(element);
    selection.removeAllRanges();
    selection.addRange(newRange);
}

$("button").click(createSpan)

$("#editor").on('keyup',(e) => {
  var editor = $("#editor").get(0)
  var cn = editor.childNodes;
  
  if (cn[cn.length - 1].nodeType !== Node.TEXT_NODE)
  {
     empty = document.createTextNode( '\uFEFF' );
     editor.appendChild(empty);
  }
 
 if (cn[0].nodeType !== Node.TEXT_NODE)
  {
     empty = document.createTextNode( '\uFEFF' );
     editor.prepend(empty);
  }
})