feat: texteditor component
This commit is contained in:
40
app/components/TextEditor/index.tsx
Normal file
40
app/components/TextEditor/index.tsx
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import MonacoEditor, { OnChange } from "@monaco-editor/react";
|
||||||
|
|
||||||
|
interface EditorProps {
|
||||||
|
height?: string;
|
||||||
|
width?: string;
|
||||||
|
theme?: string;
|
||||||
|
language?: string;
|
||||||
|
onChange?: OnChange;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Editor = (props: EditorProps) => {
|
||||||
|
const [code, setCode] = useState<string>('console.log("Hello, Monaco!");');
|
||||||
|
|
||||||
|
const handleEditorChange: OnChange = (value) => {
|
||||||
|
setCode(value || "");
|
||||||
|
};
|
||||||
|
|
||||||
|
const {
|
||||||
|
height = "90vh",
|
||||||
|
width = "100%",
|
||||||
|
theme = "vs-dark",
|
||||||
|
language = "typescript",
|
||||||
|
onChange = handleEditorChange,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<MonacoEditor
|
||||||
|
height={height}
|
||||||
|
width={width}
|
||||||
|
language={language}
|
||||||
|
theme={theme}
|
||||||
|
defaultValue={code}
|
||||||
|
value={code}
|
||||||
|
onChange={onChange}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Editor;
|
||||||
Reference in New Issue
Block a user