Feature: Add css class to horizontal rule node for targeted styling

[madhusudhand]

A horizontal rule element is not given any editor specific class name to target the styling. Adding a class similar to other nodes would allow to target the hr inside editor without effecting all other hr elements of the application.

<hr class="" data-lexical-decorator="true" contenteditable="false">

[acywatson]

Yep, makes sense. PR welcome here. You can also do this using pure CSS by just using selectors specific to your editor contentEditable.

.my-editor hr { // my styles }

[Rbcoder1]

Can I Work On It.

[acywatson]

@Rbcoder1 Sure!

[Clintonojo]

Can i work on it?

[alhridoy]

Hi @madhusudhand and @acywatson , can you give me the file/directory of the code responsible for rendering the horizontal rule so I can work on it? Thanks

[gupt-mudit]

hi @madhusudhand ,are you talking about api page ? I can fix this issue can you assign me

[suprabhat15]

@acywatson I am interested to work on it.

[joanjeremiah]

I want to work on this, can you assign me this issue?

[StyleT]

Issue description: A horizontal rule element when exported to HTML/DOM is not given any editor specific class name to target the styling, additionally it does not work consistently with paragraph element.

Workaround: Use pure CSS by just using selectors specific to your editor contentEditable.

.my-editor hr {
// my styles
}

Expected result:

When converting horizontal rule node to HTML (or using exportDOM()) <hr /> element shall have class based on the applied theme. Ex: <hr class="PlaygroundEditorTheme__horizontalrule">

Code refs:

• HR code: https://github.com/facebook/lexical/blob/4c30b5215f0269c069c6c01f5eea973163a77321/packages/lexical-react/src/LexicalHorizontalRuleNode.tsx#L104
• Paragraph code: https://github.com/facebook/lexical/blob/4c30b5215f0269c069c6c01f5eea973163a77321/packages/lexical/src/nodes/LexicalParagraphNode.ts#L46

[Rbcoder1]

I want to work on it, assign me

[Rbcoder1]

so i want to add a class in Horizontal Rule when it converted into HTML/DOM