Is it possible to add classes to the HTML that's g...

[plain siren]

Is it possible to add classes to the HTML that's generated by the Lexical? Lexical has theming built in but I can't seem to get it to work with payload

Original message from @weak ridge - Moved from #general message (in #general)

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• token-based-auth
• telemetry
• live-preview
• relationships-and-or-uploads-disappear-after-editing-a-document
• async-hooks-with-transactions

[karmic hull]

@weak ridge Is your goal to be able to style the HTML inside the editor itself? Or the html outputted if you convert it to html

[weak ridge]

My goal is to be able to style the outputted HTML

[karmic hull]

How are you outputting html currently?

[weak ridge]

I'm outputting the HTML from the collection using the HTMLCoverterFeature and the LexicalHTML field

[karmic hull]

In this case, if you want to add custom classes to the outputted html (or modify the outputted html in any way), you can add a custom HTML Converter for that node instead of using the one which is included by default

To do that, you are able to specify a list of your own, custom HTML converters in the props of HTMLConverterFeature({}),

You can re-use the default ones, then add your custom one at the end

HTMLConverterFeature({
  converters: [
     ...consolidateHTMLConverters({ editorConfig }),
     YourCustomConverterHere
  ]
})

Kinda like this

[weak ridge]

Ah I see. Thanks @karmic hull

[karmic hull]

You're welcome!

[weak ridge]

I think I could call this manually on a node too if I wanted instead of making it part of the collection config
For example if I had a custom endpoint and wanted to convert the node at the time I request the collection

[karmic hull]

Regarding the code I sent, forget what I sent, this would be better:

HTMLConverterFeature({
  converters: ({ defaultConverters }) => [
     ...defaultConverters,
     YourCustomConverterHere
  ]
})

I think I could call this manually on a node too if I wanted instead of making it part of the collection config
For example if I had a custom endpoint and wanted to convert the node at the time I request the collection
Sure, you absolutely can! You can also call the HTML converter manually (see https://payloadcms.com/docs/rich-text/lexical#creating-your-own-html-converter)

Adding a HTML Converter for that node would definitely be the easiest option though. HTML Converters are super simple - it's just a function which accepts the node as input, and returns the HTML string as output ^^