Skip to content
A Katex plugin for DraftJS.
JavaScript CSS HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
scripts
src
stories
.babelrc
.editorconfig
.eslintignore
.eslintrc
.gitignore
.npmignore
CHANGELOG.md
README.md
package-lock.json
package.json
postcss.config.js
webpack.config.js
yarn.lock

README.md

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.

NPM

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});
You can’t perform that action at this time.