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
5.91k stars 386 forks source link

blocksToHTMLLossy does not show enough information #893

Open AntoLC opened 6 days ago

AntoLC commented 6 days ago

Describe the bug Thank you for your great work.

I noticed the method blocksToHTMLLossy doesn't show any information about the alignment, the color or the background of a text. For a text centered and with blue color and red background by example, blocksToHTMLLossy will returned <p class="bn-inline-content">Text blue</p>.

Nice to have Could be nice to have something like:

<p class="bn-inline-content" style="color:#0b6e99;background-color:#d61f1f;text-align: center;">Text blue</p>

Thank you!

matthewlipski commented 5 days ago

Yep, this is one of the things that are indeed lost when converting to HTML. Definitely on the TODO list to fix, though we're not sure yet what makes most sense - I imagine a common use case is for people to statically render BlockNote content by converting to HTML. With that in mind there are 2 options:

  1. Bake things like text/bg color into inline styles like you suggest.
  2. Expose them as HTML class names or attributes so people can customize how to render them.

Not sure yet what the better option is atm, both have their pros & cons. Do you have a specific use case in mind with blocksToHTMLLossy? Would be great to hear what you're using it for!

AntoLC commented 3 days ago

Not sure yet what the better option is atm, both have their pros & cons. Do you have a specific use case in mind with blocksToHTMLLossy? Would be great to hear what you're using it for!

For the moment we use it to generate PDF, it accepts html and css. css classname could be ok with the alignment (there are not so much properties), but with colors it seems more complicated with classname. After if blocksToHTMLLossy could expose the hex in 1 way or another, it would be fine for us, we could on our side create a parser to catch them and use them.

Ex:


<p class="bn-inline-content"  data-colors="#0b6e99"  data-bg-colors="#d61f1f" ...>
  …
</p>