Editable text into a DecoratorNode

[FlorentD]

Hello team !
I would like to use a <Title /> component (from UI lib) to style my headings in Lexical. As I understand I would use a DecoratorNode with decorate() but it seems to be the wrong way as a DecoratorNode is not "content editable".
What is the right way to do this need ? With DraftJS I would use a customBlockRenderMap but I cannot figure out with Lexical.
Do I have to use an ElementNode with styles (same styles than <Title /> comp) ?

Thank you for your amazing work !

[acywatson]

Hey @FlorentD - good question. Decorators are sort of "black boxes" for Lexical. Inside a DecoratorNode, we just delegate rendering to React (or possibly some other thing) inside that node. To achieve your goal, you'll need to to style the Lexical HeadingNode via theming or, as you mentioned, extend ElementNode and create your own TitleNode (or whatever you want to call it). @zurfyx any other thoughts?

[LvChengbin]

You may need nested editor which you can find how to use from the ImagePlugin of lexical-playground.