FEAT (FRONTEND/UI) - Build Multi-Language Code Editor Interface

[A6dulmalik]

Description

Build the code editor interface with multi-language support (JavaScript, Python, C++, C#) that allows users to write and edit code with syntax highlighting based on the provided design references.

Figma Access
This issue focuses on the code editor component. Code execution and validation will be handled in Issue 4.

Design Reference - Code Section

Design Highlights:

• Dark theme code editor
• Language selector dropdown (JavaScript, Python, C++, C#)
• "Code" tab header
• Syntax highlighting based on selected language
• Line numbers
• Auto-complete features (if supported by editor)
• Responsive height to fit between description and test panels

Scope of Work

1. Editor Library Selection

Recommended: Monaco Editor (Powers VS Code)

• Install: npm install @monaco-editor/react
• Provides built-in syntax highlighting for all required languages
• Built-in theme support (use dark theme)
• IntelliSense and auto-completion

Alternative: CodeMirror 6 (if Monaco is too heavy)

2. Components to Implement

CodeEditorPanel

• Main container for code editor section
• Manages editor state
• Handles language switching
• Positioned in center/right of challenge screen

LanguageSelector

• Dropdown component to select language
• Options: JavaScript, Python, C++, C#
• Updates editor language mode when changed
• Positioned above editor area

CodeEditor

• Wrapper around Monaco Editor
• Dark theme configuration
• Syntax highlighting per language
• Line numbers enabled
• Tab indentation support
• Auto-save to local state

CodeHeader

• "Code" tab label
• Language selector integration
• Matches design styling

3. Language Support Requirements

Each language must:

• Have proper syntax highlighting
• Load appropriate template code
• Support language-specific formatting
• Handle comments correctly

Template Code per Language:

// JavaScript
function reverseWords(sentence) {
  // your code here
}
OR
const reverseWords = (sentence) => {
   //your code here
}

# Python
def reverse_words(sentence):
    # your code here
    pass

// C++
#include <string>
using namespace std;

string reverseWords(string sentence) {
    // your code here
}

// C#
public class Solution {
    public string ReverseWords(string sentence) {
        // your code here
    }
}

4. What NOT to Include

❌ No code execution logic
❌ No test case validation
❌ No submit button functionality
❌ No API calls to backend
❌ No timer integration
❌ No navigation logic

5. State Management

interface EditorState {
  code: string;
  language: 'javascript' | 'python' | 'cpp' | 'csharp';
}

Editor should:

• Accept initial template code as prop
• Expose current code value to parent
• Handle language switching gracefully
• Preserve code when switching (optional: show warning)

6. Props Interface

interface CodeEditorProps {
  initialCode?: string;
  language?: 'javascript' | 'python' | 'cpp' | 'csharp';
  onCodeChange?: (code: string) => void;
  onLanguageChange?: (language: string) => void;
  readOnly?: boolean;
}

Requirements

✅ Integrate Monaco Editor (or CodeMirror)
✅ Support 4 languages with syntax highlighting
✅ Dark theme matching design
✅ Responsive layout
✅ Line numbers visible
✅ Auto-indentation support
✅ Language selector dropdown functional

Acceptance Criteria

• Monaco Editor (or CodeMirror) successfully integrated
• Language selector dropdown renders with 4 options
• Switching language updates syntax highlighting
• Template code loads for each language
• Dark theme matches Figma design
• Line numbers are visible
• Code changes are captured in component state
• Editor is responsive and scrollable
• Tab key works for indentation
• Component exposes code value to parent via callback