Feature: Allow users to set CSS classes on nodes similar to setStyle

[ProofOfKeags]

This would make it compatible with tailwind. Since spans are used anyway it should just be a matter of setting a different property on the element.

[milaabl]

This would be a fantastic add on, as, as of now, we have to extend nodes in order to be able to have that feature on them. This would make things so much simpler.

[fantactuka]

Can you use editor.config.theme for that? Majority (if not all) core nodes are using theme for external styling

[ProofOfKeags]

No because I need to be able to set styles in response to state changes and I would like to be able to do that with tailwind classes rather than inline styles.

[acywatson]

No because I need to be able to set styles in response to state changes and I would like to be able to do that with tailwind classes rather than inline styles.

Ok so the problem is you would need to define a ton of different classes representing all the different possible tailwind class combinations in order to make that work.

Would be easier to just be able to granularly add/remove classes. I think that makes sense.

[ProofOfKeags]

That would also be fine as long as repeated adding of the same class did not result in the requirement to do multiple removals. e.g. a "set" api for adding and removing classes

[CanRau]

Came here for the same, I'd like to define some color/gradient swatches when clicked would love them to add css class with brand colors I have defined, so if we change any of them I won't have to update all the inline styles

alternatively maybe I should make a custom node(s) 🤔 but just being able to set classes is more universally useful I think

In some cases a style needs more than 1 style, which also might need browser prefixes now but could change later, or there's a better way to do it, that's why I'd like to do as little as possible as inline styles but rather css classes 🤓

[dinfer]

Any progress?
I'm creating a WYSIWYG editor to enable the user to style the block/inline-level nodes(like background, paddings, and so on), and I'm planning to use CSS variables to implement the theme.
According to the docs, I can only use getStyle/setStyle. It would be very convenient to provide an API to support CSS classes or even arbitrary DOM attributes.
And if I have to override the default nodes, for example, the LexicalParagraphNode, how can I implement it?

• creates a property to store the classes, for example, __class
• save and load __class in importDOM, exportDOM, importJSON and exportJSON,
• add class to the element created by the method createDOM
• listen to the changes of __class, but how can I update the DOM? Can I update the DOM directly which is not recommended by the design of lexical?

[etrepum]

You can set arbitrary DOM attributes on nodes, including classes and styles. Generally this is done with a mutation listener from a plugin whenever the target node(s) are created or updated. The kind of mutations you're not allowed to do are creating or replacing nodes (including text) except inside of a DecoratorNode. The problem is that this is all ephemeral, there's nowhere to store that state and it's not serialized or deserialized so it's mostly useful for either reflecting data that's already stored in the node or for state that's supposed to be ephemeral.

When you're subclassing a node, you would use createDOM and updateDOM for your mutations. No need to use a mutation listener at that point (except for doing things that you want to be configurable outside of the node, usually event handlers).

There's a lot of discussion on this in a related PR #6929 - I don't think this particular implementation would work very well with tailwind.