Come posizionare il cursore con JavaScript?

Ragazzi ho questo codice per mettere un testo in corsivo e in grassetto, ma come posiziono il cursore tra <i></i> e <b></b>?
Ecco il codice:

Codice HTML:

---

function corsivo() {
          document.form.mex.value+='<i></i>';
          document.form.mex.focus();
}
       
function bold() {
          document.form.mex.value+='<b></b>';
          document.form.mex.focus();
}

---

Codice PHP:

---

fine = document.form.mex.value.length;
document.form.mex.selectionStart =fine - 4; // 4 è lunghezza("</li>")
document.form.mex.selectionEnd = fine - 4;


---

Il codice funziona, pero quando premo prima sul corsivo e poi sul grassetto il grassetto si inserisce alla fine e io vorrei che si inserisse il dove sta il cursore e non alla fine, come posso risolvere il problema?

questo non è un errore del codice dal del fatto che document.form.mex.value+='<i></i>'; significa proprio aggiungi alla fine, quale che sia la posizione del cursore

Codice:

---

<script>
function fmt(b) {
        mex = document.form.mex;
        fine = mex.value.length;
        position = mex.selectionStart;
        eposition = mex.selectionEnd;
        a = mex.value;
        if (eposition > position)
        {
                mex.value =  a.slice(0, position) + "<" + b + ">" + a.slice(position, eposition) + "</" + b + ">" + a.slice(eposition, fine);
                document.form.mex.focus();
        }
        else
        {
                mex.value =  a.slice(0, position) + "<" + b + ">" + "</" + b + ">" + a.slice(position, fine);
                document.form.mex.selectionStart =  mex.value.slice(0, position).length + 3;
                document.form.mex.selectionEnd = document.form.mex.selectionStart;
                document.form.mex.focus();
        }
}
</script>

<form name = form id = form>
<textarea id = "mex" name = "mex">
ciao mondo
</textarea>
</form>
<input type = button onClick = "fmt('i')" value = "I"><input type = button onClick = "fmt('b')" value = "B">

---

----------------------
come funziona:
se c'è del testo selezionato, come Word
se il cursore è da qualche parte ma non c'è testo selezionato aggiunge il tag e si posiziona dentro di esso
da notare che per tag generici il codice va modificato cambiando il 3 con len(del_tag) o con indexOf >< (che rappresenta il 'centro' del tag, da usare comunque con 'cognizione di causa '