feat: swap text field for monaco editor

biome.json

@@ -8,6 +8,9 @@
 			"suspicious": {
 				"noExplicitAny": "off",
 				"noDoubleEquals": "warn"
+			},
+			"complexity": {
+				"noForEach": "off"
 			}
 		}
 	}

src/components/ServerCustomize.tsx

@@ -29,37 +29,42 @@
  */
 
 "use client";
-import { Button } from "./ui/button";
-import { Textarea } from "./ui/textarea";
-import { CheckIcon, X } from "lucide-react";
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import {
 	getCustomization,
 	ownServer,
 	reportServer,
-  setCustomization,
 	serverOwned as sOFunc,
+	setCustomization,
 	unownServer,
 	userOwnedServer,
 } from "@/lib/api";
-import toast from "react-hot-toast";
-import { SignedIn, SignedOut, useUser } from "@clerk/nextjs";
 import { OnlineServer } from "@/lib/types/mh-server";
+import { SignedIn, SignedOut, useUser } from "@clerk/nextjs";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, X } from "lucide-react";
 import Link from "next/link";
-import Setting from "./ui/setting";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import toast from "react-hot-toast";
+import { z } from "zod";
+import { Button } from "./ui/button";
 import {
+	Form,
 	FormControl,
 	FormDescription,
 	FormField,
 	FormItem,
 	FormLabel,
 	FormMessage,
-  Form,
 } from "./ui/form";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
+import Setting from "./ui/setting";
+import { Textarea } from "./ui/textarea";
 import "@/themes.css";
+import { themes } from "@/lib/themes";
+import Editor from "@monaco-editor/react";
+import { useTheme } from "next-themes";
+import { BannerPopover } from "./misc/BannerPopover";
+import { DiscordPopover } from "./misc/DiscordPopover";
 import {
 	Card,
 	CardContent,
@@ -68,12 +73,6 @@ import {
 	CardHeader,
 	CardTitle,
 } from "./ui/card";
-import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
-import { themes } from "@/lib/themes";
-import { useTheme } from "next-themes";
-import { DiscordPopover } from "./misc/DiscordPopover";
-import { Spinner } from "./ui/spinner";
-import { BannerPopover } from "./misc/BannerPopover";
 import {
 	Dialog,
 	DialogContent,
@@ -82,6 +81,8 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "./ui/dialog";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+import { Spinner } from "./ui/spinner";
 
 const formSchema = z.object({
 	description: z
@@ -232,7 +233,7 @@ export default function ServerCustomize({
 													success: "Report sent!",
 													loading: "Sending report...",
 													error: "Error while sending report",
-                        }
+												},
 											);
 										}}
 									>
@@ -260,7 +261,7 @@ export default function ServerCustomize({
 									success: "Owned server!",
 									loading: "Owning server...",
 									error: "Error while owning server",
-                }
+								},
 							);
 
 							setMinehutOwned(true);
@@ -307,13 +308,16 @@ export default function ServerCustomize({
 									<FormField
 										control={form.control}
 										name="description"
-                    defaultValue={description}
 										render={({ field }) => (
 											<FormItem>
 												<FormLabel>Description</FormLabel>
 												<FormControl>
-                          <Textarea
-                            placeholder="Markdown is _supported_ in server descriptions"
+													<Editor
+														height="90vh"
+														className="rounded"
+														defaultLanguage="markdown"
+														defaultValue=""
+														theme={mode == "dark" ? "vs-dark" : "light"}
 														{...field}
 													/>
 												</FormControl>

yarn.lock

@@ -808,7 +808,7 @@
 
 "@monaco-editor/react@^4.6.0":
   version "4.6.0"
-  resolved "https://registry.npmjs.org/@monaco-editor/react/-/react-4.6.0.tgz"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.6.0.tgz#bcc68671e358a21c3814566b865a54b191e24119"
   integrity sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==
   dependencies:
     "@monaco-editor/loader" "^1.4.0"