Draft-js: How to convert content to html string?

[optimatex]

Do you want to request a _feature_ or report a _bug_?
feature

What is the current behavior?
actually there is no existent solution or plugin to convert content state to html. I think this is a key feature to parse rich content made in draft.js to html string. I was trying this one https://github.com/sstur/draft-js-export-html but this plugin can't retain classes and attributes for html tags.
As for me i have no idea how to perform this

Maybe someone know existing solution to get html string with all classes\attributes?

What is the expected behavior?
I wish to get resulted html string after editing in draft.js is finished.

[stopachka]

hey @optimatex -- this issue may be better to post in the draft-js-export-html group. convertToHtml is not something that will be included in draft core for now.

[optimatex]

@stopachka i'm sorry but i don't understand what is draft-js-export-html group. U mean a group of repos of draft-to-html plugins ?

actually, i have one question: draft.js use some implementation to parse content state to html in , so why it's impossible to use this solution for stand alone plugin with wide support of all draft.js features like decorators, custom styles and so on?
or it will be cool thing if some one could point where this code is placed so i could try to implement this parser myself

[davidchang]

@optimatex - sorry for the late response. Stopachka meant to say you could post an issue in the draft-js-export-html repository - it actually looks like this issue is exactly what you were looking for: https://github.com/sstur/draft-js-export-html/issues/10

as for your second paragraph, could you clarify what you were asking? are you asking for how Draft is able to turn contentState into HTML? or are you saying that Draft is able to parse HTML into ContentState (i don't think that that is a true statement)?

[optimatex]

Hi @davidchang . Thank for ur response.
Unfortunaly, @sstur can't quickly implement all features on his own (or, it will take alot of time). He mentioned this in this issue sstur/draft-js-export-html#10.
So, at this time i couldn't find any working solutions in which i can use all draft.js advantages. I think, draft.js team would be interested to fill this lack to complement all work they did before. Cuz right now i can't use all features like decorators for hashtags without making own html exporter or contributing to @sstur exporter.

About second paragraph: i mean that draft.js has methods to convert contentState to html when it display in browser. For example: if u create some text inside and explore it with browser dev. tools u will see mark-up like this:

that's mean that draft.js can convert content state to html to display order list entity type inside contentState to html

tag. That's why i thought that i could use this methods to build own html exported or contributing.

thank u. Sorry for vast answer

[rpechayr]

Hello, I am wondering the exact same thing as @optimatex.
Why isn't possible to export as html a rendered draft.js component ?

Is there something I have misunderstood about draft or react ?

How do real life production apps based on draft actually display the saved content ? Do they all use an external tool (or in-house custom script) such as sstur/draft-js-export-html ? Do they render a draft.js instance itself by hydrating it using deserialized state and disabling any editing feature ?

It looks like there is a whole point I am missing.

Thank in advance for your answer, and many thanks for all the open source work on draft.js.

[sstur]

@rpechayr: I think the reason this is not in Draft core is because the principles behind Draft discourage using HTML at all. React in general wants you to think of the browser/DOM as an implementation detail and work with state and declarative views instead of HTML.

In many ways HTML is sub-optimal for storing/serializing this kind of structured content. I think many modern apps that use Draft probably render to DOM or native views without producing any intermediate HTML.

That being said, I totally understand some use cases, including legacy systems, need for this feature. That's why I open sourced draft-js-export-html. I know it's lacking some features and extensibility and I hope to make it better, possibly with some contributions from the community.

[rpechayr]

Thank you @sstur for this clear answer. The basic idea is then to replace html (which is an input implementation detail for draft) by draft state to store structured content. I like this idea.

I my use case, I am not exactly working on a legacy system. I am working on a tool allowing user to define an email content using a rich text editor (like gmail for example). Email content need to be rendered as html in the end, which is the reason why I find it convenient to store the rich content as html, instead of generating it using custom code.

Do you have any example to show about how to render draft state to dom without intermediate HTML ?

[sstur]

Right, if you're working with email (kind of a legacy system in a way) then HTML is unavoidable. Although, I did see a cool library recently for generating responsive email from a custom markup language (https://mjml.io/). but I don't think that's really answering your question.

Email content need to be rendered as html in the end

Totally true. (Although you could still store it in another form similar to Draft state.)

Do you have any example to show about how to render draft state to dom without intermediate HTML.

I don't have the reference, but I vaguely remember seeing a library that renders using React. I heard some people just use Draft in read-only mode but that probably won't help you. I've written something to render a subset of Draft ContentState in React Native, but It's not open-source at this time.

Sorry I don't have a good example. Totally check with the cool folks in the Draft Slack group.

[rpechayr]

Thanks @sstur. Things are a lot clearer for me now. I already knew about mjml, and it's really awesome. I'll get in touch in slack if I have any further questions.

[optimatex]

@sstur i'm sorry but how can i use draft.js output to render content? i mean if i have html string i use dangerouslySetInnerHTML to produce html from dataBase, but how can i achieve same result if i'll avoid html conversion?