MJXGUI Instance API

  1. Constructor
    1. Options
    2. Writing A Success Callback
  2. Methods

Constructor

The MJXGUI constructor takes 1 required and 2 optional arguments -

  1. selector - A CSS selector string that can select the elements MJXGUI should be attached to. MJXGUI attached event listeners to all elements selected by this string and shows the editor widget when these elements are clicked.
  2. successCallback - A callback function that will be run when the user is done entering the equation and clicks on the “✔” button. This is where you will be able to access the LaTeX for the equation. For more information on how you should write a callback function, see writing a success callback. This argument is optional, and the success callback can also be set after the MJXGUI instance has been created, instead of setting it in the constructor.
  3. options - An Object that configures the editor’s behaviour. See supported options. This argument is optional.

Options

Currently, the following options are supported -

Option Data Type Default value Description
mathDelimiter String "$$" The math delimiter as configured when you load MathJax. Use the same delimiter you use for inserting equation blocks, not inline equations. Most commonly used block delimiter is “$$”.
theme String undefined Pass theme as “dark” to render the MJXGUI widget in dark colors. Any other value will default to light mode.

Writing A Success Callback

The success callback you supply is run when the user is done entering an equation and clicks on the “✔” button. This is where you will be able to access the LaTeX for the entered equation, and handle it however you want. It is recommended to supply this function after creating an MJXGUI instance instead of passing it to the constructor, just because supplying it later lets you use both regular functions and arrow functions as the callback without having to worry about this in context.

The success callback is passed two arguments -

  1. latex - The generated LaTeX for the expression created by the user at the time the success callback is called
  2. instance - The MJXGUI instance that was generating the equation.

You can then render the generated equation on the page using MathJax, store it on your server, or handle it any other way you want.

const mjxgui = new MJXGUI('.selector', options={ theme: 'dark' });
mjxgui.successCallback = function(latex, instance) {
    // Process generated LaTeX as you need
}

Methods

| Method | Description |
|———————-|——————————————————————————————————————————-| | showUI() | Shows/unhides the editor UI | | hideUI() | Hides the editor UI | | clearEquation() | Clears the equation being built | | getLatex() | Generates LaTeX for the equation being built and returns it as a String | | registerSymbol() | Adds a symbol to the editor that is not present out of the box. See Customizing. | | registerFunction() | Adds a function to the editor that is not present out of the box. See Customizing. |