Draft-js: How to retrieve and display Draft-js raw objects in a react component?

[sunkant]

In #62 , the author of this repository mentioned "didn't want to release any conversion utilities" .

However, I hardly found any materials about how to retrieve and display Draft-js raw object in a react component on the internet.

Often, we want to display the object with customized effects, for example we will make the display effect of a raw object different with the effect when editing it in a Draft-js Editor. Then simply using Draft-js Editor component with the readOnly prop will be ineffective.

Can somebody be kind enough to provide some clues on how to achieve this? Since there are so many examples on how to do the editors, Draft-js plugins, and so on, but none is there to tell us how to properly retrieve and display Draft-js raw objects in a react component, or with customized settings.

Thanks!

[oyeanuj]

@skywalkerlucas See, if something like this helps - https://github.com/nikgraf/awesome-draft-js#common-utilities. You can convert it to HTML and then have the components display the HTML or have components that understand the DraftJS raw object and can build components around it.

But I would also vote for DraftJS having some basic opinions or providing utilities around it. I understand that @hellendag has mentioned that the use-case at Facebook doesn't require conversion to HTML. But in the community, it is clearly a very popular request - given how frequently that question comes up here or on Slack. At the very least, we should clarify the possible options available to the user.

[sunkant]

Hey @oyeanuj ,

Thanks a lot.

I find http://codepen.io/rkpasia/pen/jqbrpq implements a simple "buildMarkup" function,

But I don't know if it is the best way to do it.

A way I have come up with is to just to use a Draft-js Editor with readOnly prop, and define the customized effects in that Editor according our own needs, using another set of Entities, Decorators, CustomRenderFns, and that could be different with the editor we used to input the data.

[nomadus]

Any chance that this issue will be resolved?

[minhna]

is there any update?

[eladonline]

can someone give an answer to this issue its important one

[niveditc]

I think we'll probably maintain the same stance as @hellendag in https://github.com/facebook/draft-js/issues/62. Conversion utilities can get very complex very quickly with different folks wanting different formats (e.g which Markdown spec, which flavor of HTML, etc.). Therefore that should remain separate from the core Draft.js project.

A few folks have proposed utilities in https://github.com/facebook/draft-js/issues/62 that can be used for this & you can develop your own as well based on other projects :)