add new Markdown Editor

packages/client/package.json

@@ -21,6 +21,7 @@
     "@github/webauthn-json": "^2.1.1",
     "@hookform/resolvers": "^3.4.2",
     "@lukemorales/query-key-factory": "^1.3.4",
+    "@mdxeditor/editor": "^3.11.3",
     "@mui/material": "^5.11.12",
     "@mui/x-data-grid": "^7.0.0",
     "@mui/x-date-pickers": "^7.0.0",
@@ -54,7 +55,7 @@
     "vite": "^5.4.0",
     "vite-plugin-checker": "^0.7.2",
     "web-vitals": "^3.1.0",
-    "zod": "^3.22.4"
+    "zod": "^3.23.8"
   },
   "packageManager": "[email protected]",
   "workspaces": [

packages/client/src/Lib/SiteMeta/SiteMetaSchema.test.ts

@@ -0,0 +1,27 @@
+import { FeatureFlagsSchema } from "./SiteMetaSchema"
+
+test("FeatureFlagsSchema", () => {
+  expect(
+    FeatureFlagsSchema.parse({
+      input: "true",
+    }),
+  ).toEqual({
+    input: true,
+  })
+
+  expect(
+    FeatureFlagsSchema.parse({
+      input: "t",
+    }),
+  ).toEqual({
+    input: true,
+  })
+
+  expect(
+    FeatureFlagsSchema.parse({
+      input: "false",
+    }),
+  ).toEqual({
+    input: false,
+  })
+})

packages/client/src/Lib/SiteMeta/SiteMetaSchema.ts

@@ -7,11 +7,20 @@ import {
 } from "./SiteMetaData"
 
 const stringValue = z.string().optional()
-const booleanValue = stringValue.transform((value) => value === "true")
+const booleanValue = stringValue.transform((value) => {
+  if (!value) return false
+  return ["t", "true"].includes(value.toLowerCase())
+})
 
 export const FeatureFlagsSchema: z.ZodType<MetaDataSet<FeatureFlag, boolean>> =
-  z.record(booleanValue)
-export const SocialsSchema: z.ZodType<MetaDataSet<SocialPlatform>> =
-  z.record(stringValue)
-export const ContentSchema: z.ZodType<MetaDataSet<ContentFields>> =
-  z.record(stringValue)
+  z.record(z.string(), booleanValue)
+
+export const SocialsSchema: z.ZodType<MetaDataSet<SocialPlatform>> = z.record(
+  z.string(),
+  stringValue,
+)
+
+export const ContentSchema: z.ZodType<MetaDataSet<ContentFields>> = z.record(
+  z.string(),
+  stringValue,
+)

packages/client/src/Theme/Components/Markdown/MarkdownEditor.tsx

@@ -0,0 +1,117 @@
+import {
+  BoldItalicUnderlineToggles,
+  CreateLink,
+  headingsPlugin,
+  InsertThematicBreak,
+  linkDialogPlugin,
+  linkPlugin,
+  listsPlugin,
+  markdownShortcutPlugin,
+  MDXEditor,
+  MDXEditorProps,
+  quotePlugin,
+  thematicBreakPlugin,
+  toolbarPlugin,
+  UndoRedo,
+} from "@mdxeditor/editor"
+import { Box, SxProps, useTheme } from "@mui/material"
+import { grey } from "@mui/material/colors"
+import { FC, useMemo } from "react"
+
+import "@mdxeditor/editor/style.css"
+
+export interface MarkdownEditorProps
+  extends Omit<MDXEditorProps, "markdown" | "plugins"> {
+  value: string
+}
+
+export const MarkdownEditor: FC<MarkdownEditorProps> = ({
+  value,
+  ...props
+}) => {
+  const theme = useTheme()
+
+  const styles: SxProps = useMemo(
+    () => ({
+      "& .mdxeditor": {
+        padding: 2,
+        border: 1,
+        borderRadius: 1,
+        borderColor: grey[600],
+      },
+      "& .content-editable": {
+        fontFamily: theme.typography.fontFamily,
+        padding: 1,
+        margin: 0,
+        paddingTop: 3,
+
+        "& p": {
+          margin: 0,
+          padding: 0,
+          ...theme.typography.body1,
+        },
+        "& h1": {
+          margin: 0,
+          padding: 0,
+          ...theme.typography.h1,
+        },
+        "& h2": {
+          margin: 0,
+          padding: 0,
+          ...theme.typography.h2,
+        },
+        "& h3": {
+          margin: 0,
+          padding: 0,
+          ...theme.typography.h3,
+        },
+        "& h4": {
+          margin: 0,
+          padding: 0,
+          ...theme.typography.h4,
+        },
+        "& h5": {
+          margin: 0,
+          padding: 0,
+          ...theme.typography.h5,
+        },
+        "& h6": {
+          margin: 0,
+          padding: 0,
+          ...theme.typography.h6,
+        },
+      },
+    }),
+    [theme],
+  )
+
+  return (
+    <Box sx={styles}>
+      <MDXEditor
+        className={"dark-theme"}
+        contentEditableClassName={"content-editable"}
+        markdown={value}
+        plugins={[
+          toolbarPlugin({
+            toolbarContents: () => (
+              <>
+                <UndoRedo />
+                <BoldItalicUnderlineToggles />
+                <CreateLink />
+                <InsertThematicBreak />
+              </>
+            ),
+          }),
+          headingsPlugin(),
+          quotePlugin(),
+          listsPlugin(),
+          thematicBreakPlugin(),
+          linkPlugin(),
+          linkDialogPlugin(),
+          markdownShortcutPlugin(),
+        ]}
+        {...props}
+      />
+    </Box>
+  )
+}

packages/client/src/Theme/Components/Markdown/MarkdownViewer.tsx

@@ -0,0 +1,17 @@
+import { Box, useTheme } from "@mui/material"
+import { MuiMarkdown } from "mui-markdown"
+import { FC } from "react"
+
+interface MarkdownViewerProps {
+  children: string | null | undefined
+}
+
+export const MarkdownViewer: FC<MarkdownViewerProps> = ({ children }) => {
+  const theme = useTheme()
+
+  return (
+    <Box sx={theme.typography.body1}>
+      <MuiMarkdown>{children}</MuiMarkdown>
+    </Box>
+  )
+}

packages/client/src/Theme/Components/Markdown/index.ts

@@ -0,0 +1,2 @@
+export * from "./MarkdownEditor"
+export * from "./MarkdownViewer"

packages/client/src/Theme/Components/Posts/Forms/PostForm.tsx

@@ -1,12 +1,4 @@
-import { faMarkdown } from "@fortawesome/free-brands-svg-icons"
-import {
-  Box,
-  FormHelperText,
-  Grid,
-  Paper,
-  Stack,
-  Typography,
-} from "@mui/material"
+import { Box, Grid, Paper, Stack, Typography } from "@mui/material"
 import TextField from "@mui/material/TextField"
 import { DatePicker } from "@mui/x-date-pickers"
 import * as dateFns from "date-fns"
@@ -23,7 +15,7 @@ import {
   TagData,
 } from "../../../../Lib"
 import { formatPostSlug } from "../../../../Lib/PostUtil"
-import { FontAwesomeIcon } from "../../Icons"
+import { MarkdownEditor } from "../../Markdown"
 import { PostTagsField, SelectedTagList } from "../../Tags"
 import { EditPostImages } from "./EditPostImages"
 import styles from "./PostForm.module.scss"
@@ -172,29 +164,14 @@ export const PostForm: FC<PostFormProps> = ({
               <Controller
                 control={form.control}
                 name={"description"}
-                render={(fieldProps) => (
-                  <TextField
-                    {...muiField(fieldProps)}
-                    label="Description"
-                    multiline
-                    minRows={5}
-                    fullWidth
+                render={({ field }) => (
+                  <MarkdownEditor
+                    placeholder={"Description"}
+                    value={field.value || ""}
+                    onChange={field.onChange}
                   />
                 )}
               />
-              <FormHelperText>
-                <Stack direction="row" gap={1} alignItems="center">
-                  <FontAwesomeIcon icon={faMarkdown} />
-                  <a
-                    href="https://commonmark.org/help/"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    Markdown
-                  </a>{" "}
-                  format supported
-                </Stack>
-              </FormHelperText>
             </Grid>
           </Grid>
         </Paper>

packages/client/src/Theme/Components/Posts/ViewPost.tsx

@@ -1,15 +1,14 @@
 import { Box, Paper, Stack, Typography } from "@mui/material"
 import classnames from "classnames"
 import { FC } from "react"
+import { useIsMobile, useViewPostCtrl } from "../../../Lib"
+import { AsyncImg } from "../Images"
+import { MarkdownViewer } from "../Markdown/MarkdownViewer"
 
 import { ImagesNav } from "./PostImagesNav"
 import { PostNav } from "./PostNav"
-import { PostTitle } from "./PostTitle"
-import { useIsMobile } from "../../../Lib/Hooks"
-import { AsyncImg } from "../Images"
 import { PostTags } from "./PostTags"
-import { Markdown } from "../Markdown"
-import { useViewPostCtrl } from "../../../Lib"
+import { PostTitle } from "./PostTitle"
 
 import styles from "./ViewPost.module.scss"
 
@@ -48,7 +47,7 @@ export const ViewPost: FC = () => {
 
       {description?.trim() !== "" && (
         <Paper sx={{ padding: 2 }}>
-          <Markdown>{post.description}</Markdown>
+          <MarkdownViewer>{post.description}</MarkdownViewer>
         </Paper>
       )}
     </Stack>

packages/client/src/Theme/Pages/AboutPage.tsx

@@ -1,7 +1,7 @@
 import { Paper } from "@mui/material"
 import { FC } from "react"
 import { useCustomContent$ } from "../../Lib"
-import { Markdown } from "../Components"
+import { MarkdownViewer } from "../Components"
 import { ErrorPage } from "./ErrorPage"
 import { LoadingPage } from "./LoadingPage"
 
@@ -15,7 +15,7 @@ export const AboutPage: FC = () => {
 
   return (
     <Paper sx={{ padding: 2 }}>
-      <Markdown>{contentMeta.about}</Markdown>
+      <MarkdownViewer>{contentMeta.about}</MarkdownViewer>
     </Paper>
   )
 }