From 5d0326847b2c5e93cc10d64e52a613fb059c614f Mon Sep 17 00:00:00 2001
From: Nikita <93587872+ncarazon@users.noreply.github.com>
Date: Thu, 12 Dec 2024 13:09:36 +0400
Subject: [PATCH] feat: mdx editor form field, integrate it to existing forms

---
 front_end/package-lock.json                   |  10 +
 front_end/package.json                        |   1 +
 .../accounts/profile/components/user_info.tsx |  37 +--
 .../c/[slug]/settings/components/settings.tsx |  37 +--
 .../questions/components/group_form.tsx       |  98 ++++---
 .../questions/components/notebook_form.tsx    |  56 ++--
 .../questions/components/question_form.tsx    | 105 ++++----
 front_end/src/app/globals.css                 |  11 +
 .../src/components/markdown_editor/index.tsx  | 237 +----------------
 .../markdown_editor/initialized_editor.tsx    | 245 ++++++++++++++++++
 front_end/src/components/ui/form_field.tsx    |  64 ++++-
 .../src/components/ui/input_container.tsx     |  37 ++-
 12 files changed, 520 insertions(+), 418 deletions(-)
 create mode 100644 front_end/src/components/markdown_editor/initialized_editor.tsx

diff --git a/front_end/package-lock.json b/front_end/package-lock.json
index b19ab98f5..c65669551 100644
--- a/front_end/package-lock.json
+++ b/front_end/package-lock.json
@@ -55,6 +55,7 @@
         "react-error-boundary": "^4.0.13",
         "react-hook-form": "^7.52.1",
         "react-hot-toast": "^2.4.1",
+        "react-merge-refs": "^2.1.1",
         "remark": "^15.0.1",
         "sass": "^1.77.6",
         "sharp": "^0.33.5",
@@ -12928,6 +12929,15 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-merge-refs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-2.1.1.tgz",
+      "integrity": "sha512-jLQXJ/URln51zskhgppGJ2ub7b2WFKGq3cl3NYKtlHoTG+dN2q7EzWrn3hN3EgPsTMvpR9tpq5ijdp7YwFZkag==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
     "node_modules/react-property": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.2.tgz",
diff --git a/front_end/package.json b/front_end/package.json
index 62623e903..3f00f6e35 100644
--- a/front_end/package.json
+++ b/front_end/package.json
@@ -59,6 +59,7 @@
     "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.52.1",
     "react-hot-toast": "^2.4.1",
+    "react-merge-refs": "^2.1.1",
     "remark": "^15.0.1",
     "sass": "^1.77.6",
     "sharp": "^0.33.5",
