Implement mdx editor in dashboard

apps/dashboard/package.json

@@ -11,15 +11,15 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.665.0",
+    "@aws-sdk/s3-presigned-post": "^3.665.0",
     "@dotkomonline/auth": "workspace:*",
     "@dotkomonline/environment": "workspace:*",
     "@dotkomonline/gateway-trpc": "workspace:*",
     "@dotkomonline/proxy-nextjs": "workspace:*",
     "@dotkomonline/types": "workspace:*",
     "@dotkomonline/ui": "workspace:*",
     "@dotkomonline/utils": "workspace:*",
-    "@aws-sdk/client-s3": "^3.665.0",
-    "@aws-sdk/s3-presigned-post": "^3.665.0",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^4.0.0",
     "@iconify/react": "^4.1.1",
@@ -28,6 +28,7 @@
     "@mantine/hooks": "^7.13.2",
     "@mantine/modals": "^7.13.2",
     "@mantine/notifications": "^7.13.2",
+    "@mdxeditor/editor": "^3.24.0",
     "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.2",
     "@tanstack/react-query": "^4.36.1",
@@ -39,12 +40,12 @@
     "dayjs": "^1.11.10",
     "next": "^15.1.6",
     "next-auth": "^4.24.8",
+    "pg": "^8.11.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
     "react-zxing": "^2.0.0",
     "superjson": "^2.0.0",
