51 lines
1.0 KiB
TypeScript
51 lines
1.0 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import MonacoEditor, { OnChange } from "@monaco-editor/react";
|
|
|
|
interface EditorProps {
|
|
height?: string;
|
|
width?: string;
|
|
theme?: string;
|
|
language?: string;
|
|
code?: string;
|
|
onChange?: OnChange;
|
|
}
|
|
|
|
const Editor = (props: EditorProps) => {
|
|
const [code, setCode] = useState<string>(
|
|
props.code || 'console.log("Hello, Monaco!");'
|
|
);
|
|
|
|
const handleEditorChange: OnChange = (value) => {
|
|
setCode(value || "");
|
|
};
|
|
|
|
const {
|
|
height = "90vh",
|
|
width = "100%",
|
|
theme = "vs-dark",
|
|
language = "typescript",
|
|
code: _code = code, // z props, jeśli jest dostępne
|
|
onChange = handleEditorChange,
|
|
} = props;
|
|
|
|
// Efekt do synchronizacji props.code z wewnętrznym stanem code
|
|
useEffect(() => {
|
|
if (_code !== undefined) {
|
|
setCode(_code);
|
|
}
|
|
}, [_code]);
|
|
|
|
return (
|
|
<MonacoEditor
|
|
height={height}
|
|
width={width}
|
|
language={language}
|
|
theme={theme}
|
|
value={code}
|
|
onChange={onChange}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default Editor;
|