JSFiddle - React, Tailwind, and code Playground

HTML

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

<button>Posicionar cursor</button>

CSS

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

JavaScript

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

//
var button = document.querySelector("button");

button.addEventListener("click", function(e) {

    // marca lugar para posicionar o cursor em `editor`
    var marker = '{|}';

    // cria intervalo
    var range = document.createRange();
    var index = editor.innerText.indexOf(marker);
    range.setStart(editor.childNodes[0], index);
    range.setEnd(editor.childNodes[0], index + marker.length);

    // faz seleção
    var selection = window.getSelection();
    selection.addRange(range);

}, false);