letranloc / draft-js-katex-plugin

A Katex plugin for DraftJS.

DraftJS KaTeX Plugin

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

This plugin insert and render LaTeX using KaTeX, modified from TeX example.

• Integrated with Khan/math-input.

Usage

Add MathQuill libs if you want to use MathInput:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.min.js"></script>

Add plugin

import createKaTeXPlugin from 'draft-js-katex-plugin';
import katex from 'katex'

const kaTeXPlugin = createKaTeXPlugin({katex});

const { InsertButton } = kaTeXPlugin;

With MathInput:

import createKaTeXPlugin from 'draft-js-katex-plugin';
import katex from 'katex'
import MathInput from '../src/components/math-input/components/app';


const kaTeXPlugin = createKaTeXPlugin({katex, MathInput});

const { InsertButton } = kaTeXPlugin;

There are more examples in the stories/index.js file.

Configuration options:

Here shown with defaults:

{
    katex, // the katex object or a wrapper defining render() and __parse().

    doneContent: {    
        valid: 'Done',
        invalid: 'Invalid TeX',
    },
    
    MathInput: null, // Sett to the MathInput element to use MathInput
    removeContent: 'Remove',
    theme: {
        // CSS classes, either you define them or they come from the plugin.css import
        saveButton: '',
        removeButton: '',
        invalidButton: '',
        buttons: '',
    }
    // function (string) -> string. 
    translator: null, 
}

Loading katex async

If you want to load katex in the background instead of right away, then you can do this by wrapping the katex object that you pass into the plugin:

//file: asyncKatex.js
let katex = null
const renderQueue = []

System.import(/* webpackChunkName: 'katex' */ 'katex')
  .then(function methodName(module) {
    katex = module.default
  })
  .then(() => {
    console.log('Katex loaded, ', renderQueue)
    if (renderQueue.length) {
      const now = Date.now()
      renderQueue.map(([d, expression, baseNode, options]) => {
        if (now - d < 4000) {
          katex.render(expression, baseNode, options)
        }
      })
    }
  })

export default {
  render: (expression, baseNode, options) => {
    if (katex) {
      return katex.render(expression, baseNode, options)
    }

    renderQueue.push([Date.now(), expression, baseNode, options])
  },
  // parse is only used by this plugin to check syntax validity.
  __parse: (expression, options) => {
    if (katex) {
      return katex.parse(expression, options)
    }
    return null
  }
}

Store this in a separate file and and pass it to the plugin config:

import createKaTeXPlugin from 'draft-js-katex-plugin';
import katex from './asyncKatex'

const kaTeXPlugin = createKaTeXPlugin({katex});