JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<pre id="editor" contenteditable="true">
“Always pass on what you have learned.” - Yoda
    
> <span id="cur"/>
    
--
X    
</pre>
</div>

<button>Posicionar cursor</button>

CSS

pre { width: 500px; height: 100px; border: 1px solid }

JavaScript

function setCursor(node, cursorElement) {
    var range = document.createRange();
    range.setStart(cursorElement, 0);
    range.collapse(true);
    if (window.getSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
        node.focus();
    } else if (document.selection && range.select) {
        range.select();
    }
}

var editor = document.querySelector("#editor");
var button = document.querySelector("button");

button.addEventListener("click", function(e) {
    setTimeout(function () {
        setCursor(editor, document.querySelector("#cur"));
    }, 200);
}, false);