prosemirror-math

license types

Note: This project is still in development, and there may be breaking changes with each release before a >=1.0.0 version is ready. Please don't hesitate to report issues or make feature requests! Contributions welcome!

Overview

The prosemirror-math package provides schema and plugins for comfortably writing mathematics with ProseMirror. Written in TypeScript, with math rendering handled by KaTeX. You can install the npm package or use this repository as a starting point for your own plugin. The important files in this project are:

Additionally, the docs-src/ contains Aafully-functioning example project that uses webpack generate a static website that includes prosemirror-math and all its dependencies.

Basic Usage (try it yourself!)

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:

edit inline math

Display math supports multiline editing, as shown below:

edit display math

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:

create inline math

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-Enter or navigate away the mouse or arrow keys.

create display math

Math nodes behave like regular text when using the arrow keys or Backspace. You can select, copy, and paste math nodes just like regular text! From within a math node, press Ctrl-Backspace to delete the entire node.

TIP: You can define your own commands with \providecommand{\cmd}{...}!

See the KaTeX documentation for a list of supported LaTeX commands. In the future, prosemirror-math will also accept a custom callback that can be used to invoke alternative renderers like MathJax.

Installation & Setup

Note that prosemirror-math is built on top of ProseMirror, which itself has a steep learning curve. At the very least, you will need to understand Schema and Plugins to integrate prosemirror-math into your project. Start by installing the npm package:

npm install @benrbray/prosemirror-math

CSS

First, make sure you include the CSS files for prosemirror-math and katex on any pages that will need them. They can be found at the following paths:

node_modules/katex/dist/katex.min.css
node_modules/@benrbray/prosemirror-math/style/math.css

If you are using webpack with the HtmlWebpackPlugin and MiniCssExtractPlugin, you might need to include the CSS files like this:

import "@benrbray/prosemirror-math/style/math.css";
import "katex/dist/katex.min.css";

Schema

Add math_inline and math_display nodes to your document schema. The names are important! If you modify the schema, be careful not to change any of the values marked important! below, or you might run into unexpected behavior!

import { Schema } from "prosemirror-model";

let schema = new Schema({
    nodes: {
        doc: {
            content: "block+"
        },
        paragraph: {
            content: "inline*",
            group: "block",
            parseDOM: [{ tag: "p" }],
            toDOM() { return ["p", 0]; }
        },
        math_inline: {               // important!
            group: "inline math",
            content: "text*",        // important!
            inline: true,            // important!
            atom: true,              // important!
            toDOM: () => ["math-inline", { class: "math-node" }, 0],
            parseDOM: [{
                tag: "math-inline"   // important!
            }]
        },
        math_display: {              // important!
            group: "block math",
            content: "text*",        // important!
            atom: true,              // important!
            code: true,              // important!
            toDOM: () => ["math-display", { class: "math-node" }, 0],
            parseDOM: [{
                tag: "math-display"  // important!
            }]
        },
        text: {
            group: "inline"
        }
    }
});

Input Rules

If you want the user to be able to easily add new math nodes by typing $...$ for inline math or $$ followed by a space for block math, you need to create InputRule instances. You can write your own, or use the helper functions provided by prosemirror-math.

CAUTION: Make sure the NodeTypes you provide to each input rule belong to the same schema instance that you pass to your ProseMirror EditorView instance. Otherwise, you'll see strange errors in the console!

import {
    makeBlockMathInputRule, makeInlineMathInputRule,
    REGEX_INLINE_MATH_DOLLARS, REGEX_BLOCK_MATH_DOLLARS
} from "@benrbray/prosemirror-math";

// create input rules (using default regex)
let inlineMathInputRule = makeInlineMathInputRule(REGEX_INLINE_MATH_DOLLARS, editorSchema.nodes.math_inline);
let blockMathInputRule = makeBlockMathInputRule(REGEX_BLOCK_MATH_DOLLARS, editorSchema.nodes.math_display);

Plugins

Choose which plugins you need from the following list, and pass them to your EditorState instance, along with the input rules you created.

Here is the recommended setup:

import { mathPlugin, mathBackspaceCmd, insertMathCmd, mathSerializer } from "@benrbray/prosemirror-math";

// prosemirror imports
import { EditorView } from "prosemirror-view";
import { EditorState, Plugin } from "prosemirror-state";
import { chainCommands, deleteSelection, selectNodeBackward, joinBackward, Command } from "prosemirror-commands";
import { keymap } from "prosemirror-keymap";
import { inputRules } from "prosemirror-inputrules";

// plugins (order matters)
let plugins:Plugin[] = [
    mathPlugin,
    keymap({
        "Mod-Space" : insertMathCmd(schema.nodes.math_inline),
        // modify the default keymap chain for backspace
        "Backspace": chainCommands(deleteSelection, mathBackspaceCmd, joinBackward, selectNodeBackward),
    }),
    inputRules({ rules: [ inlineMathInputRule, blockMathInputRule ] })
];

// create prosemirror state
let state = EditorState.create({
    schema: editorSchema,
    plugins: plugins,
    doc: /* ... */
})

// create prosemirror view
let view = new EditorView(editorElt, {
    state,
    clipboardTextSerializer: (slice) => { return mathSerializer.serializeSlice(slice) },
})

Development

Clone this repository and install the necessary dependencies:

git clone [email protected]:benrbray/prosemirror-math.git
cd prosemirror-math
npm install

If you want to test using the example code, you should also install the dependencies in the docs-src/ folder:

cd docs-src
npm install

From the root directory, you can run the scripts in package.json.