diff --git a/core/app/(user)/communities/AddCommunityForm.tsx b/core/app/(user)/communities/AddCommunityForm.tsx index 8a53b25be1..d7265b7778 100644 --- a/core/app/(user)/communities/AddCommunityForm.tsx +++ b/core/app/(user)/communities/AddCommunityForm.tsx @@ -1,6 +1,7 @@ "use client"; -import React from "react"; +import React, { useEffect } from "react"; +import dynamic from "next/dynamic"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form"; import { z } from "zod"; @@ -18,12 +19,17 @@ export const communityCreateFormSchema = z.object({ name: z.string().min(1), slug: z.string().min(1), avatar: z.string().url().optional().or(z.literal("")), + template: z.string().min(1), }); type Props = { setOpen: (open: false) => void; }; +const MonacoEditor = dynamic(() => import("@monaco-editor/react").then((mod) => mod.Editor), { + ssr: false, +}); + export const AddCommunityForm = (props: Props) => { const runCreateCommunity = useServerAction(createCommunity); @@ -43,9 +49,30 @@ export const AddCommunityForm = (props: Props) => { name: "", slug: "", avatar: "", + template: JSON.stringify({ community: { name: "", slug: "", avatar: "" } }), }, }); + const name = form.watch("name"); + const slug = form.watch("slug"); + const avatar = form.watch("avatar"); + const template = form.watch("template"); + + useEffect(() => { + const parsedTemplate = JSON.parse(template ?? "{}"); + + const newTemplate = { + community: { + ...parsedTemplate.community, + name, + slug, + avatar, + }, + }; + + form.setValue("template", JSON.stringify(newTemplate, null, 2)); + }, [name, slug, avatar]); + return ( <>