feat(frontend): add code editor

2025-05-21 21:48:52 +01:00
parent 82b993b33f
commit 1a6278211d
5 changed files with 1045 additions and 0 deletions
@@ -0,0 +1,48 @@
+"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>
+  );
+}