How to allow HTML blocks to breakout on enter?

How can we allow HTML blocks to ‘break out’ when the user hits enter? In essence, when in an h1, if I hit enter, I want to set the default behavior to ‘break out’ of the h1 into a p.

1. Open editor.
2. Begin an h1 block and type.
3. Hit enter.
4. Continue typing.
   • Desired behavior: second line should be in a <p>, not an <h1>.
   • Actual behavior: second line is in an <h1>

This is handled in Draft.js with this plugin: https://github.com/icelab/draft-js-block-breakout-plugin.

[PaddyMann]

I had issues with some of the solutions above:

• The solution from @simpleshadow (using setTimeout) leads to a flicker effect in the UI
• The solution from @zxkxyz works well if pressing enter at the end of some text, but not if you press enter in the middle of some text.

To fix this:

if (event.key === 'Enter') {
  const selectedElement = Node.descendant(editor, editor.selection.anchor.path.slice(0, -1));

  // Replace 'title' with the type of the element which you wish to "break out" from
  if (selectedElement.type === 'title') {
    event.preventDefault();
    const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path);

    if (selectedLeaf.text.length === editor.selection.anchor.offset) {
      Transforms.insertNodes(editor, {
        type: 'paragraph',
        children: [{text: '', marks: []}],
      });
    }
    else {
      Transforms.splitNodes(editor);
      Transforms.setNodes(editor, {type: 'paragraph'});
    }
  }
}

[zxkxyz]

@simpleshadow I did something similar but eliminated the need for a setTimeout because it was causing the new line to temporarily glitch. I just override the default behavior of the enter key and instead manually insert a new paragraph node with empty text:

if (event.key === "Enter" && !event.shiftKey) {
    event.preventDefault();
    const newLine = {
        type: "paragraph",
        children: [
            {
                text: "",
                marks: []
            }
        ]
    };
    Transforms.insertNodes(editor, newLine);
}