Allow images in posts

package-lock.json

@@ -59,6 +59,7 @@
         "react-select": "^5.9.0",
         "react-toastify": "^11.0.3",
         "sanitize-html": "^2.14.0",
+        "tiptap-extension-resize-image": "^1.2.1",
         "tiptap-markdown": "^0.8.10"
       },
       "devDependencies": {
@@ -12654,6 +12655,17 @@
         "@popperjs/core": "^2.9.0"
       }
     },
+    "node_modules/tiptap-extension-resize-image": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/tiptap-extension-resize-image/-/tiptap-extension-resize-image-1.2.1.tgz",
+      "integrity": "sha512-SLMAujDa+0LN/6Iv2HtU4Uk0BL6LMh4b/r85frpdnjFDW2i6pIOfTVG8jzJQ8T1EgYHNn2YG1U2HoVAGuwLc3Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/extension-image": "^2.0.0",
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
     "node_modules/tiptap-markdown": {
       "version": "0.8.10",
       "resolved": "https://registry.npmjs.org/tiptap-markdown/-/tiptap-markdown-0.8.10.tgz",

package.json

@@ -60,6 +60,7 @@
     "react-select": "^5.9.0",
     "react-toastify": "^11.0.3",
     "sanitize-html": "^2.14.0",
+    "tiptap-extension-resize-image": "^1.2.1",
     "tiptap-markdown": "^0.8.10"
   },
   "devDependencies": {

src/app/create-game/page.tsx

@@ -6,18 +6,14 @@ import {  Button, Form, Input, Spacer } from "@nextui-org/react";
 import { LoaderCircle } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
-import sanitizeHtml from "sanitize-html";
 import { Select, SelectItem } from "@nextui-org/react";
 import Timers from "@/components/timers";
 import Streams from "@/components/streams";
 import { UserType } from "@/types/UserType";
-import { useRouter } from 'next/navigation';
+import { useRouter } from "next/navigation";
 import { GameType } from "@/types/GameType";
 import { PlatformType, DownloadLinkType } from "@/types/DownloadLinkType";
-
+import { sanitize } from "@/helpers/sanitize";
-
-
-
 
 export default function CreateGamePage() {
   const router = useRouter();
@@ -53,8 +49,8 @@ export default function CreateGamePage() {
   const sanitizeSlug = (value: string): string => {
     return value
       .toLowerCase() // Convert to lowercase
-      .replace(/\s+/g, '-') // Replace whitespace with hyphens
+      .replace(/\s+/g, "-") // Replace whitespace with hyphens
-      .replace(/[^a-z0-9-]/g, '') // Only allow lowercase letters, numbers, and hyphens
+      .replace(/[^a-z0-9-]/g, "") // Only allow lowercase letters, numbers, and hyphens
       .substring(0, 50); // Limit length to 50 characters
   };
 
@@ -150,15 +146,18 @@ export default function CreateGamePage() {
         */
     };
     load();
-  },[]);
+  }, []);
 
   useEffect(() => {
     const checkExistingGame = async () => {
-      
       const response = await fetch(
         process.env.NEXT_PUBLIC_MODE === "PROD"
-          ? `https://d2jam.com/api/v1/self/current-game?username=${getCookie("user")}`
+          ? `https://d2jam.com/api/v1/self/current-game?username=${getCookie(
-          : `http://localhost:3005/api/v1/self/current-game?username=${getCookie("user")}`,
+              "user"
+            )}`
+          : `http://localhost:3005/api/v1/self/current-game?username=${getCookie(
+              "user"
+            )}`,
         {
           headers: { authorization: `Bearer ${getCookie("token")}` },
           credentials: "include",
@@ -177,21 +176,18 @@ export default function CreateGamePage() {
           setThumbnailUrl(gameData.thumbnail);
           setDownloadLinks(gameData.downloadLinks);
           setGame(gameData);
-          const uniqueAuthors = [gameData.author, ...gameData.contributors]
+          const uniqueAuthors = [
-            .filter((author, index, self) => 
+            gameData.author,
+            ...gameData.contributors,
+          ].filter(
+            (author, index, self) =>
               index === self.findIndex((a) => a.id === author.id)
           );
           setSelectedAuthors(uniqueAuthors);
-        
+        } else {
-        }
-        else
-        {
           setSelectedAuthors(user ? [user] : []);
         }
-      }
+      } else {
-      else
-      {
-       
         setEditGame(false);
         setTitle("");
         setGameSlug("");
@@ -199,20 +195,16 @@ export default function CreateGamePage() {
         setEditorKey((prev) => prev + 1);
         setThumbnailUrl("");
         setDownloadLinks([]);
-        
       }
     };
 
     if (mounted && user) {
       checkExistingGame();
     }
-    
+  }, [user, mounted]);
-  },[user,mounted]);
-  
 
   return (
     <div className="static flex items-top mt-20 justify-center top-0 left-0">
-    
       <Form
         className="w-full max-w-2xl flex flex-col gap-4"
         validationErrors={errors}
@@ -245,7 +237,7 @@ export default function CreateGamePage() {
             return;
           }
 
-        const sanitizedHtml = sanitizeHtml(content);
+          const sanitizedHtml = sanitize(content);
           setWaitingPost(true);
 
           try {
@@ -285,7 +277,11 @@ export default function CreateGamePage() {
             }
 
             if (response.ok) {
-            toast.success(gameSlug ? "Game updated successfully!" : "Game created successfully!");
+              toast.success(
+                gameSlug
+                  ? "Game updated successfully!"
+                  : "Game created successfully!"
+              );
               setWaitingPost(false);
               router.push(`/games/${gameSlug || sanitizeSlug(title)}`);
             } else {
@@ -332,7 +328,7 @@ export default function CreateGamePage() {
           description="This will be used in the URL: d2jam.com/games/your-game-name"
         />
 
-<div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2">
           <label className="text-sm font-medium">Add Authors</label>
           <Input
             placeholder="Search users..."
@@ -349,7 +345,7 @@ export default function CreateGamePage() {
                   key={user.id}
                   className="flex justify-between items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded cursor-pointer"
                   onClick={() => {
-              if (!selectedAuthors.some(a => a.id === user.id)) {
+                    if (!selectedAuthors.some((a) => a.id === user.id)) {
                       setSelectedAuthors([...selectedAuthors, user]);
                     }
                     setSearchResults([]);
@@ -368,9 +364,14 @@ export default function CreateGamePage() {
                 className="bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-100 px-3 py-1 rounded-full flex items-center gap-2"
               >
                 <span>{author.name}</span>
-      {((game && author.id !== game.authorId) || (!game && author.id !== user?.id)) && (
+                {((game && author.id !== game.authorId) ||
+                  (!game && author.id !== user?.id)) && (
                   <button
-          onClick={() => setSelectedAuthors(selectedAuthors.filter(a => a.id !== author.id))}
+                    onClick={() =>
+                      setSelectedAuthors(
+                        selectedAuthors.filter((a) => a.id !== author.id)
+                      )
+                    }
                     className="text-sm hover:text-red-500"
                   >
                     ×
@@ -378,18 +379,19 @@ export default function CreateGamePage() {
                 )}
               </div>
             ))}
-</div>
+          </div>
         </div>
         <label className="text-sm font-medium">Game Description</label>
-        <Editor key={editorKey} content={content} setContent={setContent} gameEditor />  
+        <Editor
+          key={editorKey}
+          content={content}
+          setContent={setContent}
+          gameEditor
+        />
 
         <Spacer />
 
-        
-        
         <div className="flex flex-col gap-4">
-  
-
           <Input
             label="Thumbnail URL"
             labelPlacement="outside"
@@ -414,22 +416,27 @@ export default function CreateGamePage() {
                       }}
                       onBlur={() => {
                         if (!urlRegex.test(downloadLinks[index].url)) {
-                  toast.error("Please enter a valid URL starting with http:// or https://");
+                          toast.error(
+                            "Please enter a valid URL starting with http:// or https://"
+                          );
 
-                  if (!downloadLinks[index].url.startsWith("http://") && !downloadLinks[index].url.startsWith("https://")) {
+                          if (
-                    const newUrl = "https://" + downloadLinks[index].url;
+                            !downloadLinks[index].url.startsWith("http://") &&
+                            !downloadLinks[index].url.startsWith("https://")
+                          ) {
+                            const newUrl =
+                              "https://" + downloadLinks[index].url;
                             const newLinks = [...downloadLinks];
                             newLinks[index].url = newUrl;
                             setDownloadLinks(newLinks);
-                    const input = document.querySelector<HTMLInputElement>(
+                            const input =
+                              document.querySelector<HTMLInputElement>(
                                 `#download-link-${index}`
                               );
                             if (input) {
                               input.value = newUrl;
                             }
                           }
