chore: MDXEditor에서 불필요한 부분 제거

Author: MU-Software

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

@@ -7,17 +7,12 @@ import * as Common from "@frontend/common";
 const HalfWidthStyle: React.CSSProperties = { width: "50%", maxWidth: "50%" };
 
 export const MdiTestPage: React.FC = () => {
-  const inputRef = React.useRef<HTMLTextAreaElement>(null);
   const [state, setState] = React.useState<{ text: string, resetKey: number }>({ text: "", resetKey: Math.random() });
-  const setMDXInput = (text: string) => setState({ text, resetKey: Math.random() });
-  const onLoad = (text: string) => {
-    setState((prev) => ({ ...prev, text }));
-    if (inputRef.current) inputRef.current.value = text;
-  }
+  const setMDXInput = (input?: string) => setState({ text: input || "", resetKey: Math.random() });
 
   return (
     <Stack direction="row" spacing={2} sx={{ width: "100%", height: "100%", minHeight: "100%", maxHeight: "100%", flexGrow: 1, py: 2 }}>
-      <Box sx={HalfWidthStyle}><Common.Components.MDXEditor inputRef={inputRef} defaultValue={state.text} onLoad={onLoad} onSave={setMDXInput} ctrlSMode="save" /></Box>
+      <Box sx={HalfWidthStyle}><Common.Components.MDXEditor defaultValue={state.text} onChange={setMDXInput} /></Box>
       <Box sx={HalfWidthStyle}><Common.Components.MDXRenderer {...state} /></Box>
     </Stack>
   );

packages/common/src/components/mdx_editor.tsx

@@ -1,29 +1,24 @@
 import * as React from "react";
 
-import { Apps, Save } from "@mui/icons-material";
-import { Button, ButtonProps, MenuItem, Select, Stack, Typography } from "@mui/material";
-import MDEditor, { GroupOptions, RefMDEditor, commands } from '@uiw/react-md-editor';
-// import * as CryptoJS from "crypto-js";
+import { Apps } from "@mui/icons-material";
+import { Button, MenuItem, Select, Stack, Typography } from "@mui/material";
+import MDEditor, { GroupOptions, ICommand, commands } from '@uiw/react-md-editor';
 import type { MDXComponents } from "mdx/types";
+// import * as CryptoJS from "crypto-js";
 
 import Hooks from "../hooks";
 
-const LOCAL_STORAGE_KEY = "mdx_editor_input_";
-
 type CustomComponentInfoType = {
   k: string; // key
   n: string; // name
   v?: MDXComponents[string]; // value
 }
 
 type MDXEditorProps = {
-  sectionId?: string;
+  disabled?: boolean;
   defaultValue?: string;
-  inputRef?: React.RefObject<HTMLTextAreaElement | null>;
-  onLoad?: (value: string) => void;
-  onSave?: (value: string) => void;
-  ctrlSMode?: "ignore" | "save";
-  submitActions?: ButtonProps[];
+  onChange?: (value?: string) => void;
+  extraCommands?: ICommand[];
 };
 
 const TextEditorStyle: React.CSSProperties = {
@@ -38,8 +33,6 @@ const TextEditorStyle: React.CSSProperties = {
   fieldSizing: 'content',
 } as React.CSSProperties;
 
-const getDefaultValueFromLocalStorage = (sectionId?: string): string => localStorage.getItem(LOCAL_STORAGE_KEY + (sectionId || "unknown")) ?? "";
-
 // const calculateMD5FromFileBase64 = (fileBase64: string): string => CryptoJS.MD5(CryptoJS.enc.Base64.parse(fileBase64)).toString();
 
 // const onFileInEvent: React.DragEventHandler<HTMLDivElement> = (event) => {
@@ -108,18 +101,9 @@ const getCustomComponentSelector: (registeredComponentList: CustomComponentInfoT
   </Stack>;
 }
 
-export const MDXEditor: React.FC<MDXEditorProps> = ({ sectionId, defaultValue, inputRef, onLoad, onSave, ctrlSMode, submitActions }) => {
-  const [value, setValue] = React.useState<string>(defaultValue || getDefaultValueFromLocalStorage(sectionId));
+export const MDXEditor: React.FC<MDXEditorProps> = ({ disabled, defaultValue, onChange, extraCommands }) => {
   const { mdxComponents } = Hooks.Common.useCommonContext();
 
-  if (!inputRef) inputRef = React.useRef<HTMLTextAreaElement | null>(null);
-  const setRef: React.RefAttributes<RefMDEditor>["ref"] = (n) => {
-    if (n?.textarea) {
-      !inputRef.current && onLoad?.(n.textarea.value);
-      inputRef.current = n.textarea
-    }
-  }
-
   const registeredComponentList: CustomComponentInfoType[] = [
     { k: "", n: "", v: undefined },
     ...Object.entries(mdxComponents ?? {}).map(([k, v]) => {
@@ -129,41 +113,16 @@ export const MDXEditor: React.FC<MDXEditorProps> = ({ sectionId, defaultValue, i
     })
   ];
 
-  const onSaveAction = () => {
-    if (!inputRef.current) return;
-
-    setValue(inputRef.current.value);
-    onSave?.(inputRef.current.value);
-    localStorage.setItem(LOCAL_STORAGE_KEY + (sectionId || "unknown"), inputRef.current.value);
-    alert("저장했습니다.");
-  }
-
-  const handleCtrlSAction: (this: GlobalEventHandlers, ev: KeyboardEvent) => any = (event) => {
-    if (event.key === "s" && (event.ctrlKey || event.metaKey)) {
-      event.preventDefault();
-      event.stopPropagation();
-      console.log(`Ctrl+S pressed, executing ${ctrlSMode} action`);
-      ctrlSMode === "save" && onSaveAction();
-    }
-  }
-
-  React.useEffect(
-    ctrlSMode ? () => {
-      document.addEventListener("keydown", handleCtrlSAction);
-      return () => {
-        console.log("Removing event listener for Ctrl+S action");
-        document.removeEventListener("keydown", handleCtrlSAction);
-      }
-    } : () => { }, [inputRef.current]
-  )
-
   return <Stack direction="column" spacing={2} sx={{ width: "100%", height: "100%", maxWidth: "100%" }}>
     <MDEditor
+      data-color-mode="light"
+      textareaProps={{ disabled }}
       preview="edit"
       highlightEnable={true}
-      ref={setRef}
-      value={value}
-      onChange={(v) => setValue(v || "")}
+      height="none"
+      minHeight={0}
+      value={defaultValue}
+      onChange={onChange}
       commands={[
         commands.group(
           [
@@ -201,21 +160,8 @@ export const MDXEditor: React.FC<MDXEditorProps> = ({ sectionId, defaultValue, i
           buttonProps: { 'aria-label': 'Insert custom component' }
         }),
       ]}
-      extraCommands={[
-        commands.group([], {
-          name: 'save',
-          groupName: 'save',
-          icon: <Save style={{ fontSize: 12 }} />,
-          execute: onSaveAction,
-          buttonProps: { 'aria-label': 'Save' }
-        })
-      ]}
+      extraCommands={extraCommands}
       style={TextEditorStyle}
     />
-    {
-      submitActions && <Stack direction="row" spacing={2} sx={{ mt: 2 }}>
-        {submitActions.map((buttonProps, index) => <Button key={index} {...buttonProps} />)}
-      </Stack>
-    }
   </Stack>;
 };