JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.38.0/codemirror.css">
<script src="https://rawgit.com/alexisdoualle/codemirrorcdn/master/codemirror.js"></script>
<form>
  <textarea id="code" name="code" ></textarea>
  <fieldset>
    <button id="isolateButton" type="button">Isolate selected TAG</button>
    <button id="isolateRtl" type="button">Isolate selected text (RTL)</button>
    <button id="removeMarks" type="button">Remove selected marks</button>
    <br><i>Isolate TAG => isolate(LTR) + atomic + readonly</i>
  </fieldset>
</form>
<ul>

Instructions:
<li>Type a tag such as "&lt;b&gt;", select it then click on Isolate selected TAG</b></li>
<li>Type its closing tag such as "&lt;/b&gt;" and isolate it also (it will appear backwards before you isolate it)</li>
<li>write anything around or in between, including bidirectional text. To isolate it, click on the second button (RTL). The effect is that isolating it will prevent the text from jumping aroung the tags </li>
</ul>

CSS

#code {

}

.tag {
  color: violet;
}

.isolateRtl {
  color: blue;
}

JavaScript

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  mode: "text/html",
  lineNumbers: true,
  lineWrapping: true,
  direction: "rtl"
});

//editor.setValue("<b>hello there</b>")

document.getElementById("isolateButton").onclick = isolateSelection;
document.getElementById("isolateRtl").onclick = isolateRtl;
document.getElementById("removeMarks").onclick = removeMarks;

function isolateSelection() {
	editor.markText(editor.getCursor("from"), editor.getCursor("to"), {isolate: "ltr", readOnly: true, atomic: true, className:"tag"})
}

function isolateRtl() {
	editor.markText(editor.getCursor("from"), editor.getCursor("to"), {isolate: "rtl", className:"isolateRtl"})
}

function removeMarks() {
	var marks = editor.findMarks(editor.getCursor("from"), editor.getCursor("to"));
  marks.forEach(x => x.clear())
}