-
-
                         }
                       }}
                     />
@@ -439,7 +446,8 @@ export default function CreateGamePage() {
                       aria-label="Select platform" // Add this to fix accessibility warning
                       onSelectionChange={(value) => {
                         const newLinks = [...downloadLinks];
-                  newLinks[index].platform = value as unknown as PlatformType;
+                        newLinks[index].platform =
+                          value as unknown as PlatformType;
                         setDownloadLinks(newLinks);
                       }}
                     >
@@ -466,7 +474,9 @@ export default function CreateGamePage() {
                       color="danger"
                       variant="light"
                       onPress={() => {
-                  setDownloadLinks(downloadLinks.filter((l) => l.id !== link.id));
+                        setDownloadLinks(
+                          downloadLinks.filter((l) => l.id !== link.id)
+                        );
                       }}
                     >
                       ×
@@ -510,7 +520,6 @@ export default function CreateGamePage() {
           <Streams />
         </div>
       )}
-      
     </div>
   );
 }

src/app/create-post/page.tsx

@@ -14,12 +14,12 @@ import { LoaderCircle } from "lucide-react";
 import { redirect } from "next/navigation";
 import { ReactNode, useEffect, useState } from "react";
 import { toast } from "react-toastify";
-import sanitizeHtml from "sanitize-html";
 import Select, { MultiValue, StylesConfig } from "react-select";
 import { useTheme } from "next-themes";
 import Timers from "@/components/timers";
 import Streams from "@/components/streams";
 import { UserType } from "@/types/UserType";
