feat: update style for edtior.js

Author: luannguyenQV

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

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

apps/web/@/molecules/input-title/index.tsx

@@ -25,7 +25,7 @@ const InputTitle: React.FunctionComponent<InputTitleProps> = ({
         placeholder={placeholder}
         onChange={onChange}
         onBlur={onBlur}
-        className="h-16 w-full rounded-md border border-none bg-transparent px-3 py-2 text-4xl font-bold focus-visible:ring-ring focus-visible:ring-offset-2 focus:focus-visible:outline-none"
+        className="h-16 w-full scroll-m-20 rounded-md border border-none bg-transparent px-3 py-2 text-4xl font-extrabold tracking-tight focus-visible:ring-ring focus-visible:ring-offset-2 focus:focus-visible:outline-none lg:text-5xl"
       />
     </div>
   )

apps/web/@/molecules/post-form/index.tsx

@@ -1,8 +1,9 @@
 "use client"
 
 import React, { useState } from "react"
+import dynamic from "next/dynamic"
 import Link from "next/link"
-import { useParams } from "next/navigation"
+import { useParams, useRouter } from "next/navigation"
 
 import { zodResolver } from "@hookform/resolvers/zod"
 import { createPost, Prisma, updatePost } from "database"
@@ -11,20 +12,21 @@ import { useTranslations } from "next-intl"
 import { Controller, useForm } from "react-hook-form"
 import AsyncCreatableSelect from "react-select/async-creatable"
 import { toast } from "react-toastify"
-import { Button, buttonVariants, cn, Label, LoadingButton } from "ui"
+import { buttonVariants, cn, Label, LoadingButton } from "ui"
 import z from "zod"
 
 import APP_ROUTES from "@/constants/routes"
 import InputTitle from "@/molecules/input-title"
 import { TPostItem } from "@/types/posts"
 
-import Editor from "../editor-js"
+const Editor = dynamic(() => import("../editor-js"), { ssr: false })
 
 const PostForm = ({ post: postData }: { post?: TPostItem }) => {
   const { title = "", content = "", tagOnPost = [] } = postData || {}
   const t = useTranslations()
   const session = useSession()
   const [pending, setPending] = useState(false)
+  const router = useRouter()
 
   const userId = session?.data?.user?.id
 
@@ -68,24 +70,27 @@ const PostForm = ({ post: postData }: { post?: TPostItem }) => {
   })
 
   const handleSubmitPost = async (data) => {
+    let newPostId = postId as string
     try {
       setPending(true)
       if (postId) {
         await updatePost(postId as string, data, userId)
         toast.success(t("common.post_created"))
       } else {
-        await createPost(data, userId)
+        const post = await createPost(data, userId)
+        newPostId = post.data.id
         toast.success(t("common.post_updated"))
       }
     } catch (error) {
       toast.error(error.message)
     } finally {
+      router.push(APP_ROUTES.POST.replace(":postId", newPostId))
       setPending(false)
     }
   }
 
   const promiseOptions = async (inputValue: string) => {
-    const rawData = await fetch("/api/protected/tags?search=" + inputValue)
+    const rawData = await fetch(`/api/protected/tags?search=${inputValue}`)
     const tags = await rawData.json()
 
     return tags.map((tag) => ({
@@ -117,26 +122,27 @@ const PostForm = ({ post: postData }: { post?: TPostItem }) => {
           )}
         </div>
       </div> */}
-      {JSON.stringify(errors)}
       <form
         className="mb-4 w-full"
         onSubmit={handleSubmit(handleSubmitPost)}
       >
         <div className="grid grid-cols-4 gap-8">
           <div className="col-span-3 mb-4 w-full rounded-md">
             <div className="w-full">
-              <Controller
-                name="title"
-                control={control}
-                render={({ field }) => (
-                  <InputTitle
-                    placeholder={t("common.untitled")}
-                    {...field}
-                  />
-                )}
-              />
+              <div className="px-[58px]">
+                <Controller
+                  name="title"
+                  control={control}
+                  render={({ field }) => (
+                    <InputTitle
+                      placeholder={t("common.untitled")}
+                      {...field}
+                    />
+                  )}
+                />
+              </div>
 
-              <div className="mt-3 rounded">
+              <div className="mt-3">
                 <Controller
                   name="content"
                   control={control}

apps/web/app/[lang]/globals.css

@@ -71,11 +71,16 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground min-h-screen font-sans antialiased;
+    @apply min-h-screen bg-background font-sans text-foreground antialiased;
   }
 
-  h1, h2, h3, h4, h5, h6 {
-    @apply font-bold mb-4;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply mb-4 font-bold;
   }
 
   p {
@@ -90,7 +95,7 @@
     font-size: 0.9rem;
     padding: 0.25em;
   }
-  
+
   pre {
     background: #0f111a;
     border-radius: 0.5rem;
@@ -158,3 +163,35 @@
     }
   }
 }
+
+/* editorjs */
+.ce-block__content,
+.ce-toolbar__content {
+  max-width: unset;
+  margin-left: 70px;
+  margin-right: 70px;
+}
+
+h1.ce-header {
+  @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
+}
+
+h2.ce-header {
+  @apply scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0;
+}
+
+h3.ce-header {
+  @apply scroll-m-20 text-2xl font-semibold tracking-tight;
+}
+
+h4.ce-header {
+  @apply scroll-m-20 text-xl font-semibold tracking-tight;
+}
+
+h5.ce-header {
+  @apply scroll-m-20 text-lg font-semibold tracking-tight;
+}
+
+h6.ce-header {
+  @apply scroll-m-20 text-base font-semibold tracking-tight;
+}