Description
Currently, Lexical's createDOM() method only supports returning a single, flat DOM element. This can be quite limiting, especially when working with HTML elements that have strict styling constraints.
Use case:
An example is wanting to add an icon or visual indicator to line breaks. Lexical natively uses <br> elements for this. However, <br> elements have strict DOM restrictions: they cannot accept standard styling, or utilize ::before/::after pseudo-elements.
To achieve this visual effect, we would need to wrap the <br> in a container (e.g., a <span>) that can handle the styling/icons. Because createDOM() expects a single node to represent the Lexical node, I believe this currently isn't possible natively without breaking reconciliation. (Note: I know that wrapping <br> elements comes with its own contenteditable caret-placement challenges, but the overall styling limitation applies to other elements as well).
Impact
This would allow developers to create more complex editors and UI while staying close to web standards and natively integrating with other Lexical features. It would also prevent the need for hacky workarounds (such as injecting empty <img> tags solely for styling purposes).
Other notes
I am not quite sure what the best API surface area would be to implement this safely (e.g., whether createDOM should support returning nested elements, or if a middleware/hook approach for DOM manipulation would be better).
I am happy to work on this issue, however, since this touches on core API decisions and DOM reconciliation and also has some ongoing work, I wanted to open this discussion first.
Possibly related work:
Description
Currently, Lexical's
createDOM()method only supports returning a single, flat DOM element. This can be quite limiting, especially when working with HTML elements that have strict styling constraints.Use case:
An example is wanting to add an icon or visual indicator to line breaks. Lexical natively uses
<br>elements for this. However,<br>elements have strict DOM restrictions: they cannot accept standard styling, or utilize::before/::afterpseudo-elements.To achieve this visual effect, we would need to wrap the
<br>in a container (e.g., a<span>) that can handle the styling/icons. BecausecreateDOM()expects a single node to represent the Lexical node, I believe this currently isn't possible natively without breaking reconciliation. (Note: I know that wrapping<br>elements comes with its own contenteditable caret-placement challenges, but the overall styling limitation applies to other elements as well).Impact
This would allow developers to create more complex editors and UI while staying close to web standards and natively integrating with other Lexical features. It would also prevent the need for hacky workarounds (such as injecting empty
<img>tags solely for styling purposes).Other notes
I am not quite sure what the best API surface area would be to implement this safely (e.g., whether createDOM should support returning nested elements, or if a middleware/hook approach for DOM manipulation would be better).
I am happy to work on this issue, however, since this touches on core API decisions and DOM reconciliation and also has some ongoing work, I wanted to open this discussion first.
Possibly related work:
$getDOMSlotAPI