FooterMath

A text field for maths that shows the typeset formula until the reader clicks into it to edit.

@internote/canvas-sdk/reactComponent
On this page
import { FooterMath } from '@internote/canvas-sdk/react';

At rest it is the expression, set by KaTeX. Click or tab into it and the same box becomes what the reader types into, in the same place at the same size; leaving it sets the maths again. There is no second box and no preview environment: a student looking at the row sees x²⁄₄, and editing it is a click.

The conversion is parseToLatex, ordered substitution over the shorthand a student already uses, which is forgiving of half-finished input in a way a parser is not. KaTeX throws on notation that is not finished, so the rendering is wrapped: a formula mid-thought falls back to its own text.

The field is there all the time, laid transparently over the typeset formula, so the press itself lands in it. A field that only mounted after the press — focused from an effect — is one iOS may refuse to raise the keyboard for, since the focus no longer comes from the tap. And it never capitalises or corrects: x^2 is not a sentence.

#Props

Takes no className, style or id.

ariaLabelRequired
The field's accessible name.
string
invalid
Whether to mark the expression as not one the environment can use.
boolean
onChangeRequired
Called on every keystroke while editing, with the new text.
(value: string) => void
placeholder
Shown while the expression is empty.
string
readOnly
Set as maths, but not a field: a locked element is read, not edited.
boolean
valueRequired
The expression as the reader types it (x^2/4), converted to LaTeX for display.
string

Declared in packages/canvas-sdk/src/react/footer-notation.tsx:140.

Last updated