search

TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.
https://www.blocknotejs.org/
Mozilla Public License 2.0
6.02k stars 396 forks source link

Render to inline CSS instead of classes? #375

Open vlucas opened 9 months ago

vlucas commented 9 months ago

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 commented 9 months ago

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 commented 4 months ago

@matthewlipski any update on this?

YousefED commented 4 months ago

@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 commented 1 month ago

Likewise, the styles are lost when rendering the html

nacho-villanueva commented 1 week ago

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.