platxa-monaco-config

What this skill does

# Platxa Monaco Configuration

Guide for configuring Monaco editor in the Platxa platform with themes, keybindings, and optimized presets.

## Overview

This skill helps configure Monaco editor settings for the Platxa IDE:

| Category | What You Can Configure |
|----------|----------------------|
| **Editor Behavior** | Font size, tab size, word wrap, cursor style |
| **Visual Settings** | Minimap, scrollbars, line highlighting, bracket colors |
| **Themes** | Built-in themes, custom themes, token colors |
| **Keybindings** | Default keys, Vim mode, Emacs mode, custom bindings |
| **Performance** | Large file optimization, tokenization limits |
| **Accessibility** | Screen reader support, high contrast themes |

## Workflow

When configuring Monaco editor, follow this workflow:

### Step 1: Identify Configuration Need

Determine what you want to configure:
- **Editor behavior** → Use editor options (fontSize, tabSize, wordWrap)
- **Visual appearance** → Use themes and color customization
- **Keyboard shortcuts** → Use keybindings (default, Vim, Emacs)
- **Performance issues** → Use large file optimizations

### Step 2: Choose a Preset or Custom

- **Standard use case**: Apply a preset from Configuration Presets section
- **Custom needs**: Start with a preset, then override specific options

### Step 3: Apply Configuration

```typescript
// Option 1: At creation time
const editor = monaco.editor.create(container, { ...options });

// Option 2: Update existing editor
editor.updateOptions({ fontSize: 16, minimap: { enabled: false } });
```

### Step 4: Verify Changes

Test the configuration:
1. Check visual appearance matches expectations
2. Verify keybindings work correctly
3. Test performance with representative file sizes

## Quick Start

### Apply a Preset

Choose a preset based on your use case:

```typescript
import { defaultEditorOptions } from '@/features/editor/config/editorOptions';

// Use directly or spread and override
const options = {
  ...defaultEditorOptions,
  fontSize: 16,  // Override specific setting
};
```

### Change Theme

```typescript
import * as monaco from 'monaco-editor';

// Built-in themes
monaco.editor.setTheme('vs-dark');  // Dark theme
monaco.editor.setTheme('vs');       // Light theme
monaco.editor.setTheme('hc-black'); // High contrast
```

### Enable Vim Mode

```typescript
import { initVimMode } from 'monaco-vim';

const statusBar = document.getElementById('vim-status');
const vimMode = initVimMode(editor, statusBar);

// To disable: vimMode.dispose();
```

## Configuration Presets

### Default (Platxa)

Optimized for Python/JavaScript development in Platxa:

```typescript
const platxaDefault = {
  fontSize: 14,
  fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
  fontLigatures: true,
  tabSize: 2,
  insertSpaces: true,
  wordWrap: 'off',
  lineNumbers: 'on',
  minimap: { enabled: false },
  scrollBeyondLastLine: false,
  automaticLayout: true,
  bracketPairColorization: { enabled: true },
  cursorBlinking: 'smooth',
  cursorSmoothCaretAnimation: 'on',
  renderWhitespace: 'selection',
  accessibilitySupport: 'auto',
};
```

### Minimal

Distraction-free editing:

```typescript
const minimal = {
  fontSize: 16,
  lineNumbers: 'off',
  minimap: { enabled: false },
  scrollbar: { vertical: 'hidden', horizontal: 'hidden' },
  overviewRulerBorder: false,
  hideCursorInOverviewRuler: true,
  overviewRulerLanes: 0,
  renderLineHighlight: 'none',
  folding: false,
  glyphMargin: false,
  lineDecorationsWidth: 0,
  lineNumbersMinChars: 0,
};
```

### Large File

Performance optimized for files > 1MB:

```typescript
const largeFile = {
  minimap: { enabled: false },
  folding: false,
  wordWrap: 'off',
  renderWhitespace: 'none',
  renderControlCharacters: false,
  quickSuggestions: false,
  suggestOnTriggerCharacters: false,
  maxTokenizationLineLength: 5000,
  stopRenderingLineAfter: 5000,
  largeFileOptimizations: true,
};
```

### Read-Only

For code viewing and diffs:

```typescript
const readOnly = {
  readOnly: true,
  cursorStyle: 'block',
  cursorBlinking: 'solid',
  renderLineHighlight: 'none',
  matchBrackets: 'never',
  selectionHighlight: false,
  occurrencesHighlight: 'off',
};
```

