Skip to content
Power-up Quill's formula editing via the MathQuill editor
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.eslintignore Merge all ignore files Jun 26, 2019
.eslintrc.js Scope eslint ignores to specific lines Jun 26, 2019
.gitignore Merge all ignore files Jun 26, 2019
.prettierignore Merge all ignore files Jun 26, 2019
.release-it.json Added in support for npm publish (#18) Jul 10, 2019
LICENSE.txt Release code under Apache v2 license Jan 16, 2017
README.md Add NPM badge Jul 10, 2019
azure-pipelines.yml Delay installing browser until test stage Jun 26, 2019
index.css
index.html Update dependencies to latest versions on cdnjs Jul 1, 2019
index.js Fix leaking of operator buttons to other popups (#15) Jul 1, 2019
mathquill4quill.js Refactor to prevent leaking latex to other popups Jul 1, 2019
nightwatch.conf.js Fix chromedriver path reference on Windows Jun 26, 2019
package.json
tests.js Autofocus formula editor when it is opened (#13) Jun 27, 2019

README.md

MathQuill 4 Quill

Build Status Version Code Style: prettier License

What's this?

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

Basic demo of mathquill4quill

Live demo

Usage example

Plain Javascript

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

var enableMathQuillFormulaAuthoring = mathquill4quill();
enableMathQuillFormulaAuthoring(quill);

React

To integrate this module with react-quill, add references to the JS and CSS files of MathQuill, KaTeX and mathquill4quill to your application. Next, you can enable the mathquill formula editor on your ReactQuill component:

import React from 'react';
import ReactQuill, { Quill } from 'react-quill';
const { mathquill4quill } = window;

class App extends React.Component {
  reactQuill = React.createRef();

  componentDidMount() {
    const enableMathQuillFormulaAuthoring = mathquill4quill({ Quill });
    enableMathQuillFormulaAuthoring(this.reactQuill.current.editor);
  }

  render() {
    return (
      <ReactQuill
        ref={this.reactQuill}
        modules={{
          formula: true,
          toolbar: [["formula", /* ... other toolbar items here ... */]]
        }}
        {/* ... other properties here ... */}
      />
    );
  }
}

Optional features

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 the operators option to the enableMathQuillFormulaAuthoring() function. Example:

enableMathQuillFormulaAuthoring(quill, {
  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.

Demo of mathquill4quill with custom operator buttons

Autofocus

For user convenience, mathquill4quill defaults to focusing the math input field when the formula button is pressed. You can disable this behavior via the autofocus option in the enableMathQuillFormulaAuthoring() function. Example:

enableMathQuillFormulaAuthoring(quill, {
  autofocus: false
});

Development setup

First, install the development dependencies:

npm install

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

You can’t perform that action at this time.