JSFiddle - React, Tailwind, and code Playground

HTML

<div>non-editable</div>
<div contenteditable>editor</div>
<p id="target">click here</p>
<ul id="log"></ul>

JavaScript

var div = document.getElementsByTagName("div")[0];
var editor = document.getElementsByTagName("div")[1];
var log = document.getElementById("log");

document.getElementById("target").addEventListener("click", function () {
  document.getElementById("target").removeEventListener("click", arguments.callee);
  editor.addEventListener("focus", ()=>{
    var li = document.createElement("li");
    li.textContent = "focus";
    log.appendChild(li);
  });
  var li = document.createElement("li");
  li.textContent = "click";
  log.appendChild(li);

  document.getSelection().removeAllRanges();
  var range = document.createRange();
  range.setStart(editor, 0);
  document.getSelection().addRange(range);

  var li = document.createElement("li");
  li.textContent = "addRange()ed";
  log.appendChild(li);
});