### Accessibility

Screen reader optimized:

```typescript
const accessibility = {
  accessibilitySupport: 'on',
  ariaLabel: 'Code editor - press F1 for accessibility help',
  screenReaderAnnounceInlineSuggestion: true,
  accessibilityPageSize: 20,
  cursorWidth: 3,
  fontSize: 16,
  lineHeight: 1.8,
};
```

### Diff Editor

Side-by-side comparison:

```typescript
const diffEditor = {
  renderSideBySide: true,
  enableSplitViewResizing: true,
  renderOverviewRuler: true,
  ignoreTrimWhitespace: true,
  renderIndicators: true,
  originalEditable: false,
};
```

## Examples

### Example 1: Configure Distraction-Free Mode

**User**: "I want a minimal editor without distractions"

**Response**:

Apply the minimal preset to remove visual clutter:

```typescript
const editor = monaco.editor.create(container, {
  value: content,
  language: 'python',
  theme: 'vs-dark',
  // Minimal preset
  fontSize: 16,
  lineNumbers: 'off',
  minimap: { enabled: false },
  scrollbar: { vertical: 'hidden', horizontal: 'hidden' },
  overviewRulerBorder: false,
  renderLineHighlight: 'none',
  folding: false,
  glyphMargin: false,
  lineDecorationsWidth: 0,
});
```

Toggle back to normal mode by updating options:
```typescript
editor.updateOptions({ lineNumbers: 'on', minimap: { enabled: true } });
```

### Example 2: Enable Vim Keybindings

**User**: "Enable Vim keybindings in Monaco"

**Response**:

1. Install monaco-vim:
```bash
pnpm add monaco-vim
```

2. Initialize after editor creation:
```typescript
import { initVimMode, VimMode } from 'monaco-vim';

// Create status bar element for Vim mode display
const statusBar = document.createElement('div');
statusBar.id = 'vim-status';
container.appendChild(statusBar);

// Initialize Vim mode
const vimMode = initVimMode(editor, statusBar);

// To disable Vim mode
function toggleVim(enabled: boolean) {
  if (enabled) {
    vimMode = initVimMode(editor, statusBar);
  } else {
    vimMode?.dispose();
  }
}
```

Supported Vim commands: Most normal mode, insert mode, visual mode commands. Ex commands are limited.

### Example 3: Create Custom Theme

**User**: "Create a dark theme with purple keywords"

**Response**:

Define and register custom theme:

```typescript
monaco.editor.defineTheme('platxa-purple', {
  base: 'vs-dark',
  inherit: true,
  rules: [
    { token: 'comment', foreground: '#6A9955', fontStyle: 'italic' },
    { token: 'keyword', foreground: '#C792EA' },  // Purple keywords
    { token: 'string', foreground: '#C3E88D' },
    { token: 'number', foreground: '#F78C6C' },
    { token: 'type', foreground: '#FFCB6B' },
    { token: 'function', foreground: '#82AAFF' },
    { token: 'variable', foreground: '#89DDFF' },
    { token: 'operator', foreground: '#89DDFF' },
  ],
  colors: {
    'editor.background': '#0F111A',
    'editor.foreground': '#A6ACCD',
    'editor.lineHighlightBackground': '#1A1C25',
    'editor.selectionBackground': '#717CB450',
    'editorCursor.foreground': '#FFCC00',
    'editorLineNumber.foreground': '#3B3F51',
    'editorLineNumber.activeForeground': '#A6ACCD',
  },
});

// Apply theme
monaco.editor.setTheme('platxa-purple');
```

### Example 4: Optimize for Large Files

**User**: "The editor is slow with large log files"

**Response**:

Large files (>1MB) need optimization to prevent UI freezing:

```typescript
function getEditorOptions(fileSize: number) {
  const isLargeFile = fileSize > 1_000_000; // 1MB threshold

  if (isLargeFile) {
    return {
      // Disable expensive features
      minimap: { enabled: false },
      folding: false,
      wordWrap: 'off',
      renderWhitespace: 'none',
      quickSuggestions: false,

      // Limit tokenization
      maxTokenizationLineLength: 5000,
      stopRenderingLineAfter: 5000,
      largeFileOptimizations: true,