Changes from server by Mohan

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

@@ -1,11 +1,40 @@
 "use client";
+
 import IconTrashLines from "@/components/icon/icon-trash-lines";
-import React, { useState } from "react";
-import ReactQuill from "react-quill";
+import dynamic from "next/dynamic";
+import React, { useMemo, useState } from "react";
 import "react-quill/dist/quill.snow.css";
 
-// Custom toolbar options
-const modules = {
+const ReactQuill = dynamic(() => import("react-quill"), {
+    ssr: false,
+});
+
+const formats = [
+    "header",
+    "bold",
+    "italic",
+    "underline",
+    "strike",
+    "blockquote",
+    "code-block",
+    "list",
+    "bullet",
+    "align",
+    "link",
+    "image",
+    "video",
+];
+
+const PostForm = () => {
+    const [formData, setFormData] = useState({
+        title: "",
+        slug: "",
+        coverImage: null as File | null,
+        description: "",
+    });
+
+    const modules = useMemo(
+        () => ({
             toolbar: {
                 container: [
                     [{ header: [1, 2, 3, false] }],
@@ -17,7 +46,7 @@ const modules = {
                     ["clean"],
                 ],
                 handlers: {
-            image: function () {
+                    image: function (this: any) {
                         const input = document.createElement("input");
                         input.setAttribute("type", "file");
                         input.setAttribute("accept", "image/*");
@@ -25,40 +54,34 @@ const modules = {
 
                         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);
+                                    const range = quill.getSelection(true);
+
+                                    quill.insertEmbed(
+                                        range.index,
+                                        "image",
+                                        reader.result
+                                    );
                                 };
+
                                 reader.readAsDataURL(file);
                             }
                         };
                     },
                 },
             },
-};
-
-const formats = [
-    "header",
-    "bold", "italic", "underline", "strike",
-    "blockquote", "code-block",
-    "list", "bullet",
-    "align",
-    "link", "image", "video",
-];
-
-const PostForm = () => {
-    const [formData, setFormData] = useState({
-        title: "",
-        slug: "",
-        coverImage: null as File | null,
-        description: "",
-    });
+        }),
+        []
+    );
 
     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"