# draft-js-mathjax-plugin

> Math editing support for DraftJS Plugins Editor

Latest version **1.3.4** (published 2017-05-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install draft-js-mathjax-plugin
pnpm add draft-js-mathjax-plugin
yarn add draft-js-mathjax-plugin
bun add draft-js-mathjax-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.4 |
| Published | 2017-05-09 |
| First published | 2017-04-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Etienne Florent |
| Maintainers | efloti |
| Keywords | editor, wysiwyg, math, teX, mathjax, draft, react, ux, components, widget, react-component |

## Links

- npm: https://www.npmjs.com/package/draft-js-mathjax-plugin
- Repository: https://github.com/efloti/draft-js-mathjax-plugin
- Homepage: https://github.com/efloti/draft-js-mathjax-plugin#readme
- Issues: https://github.com/efloti/draft-js-mathjax-plugin/issues
- npm.io page: https://npm.io/package/draft-js-mathjax-plugin

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 1.3.4 (latest) — 2017-05-09
- 1.3.3 — 2017-04-26
- 1.3.2 — 2017-04-20
- 1.3.1 — 2017-04-19
- 1.3.0 — 2017-04-19
- 1.2.0 — 2017-04-15
- 1.1.1 — 2017-04-13
- 1.1.0 — 2017-04-13
- 1.0.3 — 2017-04-13
- 1.0.2 — 2017-04-13
- 1.0.1 — 2017-04-11
- 1.0.0 — 2017-04-11

## README

# DraftJS MathJax Plugin

*This is a plugin for the `draft-js-plugins-editor`.*

This plugin allows you to edit math rendered by mathjax. [Give it a try!](https://efloti.github.io/draft-js-mathjax-plugin/)

It uses the traditional `$` key to insert inline math and `CTRL+M` for block one. (Type `\$` to insert the `$` character)

![demo](https://github.com/efloti/draft-js-mathjax-plugin/raw/master/demo.gif)

## Installation

```
npm install draft-js-mathjax-plugin --save
```

## Usage

```js
import React, { Component } from 'react'
import { EditorState } from 'draft-js'
import Editor from 'draft-js-plugins-editor'
import createMathjaxPlugin from 'draft-js-mathjax-plugin'

const mathjaxPlugin = createMathjaxPlugin(/* optional configuration object */)

const plugins = [
  mathjaxPlugin,
]

export default class MyEditor extends Component {

  state = {
    editorState: EditorState.createEmpty(),
  }

  onChange = (editorState) => {
    this.setState({
      editorState,
    })
  }

  render() {
    return (
      <Editor
        editorState={this.state.editorState}
        onChange={this.onChange}
        plugins={plugins}
      />
    )
  }
}
```

Learn more [draftjs-plugins](https://github.com/draft-js-plugins/draft-js-plugins)

## Optional configuration Object

  - `macros`: an object to define mathjax macros. Example:
  
 ```js
  const mathjaxConfig = {
    macros: {
      bold: ['{\\bf #1}', 1],
    },
  }
 ```
  
  see [mathjax doc](http://docs.mathjax.org/en/latest/tex.html?highlight=macros#defining-tex-macros) to find out how to define macros.
  - `completion` (default: `'auto'`): `'none' | 'manual' | 'auto'`.
  
  If you choose `manual`, use `ctrl-<space>` to launch completion about the current tex command (if any).
  
  Use (`Shift`)`Tab` to see each possible completion in turn.
  - `script` (default: `'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js'`): 
  
  url to load mathjax from the plugin
  - `mathjaxConfig`: see [mathjax configuration object](http://docs.mathjax.org/en/latest/options/index.html). The default is:
  
  ```js
  {                                                        
    jax: ['input/TeX', 'output/CommonHTML'],                                       
    TeX: {                                                                         
      extensions: ['autoload-all.js'],                                             
    },                                                                             
    messageStyles: 'none',                                                         
    showProcessingMessages: false,                                                 
    showMathMenu: false,                                                           
    showMathMenuMSIE: false,                                                       
    preview: 'none',                                                               
    delayStartupTypeset: true,                                                     
  }
  ```

## License

MIT

---
_Source: https://npm.io/package/draft-js-mathjax-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._