Professional code editor powered by Monaco Editor (same engine as VS Code) with full IntelliSense, syntax highlighting, and advanced editing features.
- Supported Languages: Python, JavaScript, Java, C++, JSON, HTML, CSS, Markdown, and 50+ more
- Theme: VS Code Dark theme
- Auto-detection: Detects language from file extension
- Real-time code completion
- Parameter hints
- Quick info on hover
- Auto-import suggestions
- Go to Definition (F12)
- Find All References (Shift+F12)
- Peek Definition (Alt+F12)
- Symbol search (Ctrl+Shift+O)
- Multi-cursor: Alt+Click or Ctrl+Alt+Up/Down
- Find & Replace: Ctrl+F / Ctrl+H
- Code folding: Click gutter or Ctrl+Shift+[
- Auto-indentation: Automatic code formatting
- Bracket matching: Highlights matching brackets
- Side-by-side editing
- Compare files
- Drag & drop files between editors
- Independent scroll
// Create new file
File Explorer → Right-click → New File
// Open existing file
Click file in File Explorer
// Save file
Ctrl+S (Windows/Linux)
Cmd+S (Mac)
// Close file
Click × on tab or Ctrl+W| Action | Windows/Linux | Mac |
|---|---|---|
| Save | Ctrl+S | Cmd+S |
| Find | Ctrl+F | Cmd+F |
| Replace | Ctrl+H | Cmd+H |
| Comment | Ctrl+/ | Cmd+/ |
| Format | Shift+Alt+F | Shift+Option+F |
| Command Palette | F1 | F1 |
| Go to Line | Ctrl+G | Cmd+G |
- Location:
frontend/src/components/EnhancedMonacoEditor.jsx - Library:
@monaco-editor/reactv4.6.0 - Engine: Monaco Editor v0.44.0
{
theme: 'vs-dark',
automaticLayout: true,
fontSize: 14,
minimap: { enabled: true },
scrollBeyondLastLine: false,
wordWrap: 'on',
tabSize: 2,
insertSpaces: true
}// Auto-detection mapping
const languageMap = {
'.py': 'python',
'.js': 'javascript',
'.jsx': 'javascript',
'.java': 'java',
'.cpp': 'cpp',
'.c': 'c',
'.html': 'html',
'.css': 'css',
'.json': 'json',
'.md': 'markdown'
};# Type 'imp' and press Ctrl+Space
import <cursor> # Auto-suggests: math, os, sys, etc.// Real-time error highlighting
const x = 10
x = 20 // Error: Cannot assign to 'x' because it is a constantpublic class Main { // Click [-] to fold
public static void main(String[] args) {
// Method body
}
}- Auto-refresh: Files reload when changed externally
- Debouncing: 300ms delay to prevent rapid reloads
- Status indicator: Shows when file is reloading
// Open split editor
1. Click Split Editor button
2. Drag file to split pane
3. Edit both files simultaneously- Inline completion: AI suggests code as you type
- Code explanation: Select code → Right-click → Explain
- Refactoring: AI-powered improvement suggestions
// Edit in frontend/src/components/EnhancedMonacoEditor.jsx
<Editor
theme="vs-dark" // Options: 'vs-dark', 'vs-light', 'hc-black'
// ... other props
/>options={{
fontSize: 16, // Default: 14
fontFamily: 'Consolas, "Courier New", monospace'
}}options={{
minimap: {
enabled: false // Hide minimap
}
}}Solution: Check browser console for errors, ensure Monaco CDN is accessible
Solution: Verify file extension is recognized, check language mapping
Solution: Press Ctrl+Space manually, ensure language server is active