38 lines
1.4 KiB
Markdown
38 lines
1.4 KiB
Markdown
---
|
|
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
|