Cell
<Cell> -- one In/Out pair: an editable input over a live read-only <Out> of the result. Renders in light DOM so the nested output inherits the page's MathLive styles.
value is written in the syntax format names (epsil by default, or latex, mathjson, wolfram); in-form picks which editor shows it -- standard (the MathLive field, live on every keystroke), or a plain text field in input (InputForm/Epsil), full (the MathJSON AST as text), wolfram (Wolfram source) or tex (LaTeX), each parsed back on commit (Enter or blur). While one is being typed in, a pause in the typing parses it for a hint -- what is wrong with it, and where -- beside the editor, without evaluating; and LaTeX pasted into one (a math field's copy, or $…$) goes in as that editor's syntax (see clipboard.ts). The In label opens a menu to switch editors -- converting the current value -- and to copy it out.
The cell starts *clean*: expect/planned reach the Out, and any slot="aside" children (badges, alternatives) show at the end of the Out row. The first edit turns it *dirty* -- expect/planned drop, the aside hides, and a reset button appears that restores the original value and clears it. notatio-dirty fires on both transitions; notatio-change fires on every edit, with the result as both Epsil text and MathJSON.
Inside a transcript (a <DynamicModule> ancestor, transcriptHostOf), a cell evaluates only on COMMIT -- Enter or blur -- never on every keystroke: Wolfram evaluates a notebook cell on Shift+Enter, not as you type, since each evaluation advances the shared $Line history (Out(n) would otherwise land on every intermediate keystroke). The standard (MathLive) editor already commits live outside a transcript; inside one it holds the new value in _raw (so the field itself stays responsive) and reflects pending until <In>'s own notatio-commit -- MathLive's native change, on Enter or blur -- lands. The text editors (input/full/wolfram/tex) already commit only on Enter/blur outside a transcript too, so this only changes the standard editor's behavior inside one.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
value | string | "" | The initial input, in the syntax format names. |
format | Syntax | "epsil" | The syntax value is written in. |
inForm attribute in-form | EditForm | "standard" | Which editor shows the In row; its menu can switch this live. |
outForm attribute out-form | string | "standard" | The representation the Out shows; its own menu changes this live. |
evaluate | boolean | true | Evaluate the input rather than only boxing it. On by default. |
box | boolean | false | Box the input without evaluating, so a source Out form shows the expression itself. |
expect | string | "" | A MathJSON value to assert the Out against, while the cell is clean. |
planned | boolean | false | Mark an expect mismatch as a known gap, while the cell is clean. |
env | string | "" | Forwarded to the Out: a preset its picture reduces for, else the page's own. |
elideAbove attribute elide-above | number | 0 | Forwarded to the Out: describe a long List result rather than typeset it. |
plot | boolean | false | Forwarded to the Out: also report the substituted-but-unevaluated input. |
bind | string | "" | Pin the standard editor to a binding, forwarded to <In>: the symbol name and its \coloneqq become fixed chrome, and only the value can be edited. A page *about* p keeps a p bound to something, whatever the reader types into it. |
domain | string | "" | The domain asserted for bind (integer, real, complex, ...); see notatio-in. |
dirty | boolean | false | Set once the reader has made an edit; reflected so a stylesheet can key on it.reflects |
pending | boolean | false | Set while an edit is held back waiting for commit (inside a transcript, the standard editor between a keystroke and the next Enter/blur); reflected so a stylesheet can dim the now-stale Out.reflects |
As a web component
Plain custom elements, no framework required: import @enumeratio/frontend for the side effect and write <notatio-cell> in any HTML. Attributes are kebab-case and always strings; the props table above names each one's attribute where it differs from its prop.
Settable only as a JS property, not an attribute -- resolveHead, prerendered, provisional, liveValue: bind with :resolveHead.prop="…" directly on the tag.