+import { sanitize } from "@/helpers/sanitize";
 
 export default function CreatePostPage() {
   const [title, setTitle] = useState("");
@@ -118,7 +118,6 @@ export default function CreatePostPage() {
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
-
   const styles: StylesConfig<
     {
       value: string;
@@ -213,7 +212,7 @@ export default function CreatePostPage() {
             return;
           }
 
-          const sanitizedHtml = sanitizeHtml(content);
+          const sanitizedHtml = sanitize(content);
           setWaitingPost(true);
 
           const tags = [];

src/app/p/[slug]/page.tsx

@@ -37,8 +37,8 @@ import { redirect, useParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import Editor from "@/components/editor";
-import sanitizeHtml from "sanitize-html";
 import CommentCard from "@/components/posts/CommentCard";
+import { sanitize } from "@/helpers/sanitize";
 
 export default function PostPage() {
   const [post, setPost] = useState<PostType>();
@@ -579,7 +579,7 @@ export default function PostPage() {
                 return;
               }
 
-              const sanitizedHtml = sanitizeHtml(content);
+              const sanitizedHtml = sanitize(content);
               setWaitingPost(true);
 
               const response = await fetch(

src/app/settings/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import Editor from "@/components/editor";
-import sanitizeHtml from "sanitize-html";
 import { getCookie, hasCookie } from "@/helpers/cookie";
 import { UserType } from "@/types/UserType";
 import { Avatar, Button, Form, Input, Spacer } from "@nextui-org/react";
@@ -10,6 +9,7 @@ import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { LoaderCircle } from "lucide-react";
 import Image from "next/image";
+import { sanitize } from "@/helpers/sanitize";
 
 export default function UserPage() {
   const [user, setUser] = useState<UserType>();
@@ -71,7 +71,7 @@ export default function UserPage() {
           onSubmit={async (e) => {
             e.preventDefault();
 
-            const sanitizedBio = sanitizeHtml(bio);
+            const sanitizedBio = sanitize(bio);
 
             if (!name) {
               toast.error("You need to enter a name");

src/components/editor/index.tsx

@@ -37,6 +37,9 @@ import CodeBlock from "@tiptap/extension-code-block";
 import { Spacer } from "@nextui-org/react";
 import { useTheme } from "next-themes";
 import Link from "@tiptap/extension-link";
+import ImageResize from "tiptap-extension-resize-image";
+import { toast } from "react-toastify";
+import { getCookie } from "@/helpers/cookie";
 
 type EditorProps = {
   content: string;
@@ -95,6 +98,7 @@ export default function Editor({
       Youtube,
       CodeBlock,
       Link,
+      ImageResize,
     ],
     content: content,
     immediatelyRender: false,
@@ -110,6 +114,69 @@ export default function Editor({
             : "min-h-[150px] max-h-[400px]") +
           " overflow-y-auto cursor-text rounded-md border p-5 focus-within:outline-none focus-within:border-blue-500 !duration-250 !ease-linear !transition-all",
       },
+      handleDrop: (view, event, slice, moved) => {
+        if (
+          !moved &&
+          event.dataTransfer &&
+          event.dataTransfer.files &&
+          event.dataTransfer.files[0]
+        ) {
+          const file = event.dataTransfer.files[0];
+          const filesize = parseInt((file.size / 1024 / 1024).toFixed(4));
+
+          if (file.type !== "image/jpeg" && file.type !== "image/png") {
+            toast.error("Invalid file format");
+            return false;
+          }
+
+          console.log(filesize);
+
+          if (filesize > 8) {
+            toast.error("Image is too big");
+            return false;
+          }
+
+          const formData = new FormData();
+          formData.append("upload", event.dataTransfer.files[0]);
+
+          fetch(
+            process.env.NEXT_PUBLIC_MODE === "PROD"
+              ? "https://d2jam.com/api/v1/image"
+              : "http://localhost:3005/api/v1/image",
+            {
+              method: "POST",
+              body: formData,
+              headers: {
+                authorization: `Bearer ${getCookie("token")}`,
+              },
+              credentials: "include",
+            }
+          ).then((response) => {
+            if (response.ok) {
+              response.json().then((data) => {
+                toast.success(data.message);
+                const { schema } = view.state;
+                const coordinates = view.posAtCoords({
+                  left: event.clientX,
+                  top: event.clientY,
+                });
+                if (!coordinates) {
+                  toast.error("Error getting coordinates");
+                  return;
+                }
+
+                const node = schema.nodes.image.create({ src: data.data });
+                const transaction = view.state.tr.insert(coordinates.pos, node);
+                return view.dispatch(transaction);
+              });
+            } else {
+              toast.error("Failed to upload image");
+            }
+          });
+        }
+
+        return false;
+      },
     },
   });
 

src/components/posts/CommentCard.tsx

@@ -7,8 +7,8 @@ import { useState } from "react";
 import Editor from "../editor";
 import { toast } from "react-toastify";
 import { getCookie, hasCookie } from "@/helpers/cookie";
-import sanitizeHtml from "sanitize-html";
 import LikeButton from "./LikeButton";
+import { sanitize } from "@/helpers/sanitize";
 
 export default function CommentCard({ comment }: { comment: CommentType }) {
   const [creatingReply, setCreatingReply] = useState<boolean>(false);
@@ -90,7 +90,7 @@ export default function CommentCard({ comment }: { comment: CommentType }) {
                     return;
                   }
 
-                  const sanitizedHtml = sanitizeHtml(content);
+                  const sanitizedHtml = sanitize(content);
                   setWaitingPost(true);
 
                   const response = await fetch(

src/helpers/sanitize.ts

@@ -0,0 +1,21 @@
+import sanitizeHtml from "sanitize-html";
+
+export function sanitize(content: string) {
+  return sanitizeHtml(content, {
+    allowedTags: sanitizeHtml.defaults.allowedTags.concat(["img"]),
+    allowedAttributes: {
+      img: ["src", "style"],
+      p: ["style"],
+    },
+    allowedStyles: {
+      img: {
+        width: [/^\d+(px|%)?|auto$/],
+        height: [/^\d+(px|%)?|auto$/],
+        margin: [/^\d+(px|%)?|auto$/],
+      },
+      p: {
+        "text-align": [/^right|left|center$/],
+      },
+    },
+  });
+}