npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mathquill4quill

v2.4.0

Published

[![Build Status](https://github.com/c-w/mathquill4quill/workflows/CI/badge.svg)](https://github.com/c-w/mathquill4quill/actions?query=workflow%3Aci) [![Version](https://img.shields.io/npm/v/mathquill4quill.svg)](https://www.npmjs.com/package/mathquill4qui

Downloads

3,883

Readme

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.

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 and mathquill4quill.css. 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);

A working demo application can be found here (live).

React

A demo application integrating this module with react-quill can be found here (live). A demo for NextJS can be found 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.

List of previous formulas

Previous formulas can be saved and re-used. The available related configurations are:

enableMathQuillFormulaAuthoring(quill, {
  displayHistory: true, // defaults to false
  historyCacheKey: '__my_app_math_history_cachekey_', // optional
  historySize: 20 // optional (defaults to 10)
});

This works by saving formula to a list (and local storage by default) everytime a new formula is used. Then displaying this list when a user opens the formula tooltip.

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.