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});

draft-js-katex-plugin's Issues

Edits in Tex block can only be saved internally

I'm currently using this plugin for a custom editor. I realized that if changes are made in the Tex block and I save a higher level component, the changes made are lost. This is because I cannot hook into the save method within this plugin.

Willing to work on a solution if this repo is being maintained.

Typescript Refactor

Hi guys, are you open to a PR that refactor this library to use Typescript?

Best regards and hope to hear from you soon.

Time to release 1.2.0?

Hi, do you think we can release the current master as 1.2.0?

this.updater.enqueueCallback is not a function

After clicking the textarea popup inserted by the demo button I get this:

this.updater.enqueueCallback is not a function
    at TeXBlock.ReactComponent.setState (ReactBaseClasses.js:66)
    at TeXBlock._this.onClick (TeXBlock.js:48)

    "draft-js": "^0.10.1",
    "draft-js-katex-plugin": "^1.0.0",
    "draft-js-plugins-editor": "^2.0.0-rc5",
    "react": "^16.0.0-beta.5",

Formula render in Chrome

In the demo, formula is rendered without over symbol in Chrome. It didn't happen in Firefox.

instead of [firefox]

Keep a light version

Hi, a problem with the latest release is that it is way bigger than the old release. Would it be possible to have both worlds? I.e. that the user gets the light version first and can choose the heavier version with more help if it is needed?