# prosemirror-math

[![NPM version](https://img.shields.io/npm/v/prosemirror-math?color=a1b858&label=)](https://www.npmjs.com/package/prosemirror-math)

Rendering math expressions in [ProseMirror](https://prosemirror.net/).

## Installation

```bash
npm install prosemirror-math
```

<!-- TODO: Add live demo link -->

## Usage

### Node specs

`mathBlockSpec` and `mathInlineSpec` are [NodeSpec](https://prosemirror.net/docs/ref/#model.NodeSpec) objects that you can add to your schema.

```ts
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](https://prosemirror.net/docs/ref/#view.NodeView) instances with a source editor and a rendered display area. You provide your own math rendering function (e.g. using [Temml](https://temml.org/) or [KaTeX](https://katex.org/)).

```ts
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](https://prosemirror.net/docs/ref/#inputrules.InputRule) that converts `$...$` or `$$...$$` into an inline math node.

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

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

### Enter rule

`mathBlockEnterRule` is an [EnterRule](https://www.npmjs.com/package/prosemirror-enter-rules) that converts a paragraph containing `$$` into a math block when Enter is pressed.

```ts
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.

```ts
import { createCursorInsidePlugin } from 'prosemirror-math'

const plugin = createCursorInsidePlugin()
```

## API

[API Reference](https://npmx.dev/package-docs/prosemirror-math)

## License

MIT