prosemirror-math

Rendering math expressions in ProseMirror.

Installation

npm install prosemirror-math

Usage

Node specs

mathBlockSpec and mathInlineSpec are NodeSpec objects that you can add to your schema.

import { mathBlockSpec, mathInlineSpec } from 'prosemirror-math'
import { Schema } from 'prosemirror-model'

const schema = new Schema({
  nodes: {
    doc: { content: 'block+' },
    paragraph: {
      content: 'inline*',
      group: 'block',
      parseDOM: [{ tag: 'p' }],
      toDOM: () => ['p', 0],
    },
    text: { group: 'inline' },
    mathBlock: { ...mathBlockSpec },
    mathInline: { ...mathInlineSpec },
  },
})

Node views

createMathBlockView and createMathInlineView create NodeView instances with a source editor and a rendered display area. You provide your own math rendering function (e.g. using Temml or KaTeX).

import { createMathBlockView, createMathInlineView } from 'prosemirror-math'
import { EditorView } from 'prosemirror-view'
import Temml from 'temml'

const view = new EditorView(document.body, {
  state,
  nodeViews: {
    mathBlock: (node, view, getPos, decorations) =>
      createMathBlockView(
        (text, element) => {
          Temml.render(text, element, { displayMode: true })
        },
        node,
        decorations,
      ),
    mathInline: (node, view, getPos, decorations) =>
      createMathInlineView(
        (text, element) => {
          Temml.render(text, element, { displayMode: false })
        },
        node,
        decorations,
      ),
  },
})

Input rules

createMathInlineInputRule creates a ProseMirror InputRule that converts $...$ or $$...$$ into an inline math node.

import { inputRules } from 'prosemirror-inputrules'
import { createMathInlineInputRule } from 'prosemirror-math'

const plugin = inputRules({
  rules: [createMathInlineInputRule('mathInline')],
})

Enter rule

mathBlockEnterRule is an EnterRule that converts a paragraph containing $$ into a math block when Enter is pressed.

import { createEnterRulePlugin } from 'prosemirror-enter-rules'
import { mathBlockEnterRule } from 'prosemirror-math'

const plugin = createEnterRulePlugin({
  rules: [mathBlockEnterRule],
})

Cursor inside plugin

createCursorInsidePlugin adds a prosemirror-math-head-inside CSS class to math nodes when the cursor is inside them, useful for styling the active math node.

import { createCursorInsidePlugin } from 'prosemirror-math'

const plugin = createCursorInsidePlugin()

API

API Reference

License

MIT