Render to inline CSS instead of classes?

[vlucas]

Is your feature request related to a problem? Please describe. I want to render content from this editor into an email. Email HTML markup does not support external CSS files, and requires inline styles for all rendered elements for maximum email client rendering compatibility.

The Markdown & HTML doc page should add a section on how to render the editor blocks to HTML with inline styles.

Describe the solution you'd like I would like an option to render CSS styles inline with HTML markup instead of only CSS classes that require an external file to be loaded or other <style> block to be defined on the page.

Describe alternatives you've considered There are no alternatives.

Additional context The current class-only approach to rendering prohibits editor markup from being used in emails and/or other embedded formats.

[matthewlipski]

Thanks for bringing this up - we're currently in the process of fixing & improving HTML serialization and this seems like a good suggestion. Will definitely discuss implementing this with @YousefED.

[frankleng]

@matthewlipski any update on this?

[YousefED]

@frankleng We haven't prioritized this yet unfortunately. I think there should be libraries out there that can help with inlining CSS in case you want to give it a shot.

[linxianxi]

Likewise, the styles are lost when rendering the html

[nacho-villanueva]

Anybody has tackled this yet? I've been using juice to inline the styles, but the results aren't the best. Depends on how you export the html, if you use the lossy function, well you lose some information and it doesn't render properly. If you use full, it contains too much information, and somethings don't get rendered properly, such as ordered lists, since they are handled using css index, or images since the src isn't set inside the \<img>. Specially when trying to export HTML meant for emails, it can be kind of hard to get similar results to what you get in the editor.

If somebody would like to tackle this, I'm sure our company would be able to place some bounty to incentivate.

[YousefED]

Anybody has tackled this yet? I've been using juice to inline the styles, but the results aren't the best. Depends on how you export the html, if you use the lossy function, well you lose some information and it doesn't render properly. If you use full, it contains too much information, and somethings don't get rendered properly, such as ordered lists, since they are handled using css index, or images since the src isn't set inside the . Specially when trying to export HTML meant for emails, it can be kind of hard to get similar results to what you get in the editor.

If somebody would like to tackle this, I'm sure our company would be able to place some bounty to incentivate.

Thanks for sharing your experience using Juice. Unfortunate that it doesn't provide the desired results. We're always open to work on this on a contracting basis if it's a priority for your company; feel free to get in touch. Of course, community contributions would also be great!

[frankleng]

depending on how complex ur styling is, rendering BN blocks into react-email components worked for us. https://react.email/docs