JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/VanillaCaret.min.js"></script>

<div id="edit" contenteditable="true">This is an<br>editable paragraph.
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
</div>

JavaScript

document.querySelector("#edit").addEventListener("click", function(){
  var caret = new VanillaCaret(document.querySelector('#edit')); // Using VanillaCaret.js to get caret position.
  
  console.log('Caret position', caret.getPos());
  
  console.log('textContent', document.querySelector("#edit").textContent.substring(0, caret.getPos()));
  console.log('innerText', document.querySelector("#edit").innerText.substring(0, caret.getPos()));
  
});