diff --git a/front_end/src/app/(main)/accounts/profile/components/user_info.tsx b/front_end/src/app/(main)/accounts/profile/components/user_info.tsx
index 9c97f11cb..98d6b07a8 100644
--- a/front_end/src/app/(main)/accounts/profile/components/user_info.tsx
+++ b/front_end/src/app/(main)/accounts/profile/components/user_info.tsx
@@ -19,7 +19,12 @@ import {
 import CalibrationChart from "@/app/(main)/questions/track-record/components/charts/calibration_chart";
 import MarkdownEditor from "@/components/markdown_editor";
 import Button from "@/components/ui/button";
-import { FormError, Input, Textarea } from "@/components/ui/form_field";
+import {
+  FormError,
+  Input,
+  MarkdownEditorField,
+  Textarea,
+} from "@/components/ui/form_field";
 import { useAuth } from "@/contexts/auth_context";
 import { UserProfile } from "@/types/users";
 
@@ -88,30 +93,12 @@ const UserInfo: FC<UserInfoProps> = ({
               </div>
               <div className="flex w-full content-center justify-between">
                 {editMode ? (
-                  <>
-                    <Textarea
-                      className="hidden"
-                      defaultValue={profile.bio}
-                      {...register("bio")}
-                    />
-                    <Controller
-                      control={control}
-                      name="bio"
-                      defaultValue={profile.bio}
-                      render={({ field: { value } }) => (
-                        <MarkdownEditor
-                          mode="write"
-                          markdown={value as string}
-                          onChange={(markdown: string) => {
-                            setValue("bio", markdown);
-                          }}
-                          className="w-full"
-                          withUgcLinks
-                        />
-                      )}
-                    />
-                    <FormError errors={state?.errors} name={"bio"} />
-                  </>
+                  <MarkdownEditorField
+                    control={control}
+                    name="bio"
+                    defaultValue={profile.bio}
+                    errors={state?.errors}
+                  />
                 ) : (
                   <div className="flex items-center whitespace-pre-line text-base font-light">
                     <MarkdownEditor
diff --git a/front_end/src/app/(main)/c/[slug]/settings/components/settings.tsx b/front_end/src/app/(main)/c/[slug]/settings/components/settings.tsx
index 8f42858e6..614ace8b9 100644
--- a/front_end/src/app/(main)/c/[slug]/settings/components/settings.tsx
+++ b/front_end/src/app/(main)/c/[slug]/settings/components/settings.tsx
@@ -5,16 +5,14 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import React, { FC, useCallback, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
+import { useForm } from "react-hook-form";
 
-import MarkdownEditor from "@/components/markdown_editor";
 import Button from "@/components/ui/button";
 import ButtonGroup, { GroupButton } from "@/components/ui/button_group";
 import {
-  FormError,
   FormErrorMessage,
   Input,
-  Textarea,
+  MarkdownEditorField,
 } from "@/components/ui/form_field";
 import { InputContainer } from "@/components/ui/input_container";
 import { CommunityUpdateParams } from "@/services/projects";
@@ -189,32 +187,17 @@ const CommunitySettings: FC<Props> = ({ community }) => {
           </div>
         </InputContainer>
         <div>
-          <InputContainer labelText={t("communityDescription")}>
-            <Textarea
-              {...register("description")}
+          <InputContainer
+            labelText={t("communityDescription")}
+            isNativeFormControl={false}
+          >
+            <MarkdownEditorField
+              control={control}
+              name={"description"}
               errors={formState.errors.description}
-              className="hidden"
+              defaultValue={community.description}
             />
           </InputContainer>
-          <Controller
-            control={control}
-            name="description"
-            render={({ field: { value } }) => (
-              <MarkdownEditor
-                mode="write"
-                markdown={value as string}
-                onChange={(markdown: string) => {
-                  setValue("description", markdown, { shouldDirty: true });
-                }}
-                className="mt-2 w-full"
-                withUgcLinks
-              />
-            )}
-          />
-          <FormError
-            errors={formState.errors.description}
-            name={"description"}
-          />
         </div>
       </div>
       {!isLoading && <FormErrorMessage errors={error} />}
diff --git a/front_end/src/app/(main)/questions/components/group_form.tsx b/front_end/src/app/(main)/questions/components/group_form.tsx
index 33ff1e12b..0b56f75a8 100644
--- a/front_end/src/app/(main)/questions/components/group_form.tsx
+++ b/front_end/src/app/(main)/questions/components/group_form.tsx
@@ -8,19 +8,21 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import * as z from "zod";
 
 import GroupFormBulkModal, {
   BulkBulkQuestionAttrs,
 } from "@/app/(main)/questions/components/group_form_bulk_modal";
 import ProjectPickerInput from "@/app/(main)/questions/components/project_picker_input";
+import MarkdownEditor from "@/components/markdown_editor";
 import Button from "@/components/ui/button";
 import DatetimeUtc from "@/components/ui/datetime_utc";
 import {
   FormError,
   FormErrorMessage,
   Input,
+  MarkdownEditorField,
   Textarea,
 } from "@/components/ui/form_field";
 import { InputContainer } from "@/components/ui/input_container";
@@ -67,7 +69,7 @@ const createGroupQuestionSchema = (t: ReturnType<typeof useTranslations>) => {
       message: t("errorMinLength", { field: "String", minLength: 10 }),
     }),
     resolution_criteria: z.string().min(1, { message: t("errorRequired") }),
-    fine_print: z.string(),
+    fine_print: z.string().optional(),
     default_project: z.nullable(z.union([z.number(), z.string()])),
   });
 };
@@ -111,8 +113,8 @@ const GroupForm: React.FC<Props> = ({
     setIsLoading(true);
     setError(undefined);
 
-    if (control.getValues("default_project") === "") {
-      control.setValue("default_project", null);
+    if (form.getValues("default_project") === "") {
+      form.setValue("default_project", null);
     }
     const labels = subQuestions.map((q) => q.label);
     if (new Set(labels).size !== labels.length) {
@@ -249,9 +251,8 @@ const GroupForm: React.FC<Props> = ({
     subQuestions.map((x) => true)
   );
   const groupQuestionSchema = createGroupQuestionSchema(t);
-  const control = useForm({
+  const form = useForm({
     mode: "all",
-    // @ts-ignore
     resolver: zodResolver(groupQuestionSchema),
   });
 
@@ -300,14 +301,14 @@ const GroupForm: React.FC<Props> = ({
       </div>
       <form
         onSubmit={async (e) => {
-          if (!control.getValues("default_project")) {
-            control.setValue(
+          if (!form.getValues("default_project")) {
+            form.setValue(
               "default_project",
               community_id ? community_id : defaultProject.id
             );
           }
           // e.preventDefault(); // Good for debugging
-          await control.handleSubmit(
+          await form.handleSubmit(
             async (data) => {
               await submitQuestion(data);
             },
@@ -324,7 +325,7 @@ const GroupForm: React.FC<Props> = ({
             siteMain={siteMain}
             currentProject={defaultProject}
             onChange={(project) => {
-              control.setValue("default_project", project.id);
+              form.setValue("default_project", project.id);
             }}
           />
         )}
@@ -333,8 +334,8 @@ const GroupForm: React.FC<Props> = ({
           explanation={t("longTitleExplanation")}
         >
           <Textarea
-            {...control.register("title")}
-            errors={control.formState.errors.title}
+            {...form.register("title")}
+            errors={form.formState.errors.title}
             defaultValue={post?.title}
             className="min-h-36 rounded border border-gray-500 p-5 text-xl font-normal dark:border-gray-500-dark dark:bg-blue-50-dark"
           />
@@ -344,8 +345,8 @@ const GroupForm: React.FC<Props> = ({
           explanation={t("shortTitleExplanation")}
         >
           <Input
-            {...control.register("url_title")}
-            errors={control.formState.errors.url_title}
+            {...form.register("url_title")}
+            errors={form.formState.errors.url_title}
             defaultValue={post?.url_title}
             className={
               "rounded border border-gray-500 px-3 py-2 text-base dark:border-gray-500-dark dark:bg-blue-50-dark"
@@ -354,16 +355,17 @@ const GroupForm: React.FC<Props> = ({
         </InputContainer>
         <InputContainer
           labelText={t("backgroundInformation")}
+          isNativeFormControl={false}
           explanation={t.rich("backgroundInfoExplanation", {
             link: (chunks) => <Link href="/help/markdown">{chunks}</Link>,
             markdown: (chunks) => <MarkdownText>{chunks}</MarkdownText>,
           })}
         >
-          <Textarea
-            {...control.register("description")}
-            errors={control.formState.errors.description}
-            className="h-32 w-full rounded border border-gray-500 p-3 text-sm dark:border-gray-500-dark dark:bg-blue-50-dark"
+          <MarkdownEditorField
+            control={form.control}
+            name={"description"}
             defaultValue={post?.group_of_questions?.description}
+            errors={form.formState.errors.description}
           />
         </InputContainer>
         <InputContainer
@@ -371,42 +373,36 @@ const GroupForm: React.FC<Props> = ({
           explanation={t("groupVariableDescription")}
         >
           <Input
-            {...control.register("group_variable")}
-            errors={control.formState.errors.group_variable}
+            {...form.register("group_variable")}
+            errors={form.formState.errors.group_variable}
             defaultValue={post?.group_of_questions?.group_variable}
             className="w-full rounded border border-gray-500 px-3 py-2 text-base dark:border-gray-500-dark dark:bg-blue-50-dark"
           />
         </InputContainer>
         <InputContainer
           labelText={t("resolutionCriteria")}
+          isNativeFormControl={false}
           explanation={t.rich("resolutionCriteriaExplanation", {
             markdown: (chunks) => <MarkdownText>{chunks}</MarkdownText>,
           })}
         >
-          <Textarea
-            {...control.register("resolution_criteria")}
-            errors={control.formState.errors.resolution_criteria}
-            className="h-32 w-full rounded border border-gray-500 px-3 py-2 text-base dark:border-gray-500-dark dark:bg-blue-50-dark"
-            defaultValue={
-              post?.group_of_questions?.resolution_criteria
-                ? post?.group_of_questions?.resolution_criteria
-                : undefined
-            }
+          <MarkdownEditorField
+            control={form.control}
+            name={"resolution_criteria"}
+            defaultValue={post?.group_of_questions?.resolution_criteria}
+            errors={form.formState.errors.resolution_criteria}
           />
         </InputContainer>
         <InputContainer
           labelText={t("finePrint")}
           explanation={t("finePrintDescription")}
+          isNativeFormControl={false}
         >
-          <Textarea
-            {...control.register("fine_print")}
-            errors={control.formState.errors.fine_print}
-            className="h-32 w-full rounded border border-gray-500 px-3 py-2 text-base dark:border-gray-500-dark dark:bg-blue-50-dark"
-            defaultValue={
-              post?.group_of_questions?.fine_print
-                ? post?.group_of_questions?.fine_print
-                : undefined
-            }
+          <MarkdownEditorField
+            control={form.control}
+            name={"fine_print"}
+            defaultValue={post?.group_of_questions?.fine_print}
+            errors={form.formState.errors.fine_print}
           />
         </InputContainer>
         <InputContainer
@@ -474,7 +470,7 @@ const GroupForm: React.FC<Props> = ({
                           className="rounded border border-gray-500 px-3 py-2 text-base dark:border-gray-500-dark dark:bg-blue-50-dark"
                           defaultValue={subQuestion.scheduled_close_time}
                           onChange={(value) => {
-                            control.clearErrors(
+                            form.clearErrors(
                               `subQuestion-${index}-scheduled_close_time`
                             );
                             setSubQuestions(
@@ -487,7 +483,7 @@ const GroupForm: React.FC<Props> = ({
                             );
                           }}
                           onError={(error: { message: string }) => {
-                            control.setError(
+                            form.setError(
                               `subQuestion-${index}-scheduled_close_time`,
                               {
                                 type: "manual",
@@ -498,7 +494,7 @@ const GroupForm: React.FC<Props> = ({
                         />
                         <FormError
                           errors={
-                            control.formState.errors[
+                            form.formState.errors[
                               `subQuestion-${index}-scheduled_close_time`
                             ]
                           }
@@ -516,7 +512,7 @@ const GroupForm: React.FC<Props> = ({
                           className="rounded border border-gray-500 px-3 py-2 text-base dark:border-gray-500-dark dark:bg-blue-50-dark"
                           defaultValue={subQuestion.scheduled_resolve_time}
                           onChange={(value) => {
-                            control.clearErrors(
+                            form.clearErrors(
                               `subQuestion-${index}-scheduled_resolve_time`
                             );
                             setSubQuestions(
@@ -529,7 +525,7 @@ const GroupForm: React.FC<Props> = ({
                             );
                           }}
                           onError={(error: { message: string }) => {
-                            control.setError(
+                            form.setError(
                               `subQuestion-${index}-scheduled_resolve_time`,
                               {
                                 type: "manual",
@@ -540,7 +536,7 @@ const GroupForm: React.FC<Props> = ({
                         />
                         <FormError
                           errors={
-                            control.formState.errors[
+                            form.formState.errors[
                               `subQuestion-${index}-scheduled_resolve_time`
                             ]
                           }
@@ -628,7 +624,7 @@ const GroupForm: React.FC<Props> = ({
                             })
                           );
                         }}
-                        control={control}
+                        control={form}
                         index={index}
                       />
                     )}
@@ -700,9 +696,9 @@ const GroupForm: React.FC<Props> = ({
                         type: "numeric",
                         label: "",
                         scheduled_close_time:
-                          control.getValues().scheduled_close_time,
+                          form.getValues().scheduled_close_time,
                         scheduled_resolve_time:
-                          control.getValues().scheduled_resolve_time,
+                          form.getValues().scheduled_resolve_time,
                         scaling: {
                           range_min: null,
                           range_max: null,
@@ -719,9 +715,9 @@ const GroupForm: React.FC<Props> = ({
                         type: "date",
                         label: "",
                         scheduled_close_time:
-                          control.getValues().scheduled_close_time,
+                          form.getValues().scheduled_close_time,
                         scheduled_resolve_time:
-                          control.getValues().scheduled_resolve_time,
+                          form.getValues().scheduled_resolve_time,
                         scaling: {
                           range_min: null,
                           range_max: null,
@@ -738,9 +734,9 @@ const GroupForm: React.FC<Props> = ({
                         type: "binary",
                         label: "",
                         scheduled_close_time:
-                          control.getValues().scheduled_close_time,
+                          form.getValues().scheduled_close_time,
                         scheduled_resolve_time:
-                          control.getValues().scheduled_resolve_time,
+                          form.getValues().scheduled_resolve_time,
                       },
                     ]);
                   }
diff --git a/front_end/src/app/(main)/questions/components/notebook_form.tsx b/front_end/src/app/(main)/questions/components/notebook_form.tsx
index c4178a70c..fe9169e53 100644
--- a/front_end/src/app/(main)/questions/components/notebook_form.tsx
+++ b/front_end/src/app/(main)/questions/components/notebook_form.tsx
@@ -8,9 +8,13 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 import ProjectPickerInput from "@/app/(main)/questions/components/project_picker_input";
-import MarkdownEditor from "@/components/markdown_editor";
 import Button from "@/components/ui/button";
-import { FormErrorMessage, Input, Textarea } from "@/components/ui/form_field";
+import {
+  FormErrorMessage,
+  Input,
+  MarkdownEditorField,
+  Textarea,
+} from "@/components/ui/form_field";
 import { InputContainer } from "@/components/ui/input_container";
 import LoadingIndicator from "@/components/ui/loading_indicator";
 import { useAuth } from "@/contexts/auth_context";
@@ -47,8 +51,12 @@ const createNotebookSchema = (t: ReturnType<typeof useTranslations>) => {
         message: t("errorMaxLength", { field: "String", maxLength: 60 }),
       }),
     default_project: z.number(),
+    markdown: z.string().min(1, {
+      message: t("errorMinLength", { field: "String", minLength: 1 }),
+    }),
   });
 };
+type FormData = z.infer<ReturnType<typeof createNotebookSchema>>;
 
 type Props = {
   mode: "create" | "edit";
@@ -72,8 +80,6 @@ const NotebookForm: React.FC<Props> = ({
   news_type,
 }) => {
   const { user } = useAuth();
-  const [markdown, setMarkdown] = useState(post?.notebook?.markdown ?? "");
-  const [isMarkdownDirty, setIsMarkdownDirty] = useState(false);
   const [isLoading, setIsLoading] = useState<boolean>();
   const [error, setError] = useState<
     (Error & { digest?: string }) | undefined
@@ -81,10 +87,12 @@ const NotebookForm: React.FC<Props> = ({
 
   const t = useTranslations();
   const notebookSchema = createNotebookSchema(t);
-  const control = useForm({
+  const form = useForm<FormData>({
     mode: "all",
     resolver: zodResolver(notebookSchema),
   });
+
+  // TODO: consider refactoring this field to be part of zod schema
   const [categoriesList, setCategoriesList] = useState<Category[]>(
     post?.projects.category ? post?.projects.category : ([] as Category[])
   );
@@ -96,13 +104,11 @@ const NotebookForm: React.FC<Props> = ({
       ? [...tournaments, siteMain].filter((x) => x.id === tournament_id)[0]
       : siteMain;
   const isFormDirty =
-    !!Object.keys(control.formState.dirtyFields).length ||
-    isMarkdownDirty ||
-    isCategoriesDirty;
+    !!Object.keys(form.formState.dirtyFields).length || isCategoriesDirty;
 
   const router = useRouter();
 
-  const submitQuestion = async (data: any) => {
+  const submitQuestion = async (data: FormData) => {
     setIsLoading(true);
     setError(undefined);
     let post_data = {
@@ -112,7 +118,7 @@ const NotebookForm: React.FC<Props> = ({
       categories: categoriesList.map((x) => x.id),
       news_type: news_type,
       notebook: {
-        markdown: markdown,
+        markdown: data["markdown"],
         type: news_type ? "news" : "discussion",
         image_url: null,
       },
@@ -149,14 +155,14 @@ const NotebookForm: React.FC<Props> = ({
       <form
         className="mt-4 flex w-full flex-col gap-6"
         onSubmit={async (e) => {
-          if (!control.getValues("default_project")) {
-            control.setValue(
+          if (!form.getValues("default_project")) {
+            form.setValue(
               "default_project",
               community_id ? community_id : defaultProject.id
             );
           }
           // e.preventDefault(); // Good for debugging
-          await control.handleSubmit(
+          await form.handleSubmit(
             async (data) => {
               await submitQuestion(data);
             },
@@ -177,34 +183,32 @@ const NotebookForm: React.FC<Props> = ({
             siteMain={siteMain}
             currentProject={defaultProject}
             onChange={(project) => {
-              control.setValue("default_project", project.id);
+              form.setValue("default_project", project.id);
             }}
           />
         )}
         <InputContainer labelText={t("longTitle")}>
           <Textarea
-            {...control.register("title")}
-            errors={control.formState.errors.title}
+            {...form.register("title")}
+            errors={form.formState.errors.title}
             defaultValue={post?.title}
             className="min-h-36 rounded border border-gray-500 p-5 text-xl font-normal dark:border-gray-500-dark dark:bg-blue-50-dark"
           />
         </InputContainer>
         <InputContainer labelText={t("shortTitle")}>
           <Input
-            {...control.register("url_title")}
-            errors={control.formState.errors.url_title}
+            {...form.register("url_title")}
+            errors={form.formState.errors.url_title}
             defaultValue={post?.url_title}
             className="rounded border border-gray-500 px-3 py-2 text-base dark:border-gray-500-dark dark:bg-blue-50-dark"
           />
         </InputContainer>
-        <div className="rounded border border-gray-300 dark:border-gray-300-dark">
-          <MarkdownEditor
-            markdown={markdown}
-            onChange={(value) => {
-              setMarkdown(value);
-              setIsMarkdownDirty(true);
-            }}
-            mode="write"
+        <div className="flex flex-col gap-1.5">
+          <MarkdownEditorField
+            control={form.control}
+            name={"markdown"}
+            defaultValue={post?.notebook?.markdown}
+            errors={form.formState.errors.markdown}
           />
         </div>
         <InputContainer labelText={t("categories")}>
diff --git a/front_end/src/app/(main)/questions/components/question_form.tsx b/front_end/src/app/(main)/questions/components/question_form.tsx
index 644e11ffa..c9a602bf4 100644
--- a/front_end/src/app/(main)/questions/components/question_form.tsx
+++ b/front_end/src/app/(main)/questions/components/question_form.tsx
@@ -17,6 +17,7 @@ import {
   FormError,
   FormErrorMessage,
   Input,
+  MarkdownEditorField,
   Textarea,
 } from "@/components/ui/form_field";
 import { InputContainer } from "@/components/ui/input_container";
@@ -49,7 +50,7 @@ type PostCreationData = {
   default_project: number;
 };
 
-export const createQuestionSchemas = (
+const createQuestionSchemas = (
   t: ReturnType<typeof useTranslations>,
   post: PostWithForecasts | null
 ) => {
@@ -75,7 +76,7 @@ export const createQuestionSchemas = (
       message: t("errorMinLength", { field: "String", minLength: 4 }),
     }),
     resolution_criteria: z.string().min(1, { message: t("errorRequired") }),
-    fine_print: z.string(),
+    fine_print: z.string().optional(),
     open_time: z.nullable(z.date().optional()).refine(
       (value) => {
         if (!post) {
@@ -297,12 +298,13 @@ const QuestionForm: FC<Props> = ({
     }
   };
 
-  const control = useForm({
+  // TODO: refactor validation schema setup to properly populate useForm generic
+  const form = useForm({
     mode: "all",
     resolver: zodResolver(getFormSchema(questionType)),
   });
   if (questionType) {
-    control.setValue("type", questionType);
+    form.setValue("type", questionType);
   }
 
   const isEditingActivePost =
@@ -320,15 +322,15 @@ const QuestionForm: FC<Props> = ({
       </div>
       <form
         onSubmit={async (e) => {
-          if (!control.getValues("default_project")) {
-            control.setValue(
+          if (!form.getValues("default_project")) {
+            form.setValue(
               "default_project",
               community_id ? community_id : defaultProject.id
             );
           }
 
           // e.preventDefault(); // Good for debugging
-          await control.handleSubmit(
+          await form.handleSubmit(
             async (data) => {
               await submitQuestion(data);
             },
@@ -338,7 +340,7 @@ const QuestionForm: FC<Props> = ({
           )(e);
         }}
         onChange={async () => {
-          const data = control.getValues();
+          const data = form.getValues();
           data["type"] = questionType;
         }}
         className="mt-4 flex w-full flex-col gap-6"
@@ -354,22 +356,22 @@ const QuestionForm: FC<Props> = ({
             siteMain={siteMain}
             currentProject={defaultProject}
             onChange={(project) => {
-              control.setValue("default_project", project.id);
+              form.setValue("default_project", project.id);
             }}
           />
         )}
         <FormError
-          errors={control.formState.errors}
+          errors={form.formState.errors}
           className="text-red-500 dark:text-red-500-dark"
-          {...control.register("type")}
+          {...form.register("type")}
         />
         <InputContainer
           labelText={t("longTitle")}
           explanation={t("longTitleExplanation")}
         >
           <Textarea
-            {...control.register("title")}
-            errors={control.formState.errors.title}
+            {...form.register("title")}
+            errors={form.formState.errors.title}
             defaultValue={post?.title}
             className="min-h-32 w-full rounded border border-gray-500 p-5 text-xl font-normal dark:border-gray-500-dark dark:bg-blue-50-dark"
           />
@@ -379,8 +381,8 @@ const QuestionForm: FC<Props> = ({
           explanation={t("shortTitleExplanation")}
         >
           <Input
-            {...control.register("url_title")}
-            errors={control.formState.errors.url_title}
+            {...form.register("url_title")}
+            errors={form.formState.errors.url_title}
             defaultValue={post?.url_title}
             className="w-full rounded border border-gray-500 px-3 py-2 text-base dark:border-gray-500-dark dark:bg-blue-50-dark"
           />
@@ -391,12 +393,13 @@ const QuestionForm: FC<Props> = ({
             link: (chunks) => <Link href="/help/markdown">{chunks}</Link>,
             markdown: (chunks) => <MarkdownText>{chunks}</MarkdownText>,
           })}
+          isNativeFormControl={false}
         >
-          <Textarea
-            {...control.register("description")}
-            errors={control.formState.errors.description}
-            className="h-32 w-full rounded border border-gray-500 p-3 text-sm dark:border-gray-500-dark dark:bg-blue-50-dark"
+          <MarkdownEditorField
+            control={form.control}
+            name={"description"}
             defaultValue={post?.question?.description}
+            errors={form.formState.errors.description}
           />
         </InputContainer>
         <div className="flex w-full flex-col gap-4 md:flex-row">
@@ -404,7 +407,7 @@ const QuestionForm: FC<Props> = ({
             <Input
               type="datetime-local"
               className="w-full rounded border border-gray-500 px-3 py-2 text-base dark:border-gray-500-dark dark:bg-blue-50-dark"
-              {...control.register("scheduled_close_time", {
+              {...form.register("scheduled_close_time", {
                 setValueAs: (value: string) => {
                   if (value === "" || value == null) {
                     return null;
@@ -413,7 +416,7 @@ const QuestionForm: FC<Props> = ({
                   return new Date(value);
                 },
               })}
-              errors={control.formState.errors.scheduled_close_time}
+              errors={form.formState.errors.scheduled_close_time}
               defaultValue={
                 post?.question?.scheduled_close_time
                   ? format(
@@ -431,7 +434,7 @@ const QuestionForm: FC<Props> = ({
             <Input
               type="datetime-local"
               className="w-full rounded border border-gray-500 px-3 py-2 text-base dark:border-gray-500-dark dark:bg-blue-50-dark"
-              {...control.register("scheduled_resolve_time", {
+              {...form.register("scheduled_resolve_time", {
                 setValueAs: (value: string) => {
                   if (value === "" || value == null) {
                     return null;
@@ -440,7 +443,7 @@ const QuestionForm: FC<Props> = ({
                   return new Date(value);
                 },
               })}
-              errors={control.formState.errors.scheduled_resolve_time}
+              errors={form.formState.errors.scheduled_resolve_time}
               defaultValue={
                 post?.question?.scheduled_resolve_time
                   ? format(
@@ -458,7 +461,7 @@ const QuestionForm: FC<Props> = ({
               <Input
                 type="datetime-local"
                 className="w-full rounded border border-gray-500 px-3 py-2 text-base dark:border-gray-500-dark dark:bg-blue-50-dark"
-                {...control.register("open_time", {
+                {...form.register("open_time", {
                   setValueAs: (value: string) => {
                     if (value === "" || value == null) {
                       return null;
@@ -467,7 +470,7 @@ const QuestionForm: FC<Props> = ({
                     return new Date(value);
                   },
                 })}
-                errors={control.formState.errors.open_time}
+                errors={form.formState.errors.open_time}
                 defaultValue={
                   post?.question?.open_time
                     ? format(
@@ -485,7 +488,7 @@ const QuestionForm: FC<Props> = ({
               <Input
                 type="datetime-local"
                 className="w-full rounded border border-gray-500 px-3 py-2 text-base dark:border-gray-500-dark dark:bg-blue-50-dark"
-                {...control.register("cp_reveal_time", {
+                {...form.register("cp_reveal_time", {
                   setValueAs: (value: string) => {
                     if (value === "" || value == null) {
                       return null;
@@ -494,7 +497,7 @@ const QuestionForm: FC<Props> = ({
                     return new Date(value);
                   },
                 })}
-                errors={control.formState.errors.cp_reveal_time}
+                errors={form.formState.errors.cp_reveal_time}
                 defaultValue={
                   post?.question?.cp_reveal_time
                     ? format(
@@ -519,7 +522,7 @@ const QuestionForm: FC<Props> = ({
             defaultOpenUpperBound={post?.question?.open_upper_bound}
             defaultZeroPoint={post?.question?.scaling.zero_point}
             hasForecasts={hasForecasts && mode !== "create"}
-            control={control}
+            control={form}
             onChange={({
               min: rangeMin,
               max: rangeMax,
@@ -527,13 +530,13 @@ const QuestionForm: FC<Props> = ({
               open_lower_bound: openLowerBound,
               zero_point: zeroPoint,
             }) => {
-              control.setValue("scaling", {
+              form.setValue("scaling", {
                 range_min: rangeMin,
                 range_max: rangeMax,
                 zero_point: zeroPoint,
               });
-              control.setValue("open_lower_bound", openLowerBound);
-              control.setValue("open_upper_bound", openUpperBound);
+              form.setValue("open_lower_bound", openLowerBound);
+              form.setValue("open_upper_bound", openUpperBound);
             }}
           />
         )}
@@ -554,8 +557,8 @@ const QuestionForm: FC<Props> = ({
               explanation={t("groupVariableDescription")}
             >
               <Input
-                {...control.register("group_variable")}
-                errors={control.formState.errors.group_variable}
+                {...form.register("group_variable")}
+                errors={form.formState.errors.group_variable}
                 defaultValue={post?.question?.group_variable}
                 className="w-full rounded border border-gray-500 px-3 py-2 text-base dark:border-gray-500-dark dark:bg-blue-50-dark"
               />
@@ -568,7 +571,7 @@ const QuestionForm: FC<Props> = ({
                     <div key={opt_index} className="flex">
                       <div className="w-full">
                         <Input
-                          {...control.register(`options.${opt_index}`)}
+                          {...form.register(`options.${opt_index}`)}
                           readOnly={hasForecasts && mode !== "create"}
                           className="my-2 w-full min-w-32 rounded border  border-gray-500 p-2 px-3 py-2 text-base dark:border-gray-500-dark dark:bg-blue-50-dark"
                           value={option}
@@ -585,7 +588,7 @@ const QuestionForm: FC<Props> = ({
                           }}
                           errors={
                             // @ts-ignore
-                            control.formState.errors.options?.[opt_index]
+                            form.formState.errors.options?.[opt_index]
                           }
                         />
                       </div>
@@ -598,7 +601,7 @@ const QuestionForm: FC<Props> = ({
                               const newOptionsArray = [...prev].filter(
                                 (_, index) => index !== opt_index
                               );
-                              control.setValue("options", newOptionsArray);
+                              form.setValue("options", newOptionsArray);
                               return newOptionsArray;
                             });
                           }}
@@ -624,31 +627,25 @@ const QuestionForm: FC<Props> = ({
           explanation={t.rich("resolutionCriteriaExplanation", {
             markdown: (chunks) => <MarkdownText>{chunks}</MarkdownText>,
           })}
+          isNativeFormControl={false}
         >
-          <Textarea
-            {...control.register("resolution_criteria")}
-            errors={control.formState.errors.resolution_criteria}
-            className="h-32 w-full rounded border border-gray-500 p-3 text-sm dark:border-gray-500-dark dark:bg-blue-50-dark"
-            defaultValue={
-              post?.question?.resolution_criteria
-                ? post?.question?.resolution_criteria
-                : undefined
-            }
+          <MarkdownEditorField
+            control={form.control}
+            name={"resolution_criteria"}
+            defaultValue={post?.question?.resolution_criteria}
+            errors={form.formState.errors.resolution_criteria}
           />
         </InputContainer>
         <InputContainer
           labelText={t("finePrint")}
           explanation={t("finePrintDescription")}
+          isNativeFormControl={false}
         >
-          <Textarea
-            {...control.register("fine_print")}
-            errors={control.formState.errors.fine_print}
-            className="h-32 w-full rounded border border-gray-500 p-3 text-sm dark:border-gray-500-dark dark:bg-blue-50-dark"
-            defaultValue={
-              post?.question?.fine_print
-                ? post?.question?.fine_print
-                : undefined
-            }
+          <MarkdownEditorField
+            control={form.control}
+            name={"fine_print"}
+            defaultValue={post?.question?.fine_print}
+            errors={form.formState.errors.fine_print}
           />
         </InputContainer>
 
diff --git a/front_end/src/app/globals.css b/front_end/src/app/globals.css
index b3c21a31c..d74605aa5 100644
--- a/front_end/src/app/globals.css
+++ b/front_end/src/app/globals.css
@@ -192,3 +192,14 @@ a {
 .content blockquote {
   @apply my-4 border-s-4 border-gray-300 bg-gray-100 p-4 text-gray-800 dark:border-gray-300-dark dark:bg-gray-200-dark dark:text-gray-800-dark;
 }
+
+.hidden-scrollable-input {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+}
diff --git a/front_end/src/components/markdown_editor/index.tsx b/front_end/src/components/markdown_editor/index.tsx
index 2e7f99a5c..66640679a 100644
--- a/front_end/src/components/markdown_editor/index.tsx
+++ b/front_end/src/components/markdown_editor/index.tsx
@@ -1,231 +1,18 @@
 "use client";
-import {
-  BlockTypeSelect,
-  BoldItalicUnderlineToggles,
-  CodeBlockEditorDescriptor,
-  codeBlockPlugin,
-  CreateLink,
-  diffSourcePlugin,
-  DiffSourceToggleWrapper,
-  headingsPlugin,
-  imagePlugin,
-  InsertImage,
-  InsertTable,
-  InsertThematicBreak,
-  JsxComponentDescriptor,
-  jsxPlugin,
-  linkDialogPlugin,
-  listsPlugin,
-  markdownShortcutPlugin,
-  MDXEditor,
-  MDXEditorMethods,
-  quotePlugin,
-  Separator,
-  tablePlugin,
-  thematicBreakPlugin,
-  toolbarPlugin,
-  UndoRedo,
-} from "@mdxeditor/editor";
-import classNames from "classnames";
-import dynamic from "next/dynamic";
-import React, { FC, useEffect, useMemo, useRef, useState } from "react";
-
-import "@mdxeditor/editor/style.css";
-
-import { uploadImage } from "@/app/(main)/questions/actions";
-import {
-  EmbedMathJaxAction,
-  mathJaxDescriptor,
-} from "@/components/markdown_editor/embedded_math_jax";
-import { linkPlugin } from "@/components/markdown_editor/plugins/link";
-import { mentionsPlugin } from "@/components/markdown_editor/plugins/mentions";
-import { useAuth } from "@/contexts/auth_context";
-import useAppTheme from "@/hooks/use_app_theme";
-import useConfirmPageLeave from "@/hooks/use_confirm_page_leave";
-import { logErrorWithScope } from "@/utils/errors";
-
-import {
-  embeddedQuestionDescriptor,
-  EmbedQuestionAction,
-} from "./embedded_question";
-import "./editor.css";
-import { processMarkdown } from "./helpers";
-
-type EditorMode = "write" | "read";
-
-const jsxComponentDescriptors: JsxComponentDescriptor[] = [
-  mathJaxDescriptor,
-  embeddedQuestionDescriptor,
-];
-
-type Props = {
-  markdown: string;
-  mode?: EditorMode;
-  onChange?: (markdown: string) => void;
-  withUserMentions?: boolean;
-  contentEditableClassName?: string;
-  shouldConfirmLeave?: boolean;
-  withUgcLinks?: boolean;
-  className?: string;
-  initialMention?: string;
-};
-
-const PlainTextCodeEditorDescriptor: CodeBlockEditorDescriptor = {
-  match: () => true,
-  priority: 0,
-  Editor: (props) => {
-    return (
-      <div>
-        <pre className="m-4 mx-5 overflow-x-auto whitespace-pre-wrap break-normal rounded border border-gray-300 bg-gray-100 p-3 dark:border-gray-300-dark dark:bg-gray-100-dark">
-          {props.code}
-        </pre>
-      </div>
-    );
-  },
-};
-
-const MarkdownEditor: FC<Props> = ({
-  markdown,
-  mode = "read",
-  onChange,
-  withUserMentions,
-  contentEditableClassName,
-  className,
-  shouldConfirmLeave = false,
-  withUgcLinks,
-  initialMention,
-}) => {
-  const { user } = useAuth();
-  const { theme } = useAppTheme();
-  const [errorMarkdown, setErrorMarkdown] = useState<string | null>(null);
-  const editorRef = useRef<MDXEditorMethods>(null);
-
-  useConfirmPageLeave(shouldConfirmLeave, false);
-
-  // Transform MathJax syntax to JSX embeds to properly utilise the MarkJax renderer
-  const formattedMarkdown = useMemo(
-    () => processMarkdown(markdown),
-    [markdown]
-  );
 
-  useEffect(() => {
-    if (mode == "read") {
-      editorRef.current?.setMarkdown(formattedMarkdown);
-    }
-  }, [formattedMarkdown]);
-
-  const baseFormattingPlugins = [
-    headingsPlugin(),
-    listsPlugin(),
-    linkPlugin({
-      withUgcLinks,
-    }),
-    ...(withUserMentions
-      ? [
-          mentionsPlugin({
-            initialMention,
-            isStuff: user?.is_staff || user?.is_superuser,
-          }),
-        ]
-      : []),
-    quotePlugin(),
-    markdownShortcutPlugin(),
-    codeBlockPlugin({
-      codeBlockEditorDescriptors: [PlainTextCodeEditorDescriptor],
-    }),
-    thematicBreakPlugin(),
-    linkDialogPlugin(),
-    tablePlugin(),
-    imagePlugin({
-      disableImageSettingsButton: true,
-      disableImageResize: true,
-      imageUploadHandler,
-    }),
-  ];
-
-  const editorDiffSourcePlugin = useMemo(() => {
-    if (mode === "read") return null;
-
-    return diffSourcePlugin({
-      viewMode: "rich-text",
-    });
-  }, [mode]);
-
-  const editorToolbarPlugin = useMemo(() => {
-    if (mode === "read") return null;
-
-    return toolbarPlugin({
-      toolbarContents: () => (
-        <DiffSourceToggleWrapper options={["rich-text", "source"]}>
-          <UndoRedo />
-          <Separator />
-          <BlockTypeSelect />
-          <BoldItalicUnderlineToggles />
-          <Separator />
-          <CreateLink />
-          <InsertImage />
-          <InsertThematicBreak />
-          <InsertTable />
-          <EmbedMathJaxAction />
-          <Separator />
-          <EmbedQuestionAction />
-        </DiffSourceToggleWrapper>
-      ),
-    });
-  }, [mode]);
-
-  async function imageUploadHandler(image: File) {
-    const formData = new FormData();
-    formData.append("image", image);
-    const response = await uploadImage(formData);
-    if ("errors" in response) {
-      console.error(response.errors);
-      return Promise.reject(response.errors);
-    } else {
-      return response.url;
-    }
-  }
-
-  if (errorMarkdown) {
-    return <div className="whitespace-pre-line">{errorMarkdown}</div>;
-  }
+import { MDXEditorMethods } from "@mdxeditor/editor";
+import dynamic from "next/dynamic";
+import React, { forwardRef } from "react";
 
-  return (
-    <MDXEditor
-      ref={editorRef}
-      className={classNames(
-        "content markdown-editor",
-        {
-          "dark-theme": theme === "dark",
-        },
-        className
-      )}
-      contentEditableClassName={classNames(
-        { "!p-0": mode === "read" },
-        contentEditableClassName
-      )}
-      markdown={formattedMarkdown}
-      onChange={(value) => {
-        // Revert the MathJax transformation before passing the markdown to the parent component
-        onChange && onChange(processMarkdown(value, true));
-      }}
-      onError={(err) => {
-        logErrorWithScope(err.error, err.source);
-        if (mode === "read") {
-          setErrorMarkdown(markdown);
-        }
-      }}
-      readOnly={mode === "read"}
-      plugins={[
-        ...baseFormattingPlugins,
-        jsxPlugin({ jsxComponentDescriptors }),
-        ...(editorDiffSourcePlugin ? [editorDiffSourcePlugin] : []),
-        ...(editorToolbarPlugin ? [editorToolbarPlugin] : []),
-      ]}
-    />
-  );
-};
+import { MarkdownEditorProps } from "./initialized_editor";
 
-export default dynamic(() => Promise.resolve(MarkdownEditor), {
+const Editor = dynamic(() => import("./initialized_editor"), {
   ssr: false,
 });
+
+const MarkdownEditor = forwardRef<MDXEditorMethods, MarkdownEditorProps>(
+  (props, ref) => <Editor {...props} forwardedRef={ref} />
+);
+MarkdownEditor.displayName = "MarkdownEditor";
+
+export default MarkdownEditor;
diff --git a/front_end/src/components/markdown_editor/initialized_editor.tsx b/front_end/src/components/markdown_editor/initialized_editor.tsx
new file mode 100644
index 000000000..9cbbde79e
--- /dev/null
+++ b/front_end/src/components/markdown_editor/initialized_editor.tsx
@@ -0,0 +1,245 @@
+import "@mdxeditor/editor/style.css";
+import "./editor.css";
+
+import {
+  BlockTypeSelect,
+  BoldItalicUnderlineToggles,
+  CodeBlockEditorDescriptor,
+  codeBlockPlugin,
+  CreateLink,
+  diffSourcePlugin,
+  DiffSourceToggleWrapper,
+  headingsPlugin,
+  imagePlugin,
+  InsertImage,
+  InsertTable,
+  InsertThematicBreak,
+  JsxComponentDescriptor,
+  jsxPlugin,
+  linkDialogPlugin,
+  listsPlugin,
+  markdownShortcutPlugin,
+  MDXEditor,
+  MDXEditorMethods,
+  quotePlugin,
+  Separator,
+  tablePlugin,
+  thematicBreakPlugin,
+  toolbarPlugin,
+  UndoRedo,
+} from "@mdxeditor/editor";
+import classNames from "classnames";
+import React, {
+  FC,
+  ForwardedRef,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { mergeRefs } from "react-merge-refs";
+
+import { uploadImage } from "@/app/(main)/questions/actions";
+import {
+  EmbedMathJaxAction,
+  mathJaxDescriptor,
+} from "@/components/markdown_editor/embedded_math_jax";
+import {
+  embeddedQuestionDescriptor,
+  EmbedQuestionAction,
+} from "@/components/markdown_editor/embedded_question";
+import { processMarkdown } from "@/components/markdown_editor/helpers";
+import { linkPlugin } from "@/components/markdown_editor/plugins/link";
+import { mentionsPlugin } from "@/components/markdown_editor/plugins/mentions";
+import { useAuth } from "@/contexts/auth_context";
+import useAppTheme from "@/hooks/use_app_theme";
+import useConfirmPageLeave from "@/hooks/use_confirm_page_leave";
+import { logErrorWithScope } from "@/utils/errors";
+
+type EditorMode = "write" | "read";
+
+const jsxComponentDescriptors: JsxComponentDescriptor[] = [
+  mathJaxDescriptor,
+  embeddedQuestionDescriptor,
+];
+
+const PlainTextCodeEditorDescriptor: CodeBlockEditorDescriptor = {
+  match: () => true,
+  priority: 0,
+  Editor: (props) => {
+    return (
+      <div>
+        <pre className="m-4 mx-5 overflow-x-auto whitespace-pre-wrap break-normal rounded border border-gray-300 bg-gray-100 p-3 dark:border-gray-300-dark dark:bg-gray-100-dark">
+          {props.code}
+        </pre>
+      </div>
+    );
+  },
+};
+
+export type MarkdownEditorProps = {
+  markdown: string;
+  mode?: EditorMode;
+  onChange?: (markdown: string) => void;
+  onBlur?: (event: FocusEvent) => void;
+  withUserMentions?: boolean;
+  contentEditableClassName?: string;
+  shouldConfirmLeave?: boolean;
+  withUgcLinks?: boolean;
+  className?: string;
+  initialMention?: string;
+};
+
+/**
+ * This component should never be imported directly. Instead, use the instance from index file, which disables SSR
+ * For more info see: https://mdxeditor.dev/editor/docs/getting-started
+ */
+const InitializedMarkdownEditor: FC<
+  { forwardedRef?: ForwardedRef<MDXEditorMethods> | null } & MarkdownEditorProps
+> = ({
+  forwardedRef,
+  markdown,
+  mode = "read",
+  onChange,
+  onBlur,
+  withUserMentions,
+  contentEditableClassName,
+  className,
+  shouldConfirmLeave = false,
+  withUgcLinks,
+  initialMention,
+}) => {
+  const { user } = useAuth();
+  const { theme } = useAppTheme();
+  const [errorMarkdown, setErrorMarkdown] = useState<string | null>(null);
+
+  const editorRef = useRef<MDXEditorMethods>(null);
+
+  useConfirmPageLeave(shouldConfirmLeave, false);
+
+  // Transform MathJax syntax to JSX embeds to properly utilise the MarkJax renderer
+  const formattedMarkdown = useMemo(
+    () => processMarkdown(markdown),
+    [markdown]
+  );
+
+  useEffect(() => {
+    if (mode == "read") {
+      editorRef.current?.setMarkdown(formattedMarkdown);
+    }
+  }, [formattedMarkdown]);
+
+  const baseFormattingPlugins = [
+    headingsPlugin(),
+    listsPlugin(),
+    linkPlugin({
+      withUgcLinks,
+    }),
+    ...(withUserMentions
+      ? [
+          mentionsPlugin({
+            initialMention,
+            isStuff: user?.is_staff || user?.is_superuser,
+          }),
+        ]
+      : []),
+    quotePlugin(),
+    markdownShortcutPlugin(),
+    codeBlockPlugin({
+      codeBlockEditorDescriptors: [PlainTextCodeEditorDescriptor],
+    }),
+    thematicBreakPlugin(),
+    linkDialogPlugin(),
+    tablePlugin(),
+    imagePlugin({
+      disableImageSettingsButton: true,
+      disableImageResize: true,
+      imageUploadHandler,
+    }),
+  ];
+
+  const editorDiffSourcePlugin = useMemo(() => {
+    if (mode === "read") return null;
+
+    return diffSourcePlugin({
+      viewMode: "rich-text",
+    });
+  }, [mode]);
+
+  const editorToolbarPlugin = useMemo(() => {
+    if (mode === "read") return null;
+
+    return toolbarPlugin({
+      toolbarContents: () => (
+        <DiffSourceToggleWrapper options={["rich-text", "source"]}>
+          <UndoRedo />
+          <Separator />
+          <BlockTypeSelect />
+          <BoldItalicUnderlineToggles />
+          <Separator />
+          <CreateLink />
+          <InsertImage />
+          <InsertThematicBreak />
+          <InsertTable />
+          <EmbedMathJaxAction />
+          <Separator />
+          <EmbedQuestionAction />
+        </DiffSourceToggleWrapper>
+      ),
+    });
+  }, [mode]);
+
+  async function imageUploadHandler(image: File) {
+    const formData = new FormData();
+    formData.append("image", image);
+    const response = await uploadImage(formData);
+    if ("errors" in response) {
+      console.error(response.errors);
+      return Promise.reject(response.errors);
+    } else {
+      return response.url;
+    }
+  }
+
+  if (errorMarkdown) {
+    return <div className="whitespace-pre-line">{errorMarkdown}</div>;
+  }
+
+  return (
+    <MDXEditor
+      ref={mergeRefs([editorRef, forwardedRef])}
+      className={classNames(
+        "content markdown-editor",
+        {
+          "dark-theme": theme === "dark",
+        },
+        className
+      )}
+      contentEditableClassName={classNames(
+        { "!p-0": mode === "read" },
+        contentEditableClassName
+      )}
+      markdown={formattedMarkdown}
+      onChange={(value) => {
+        // Revert the MathJax transformation before passing the markdown to the parent component
+        onChange && onChange(processMarkdown(value, true));
+      }}
+      onBlur={onBlur}
+      onError={(err) => {
+        logErrorWithScope(err.error, err.source);
+        if (mode === "read") {
+          setErrorMarkdown(markdown);
+        }
+      }}
+      readOnly={mode === "read"}
+      plugins={[
+        ...baseFormattingPlugins,
+        jsxPlugin({ jsxComponentDescriptors }),
+        ...(editorDiffSourcePlugin ? [editorDiffSourcePlugin] : []),
+        ...(editorToolbarPlugin ? [editorToolbarPlugin] : []),
+      ]}
+    />
+  );
+};
+
+export default InitializedMarkdownEditor;
diff --git a/front_end/src/components/ui/form_field.tsx b/front_end/src/components/ui/form_field.tsx
index d4bd6904b..5b7b930b4 100644
--- a/front_end/src/components/ui/form_field.tsx
+++ b/front_end/src/components/ui/form_field.tsx
@@ -1,7 +1,17 @@
+"use client";
+import { MDXEditorMethods } from "@mdxeditor/editor";
 import classNames from "classnames";
 import * as React from "react";
-import { FC, useEffect, useMemo } from "react";
+import { FC, useEffect, useMemo, useRef } from "react";
+import {
+  Control,
+  FieldValues,
+  Path,
+  PathValue,
+  useController,
+} from "react-hook-form";
 
+import MarkdownEditor from "@/components/markdown_editor";
 import { ErrorResponse } from "@/types/fetch";
 import { extractError } from "@/utils/errors";
 
@@ -118,3 +128,55 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
   }
 );
 Textarea.displayName = "Textarea";
+
+type MarkdownEditorFieldProps<T extends FieldValues = FieldValues> = {
+  control: Control<T>;
+  name: Path<T>;
+  defaultValue?: PathValue<T, Path<T>>;
+  errors?: ErrorResponse;
+};
+
+export const MarkdownEditorField = <T extends FieldValues = FieldValues>({
+  control,
+  name,
+  errors,
+  defaultValue,
+}: MarkdownEditorFieldProps<T>) => {
+  const { field } = useController({ control, name, defaultValue });
+  const editorRef = useRef<MDXEditorMethods>(null);
+
+  return (
+    <>
+      <div className="relative rounded border border-gray-500 dark:border-gray-500-dark">
+        {/* This input is used to support following logic fron native forms
+           - populate FormData with input value when submitting via form action
+           - auto-scroll and focus input when validation error occurs
+         */}
+        <Textarea
+          className="hidden-scrollable-input pointer-events-none"
+          {...field}
+          readOnly
+          onFocus={() => {
+            editorRef.current?.focus();
+          }}
+        />
+
+        <MarkdownEditor
+          ref={editorRef}
+          mode="write"
+          markdown={field.value ?? ""}
+          onChange={field.onChange}
+          onBlur={field.onBlur}
+          className="w-full"
+        />
+      </div>
+      {errors && (
+        <FormError
+          name={name}
+          errors={errors}
+          className="text-sm font-bold capitalize"
+        />
+      )}
+    </>
+  );
+};
diff --git a/front_end/src/components/ui/input_container.tsx b/front_end/src/components/ui/input_container.tsx
index e3771a74e..6b9b2ecf2 100644
--- a/front_end/src/components/ui/input_container.tsx
+++ b/front_end/src/components/ui/input_container.tsx
@@ -1,29 +1,48 @@
 import classNames from "classnames";
-import { FC, PropsWithChildren } from "react";
+import { FC, PropsWithChildren, ReactNode, useMemo } from "react";
 
 type InputContainerProps = {
   labelText?: string;
-  explanation?: any;
+  explanation?: ReactNode;
   className?: string;
+  isNativeFormControl?: boolean;
 };
 
 export const InputContainer: FC<PropsWithChildren<InputContainerProps>> = ({
   labelText,
   explanation,
   className,
+  isNativeFormControl = true,
   children,
 }) => {
-  return (
-    <div className={classNames("flex flex-col gap-1.5", className)}>
-      {labelText ? (
+  const InputElement: ReactNode = useMemo(() => {
+    if (!labelText) {
+      return children;
+    }
+
+    if (isNativeFormControl) {
+      return (
         <label className="flex flex-col gap-1.5 text-sm font-bold capitalize text-gray-600 dark:text-gray-600-dark">
           {labelText}
           {children}
         </label>
-      ) : (
-        children
-      )}
-      {explanation && (
+      );
+    }
+
+    return (
+      <div className="flex flex-col gap-1.5">
+        <span className="text-sm font-bold capitalize text-gray-600 dark:text-gray-600-dark">
+          {labelText}
+        </span>
+        {children}
+      </div>
+    );
+  }, [children, isNativeFormControl, labelText]);
+
+  return (
+    <div className={classNames("flex flex-col gap-1.5", className)}>
+      {InputElement}
+      {!!explanation && (
         <span className="text-xs text-gray-700 dark:text-gray-700-dark">
           {explanation}
         </span>