Forked: https://github.com/efloti/draft-js-mathjax-plugin

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!

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

!demo

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 (
editorState={this.state.editorState}
onChange={this.onChange}
plugins={plugins}
/>
)
}
}
`

Learn more draftjs-plugins

Optional configuration Object

- macros: an object to define mathjax macros. Example:

`js
const mathjaxConfig = {
macros: {
bold: ['{\\bf #1}', 1],
},
}
`

see mathjax doc to find out how to define macros.
- completion (default: 'auto'): 'none' | 'manual' | 'auto'.

If you choose manual, use ctrl- 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. 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