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": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-hook-form": "^7.51.2", "react-hook-form": "^7.51.2",
"react-monaco-editor": "^0.55.0",
"react-photo-view": "^1.2.4", "react-photo-view": "^1.2.4",
"react-router-dom": "^6.22.3" "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: "", compiledCode: "",
sourceCode: "", sourceCode: "",
id: "", id: "",
imageAddress: "" imageAddress: "pic/uncompiled.png"
}); });
const handleValueChange = (value: string) => { const handleValueChange = (value: string) => {
setInputValue(value); setInputValue(value);

View File

@ -1,5 +1,5 @@
import {TextField} from "@mui/material";
import {CSSProperties, useState} from "react"; import {CSSProperties, useState} from "react";
import MonacoEditor from "react-monaco-editor";
// @ts-expect-error ... // @ts-expect-error ...
@ -8,8 +8,7 @@ export function InputField({ onValueChange }) {
const [inputValue, setInputValue] = useState(''); const [inputValue, setInputValue] = useState('');
// @ts-expect-error ... // @ts-expect-error ...
const handleChange = (e) => { const handleChange = (newValue) => {
const newValue = e.target.value;
setInputValue(newValue); setInputValue(newValue);
onValueChange(newValue); onValueChange(newValue);
}; };
@ -17,21 +16,19 @@ export function InputField({ onValueChange }) {
return <> return <>
<div className={"input-field"} style={inputFieldClassCss}> <div className={"input-field"} style={inputFieldClassCss}>
<TextField <div style={{
id="outlined-textarea"
label="Pascal Code"
rows={24}
multiline
style={
{
width: "100%", width: "100%",
height: "100%" height: "100%",
} border: "0.1rem solid #1976d2"
} }}>
value={inputValue} <MonacoEditor
onChange={handleChange} onChange={handleChange}
language="javascript"
theme="twilight"
value={inputValue}
/> />
</div> </div>
</div>
</> </>
} }
@ -39,5 +36,5 @@ const inputFieldClassCss: CSSProperties = {
width: "100%", width: "100%",
height: "100%", height: "100%",
padding: "5% 5%", 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 ... // @ts-expect-error ...
export function OutputField({imgPath}) { export function OutputField({imgPath}) {
return <> return <>
<div className={"output-field"} style={outputFieldClassCss}> <div className={"output-field"} style={outputFieldClassCss}>
<PhotoProvider> <PhotoProvider>
<PhotoView key={1} src={imgPath}> <PhotoView key={1} src={imgPath}>
{imgPath == "pic/uncompiled.png" ?
<img src={imgPath} <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=""/> alt=""/>
}
</PhotoView> </PhotoView>
</PhotoProvider> </PhotoProvider>
</div> </div>