-    "pg": "^8.11.3",
     "zod": "^3.22.4"
   },
   "devDependencies": {

apps/dashboard/src/app/(dashboard)/job-listing/write-form.tsx

@@ -2,6 +2,7 @@ import { JobListingSchema, JobListingWriteSchema } from "@dotkomonline/types"
 import {
   createCheckboxInput,
   createDateTimeInput,
+  createRichTextInput,
   createSelectInput,
   createTagInput,
   createTextInput,
@@ -52,11 +53,11 @@ export const useJobListingWriteForm = ({
         withAsterisk: true,
         rows: 4,
       }),
-      description: createTextareaInput({
+      description: createRichTextInput({
         label: "Beskrivelse",
         placeholder: "Detaljert beskrivelse av stillingen...",
-        withAsterisk: true,
-        rows: 30,
+        markdown: "",
+        required: true,
       }),
       start: createDateTimeInput({
         label: "Startdato",

apps/dashboard/src/app/form.tsx

@@ -9,6 +9,7 @@ import {
   FileInput,
   type FileInputProps,
   Flex,
+  Input,
   MultiSelect,
   type MultiSelectProps,
   NumberInput,
@@ -24,6 +25,25 @@ import {
   type TextareaProps,
 } from "@mantine/core"
 import { DateTimePicker, type DateTimePickerProps } from "@mantine/dates"
+import {
+  BlockTypeSelect,
+  BoldItalicUnderlineToggles,
+  CodeToggle,
+  CreateLink,
+  ListsToggle,
+  MDXEditor,
+  type MDXEditorProps,
+  Separator,
+  UndoRedo,
+  frontmatterPlugin,
+  headingsPlugin,
+  linkDialogPlugin,
+  linkPlugin,
+  listsPlugin,
+  markdownShortcutPlugin,
+  thematicBreakPlugin,
+  toolbarPlugin,
+} from "@mdxeditor/editor"
 import type { FC } from "react"
 import {
   type Control,
@@ -240,6 +260,66 @@ export function createTextareaInput<F extends FieldValues>({
   }
 }
 
+export function createRichTextInput<F extends FieldValues>({
+  onChange,
+  required,
+  label,
+  ...props
+}: Omit<MDXEditorProps, "error"> & { required: boolean; label: string }): InputProducerResult<F> {
+  return function RichTextInput({ name, control }) {
+    return (
+      <>
+        <Input.Wrapper>
+          <Input.Label required={required}>{label}</Input.Label>
+
+          <div style={{ border: "1px solid lightgrey", borderRadius: "4px", padding: 0 }}>
+            <Controller
+              control={control}
+              name={name}
+              render={({ field }) => (
+                <MDXEditor
+                  {...props}
+                  markdown={field?.value ?? ""}
+                  plugins={[
+                    toolbarPlugin({
+                      toolbarContents: () => (
+                        <>
+                          <UndoRedo />
+                          <Separator />
+                          <BoldItalicUnderlineToggles />
+                          <ListsToggle />
+                          <CodeToggle />
+                          <Separator />
+                          <BlockTypeSelect />
+                          <CreateLink />
+                          <Separator />
+                        </>
+                      ),
+                    }),
+                    listsPlugin(),
+                    headingsPlugin(),
+                    linkPlugin(),
+                    linkDialogPlugin(),
+                    thematicBreakPlugin(),
+                    frontmatterPlugin(),
+                    markdownShortcutPlugin(),
+                  ]}
+                  onChange={(value) => {
+                    field.onChange(value)
+                    if (onChange) {
+                      onChange(value, false)
+                    }
+                  }}
+                />
+              )}
+            />
+          </div>
+        </Input.Wrapper>
+      </>
+    )
+  }
+}
+
 export function createTextInput<F extends FieldValues>({
   ...props
 }: Omit<TextInputProps, "error">): InputProducerResult<F> {

apps/dashboard/src/app/layout.tsx

@@ -2,6 +2,7 @@ import { ColorSchemeScript, mantineHtmlProps } from "@mantine/core"
 import "@mantine/core/styles.css"
 import "@mantine/dates/styles.css"
 import "@mantine/notifications/styles.css"
+import "@mdxeditor/editor/style.css"
 import type { PropsWithChildren } from "react"
 import { AuthProvider } from "./AuthProvider"
 import { MantineProvider } from "./MantineProvider"

apps/dashboard/src/modules/job-listing/modals/create-job-listing-modal.tsx

@@ -19,5 +19,6 @@ export const useCreateJobListingModal = () => () =>
   modals.openContextModal({
     modal: "jobListing/create",
     title: "Opprett ny stillingsannonse",
+    size: "lg",
     innerProps: {},
   })

apps/web/package.json

@@ -14,6 +14,8 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.665.0",
+    "@aws-sdk/s3-presigned-post": "^3.665.0",
     "@dotkomonline/auth": "workspace:*",
     "@dotkomonline/db": "workspace:*",
     "@dotkomonline/environment": "workspace:*",
@@ -23,9 +25,8 @@
     "@dotkomonline/types": "workspace:*",
     "@dotkomonline/ui": "workspace:*",
     "@dotkomonline/utils": "workspace:*",
-    "@aws-sdk/client-s3": "^3.665.0",
-    "@aws-sdk/s3-presigned-post": "^3.665.0",
     "@fadi-ui/react-country-flag": "^1.0.7",
+    "@mdxeditor/editor": "^3.24.0",
     "@next/env": "^15.0.0",
     "@portabletext/react": "^3.0.11",
     "@radix-ui/colors": "^3.0.0",
@@ -54,7 +55,10 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
     "react-icons": "^4.12.0",
+    "remark-html": "^16.0.1",
+    "remark-parse": "^11.0.0",
     "superjson": "^2.0.0",
+    "unified": "^11.0.5",
     "zod": "^3.22.4"
   },
   "devDependencies": {

apps/web/src/app/layout.tsx

@@ -5,6 +5,7 @@ import { cn } from "@dotkomonline/ui"
 import { Fraunces, Poppins } from "next/font/google"
 import type { PropsWithChildren } from "react"
 import "../styles/globals.css"
+import "@mdxeditor/editor/style.css"
 import { Providers } from "./providers"
 
 export const metadata = {

apps/web/src/components/views/JobListingView.tsx

@@ -1,6 +1,18 @@
+"use client"
+
 import type { JobListing } from "@dotkomonline/types"
 import { Button, Icon } from "@dotkomonline/ui"
 import { formatDate } from "@dotkomonline/utils"
+import {
+  MDXEditor,
+  frontmatterPlugin,
+  headingsPlugin,
+  linkDialogPlugin,
+  linkPlugin,
+  listsPlugin,
+  markdownShortcutPlugin,
+  thematicBreakPlugin,
+} from "@mdxeditor/editor"
 import Image from "next/image"
 import Link from "next/link"
 import type { FC } from "react"
@@ -82,16 +94,30 @@ export const JobListingView: FC<JobListingViewProps> = (props: JobListingViewPro
         )}
       </div>
       <div className="w-2/3">
-        <div className="border-amber-9 ml-8 mt-2 border-l-[1px] pl-4 mb-10">
+        <div className="border-amber-9 ml-[38px] mt-2 border-l-[1px] pl-4 mb-10">
           <p className="m-0 text-4xl font-bold">{company.name}</p>
           <p className="m-0 text-3xl">{title}</p>
         </div>
-        <div className="[&>*]:border-amber-9 mb-12 ml-8 flex flex-col [&>*]:border-l-[1px] [&>*]:pl-4 [&>h2]:m-0 [&>h2]:border-b-0">
-          {description.split("\n").map((paragraph) => (
-            <p key={paragraph.slice(0, 10)} className={paragraph ? "" : "my-2"}>
-              {paragraph}
-            </p>
-          ))}
+        <div
+          className="[&_[dir='ltr']]:text-white
+                      [&_[dir='ltr']]:border-amber-9
+                        [&_[dir='ltr']]:border-l-[1px]
+                        [&_[dir='ltr']]:pl-4
+                        mb-12 ml-8 flex flex-col"
+        >
+          <MDXEditor
+            readOnly
+            markdown={description}
+            plugins={[
+              listsPlugin(),
+              headingsPlugin(),
+              linkPlugin(),
+              linkDialogPlugin(),
+              thematicBreakPlugin(),
+              frontmatterPlugin(),
+              markdownShortcutPlugin(),
+            ]}
+          />
         </div>
       </div>
     </div>