Description

Implement the CodeEditor component using CodeMirror v6 for syntax-highlighted code editing.

Requirements

• Use CodeMirror v6 with edge-runtime compatible configuration
• Support all languages listed in constants (JavaScript, TypeScript, Python, etc.)
• Theme switching (light/dark) that matches the app theme
• Line numbers, syntax highlighting, and basic editing features
• Read-only mode support
• Proper TypeScript types
• Edge-runtime compatible (no Node.js dependencies)
• CRITICAL: No console.log or debugging output (security requirement)
• Must handle large files efficiently (up to 500KB per file limit)

Acceptance Criteria

• CodeEditor component renders with syntax highlighting
• Supports all configured languages
• Theme switches correctly with app theme
• Read-only mode works properly
• Component is fully typed
• Works in edge runtime environment
• Proper error handling for unsupported features
• No console logging of file contents or sensitive data
• Performance tested with 500KB files
• Accessible with screen readers
• Keyboard navigation fully supported

Technical Notes

• Use @codemirror/view and @codemirror/state
• Implement custom theme that matches our design tokens
• Consider bundle size optimization
• Must work with Next.js edge runtime
• Use Web Worker for large file parsing if needed
• Implement virtual scrolling for performance
• Follow CodeMirror v6 best practices for edge runtime

Security Considerations

• Never log file contents to console
• Sanitize any user input before rendering
• Ensure no XSS vulnerabilities in syntax highlighting

Related

• Depends on Create design tokens system for theming #57 (Design tokens)
• Required by Implement FileEditor component for single file editing #55 (MultiFileEditor component)
• Part of Phase 4 UI Components