A world-class math input for the web
pulljosh.com
1Use cases to account for:
2
3- Typing math expressions
4- Invalid and incomplete expressions
5 - Empty slots (like an exponent with nothing typed in it yet)
6 - Unpaired brakets
7- Live editing/multiplayer (CRDT or OT)
8- Editable/static
9 - Fully editable input
10 - Fully static input
11 - Editable slot embedded within static
12 - Deeper nesting–editable within static within editable...
13- Syntax highlighting
14- Plugins (allow new types of things to be defined within the AST as a plugin; for example, a new operator or the concept of matrices)
15- Programmatic edits being performed without losing cursor position & focus state
16- Embedding non-math elements within math (such as a plain text input, an image, a footnote marker, an emoji, etc)
17- Use within multiple component systems (React/Svelte/Vue/etc) or without one
18
19Design decisions:
20
21- Use plugins to define...
22 a. Types of nodes in the AST
23 b. How to respond to keyboard events (or maybe how to handle operations; can plugins define new types of operations?)
24 c. Rules about what nodes are allowed to contain
25 d. How to render/display output (perhaps in a constrained way to maintain consistency–maybe the plugin generates some representation of what to display, but does not directly touch the DOM)
26 e. Post-processing that happens between completion of AST and render time (eg. syntax highlighting, custom syntax highlighting for a specific use case or based on external knowledge)
27 f. Styling (allow styles to be fully customized by a plugin, including performing logic and then styling based on that–see syntax highlighting)
28 g. Styling & appearance of cursors/selections
29- Define in the core...
30 - Accepting keyboard events using a hidden input
31 - What a "location" is and how that enables cursors/ranges
32- Explicitly encode editing events as operations
33 - Keyboard event --> operation --> updated state & focus/cursor
34 - Handle multiplayer/syncing of operations
35- Minimal dependencies; no reliance on a component library (but provide thin wrapper libraries in many component systems)