How to make $generateHtmlFromNodes produce inline styles instead of predefined class names

[trevor-davis-dover]

I'm hoping to take the contents of a Lexical editor, convert it to html, and save it in a DB for usage elsewhere.

Right now, if I make bold and italicized text, the $generateHtmlFromNodes method gives me HTML content that looks like this:

<p class="PlaygroundEditorTheme__paragraph" dir="ltr"><strong class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic">test</strong></p>

This is fine to re-render later in a Lexical editor, but does me no good if I want to render this HTML in a different environment that does not understand these classnames. In this particular case, the italicization is dropped.

Is there anyway to instead get this method to produce an inline style attribute on the p tag?

[mattvb91]

I would be interested in this too, inline styles seem a better way forward when potentially updating css later on could break layouts when saving HTML to the database instead of json

[trevor-davis-dover]

I've found that TipTap does this well. Would've loved to use Lexical but it's just not there yet.

[mattvb91]

Ah thats unfortunate I actually was using TipTap in another project and found it a bit difficult to use so jumped to this. Do you have a quick snippet for how you managed to get it to generate the classes on TipTap?

[trevor-davis-dover]

When you say generate classes, do you mean generate css classes? The thing I liked about TipTap is that it uses inline styling instead of classes. Or did you mean something else?

If you want to generate custom css classes, I believe you could override nodes with renderHTM and parseHTML methods, like here: https://github.com/ueberdosis/tiptap/blob/main/packages/extension-mention/src/mention.ts

[mattvb91]

No sorry i mixed it up, i do mean inline styling is what im looking for