feat: mdx editor form field, integrate it to existing forms

Metaculus · Dec 12, 2024 · 5d03268 · 5d03268
1 parent 4b5b031
commit 5d03268
Show file tree

Hide file tree

Showing 12 changed files with 520 additions and 418 deletions.
diff --git a/front_end/package-lock.json b/front_end/package-lock.json
diff --git 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
@@ -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
@@ -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} />}