@cs124/monace

Monaco editor wrapper for code editing in the CS124 platform.

Overview

This library provides:

• React wrapper for Monaco Editor
• CS124-specific editor configurations
• Syntax highlighting for Java and Kotlin
• Code completion and IntelliSense
• Integration with CS124 coding environments

Installation

# This library is part of the CS124 monorepo
# Install dependencies via Rush
rush update

Usage

import { MonacoEditor } from '@cs124/monace'

// Use in React components
<MonacoEditor
  language="java"
  value={code}
  onChange={setCode}
  theme="cs124-dark"
  options={{
    minimap: { enabled: false },
    lineNumbers: 'on',
    fontSize: 14
  }}
/>

Development

Prerequisites

• Node.js 22.18.0
• Rush (for monorepo management)
• React 19.x

Commands

# Build the library
rushx build

# Run quality checks
rushx check

# Format code
rushx prettier

# Lint code
rushx eslint

# Type check
rushx tsc

# Check for unused dependencies
rushx depcheck

Project Structure

lib/monace/
├── src/
│   └── index.ts         # Monaco editor wrapper
├── dist/                # Built output (generated)
├── package.json         # Dependencies and scripts
├── tsconfig.json        # TypeScript configuration
└── tsconfig.build.json  # Build-specific TypeScript config

Features

• Monaco Integration: Full Monaco Editor functionality
• Language Support: Java and Kotlin syntax highlighting
• Themes: CS124-specific editor themes
• Code Completion: IntelliSense and autocomplete
• Customizable: Extensive configuration options
• React Integration: Clean React component interface

Technology Stack

• Language: TypeScript (ES2019 target)
• UI Framework: React 19.x
• Editor: Monaco Editor
• Build: TypeScript compiler

Editor Features

• Syntax highlighting for Java and Kotlin
• Code folding and formatting
• Find and replace functionality
• Multiple cursor support
• Keyboard shortcuts
• Accessibility support

Contributing

1. Always run rushx check before committing
2. Follow existing code conventions
3. Use TypeScript for type safety
4. Test with both Java and Kotlin code
5. Ensure accessibility compliance