feat: editor block to html

Author: luannguyenQV

apps/web/@/molecules/editor-js/index.tsx

@@ -26,6 +26,7 @@ const Editor: React.FC<EditorJSProps> = ({ onChange, data }) => {
         placeholder: "Write your post here...",
         onChange: async () => {
           const content = await editorRef.current?.save()
+
           onChange(content)
         },
       })

apps/web/@/molecules/posts/post-detail/post-content/index.tsx

@@ -1,12 +1,14 @@
-"use client"
-
-import React from "react"
+import React, { useMemo } from "react"
 
+import edjsHTML from "editorjs-html"
 import htmlReactParser, { attributesToProps, domToReact } from "html-react-parser"
+import DOMPurify from "isomorphic-dompurify"
 import slugify from "slugify"
 
 import { TPostItem } from "@/types/posts"
 
+const edjsParser = edjsHTML()
+
 interface PostContentProps {
   post: TPostItem
 }
@@ -78,7 +80,30 @@ const HTMLParser: React.FC<PostContentProps> = ({ post }) => {
 }
 
 const PostContent: React.FC<PostContentProps> = ({ post }) => {
-  return <div />
+  const contentHtml = useMemo(() => {
+    if (!post.content) return ""
+
+    console.log(">>>>>>", post.content)
+
+    try {
+      const content = JSON.parse(post.content)
+      const htmlArray = edjsParser.parse(content)
+      console.log(">>>>>>", htmlArray)
+      const html = htmlArray.join("")
+      return DOMPurify.sanitize(html)
+    } catch (error) {
+      console.log(">>>>>>", error)
+
+      return ""
+    }
+  }, [post.content])
+
+  return (
+    <div
+      className="post-content mt-8"
+      dangerouslySetInnerHTML={{ __html: contentHtml }}
+    />
+  )
 }
 
 export default PostContent

apps/web/package.json

@@ -21,7 +21,10 @@
     "clsx": "^2.0.0",
     "cmdk": "^0.2.1",
     "dayjs": "^1.11.9",
+    "dompurify": "^3.1.6",
+    "editorjs-html": "^3.4.3",
     "html-react-parser": "^5.0.11",
+    "isomorphic-dompurify": "^2.14.0",
     "lowlight": "^3.1.0",
     "lucide-react": "^0.270.0",
     "negotiator": "^0.6.3",