JSFiddle - React, Tailwind, and code Playground

HTML

Editor 1:
<span contenteditable>foo bar</span>
<hr>
Editor 2:
<p><span contenteditable>foo bar</span></p>
<hr>
Editor 3:
<div contenteditable><p contenteditable="false"><span contenteditable>foo bar</span></p></div>

CSS

body {
  background-color: white;
  color: black;
}

JavaScript

window.focus();
var editors =  document.querySelectorAll("span[contenteditable]");
var selection = document.getSelection();
for (let editor of editors) {
  editor.focus();
  selection.collapse(editor.firstChild, 4);
  try {
    document.execCommand("insertParagraph", false);
  } catch (e) {
    console.log(e);
    continue;
  }
  editor.title = editor.innerHTML;
}