49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import Editor, { type OnMount } from "@monaco-editor/react";
|
|
import { useCallback, useRef } from "react";
|
|
|
|
interface CodeEditorProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
}
|
|
|
|
export function CodeEditor({ value, onChange }: CodeEditorProps) {
|
|
const editorRef = useRef<Parameters<OnMount>[0] | null>(null);
|
|
|
|
const handleEditorMount: OnMount = useCallback((editor) => {
|
|
editorRef.current = editor;
|
|
}, []);
|
|
|
|
const handleChange = useCallback(
|
|
(newValue: string | undefined) => {
|
|
onChange(newValue ?? "");
|
|
},
|
|
[onChange]
|
|
);
|
|
|
|
return (
|
|
<div className="h-full">
|
|
<Editor
|
|
height="100%"
|
|
language="python"
|
|
theme="vs-dark"
|
|
value={value}
|
|
onChange={handleChange}
|
|
onMount={handleEditorMount}
|
|
options={{
|
|
minimap: { enabled: false },
|
|
fontSize: 14,
|
|
lineNumbers: "on",
|
|
scrollBeyondLastLine: false,
|
|
automaticLayout: true,
|
|
tabSize: 4,
|
|
insertSpaces: true,
|
|
wordWrap: "on",
|
|
padding: { top: 12 },
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|