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)

Installation

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

Usage

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

Optional configuration Object

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

 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-<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. The default is:

{                                                        
  jax: ['input/TeX', 'output/CommonHTML'],                                       
  TeX: {                                                                         
    extensions: ['autoload-all.js'],                                             
  },                                                                             
  messageStyles: 'none',                                                         
  showProcessingMessages: false,                                                 
  showMathMenu: false,                                                           
  showMathMenuMSIE: false,                                                       
  preview: 'none',                                                               
  delayStartupTypeset: true,                                                     
}

• MathJax Third-party Extensions:

  MathJax can load extensions (and configurations) from arbitrary locations. This allows authors and developers to easily integrate custom code. see MathJax Third-party Extensions

]

License

MIT