@outclass/draft-js-mathjax-plugin v1.3.6

DraftJS MathJax Plugin

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

This plugin was forked from efloti/draft-js-mathjax-plugin!

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,                                                     
  }

License

MIT