JSFiddle - React, Tailwind, and code Playground

HTML

<div id="editable" contenteditable="true">
    text text text text <span id="test" style="color:red">ASDF</span>text text
</div>
<button id="button" onclick="setCaret()">focus</button>

JavaScript

function setCaret() {
    var el = document.getElementById("test");
    var range = document.createRange();
    var sel = window.getSelection();
    range.selectNodeContents(el);
    range.collapse(false);
    sel.removeAllRanges();
    sel.addRange(range);
    el.focus();
}