feat: 更换了更好看的编辑器 (#45)

Co-authored-by: Ichirinko <1621543655@qq.com>
Reviewed-on: PostGuard/Canon#45

Canon.Server/client-app/package.json

@@ -20,6 +20,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.2",
+    "react-monaco-editor": "^0.55.0",
     "react-photo-view": "^1.2.4",
     "react-router-dom": "^6.22.3"
   },

Canon.Server/client-app/src/Pages/Index.tsx

@@ -21,7 +21,7 @@ export function Index() {
         compiledCode: "",
         sourceCode: "",
         id: "",
-        imageAddress: ""
+        imageAddress: "pic/uncompiled.png"
     });
     const handleValueChange = (value: string) => {
         setInputValue(value);

Canon.Server/client-app/src/Pages/InputField.tsx

@@ -1,15 +1,14 @@
-import {TextField} from "@mui/material";
 import {CSSProperties, useState} from "react";
+import MonacoEditor from "react-monaco-editor";
 
 
 // @ts-expect-error ...
-export function InputField({ onValueChange }) {
+export function InputField({onValueChange}) {
 
     const [inputValue, setInputValue] = useState('');
 
     // @ts-expect-error ...
-    const handleChange = (e) => {
-        const newValue = e.target.value;
+    const handleChange = (newValue) => {
         setInputValue(newValue);
         onValueChange(newValue);
     };
@@ -17,21 +16,19 @@ export function InputField({ onValueChange }) {
 
     return <>
         <div className={"input-field"} style={inputFieldClassCss}>
-            <TextField
-                id="outlined-textarea"
-                label="Pascal Code"
-                rows={24}
-                multiline
-                style={
-                    {
+            <div style={{
                 width: "100%",
-                        height: "100%"
-                    }
-                }
-                value={inputValue}
+                height: "100%",
+                border: "0.1rem solid #1976d2"
+            }}>
+                <MonacoEditor
                     onChange={handleChange}
+                    language="javascript"
+                    theme="twilight"
+                    value={inputValue}
                 />
             </div>
+        </div>
     </>
 }
 
@@ -39,5 +36,5 @@ const inputFieldClassCss: CSSProperties = {
     width: "100%",
     height: "100%",
     padding: "5% 5%",
-    boxSizing: "border-box"
+    boxSizing: "border-box",
 }

Canon.Server/client-app/src/Pages/OutputField.tsx

@@ -4,13 +4,27 @@ import {PhotoProvider, PhotoView} from "react-photo-view";
 
 // @ts-expect-error ...
 export function OutputField({imgPath}) {
+
     return <>
         <div className={"output-field"} style={outputFieldClassCss}>
             <PhotoProvider>
                 <PhotoView key={1} src={imgPath}>
+                    {imgPath == "pic/uncompiled.png" ?
                         <img src={imgPath}
-                             style={{ objectFit: 'cover' ,width:"100%",height:"100%" }}
+                             style={{
+                                 width: "100%",
+                                 height: "auto"
+                             }}
+                             alt=""/> :
+                        <img src={imgPath}
+                             style={{
+                                 objectFit: 'cover',
+                                 width: "100%",
+                                 height: "100%"
+                             }}
                              alt=""/>
+                    }
+
                 </PhotoView>
             </PhotoProvider>
         </div>