refactor(description-form): simplify form to use basic input instead of markdown editor

src/components/features/dashboard/admin/problemset/new/components/description-form.tsx

@@ -10,18 +10,12 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
-import type { editor } from "monaco-editor";
-import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
-import DockView from "@/components/dockview";
+import { Input } from "@/components/ui/input";
-import { ArrowRightIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import MdxPreview from "@/components/mdx-preview";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import MarkdownEditor from "@/components/markdown-editor";
-import type { DockviewApi, IDockviewPanelProps } from "dockview";
 import { useNewProblemStore } from "@/app/(app)/dashboard/@admin/problemset/new/store";
 import { problemSchema } from "@/components/features/dashboard/admin/problemset/new/schema";
 import { newProblemMetadataSchema } from "@/components/features/dashboard/admin/problemset/new/components/metadata-form";
@@ -42,9 +36,7 @@ export default function NewProblemDescriptionForm() {
     description,
     setData,
   } = useNewProblemStore();
-
   const router = useRouter();
-  const [dockApi, setDockApi] = useState<DockviewApi>();
 
   const form = useForm<NewProblemDescriptionSchema>({
     resolver: zodResolver(newProblemDescriptionSchema),
@@ -73,99 +65,20 @@ export default function NewProblemDescriptionForm() {
     }
   }, [difficulty, displayId, hydrated, published, router, title]);
 
-  const descriptionValue = form.watch("description");
-
-  useEffect(() => {
-    if (!dockApi) return;
-
-    const mdxPanel = dockApi.getPanel("MdxPreview");
-    if (mdxPanel) {
-      mdxPanel.api.updateParameters({ source: descriptionValue });
-    }
-
-    const editorPanel = dockApi.getPanel("MarkdownEditor");
-    if (editorPanel) {
-      editorPanel.api.updateParameters({ value: descriptionValue });
-    }
-  }, [dockApi, descriptionValue]);
-
   return (
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmit)}
-        className="h-full space-y-8 p-4"
+        className="max-w-3xl mx-auto space-y-8 py-10"
       >
         <FormField
           control={form.control}
           name="description"
           render={({ field }) => (
-            <FormItem className="h-full flex flex-col">
+            <FormItem>
-              <FormLabel className="flex flex-none items-center justify-between">
+              <FormLabel>Description</FormLabel>
-                <span>Description</span>
-                <Button className="h-8 w-auto" type="submit">
-                  Next
-                  <ArrowRightIcon size={16} aria-hidden="true" />
-                </Button>
-              </FormLabel>
               <FormControl>
-                <DockView
+                <Input {...field} />
-                  storageKey="dockview:new-problem"
-                  components={{
-                    MdxPreview: (
-                      props: IDockviewPanelProps<{ source: string }>
-                    ) => (
-                      <div className="h-full border-x border-muted relative">
-                        <div className="absolute h-full w-full">
-                          <ScrollArea className="h-full">
-                            <MdxPreview
-                              source={props.params.source}
-                              className="p-4 md:p-6"
-                            />
-                          </ScrollArea>
-                        </div>
-                      </div>
-                    ),
-                    MarkdownEditor: (
-                      props: IDockviewPanelProps<{
-                        value: string;
-                        onChange: (
-                          value: string | undefined,
-                          ev: editor.IModelContentChangedEvent
-                        ) => void;
-                      }>
-                    ) => (
-                      <MarkdownEditor
-                        value={props.params.value}
-                        onChange={props.params.onChange}
-                      />
-                    ),
-                  }}
-                  options={[
-                    {
-                      id: "MdxPreview",
-                      component: "MdxPreview",
-                      title: "Mdx Preview",
-                      params: { source: field.value, icon: "FileTextIcon" },
-                    },
-                    {
-                      id: "MarkdownEditor",
-                      component: "MarkdownEditor",
-                      title: "Markdown Editor",
-                      params: {
-                        value: field.value,
-                        onChange: (value: string | undefined) => {
-                          field.onChange(value);
-                        },
-                        icon: "SquarePenIcon",
-                      },
-                      position: {
-                        referencePanel: "MdxPreview",
-                        direction: "right",
-                      },
-                    },
-                  ]}
-                  onApiReady={setDockApi}
-                />
               </FormControl>
               <FormDescription>
                 This is your problem description.
@@ -174,6 +87,7 @@ export default function NewProblemDescriptionForm() {
             </FormItem>
           )}
         />
+        <Button type="submit">Next</Button>
       </form>
     </Form>
   );