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 https://github.com/steven-tey/novel/discussions/313#discussioncomment-8591476

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?