Spaces:
Running
Running
File size: 1,618 Bytes
b42dfef |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
'use client';
import { useEffect, useRef } from 'react';
import Editor from '@monaco-editor/react';
interface CodeEditorProps {
code: string;
language: string;
onChange?: (value: string) => void;
readOnly?: boolean;
}
export default function CodeEditor({ code, language, onChange, readOnly = false }: CodeEditorProps) {
const editorRef = useRef<any>(null);
// Map our language names to Monaco language IDs
const getMonacoLanguage = (lang: string): string => {
const languageMap: Record<string, string> = {
'html': 'html',
'gradio': 'python',
'streamlit': 'python',
'transformers.js': 'javascript',
'react': 'typescript',
'comfyui': 'json',
};
return languageMap[lang] || 'plaintext';
};
const handleEditorDidMount = (editor: any) => {
editorRef.current = editor;
};
return (
<div className="h-full overflow-hidden">
<Editor
height="100%"
language={getMonacoLanguage(language)}
value={code}
onChange={(value) => onChange && onChange(value || '')}
theme="vs-dark"
options={{
readOnly,
minimap: { enabled: true },
fontSize: 14,
fontFamily: "'SF Mono', 'JetBrains Mono', 'Menlo', 'Monaco', 'Courier New', monospace",
wordWrap: 'on',
lineNumbers: 'on',
scrollBeyondLastLine: false,
automaticLayout: true,
tabSize: 2,
padding: { top: 16, bottom: 16 },
lineHeight: 22,
letterSpacing: 0.5,
}}
onMount={handleEditorDidMount}
/>
</div>
);
}
|