<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", () => {
  // For emulating the traditional behavior, collapse Selection to end of the
  // text node at end of the <body> (end of the text node after the <h3>).
  getSelection().collapse(
    document.body.lastChild,
    document.body.lastChild.length
  );
  const textarea = document.querySelector("textarea");
  const abbr = document.querySelector("abbr");
  let node;
  document.addEventListener("DOMAttrModified", event => {
    node = event.originalTarget.getRootNode({});
    abbr.insertBefore(textarea, abbr.childNodes[0]);
  }, false);
  abbr.contentEditable = false;
  node.normalize();
  document.designMode = "on";
  document.execCommand("insertParagraph");
});
</script>
</head>
<body>
<dfn contenteditable>
    <abbr></abbr>
</dfn>
<h3>
    <textarea autofocus></textarea>
    <script></script>
</h3>
</body>
</html>