@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

``bash


This library is part of the CS124 monorepo

Install dependencies via Rush

rush update
`

Usage

`typescript
import { MonacoEditor } from '@cs124/monace'

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

Development

$3

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

$3

`bash


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