JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable><pre>abc<p>def</p></pre></div>

CSS

p > p {
  background-color: red;
}

JavaScript

window.focus();
const editingHost = document.querySelector("div[contenteditable]");
getSelection().setBaseAndExtent(
  editingHost.querySelector("pre").firstChild,
  0,
  editingHost.querySelector("p").firstChild,
  3
);
document.execCommand("formatBlock", false, "p");