[Enhancement] Migrate app-language-runner playgrounds (C#/Python/JS) from CodeMirror (@acrodata/code-editor) to Monaco — feature parity #24

New Issue

2026-04-28T23:01:19Z

spikerj commented

2026-04-28 23:01:19 +00:00

Background

Code surfaces today rely on @acrodata/code-editor, wrapping CodeMirror 6 and @codemirror/language-data — not a separate “Codewarrior” product; this migration targets that stack.

Goal

Migrate app-language-runner (spikersoft-angular/libraries/tools/src/components/language-runner/) from CodeMirror-backed code-editor to Monaco Editor, preserving behavioral and UX parity with today’s playgrounds.

Scope

Shared playground used by C#, Python, and JavaScript shells (csharp-runner, python-runner, javascript-runner routers only compose <app-language-runner>).
Single‑file and advanced multi‑file sandbox modes, lesson mode, placeholders, [theme], [lineWrapping], language selector + syntax highlighting.

Feature parity checklist

Syntax highlighting / language IDs aligned with languages we expose today (languages/language inputs, @codemirror/language-data equivalents → Monaco Monarch / built‑in loaders).
Light/dark themes match product expectations (styled for glass/UI shell).
Line wrapping, placeholders, focus/scroll behaviors acceptable on desktop + handset breakpoints.
ngModel / programmatic updates remain reliable for submission, grading, offline flows.
Advanced sandbox: switching active file/tab updates Monaco model without losing unsaved edits; project size behaviors unchanged.
Intro guided tours: stable selectors (data-tour / equivalent) — update selectors if DOM changes.
Performance: bundle footprint documented; acceptable lazy-loading strategy.

References

Existing editor rationale in language-runner.ts (CodeMirror vs Monaco bundle note). Extend or supersede once Monaco lands.

## Background Code surfaces today rely on **`@acrodata/code-editor`**, wrapping **CodeMirror 6** and `@codemirror/language-data` — not a separate “Codewarrior” product; this migration targets that stack. ## Goal Migrate **`app-language-runner`** (`spikersoft-angular/libraries/tools/src/components/language-runner/`) from CodeMirror-backed `code-editor` to **Monaco Editor**, preserving **behavioral and UX parity** with today’s playgrounds. ## Scope - Shared playground used by **C#**, **Python**, and **JavaScript** shells (`csharp-runner`, `python-runner`, `javascript-runner` routers only compose `<app-language-runner>`). - Single‑file and **advanced** multi‑file sandbox modes, lesson mode, placeholders, `[theme]`, `[lineWrapping]`, language selector + syntax highlighting. ## Feature parity checklist - [ ] **Syntax highlighting / language IDs** aligned with languages we expose today (`languages`/`language` inputs, `@codemirror/language-data` equivalents → Monaco Monarch / built‑in loaders). - [ ] **Light/dark themes** match product expectations (styled for glass/UI shell). - [ ] **Line wrapping**, placeholders, focus/scroll behaviors acceptable on desktop + handset breakpoints. - [ ] **`ngModel` / programmatic updates** remain reliable for submission, grading, offline flows. - [ ] **Advanced sandbox**: switching active file/tab updates Monaco model without losing unsaved edits; project size behaviors unchanged. - [ ] **Intro guided tours**: stable selectors (`data-tour` / equivalent) — update selectors if DOM changes. - [ ] **Performance**: bundle footprint documented; acceptable lazy-loading strategy. ## References Existing editor rationale in `language-runner.ts` (CodeMirror vs Monaco bundle note). Extend or supersede once Monaco lands.

spikerj commented

2026-04-28 23:01:31 +00:00

Related component-scoped tickets for the same CodeMirror (@acrodata/code-editor) → Monaco effort:

#25 lib-blockly generated code pane
#26 lib-diagram code panel
#27 lib-tools-json-to-csharp (QuickType)
#28 lib-tools-difference (DiffEditor → Monaco Diff)
#29 lib-csv-to-json
#30 lib-json-to-csv
#31 Clue-for-SQL

Note: Thin shells app-csharp-runner, app-python-runner, app-javascript-runner only compose this issue’s app-language-runner — no separate editor tickets.

Related component-scoped tickets for the **same CodeMirror (@acrodata/code-editor) → Monaco** effort: - #25 **`lib-blockly`** generated code pane - #26 **`lib-diagram`** code panel - #27 **`lib-tools-json-to-csharp` (QuickType)** - #28 **`lib-tools-difference`** (DiffEditor → Monaco Diff) - #29 **`lib-csv-to-json`** - #30 **`lib-json-to-csv`** - #31 **Clue-for-SQL** **Note:** Thin shells `app-csharp-runner`, `app-python-runner`, `app-javascript-runner` only compose this issue’s **`app-language-runner`** — no separate editor tickets.

spikerj closed this issue

2026-05-05 20:11:05 +00:00

spikerj referenced this issue

2026-05-06 03:42:30 +00:00

[Enhancement] JS/TS playground: Prettier-backed Format provider for Monaco #36

spikerj referenced this issue

2026-06-08 21:16:17 +00:00

Bug: Concepts section - inconsistent translation #213

spikerj referenced this issue

2026-06-27 17:40:10 +00:00

Self-service account deletion + personal data export (GDPR-style "delete my account" / "download my data") #266

spikerj referenced this issue