JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="testDiv" contentEditable="true">
Some text here with <span class="insertPoint">multiple spans</span> and one span <span class="nonEditable">
 which is not editable,
</span>
 some more text at the end.
</div>

CSS

.insertPoint
{
  color: blue;  
}

.nonEditable
{
    color:red;
}

JavaScript

$('#testDiv').on('keydown', function(e) { 
		var targetNode = getSelectionStart();
    
    if(targetNode != undefined && targetNode.nodeType === 1 && targetNode.nodeName == 'SPAN')    
    {
    	
      var nodeHtmlString = targetNode.outerHTML;
      
    	if(~nodeHtmlString.indexOf("nonEditable"))
      {      	
         e.preventDefault();
         e.stopPropagation();
      }
		}
});

function getSelectionStart() {
   var node = document.getSelection().anchorNode;
   return (node.nodeType == 3 ? node.parentNode : node);
}