---
epic: 9
story: 9.2
title: "CodeMirror 6 Editor"
status: draft
---

## Epic 9 — Web App (React + WASM)
**Goal:** Zero-install web experience with real-time collaboration.

### Story 9.2: CodeMirror 6 Editor

As a web user,
I want a rich text editor with CalcPad syntax highlighting and inline answers,
So that I have a polished, responsive editing experience in the browser.

**Acceptance Criteria:**

**Given** the CodeMirror 6 editor is loaded
**When** a user types CalcPad syntax (numbers, units, operators, variables, functions, comments, headers)
**Then** each token type is highlighted with distinct, theme-appropriate colors
**And** the highlighting is provided by a custom CodeMirror 6 language extension

**Given** the editor is displaying a CalcPad sheet
**When** a line produces a computed result
**Then** the answer is displayed in a custom gutter or right-aligned overlay column
**And** the answer column is visually distinct from the input column

**Given** a user is typing in the editor
**When** they pause or a keystroke occurs
**Then** the sheet is re-evaluated after a 50ms debounce period
**And** the answer column updates in place without full page re-render

**Given** a line contains a syntax error or invalid expression
**When** the evaluation runs
**Then** the error is indicated inline (e.g., red underline or gutter marker)
**And** the answer column shows an error indicator or remains blank for that line