scripting added

frontend/src/components/PythonEditor.tsx

@@ -0,0 +1,54 @@
+import Prism from 'prismjs';
+import 'prismjs/components/prism-python';
+import 'prismjs/themes/prism.css';
+import { useCallback, useMemo } from 'react';
+import Editor from 'react-simple-code-editor';
+
+// Props for the editor
+export type PythonEditorProps = {
+  value: string;
+  onChange: (code: string) => void;
+  readOnly?: boolean;
+  className?: string;
+  height?: string | number; // e.g. '200px' or 200
+};
+
+export default function PythonEditor({
+  value,
+  onChange,
+  readOnly = false,
+  height = 480,
+  className = '',
+}: PythonEditorProps) {
+  const highlight = useCallback((code: string) => {
+    try {
+      return Prism.highlight(code, Prism.languages.python, 'python');
+    } catch (e) {
+      return code;
+    }
+  }, []);
+
+  const editorStyle = useMemo(
+    () => ({
+      fontFamily: '"JetBrains Mono", "Fira Code", monospace',
+      fontSize: 14,
+      height: typeof height === 'number' ? `${height}px` : height,
+    }),
+    [height],
+  );
+
+  return (
+    <div className={`python-editor ${className}`}>
+      <Editor
+        value={value}
+        onValueChange={(code) => onChange(code)}
+        highlight={highlight}
+        padding={12}
+        preClassName="language-python"
+        textareaId="python-editor"
+        style={editorStyle}
+        readOnly={readOnly}
+      />
+    </div>
+  );
+}