How do I show the content using editor.emitSerializedOutput()?

[kumarabhirup]

Hi, this is a newbie question. I see that Draft.js has something like convertToRaw for display methods. Another usable thing for Draft.js is draft-js-utils which help to render the content on page using HTML.

Can I use those libraries on the data provided by editor.emitSerializedOutput() through onChange method?

Can you please give a good guide for me about how to implement the JSON response that editor provides?

Makers of Dante.js are awesome 😍

[kumarabhirup]

Okay @michelson, so I got the HTML output by using draft-convert library.

import { convertToHTML as stateToHTML } from 'draft-convert'
.....
<Dante
        ....
        onChange={async editor => { 
          await this.setState({ editor: editor.state.editorState._immutable.currentContent })
          console.log(stateToHTML({
            styleToHTML: style => {
              if (style.startsWith('CUSTOM_COLOR_')) {
                return <span style={{color: style.substr(style.length - 7)}} />
              }
            },
            blockToHTML: block => {
              if (block.type === 'image') {
                return <img src={block.data.url} alt={block.text} />
              }
            }
          })(this.state.editor))
        }}
        ....
  />
.....

Important follow-up question

Now that I have the HTML output, how do I make it look like it looked in editor? There must be a CSS file that you are using. I want same font, same look and html elements like <figure/> for image caption.

Help appreciated 🙏

[michelson]

Hi @KumarAbhirup , you can use the dante sass styles, search for "styles/dante.scss" in the library code. note that you have to implement all the class names for elements in order for this to work.

I would suggest that you just render the editor in readOnly mode for it to work seamless. my approach to make this SEO friendly is to keep metatags and og tags set up in the page from server. I Also use prerender (installed version) in order to catch the search bot requests and give them a server side rendered version of your js.

hope it helps

best