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:

  lexical/packages/lexical-react/src/LexicalHorizontalRuleNode.tsx

  Line 104 in 4c30b52

  export class HorizontalRuleNode extends DecoratorNode<JSX.Element> {

• Paragraph code:

  lexical/packages/lexical/src/nodes/LexicalParagraphNode.ts

  Line 46 in 4c30b52

  const classNames = getCachedClassNameArray(config.theme, 'paragraph');

[Rbcoder1]

I want to work on it, assign me