JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<button>Insert Space</button>
<div contenteditable>
test
<div><br></div>
1</div>

<textarea cols="40" rows="10"></textarea>

JavaScript

let caretSet = false;
const doc = document;
const div = doc.querySelector('div');
const textarea = doc.querySelector('textarea');

function setCaret() {
  const range = doc.createRange();
  const sel = doc.getSelection();
  const nodes = div.childNodes;
  const last = nodes[nodes.length - 1];
	range.setStart(last, last.length || 0);
  range.setEnd(last, last.length || 0);
  sel.removeAllRanges();
  sel.addRange(range);
  caretSet = true;
}

function showHTML() {
  textarea.value = div.innerHTML;
}

showHTML();
doc.querySelector('button').onclick = () => {
  if (!caretSet) setCaret();
  doc.execCommand('insertText', false, ' ');
  setTimeout(showHTML, 1);
}