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