feat: swap text field for monaco editor

This commit is contained in:
dvelo 2024-10-06 09:34:56 -05:00
parent 30a5bc5166
commit dd9104f2f3
3 changed files with 470 additions and 463 deletions

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

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

@ -808,7 +808,7 @@
"@monaco-editor/react@^4.6.0": "@monaco-editor/react@^4.6.0":
version "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== integrity sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==
dependencies: dependencies:
"@monaco-editor/loader" "^1.4.0" "@monaco-editor/loader" "^1.4.0"