how to render content as article page after edit ?

[thunderwin]

Describe the feature you'd like to request

how to render content as article page after edit ?

Describe the solution you'd like to see

the editing result is the JSON , now I need save it to the DB... my question is how to render it back to web page later and keep the format like i see in the editor?

Additional information

No response

[ByeongminLee]

Here’s the method I used

1. You can retrieve the JSON as an HTML-formatted string like this
   How to render JSON types into HTML elements? #313 (comment)

2. Render the string obtained above as HTML

export default function ContentRenderer({ json }: { json: any }) {
  const output = useMemo(() => {
    return generateHTML(json, [
      Bold,
      BulletList,
      Document,
      Heading,
      Link,
      Paragraph,
      ListItem,
      Text,
    ]);
  }, [json]);

  return (
    <pre>
        <div dangerouslySetInnerHTML={{__html:output}}></div>
    </pre>
  );
}

3. By specifying the following className, you can define the style for the Novel editor

 <div className="tiptap ProseMirror prose prose-lg dark:prose-invert prose-headings:font-title font-default focus:outline-none max-w-full">
    <ContentRenderer json={value} />
 </div>

4. result
   

[keyproco]

I think there is a better way to do that by using <EditorContent />, to avoid XSS vulnerabiilites and HTML conversion is done internally.

[zeiflonte]

@keyproco Could you elaborate on how to use <EditorContent /> for rendering?

[Zain-ul-din]

is there any way to do it on the server-side?