xiakeweian / mathquill4quill

Power-up Quill's formula editing via the MathQuill editor

MathQuill 4 Quill

What's this?

This module adds support for rich math authoring to the Quill editor.

Live demo

Usage example

This module depends on MathQuill, Quill and KaTeX, so you'll need to add references to their JS and CSS files in addition to adding a reference to mathquill4quill.js. Official builds as well as minified assets can be found on the releases page.

Next, initialize your Quill object and load the formula module:

// setup quill with formula support

var quill = new Quill('#editor', {
  modules: {
    formula: true,
    toolbar: [['formula']]
  },
  theme: 'snow'
});

Last step: replace Quill's native formula authoring with MathQuill.

// enable mathquill formula editor

quill.enableMathQuillFormulaAuthoring();

Custom operator buttons

You can also add in operator buttons (buttons that allow users not familiar with latex to add in operators/functions like square roots) to the editor by passing an operators variable to the enableMathQuillFormulaAuthoring() function. Example:

quill.enableMathQuillFormulaAuthoring({
  operators: [["\\sqrt[n]{x}", "\\nthroot"], ["\\frac{x}{y}","\\frac"]]
});

The operators variable is an array of arrays. The outside array contains all of the different arrays which describe the operator buttons. The arrays inside of the main array consist of two values. The first value is the latex that gets rendered as the value on the button, and the second value is the latex that gets inserted into the MathQuill editor.

Development setup

First, install the development dependencies:

npm install

You can now start the development server using npm start and verify code style compliance using npm run lint.