feat: 순수 markdown editor 추가 및 MDXRenderer가 JSX를 못 사용하는 md 모드 추가

Author: MU-Software

apps/pyconkr-admin/src/components/pages/page/editor.tsx

@@ -52,7 +52,7 @@ const SectionTextEditor: React.FC<SectionTextEditorPropType> = ({ disabled, defa
       </Stack>
       <Box sx={{ flexGrow: 1, width: "50%", backgroundColor: "#fff" }}>
         <ThemeProvider theme={muiTheme}>
-          <Common.Components.MDXRenderer text={defaultValue || ""} />
+          <Common.Components.MDXRenderer text={defaultValue || ""} format="mdx" />
         </ThemeProvider>
       </Box>
     </Stack>

apps/pyconkr/src/components/pages/dynamic_route.tsx

@@ -117,7 +117,7 @@ const InnerPageRenderer: React.FC<{ id: string }> = Suspense.with({ fallback: <C
     <Stack sx={initialPageStyle(Common.Utils.parseCss(data.css))}>
       {data.sections.map((s) => (
         <Stack sx={initialSectionStyle(Common.Utils.parseCss(s.css))} key={s.id}>
-          <Common.Components.MDXRenderer text={s.body} />
+          <Common.Components.MDXRenderer text={s.body} format="mdx" />
         </Stack>
       ))}
     </Stack>

apps/pyconkr/src/debug/page/mdi_test.tsx

@@ -28,7 +28,7 @@ export const MdiTestPage: React.FC = () => {
         <Common.Components.MDXEditor defaultValue={state.text} onChange={setMDXInput} />
       </Box>
       <Box sx={HalfWidthStyle}>
-        <Common.Components.MDXRenderer {...state} />
+        <Common.Components.MDXRenderer {...state} format="mdx" />
       </Box>
     </Stack>
   );

packages/common/src/components/index.ts

@@ -8,6 +8,7 @@ import {
   LottiePlayer as LottiePlayerComponent,
   NetworkLottiePlayer as NetworkLottiePlayerComponent,
 } from "./lottie";
+import { MarkdownEditor as MarkdownEditorComponent } from "./md_editor";
 import { MDXRenderer as MDXRendererComponent } from "./mdx";
 import { Confetti as ConfettiComponent } from "./mdx_components/confetti";
 import {
@@ -29,6 +30,7 @@ import { PythonKorea as PythonKoreaComponent } from "./pythonkorea";
 namespace Components {
   export const CenteredPage = CenteredPageComponent;
   export const CommonContextProvider = CommonContextProviderComponent;
+  export const MarkdownEditor = MarkdownEditorComponent;
   export const MDXEditor = MDXEditorComponent;
   export const MDXRenderer = MDXRendererComponent;
   export const PythonKorea = PythonKoreaComponent;

packages/common/src/components/md_editor.tsx

@@ -0,0 +1,63 @@
+import { Stack } from "@mui/material";
+import MDEditor, { ICommand, commands } from "@uiw/react-md-editor";
+import * as React from "react";
+
+type MDEditorProps = {
+  disabled?: boolean;
+  defaultValue?: string;
+  onChange?: (value?: string) => void;
+  extraCommands?: ICommand[];
+};
+
+const TextEditorStyle: React.CSSProperties = {
+  flexGrow: 1,
+  width: "100%",
+  maxWidth: "100%",
+
+  wordBreak: "break-word",
+  whiteSpace: "pre-wrap",
+  overflowWrap: "break-word",
+
+  fieldSizing: "content",
+} as React.CSSProperties;
+
+export const MarkdownEditor: React.FC<MDEditorProps> = ({ disabled, defaultValue, onChange, extraCommands }) => (
+  <Stack direction="column" spacing={2} sx={{ width: "100%", height: "100%", maxWidth: "100%" }}>
+    <MDEditor
+      data-color-mode="light"
+      textareaProps={{ disabled }}
+      preview="edit"
+      highlightEnable={true}
+      height="none"
+      minHeight={100}
+      value={defaultValue}
+      onChange={onChange}
+      commands={[
+        commands.group([commands.title1, commands.title2, commands.title3, commands.title4, commands.title5, commands.title6], {
+          name: "title",
+          groupName: "title",
+          buttonProps: { "aria-label": "Insert title" },
+        }),
+        commands.bold,
+        commands.italic,
+        commands.strikethrough,
+        commands.code,
+        commands.link,
+        commands.divider,
+        commands.quote,
+        commands.codeBlock,
+        commands.table,
+        commands.hr,
+        commands.image,
+        commands.divider,
+        commands.unorderedListCommand,
+        commands.orderedListCommand,
+        commands.checkedListCommand,
+        commands.divider,
+        commands.help,
+      ]}
+      extraCommands={extraCommands}
+      style={TextEditorStyle}
+    />
+  </Stack>
+);

packages/common/src/components/mdx.tsx

@@ -84,7 +84,13 @@ const lineFormatterForMDX = (line: string) => {
   return `${trimmedLine}  \n`;
 };
 
-export const MDXRenderer: React.FC<{ text: string; resetKey?: number }> = ({ text, resetKey }) => {
+type MDXRendererPropType = {
+  text: string;
+  resetKey?: number;
+  format?: "mdx" | "md";
+};
+
+export const MDXRenderer: React.FC<MDXRendererPropType> = ({ text, resetKey, format }) => {
   const { baseUrl, mdxComponents } = Hooks.Common.useCommonContext();
   const [state, setState] = React.useState<{
     component: React.ReactNode;
@@ -106,6 +112,7 @@ export const MDXRenderer: React.FC<{ text: string; resetKey?: number }> = ({ tex
         const { default: RenderResult } = await evaluate(processedText, {
           ...runtime,
           ...provider,
+          format: format || "md",
           baseUrl,
           remarkPlugins: [remarkGfm],
         });
@@ -120,7 +127,7 @@ export const MDXRenderer: React.FC<{ text: string; resetKey?: number }> = ({ tex
         setRenderResult(<ErrorFallback error={error as Error} reset={setRandomResetKey} />);
       }
     })();
-  }, [text, resetKey, state.resetKey, baseUrl, mdxComponents]);
+  }, [text, resetKey, format, state.resetKey, baseUrl, mdxComponents]);
 
   return (
     <ErrorBoundary fallback={ErrorFallback} resetKeys={[text, resetKey, state.resetKey]}>

packages/common/src/components/mdx_editor.tsx

@@ -253,15 +253,18 @@ export const MDXEditor: React.FC<MDXEditorProps> = ({ disabled, defaultValue, on
           }),
           commands.bold,
           commands.italic,
+          commands.strikethrough,
           commands.code,
           commands.link,
           commands.divider,
           commands.quote,
           commands.codeBlock,
+          commands.table,
           commands.hr,
           commands.divider,
           commands.unorderedListCommand,
           commands.orderedListCommand,
+          commands.checkedListCommand,
           commands.divider,
           commands.group([], {
             name: "custom components",
@@ -277,6 +280,8 @@ export const MDXEditor: React.FC<MDXEditorProps> = ({ disabled, defaultValue, on
             children: (props) => <ImageSelector {...props} />,
             buttonProps: { "aria-label": "Insert image" },
           }),
+          commands.divider,
+          commands.help,
         ]}
         extraCommands={extraCommands}
         style={TextEditorStyle}

packages/shop/src/components/features/product.tsx

@@ -248,7 +248,7 @@ const ProductItem: React.FC<ProductItemPropType> = ({ disabled: rootDisabled, la
 
   return (
     <>
-      <Common.Components.MDXRenderer text={product.description || ""} />
+      <Common.Components.MDXRenderer text={product.description || ""} format="mdx" />
       <br />
       <Divider />
       {R.isNullish(notPurchasableReason) ? (