JSFiddle - React, Tailwind, and code Playground

HTML

<div id="inputDiv" class="input" contenteditable="true">
    Some text at the start of the div.
    <ul>
        <li>ListItem1</li>
        <li>ListItem2</li>
        <li>ListItem3</li>
    </ul>
    Some text at the end of the div.
</div>

CSS

.input {border: 1px solid #ccc;}

JavaScript

$('div.input').focus();
var element = $('div.input');

var text = element.text();
text = text.replace(/  /g,'');
var caretPos = text.indexOf("ListItem1");

var range = document.createRange();
var selection = window.getSelection();
range.setStart(document.getElementById('inputDiv').childNodes[0], caretPos);
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);