Ategon/Jamjar
1
0
Fork 0
mirror of https://github.com/Ategon/Jamjar.git synced 2025-02-12 06:16:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Allow images in posts

Browse source
This commit is contained in:
Ategon 2025-02-10 20:57:13 -05:00
parent 333bb8b387
commit 21bb6b7188
9 changed files with 435 additions and 326 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
package-lock.json generated
View file

@ -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",

1
package.json
View file

@ -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": {

97
src/app/create-game/page.tsx
View file

@ -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(/[^a-z0-9-]/g, '') // Only allow lowercase letters, numbers, and hyphens
.replace(/\s+/g, "-") // Replace whitespace with hyphens
.replace(/[^a-z0-9-]/g, "") // Only allow lowercase letters, numbers, and hyphens
.substring(0, 50); // Limit length to 50 characters
};
@ -154,11 +150,14 @@ export default function CreateGamePage() {
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")}`
: `http://localhost:3005/api/v1/self/current-game?username=${getCookie("user")}`,
? `https://d2jam.com/api/v1/self/current-game?username=${getCookie(
"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]
.filter((author, index, self) =>
const uniqueAuthors = [
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]);
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 {
@ -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"
>
×
@ -381,15 +382,16 @@ export default function CreateGamePage() {
</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://")) {
const newUrl = "https://" + downloadLinks[index].url;
if (
!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>
);
}

5
src/app/create-post/page.tsx
View file

@ -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 = [];

4
src/app/p/[slug]/page.tsx
View file

@ -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(

4
src/app/settings/page.tsx
View file

@ -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");

67
src/components/editor/index.tsx
View file

@ -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;
},
},
});

4
src/components/posts/CommentCard.tsx
View file

@ -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(

21
src/helpers/sanitize.ts Normal file
View file

@ -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$/],
},
},
});
}