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

Co-authored-by: Ichirinko <1621543655@qq.com>
Reviewed-on: PostGuard/Canon#45
This commit is contained in:
jackfiled 2024-04-21 11:50:23 +08:00
parent d09460edfe
commit 910049f557
5 changed files with 35 additions and 23 deletions

View File

@ -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"
},

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View File

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

View File

@ -1,5 +1,5 @@
import {TextField} from "@mui/material";
import {CSSProperties, useState} from "react";
import MonacoEditor from "react-monaco-editor";
// @ts-expect-error ...
@ -8,8 +8,7 @@ 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",
}

View File

@ -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>