javascript - Hur kan jag sätta markören för markering till en specifik punkt i en contentEditable-div med flera andra divar inom den?

Jag hoppas att ni alla mår mycket bra.

Idag försöker jag placera markören på ett specifikt index (this.selectionStart) i ett contentEditable-element som har andra div- och span-element inom sig.

Koden för att få this.selectionStart är redan ordnad, vi försöker nu att återställa markören när markeringen är borta (på grund av en ny rendering av mitt element)

Jag har genomsökt internet efter hjälp men jag har bara hittat lösningar som fungerar för contentEditable-element som inte innehåller några andra element.

Det här är det närmaste jag har kommit en fungerande lösning tror jag.

        // this.selectionStart is the index we want the caret to be at
        // this.element is the contenteditable element
        if (this.selectionStart) {
            // We need to set the selection to the correct position
            
            // get the selection
            var selection = window.getSelection();
            // create a range
            var range = document.createRange();

            // set the range to the correct position
            range.setStart(this.element.childNodes[0], this.selectionStart); // error here
            range.setEnd(this.element.childNodes[0], this.selectionStart);

            // apparently this is needed
            range.collapse(true);
            selection.removeAllRanges();
            selection.addRange(range);
        }

Detta ger oss det roliga felet Uncaught DOMException: Failed to execute 'setStart' on 'Range': There is no child at offset 15. (när this.selectionStart är 15)

Snälla, jag ber dig, hjälp mig om du alls kan.

Tack så mycket, detta är mycket, mycket viktigt.