Skip to content
Plugin to edit math using (La)TeX (rendered by mathjax) inside draft-js(-editor-plugin). Demo:
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.eslintrc.js
.gitignore
.npmignore
CHANGELOG.md
LICENCE.md
README.md
demo.gif avoid flickering Apr 13, 2017
package.json

README.md

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

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

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

License

MIT

You can’t perform that action at this time.