Problem cursor position with JavaScript function: prevents text editing in a code editor, because mouse pointer is automatically moved to other rows

I'm building a small and minimal code editor for HTML/CSS/js in simple Javascript. There is a problem when you write text in it. The problem is that i don't have the freedom to write the text wherever i want, because wherever i write/edit then the mouse pointer is automatically transported to the third line, and not remaining still at the point where i am writing.

For example, if i point the mouse somewhere in the editor and write a word, the mouse pointer immediately returns to another line (always at the beginning of the third line). So it stops me from writing the word where i want and the word gets written elsewhere. It's as if there were blocks in some points of the lines that prevent you from writing and i won't be able to write where i want.

ERROR: Initially, i thought the error is in HTML, then they pointed out that the problem is in applyColor() function, maybe it's Set cursor position to end of text code, i don't know. In fact, if i remove the applyColor() function, then problems are solved, but as a consequence what happens is that the text is no longer colored. But i need this piece of code (or something similar anyway), because it is part of the function to color the text. I therefore deduce that the problem is the applyColor() function, although i'm not 100% sure. So it should be a JavaScript problem:

  // CHANGE COLOR
  function changeColor() {
    var editor = document.getElementById("html");
    applyColoring(editor);
  
    // Set cursor position to the end of text
    var child = editor.children;
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(child[child.length - 1], 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    editor.focus();
  }

DEMONSTRATION OF THE PROBLEM: I'll show you when the problem occurs. In each of these cases, the mouse pointer is taken elsewhere and i won't be able to write where i want. i believe that by solving the unique problem in the applyColor() function, then all the problems will automatically be solved, because they all depend on the same unique problem.

• If i try to write a word at the beginning of the third line

• If i try to write a word immediately after </h1>

• If i try to edit This is a Heading, it writes a word between <h1> and This

• If i try to write a word immediately after </p>

• If I previously write any word in the third line (for example aaaaaaa), and then try to write a new word in the first line immediately after </h1>.

But the mouse pointer can also be moved in other areas (within those 3 staves) which I haven't written about. Of course it all stems from just one problem

WHAT WOULD I WANT? I would like that when i write a word (wherever it is written, in any position), the mouse pointer should remain stationary/stopped at the last written word (as any editor or chat works for example), and should not automatically move to the third line (like the photos above). Of course some words must remain colored (as already happens in my code). For example like this, i would like to get this:

Naturally, if I insert new lines in the HTML code editor, the pointer, instead of moving to the third line, will move to the fourth, fifth and so on. Therefore the problem should be solved by also evaluating the insertion of new future lines

How can i have the freedom to write and modify editor code wherever I want and avoid moving the pointer to other lines? So, how should the applicolor() function be fixed?

UPDATE: Aware that the problem is almost impossible to solve, i would also like a simpler solution with CODEMIRROR, because perhaps it is the most sensible and right one

function applyColoring(element) {
  var keywords = ["DIV", "SPAN", "H1", "P"];
  var keywords2 = ["CLASS", "ID"];

  var newHTML = "";
  // Loop through words
  str = element.innerText;
  (chunks = str
    .split(new RegExp(keywords.map((w) => `(${w})`).join("|"), "i"))
    .filter(Boolean)),
  (markup = chunks.reduce((acc, chunk) => {
    acc += keywords.includes(chunk.toUpperCase()) ?
      `<span class="statement">${chunk}</span>` :
      `<span class='other'>${chunk}</span>`;
    return acc;
  }, ""));
  element.innerHTML = markup;
}

// CHANGE COLOR
function changeColor() {
  var editor = document.getElementById("html");
  applyColoring(editor);

  // Set cursor position to the end of text
  var child = editor.children;
  var range = document.createRange();
  var sel = window.getSelection();
  range.setStart(child[child.length - 1], 1);
  range.collapse(true);
  sel.removeAllRanges();
  sel.addRange(range);
  editor.focus();
}

// PREVIEW
const elHTML = document.querySelector("#html");
//const elCSS = document.querySelector("#css");
//const elJS = document.querySelector("#js");
const elPreview = document.querySelector("#preview");

function showPreview() {

  const html = elHTML.textContent;
  //const css = `<style>${elCSS.textContent}</style>`;
  //const js = `<scr` + `ipt>${elJS.textContent}</scr` + `ipt>`;
  const dataURL = "data:text/html;charset=utf-8," + encodeURIComponent(html);

  changeColor();

  elPreview.src = dataURL;
}

changeColor()
showPreview()

#html {
  width: 456px;
  height: 267px;
  padding: 10px;
  background-color: #444;
  color: white;
  font-size: 14px;
  font-family: monospace;
  white-space: pre;
}

.statement {
  color: orange;
}

#editor {}

#preview {
  display: block;
  width: 100%;
}

<div id="html" contenteditable="true" oninput="showPreview();" onchange="changeColor();">&lt;h1>This is a Heading&lt;/h1> &lt;p>This is a paragraph.&lt;/p>
</div>

<h3>PREVIEW</h3>
<div class="preview-area">
  <iframe id="preview"></iframe>
</div>