How to preserve cursor in a contenteditable div

Question

I am developing a code editor. The syntax highlighting features are ready, but the cursor keeps coming back to the first when the code gets highlighted.
I also don't want to use external js files.

Can anyone help me in preserving the cursor position?
(I am sharing the code of the editor.)
I tried an example from codepen, but it didn't work.
https://codepen.io/kmessner/pen/oXgRrG

function syntaxHighlight(contentEditableElement, mode) {
var div = document.createElement("div");
div.textContent = contentEditableElement.textContent;
if (mode == "html") {
if (contentEditableElement.textContent == "") {
contentEditableElement.innerHTML = null;
}
else {
contentEditableElement.innerHTML = htmlMode(div.innerHTML);
}
}
if (mode == "css") {
if (contentEditableElement.textContent == "") {
contentEditableElement.innerHTML = null;
}
else {
contentEditableElement.innerHTML = cssMode(div.innerHTML);
}
}
if (mode == "javascript") {
if (contentEditableElement.textContent == "") {
contentEditableElement.innerHTML = null;
}
else {
contentEditableElement.innerHTML = jsMode(div.innerHTML);
}
}

function extract(str, start, end, func, repl) {
var s, e, d = "", a = [];
while (str.search(start) > -1) {
s = str.search(start);
e = str.indexOf(end, s);
if (e == -1) {e = str.length;}
if (repl) {
a.push(func(str.substring(s, e + (end.length))));
str = str.substring(0, s) + repl + str.substr(e + (end.length));
} else {
d += str.substring(0, s);
d += func(str.substring(s, e + (end.length)));
str = str.substr(e + (end.length));
}
}
this.rest = d + str;
this.arr = a;
}
function htmlMode(txt) {
var rest = txt, done = "", php, comment, angular, startpos, endpos, note, i;
comment = new extract(rest, "<!--", "-->", commentMode, "html-comment");
rest = comment.rest;
while (rest.indexOf("<") > -1) {
note = "";
startpos = rest.indexOf("<");
if (rest.substr(startpos, 9).toUpperCase() == "<STYLE") {note = "css";}
if (rest.substr(startpos, 10).toUpperCase() == "<SCRIPT") {note = "javascript";}
endpos = rest.indexOf(">", startpos);
if (endpos == -1) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += tagMode(rest.substring(startpos, endpos + 4));
rest = rest.substr(endpos + 4);
if (note == "css") {
endpos = rest.indexOf("</style>");
if (endpos == -1) {
endpos = rest.length;
}
done += cssMode(rest.substring(0, endpos));
rest = rest.substr(endpos);
}
if (note == "javascript") {
endpos = rest.indexOf("</script>");
if (endpos == -1) {
endpos = rest.length;
}
done += jsMode(rest.substring(0, endpos));
rest = rest.substr(endpos);
}
}
rest = done + rest;
for (i = 0; i < comment.arr.length; i++) {
rest = rest.replace("html-comment", comment.arr[i]);
}
return rest;
}
function tagMode(txt) {
var rest = txt, done = "", startpos, endpos, result;
while (rest.search(/(\s|\n)/) > -1) {
startpos = rest.search(/(\s|\n)/);
endpos = rest.indexOf("&gt;");
if (endpos == -1) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += attributeMode(rest.substring(startpos, endpos));
rest = rest.substr(endpos);
}
result = done + rest;
result = "<span class='html-bracket'>&lt;</span>" + result.substring(4);
if (result.substr(result.length - 4, 4) == "&gt;") {
result = result.substring(0, result.length - 4) + "<span class='html-bracket'>&gt;</span>";
}
return "<span class='html-tag'>" + result + "</span>";
}
function attributeMode(txt) {
var rest = txt, done = "", startpos, endpos, singlefnuttpos, doublefnuttpos, spacepos;
while (rest.indexOf("=") > -1) {
endpos = -1;
startpos = rest.indexOf("=");
singlefnuttpos = rest.indexOf("'", startpos);
doublefnuttpos = rest.indexOf('"', startpos);
spacepos = rest.indexOf(" ", startpos + 2);
if (spacepos > -1 && (spacepos < singlefnuttpos || singlefnuttpos == -1) && (spacepos < doublefnuttpos || doublefnuttpos == -1)) {
endpos = rest.indexOf(" ", startpos);
} else if (doublefnuttpos > -1 && (doublefnuttpos < singlefnuttpos || singlefnuttpos == -1) && (doublefnuttpos < spacepos || spacepos == -1)) {
endpos = rest.indexOf('"', rest.indexOf('"', startpos) + 1);
} else if (singlefnuttpos > -1 && (singlefnuttpos < doublefnuttpos || doublefnuttpos == -1) && (singlefnuttpos < spacepos || spacepos == -1)) {
endpos = rest.indexOf("'", rest.indexOf("'", startpos) + 1);
}
if (!endpos || endpos == -1 || endpos < startpos) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += attributeValueMode(rest.substring(startpos, endpos + 1));
rest = rest.substr(endpos + 1);
}
return "<span class='html-attribute'>" + done + rest + "</span>";
}
function attributeValueMode(txt) {
return "<span class='html-attributeEquals'>=</span><span class='html-attributeValue'>" + txt.substring(1, txt.length) + "</span>";
}
function commentMode(txt) {
return "<span class='comment'>" + txt + "</span>";
}
function cssMode(txt) {
var rest = txt, done = "", s, e, comment, i, midz, c, cc;
comment = new extract(rest, /\/\*/, "*/", commentMode, "css-comment");
rest = comment.rest;
while (rest.search("{") > -1) {
s = rest.search("{");
midz = rest.substr(s + 1);
cc = 1;
c = 0;
for (i = 0; i < midz.length; i++) {
if (midz.substr(i, 1) == "{") {cc++; c++}
if (midz.substr(i, 1) == "}") {cc--;}
if (cc == 0) {break;}
}
if (cc != 0) {c = 0;}
e = s;
for (i = 0; i <= c; i++) {
e = rest.indexOf("}", e + 1);
}
if (e == -1) {e = rest.length;}
done += rest.substring(0, s + 1);
done += cssPropertyMode(rest.substring(s + 1, e));
rest = rest.substr(e);
}
rest = done + rest;
rest = rest.replace(/{/g, "<span class='css-delimiter'>{</span>");
rest = rest.replace(/}/g, "<span class='css-delimiter'>}</span>");
for (i = 0; i < comment.arr.length; i++) {
rest = rest.replace("css-comment", comment.arr[i]);
}
return "<span class='css-selector'>" + rest + "</span>";
}
function cssPropertyMode(txt) {
var rest = txt, done = "", s, e, n, loop;
if (rest.indexOf("{") > -1 ) { return cssMode(rest); }
while (rest.search(":") > -1) {
s = rest.search(":");
loop = true;
n = s;
while (loop == true) {
loop = false;
e = rest.indexOf(";", n);
if (rest.substring(e - 5, e + 1) == "&nbsp;") {
loop = true;
n = e + 1;
}
}
if (e == -1) {e = rest.length;}
done += rest.substring(0, s);
done += cssPropertyValueMode(rest.substring(s, e + 1));
rest = rest.substr(e + 1);
}
return "<span class='css-property'>" + done + rest + "</span>";
}
function cssPropertyValueMode(txt) {
var rest = txt, done = "", s;
rest = "<span class='css-delimiter'>:</span>" + rest.substring(1);
result = done + rest;
if (result.substr(result.length - 1, 1) == ";" && result.substr(result.length - 6, 6) != "&nbsp;" && result.substr(result.length - 4, 4) != "&lt;" && result.substr(result.length - 4, 4) != "&gt;" && result.substr(result.length - 5, 5) != "&amp;") {
result = result.substring(0, result.length - 1) + "<span class='css-delimiter'>;</span>";
}
return "<span class='css-propertyValue'>" + result + "</span>";
}
function jsMode(txt) {
var rest = txt, done = "", esc = [], i, cc, tt = "", sfnuttpos, dfnuttpos, tfnuttpos, compos, comlinepos, regexpos, keywordpos, numpos, mypos, dotpos, y;
for (i = 0; i < rest.length; i++){
cc = rest.substr(i, 1);
if (cc == "\\") {
esc.push(rest.substr(i, 2));
cc = "javascript-escape";
i++;
}
tt += cc;
}
rest = tt;
y = 1;
while (y == 1) {
regexpos = getRegexPos(rest, jsRegexMode);
sfnuttpos = getPos(rest, "'", "'", jsStringMode);
dfnuttpos = getPos(rest, '"', '"', jsStringMode);
tfnuttpos = getPos(rest, "`", "`", jsStringMode);
compos = getPos(rest, /\/\*/, "*/", commentMode);
comlinepos = getPos(rest, /\/\//, "\n", commentMode);
numpos = getNumPos(rest, jsNumberMode);
keywordpos = getKeywordPos("js", rest, jsKeywordMode);
dotpos = getDotPos(rest, jsPropertyMode);
if (Math.max(numpos[0], sfnuttpos[0], dfnuttpos[0], tfnuttpos[0], compos[0], comlinepos[0], regexpos[0], keywordpos[0], dotpos[0]) == -1) {break;}
mypos = getMinPos(numpos, sfnuttpos, dfnuttpos, tfnuttpos, compos, comlinepos, regexpos, keywordpos, dotpos);
if (mypos[0] == -1) {break;}
if (mypos[0] > -1) {
done += rest.substring(0, mypos[0]);
done += mypos[2](rest.substring(mypos[0], mypos[1]));
rest = rest.substr(mypos[1]);
}
}
rest = done + rest;
for (i = 0; i < esc.length; i++) {
rest = rest.replace("javascript-escape", esc[i]);
}
return "<span class='javascript'>" + rest + "</span>";
}
function jsStringMode(txt) {
return "<span class='javascript-string'>" + txt + "</span>";
}
function jsRegexMode(txt) {
return "<span class='javascript-regularExpression'>" + txt + "</span>";
}
function jsKeywordMode(txt) {
return "<span class='javascript-keyword'>" + txt + "</span>";
}
function jsNumberMode(txt) {
return "<span class='javascript-number'>" + txt + "</span>";
}
function jsPropertyMode(txt) {
return "<span class='javascript-property'>" + txt + "</span>";
}
function getRegexPos(txt, func) {
var pos1, cc, pos2 = 0, mArr, i, len, patt, modOK = false;
pos1 = txt.search(/\/.+?\//);
if (pos1 > -1) {
len = txt.match(/\/.+?\//)[0].length; 
patt = /\W/g;
cc = txt.match(/\/.+?\//)[0];
pos2 = cc.length;
mArr = ["img", "igm", "mig", "mgi", "gim", "gmi", "im", "ig", "mi", "mg", "gi", "gm", "i", "m", "g"];
for (i = 0; i < mArr.length; i++) {
re = new RegExp(`\\b^${mArr[i]}\\b`, 'gi');
if (txt.substr(pos1+pos2).search(re) > -1) {
modOK = true;
pos2 = pos2 + mArr[i].length;
}
}
if ((txt.substr(pos1 + len,1)!= "/" && txt.substr(pos1 + len,1).match(patt) && txt.substr(pos1 - 1,1).match(patt)&& txt.substr(pos1 - 1,1) !="/") || modOK == true) {

}else {
pos1 = -1;
pos2 = 0;
}
}
return [pos1, pos1 + pos2, func];
}
function getDotPos(txt, func) {
var x, i, j, s, e, arr = [".", "<", ">", " ", ";", "(", "+", ")", "[", "]", ",", "&", ":", "{", "}", "/" ,"-", "*", "|", "%", "=", "\n"];
s = txt.indexOf(".");
if (s > -1) {
x = txt.substr(s + 1);
for (j = 0; j < x.length; j++) {
cc = x[j];
for (i = 0; i < arr.length; i++) {
if (cc.indexOf(arr[i]) > -1) {
e = j;
return [s + 1, e + s + 1, func];
}
}
}
}
return [-1, -1, func];
}
function getMinPos() {
var i, arr = [];
for (i = 0; i < arguments.length; i++) {
if (arguments[i][0] > -1) {
if (arr.length == 0 || arguments[i][0] < arr[0]) {arr = arguments[i];}
}
}
if (arr.length == 0) {arr = arguments[i];}
return arr;
}
function getKeywordPos(typ, txt, func) {
var words, i, pos, rpos = -1, rpos2 = -1, patt;
if (typ == "js") {
words = ["abstract", "arguments", "boolean", "break", "byte", "case", "catch", "char", "class", "const", "continue", "debugger", "default", "delete", "do", "double", "else", "enum", "eval", "export", "extends", "false", "final", "finally", "float", "for", "function", "goto", "if", "implements", "import", "in", "instanceof", "int", "interface", "let", "long", "NaN", "native", "new", "null", "package", "private", "protected", "public", "return", "short", "static", "super", "switch", "synchronized", "this", "throw", "throws", "transient", "true", "try", "typeof", "var", "void", "volatile", "while", "with", "yield"];
}
for (i = 0; i < words.length; i++) {
pos = txt.indexOf(words[i]);
if (pos > -1) {
patt = /\W/g;
if (txt.substr(pos + words[i].length,1).match(patt) && txt.substr(pos - 1,1).match(patt)) {
if (pos > -1 && (rpos == -1 || pos < rpos)) {
rpos = pos;
rpos2 = rpos + words[i].length;
}
}
} 
}
return [rpos, rpos2, func];
}
function getPos(txt, start, end, func) {
var s, e;
s = txt.search(start);
e = txt.indexOf(end, s + (end.length));
if (e == -1) {e = txt.length;}
return [s, e + (end.length), func];
}
function getNumPos(txt, func) {
var arr = ["\n", " ", ";", "(", "+", ")", "[", "]", ",", "&", ":", "{", "}", "/" ,"-", "*", "|", "%", "="], i, j, c, startpos = 0, endpos, word;
for (i = 0; i < txt.length; i++) {
for (j = 0; j < arr.length; j++) {
c = txt.substr(i, arr[j].length);
if (c == arr[j]) {
if (c == "-" && (txt.substr(i - 1, 1) == "e" || txt.substr(i - 1, 1) == "E")) {
continue;
}
endpos = i;
if (startpos < endpos) {
word = txt.substring(startpos, endpos);
if (!isNaN(word)) {return [startpos, endpos, func];}
}
i += arr[j].length;
startpos = i;
i -= 1;
break;
}
}
}
return [-1, -1, func];
}
}

#code {
white-space: pre-wrap;
font-family: monospace;
font-size: 15px;
width: 480px;
height: 480px;
padding: 10px;
border: 1px solid black;
overflow: auto;
}

#code:focus {
outline: 0px solid transparent;
}

#code:empty:before {
content: attr(placeholder);
color: grey;
}

.comment {
color: orange;
}

.html-bracket {
color: green;
}

.html-tag {
color: blue;
}

.html-attribute {
color: brown;
}

.html-attributeEquals {
color: black;
}

.html-attributeValue {
color: red;
}

.css-selector {
color: blue;
}

.css-delimiter {
color: purple;
}

.css-property {
color: brown;
}

.css-propertyValue {
color: red;
}

.javascript {
color: black;
}

.javascript-string {
color: blue;
}

.javascript-keyword {
color: green;
}

.javascript-number {
color: brown;
}

.javascript-property {
color: purple;
}

.javascript-regularExpression {
color: red;
}

<div id="code" oninput="syntaxHighlight(this, 'html')" contentEditable="plaintext-only" spellcheck="false" placeholder="Code"></div>