search

facebookarchive / draft-js

A React framework for building text editors.
https://draftjs.org/
MIT License
22.56k stars 2.64k forks source link

Block styles not saved in editor's content #2182

Open jkb-kt opened 4 years ago

jkb-kt commented 4 years ago

Do you want to request a feature or report a bug? Bug

What is the current behavior? I am able to style individual blocks using blockStyleFn (this is how it looks inside the editor). The problem is that these styles are not saved in ContentState. So when I want to use the created content outside of the editor as HTML, it doesn't have the styles and therefore doesn't look the same as in the editor.

What is the expected behavior? Styles of blocks would be saved in ContentState also.

folkjc commented 4 years ago

Theoretically, you could save all the block styles in ContentBlock.data, and use the block renderer to read in those styles at render time.

But I'm assuming you have a library that converts to HTML for you, in which case you can add a class (or style) attribute to the HTML element of the block.

i.e. if a block's type was "red-text", then you could program your html converter to output that specific block as <div class="red-text" />, or add the attribute <div style="color: red;" />.

If the ContentState is enough for React to render it a particular way, it has enough information for your HTML converter to also output it that way.