Changes from server by Mohan

app/(defaults)/(blog)/create-blog/page.tsx

@@ -1,52 +1,28 @@
 "use client";
+
 import IconTrashLines from "@/components/icon/icon-trash-lines";
-import React, { useState } from "react";
+import dynamic from "next/dynamic";
-import ReactQuill from "react-quill";
+import React, { useMemo, useState } from "react";
 import "react-quill/dist/quill.snow.css";
 
-// Custom toolbar options
+const ReactQuill = dynamic(() => import("react-quill"), {
-const modules = {
+    ssr: false,
-    toolbar: {
+});
-        container: [
-            [{ header: [1, 2, 3, false] }],
-            ["bold", "italic", "underline", "strike"],
-            [{ list: "ordered" }, { list: "bullet" }],
-            ["blockquote", "code-block"],
-            [{ align: [] }],
-            ["link", "image", "video"],
-            ["clean"],
-        ],
-        handlers: {
-            image: function () {
-                const input = document.createElement("input");
-                input.setAttribute("type", "file");
-                input.setAttribute("accept", "image/*");
-                input.click();
-
-                input.onchange = async () => {
-                    const file = input.files?.[0];
-                    if (file) {
-                        const reader = new FileReader();
-                        reader.onload = () => {
-                            const quill = this.quill;
-                            const range = quill.getSelection();
-                            quill.insertEmbed(range.index, "image", reader.result);
-                        };
-                        reader.readAsDataURL(file);
-                    }
-                };
-            },
-        },
-    },
-};
 
 const formats = [
     "header",
-    "bold", "italic", "underline", "strike",
+    "bold",
-    "blockquote", "code-block",
+    "italic",
-    "list", "bullet",
+    "underline",
+    "strike",
+    "blockquote",
+    "code-block",
+    "list",
+    "bullet",
     "align",
-    "link", "image", "video",
+    "link",
+    "image",
+    "video",
 ];
 
 const PostForm = () => {
@@ -57,8 +33,55 @@ const PostForm = () => {
         description: "",
     });
 
+    const modules = useMemo(
+        () => ({
+            toolbar: {
+                container: [
+                    [{ header: [1, 2, 3, false] }],
+                    ["bold", "italic", "underline", "strike"],
+                    [{ list: "ordered" }, { list: "bullet" }],
+                    ["blockquote", "code-block"],
+                    [{ align: [] }],
+                    ["link", "image", "video"],
+                    ["clean"],
+                ],
+                handlers: {
+                    image: function (this: any) {
+                        const input = document.createElement("input");
+                        input.setAttribute("type", "file");
+                        input.setAttribute("accept", "image/*");
+                        input.click();
+
+                        input.onchange = async () => {
+                            const file = input.files?.[0];
+
+                            if (file) {
+                                const reader = new FileReader();
+
+                                reader.onload = () => {
+                                    const quill = this.quill;
+                                    const range = quill.getSelection(true);
+
+                                    quill.insertEmbed(
+                                        range.index,
+                                        "image",
+                                        reader.result
+                                    );
+                                };
+
+                                reader.readAsDataURL(file);
+                            }
+                        };
+                    },
+                },
+            },
+        }),
+        []
+    );
+
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const { name, value } = e.target;
+
         setFormData((prev) => ({
             ...prev,
             [name]: value,
@@ -67,6 +90,7 @@ const PostForm = () => {
 
     const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const file = e.target.files?.[0] || null;
+
         setFormData((prev) => ({
             ...prev,
             coverImage: file,
@@ -93,9 +117,11 @@ const PostForm = () => {
         const data = new FormData();
         data.append("title", formData.title);
         data.append("slug", formData.slug);
+
         if (formData.coverImage) {
             data.append("coverImage", formData.coverImage);
         }
+
         data.append("description", formData.description);
 
         console.log("FormData prepared:", {
@@ -112,7 +138,7 @@ const PostForm = () => {
             className="space-y-5 max-w-4xl mx-auto p-6 bg-white rounded shadow-md"
         >
             <h2 className="text-xl font-bold mb-4">Create Blog</h2>
-            {/* Blog Title */}
+
             <div>
                 <label className="block font-medium mb-1">Blog Title</label>
                 <input
@@ -125,7 +151,6 @@ const PostForm = () => {
                 />
             </div>
 
-            {/* Slug */}
             <div>
                 <label className="block font-medium mb-1">Slug</label>
                 <input
@@ -133,12 +158,11 @@ const PostForm = () => {
                     name="slug"
                     value={formData.slug}
                     onChange={handleChange}
-                    placeholder="Enter slug (e.g. my-first-blog)"
+                    placeholder="Enter slug"
                     className="w-full border rounded-md px-3 py-2 focus:ring-2 focus:ring-green-500 outline-none"
                 />
             </div>
 
-            {/* Cover Image Upload */}
             <div>
                 <label className="block font-medium mb-1">Cover Image</label>
                 <input
@@ -149,7 +173,6 @@ const PostForm = () => {
                 />
             </div>
 
-            {/* Show Image Preview */}
             {formData.coverImage && (
                 <div className="mt-3">
                     <p className="text-sm font-medium">Preview:</p>
@@ -170,7 +193,6 @@ const PostForm = () => {
                 </div>
             )}
 
-            {/* Description (ReactQuill) */}
             <div className="mb-5">
                 <ReactQuill
                     value={formData.description}
@@ -182,7 +204,6 @@ const PostForm = () => {
                 />
             </div>
 
-            {/* Submit Button */}
             <button
                 type="submit"
                 className="bg-blue-600 text-white px-6 py-2 mt-5 rounded-md hover:bg-blue-700 transition"
@@ -193,4 +214,4 @@ const PostForm = () => {
     );
 };
 
-export default PostForm;
+export default PostForm;