prosemirror-math

Overview

This project provides schema and plugins for writing mathematics using ProseMirror. Written in TypeScript, with math rendering handled by KaTeX. Bundle locally with parcel index.html.

The important files in this project are:

• src/math-schema.ts: A minimal ProseMirror schema supporting inline and display math nodes.
• src/math-nodeview.ts: A NodeView responsible for rendering and editing math nodes.
• style/math.css: Contains all necessary styling for math nodes to display correctly. This file can easily be modified to achieve your desired appearance.

To test locally, clone the repository and run

> npm install
> npm run dev

A local development server should become available at http://localhost:1234.

Examples

Unlike other editors, this plugin treats math as part of the text itself, rather than as an "atom" that can only be edited through a dialog box. For example, inline math nodes can be edited directly by bringing the cursor inside of them:

Display math supports multiline editing, as shown below:

To create a new math expression, simply enclose LaTeX math notation in dollar signs, like $x+y=5$. When you finish typing, a new math node will be automatically created:

To start a display math block, create a blank line and type $$ followed by a space. A multiline editor will appear. To exit the block, press Ctrl-Space or navigate away the mouse or arrow keys.

Usage

See the full example in src/index.ts. At a minimum, you need to include:

1. The math_inline and math_display schema found in src/math-schema.ts
2. The mathPlugin ProseMirror plugin found in src/math-plugin.ts

There are also several optional features you can enable:

3. (work in progress) Use mathBackspace to backspace "into" a math node, rather than deleting the entire node.
4. (work in progress--may be quite slow!) Use the mathSelectPlugin to make math node selections less visually jarring.
5. Use mathInputRules to automatically create new math blocks when typing:
   • Create a new inline math node by typing a dollar-sign-delimited expression like $\int_a^b f(x) dx$ followed by a space.
   • Create a new block math node by typing $$ followed by a space.

TODO

• [ ] Encapsulate available math plugins to an options object passed on initialization
• [ ] Wrap nodeViews + katexMacros as a ProseMirror plugin object
• [ ] Test in FireFox, Safari, Edge
• [ ] Smart backspace for block math
• [ ] Delete empty math block on backspace
• [ ] Support a render callback function, allowing use of MathJax / MathLive instead of KaTeX
• [ ] Write as many tests as possible