Vanilla JS: <hr /> as an ElementNode gives <br /> as innerHtml on reconciliation

[gnimmelf]

Hi all,

extending ElementNode with

override createDOM(): HTMLElement {
    return document.createElement('hr')        
}

runs reconciliation that inserts a <br /> tag as innerHtml. This bloats the tag and makes it's content editable.

Any hints or tricks to stop this from happening and get only a closed <hr /> back?

Here's a gist of the node code.

Thanks,
Flemming

[gnimmelf]

Well, this works like a charm:

export class HorizontalRuleNode extends LineBreakNode { /* ... */ }

Edit: Well, at least it renders fine in the editor, and saves Lexical manages to parse it to the corresponding Html string. Going back from that Html-string to a Lexical structure, not so charming:

Here's the full HR-node extended from LineBreakNode

https://gist.github.com/gnimmelf/591ff720e784e964848033fff0bcff4c?permalink_comment_id=5042722#gistcomment-5042722

And the HTML->Lexical parsing:

editor.update(() => {
        // In the browser you can use the native DOMParser API to parse the HTML string.
        const parser = new DOMParser();
        const dom = parser.parseFromString(content, 'text/html');

        // Once you have the DOM instance it's easy to generate LexicalNodes.
        const nodes = $generateNodesFromDOM(editor, dom)

        console.log({ dom, nodes})

        // Select the root
        $getRoot().select()

        // Insert them at a selection.
        $insertNodes(nodes);
    }, { tag: 'history-merge' })

For some strange reason the HR-node turns out like a couple of BR's: