A MathType Formula That Renders the Same in Synap Editor

You will start from a blank Synap Editor instance with MathType and formula parser scripts available. By the end, you will have a table row with two cells: one quadratic formula inserted visually, one typed, both rendered as <math> and editable from the table cell balloon.

How to load MathType's script files

The MathType integration requires two scripts: wirisplugin-generic.js and mathType.min.js. These must load after the editor script, not before. This ensures the Synap Editor object exists before MathType initializes.

<!-- Load Synap Editor first -->
<script src="/path/to/synapeditor.min.js"></script>
<!-- Then load MathType integration -->
<script src="/path/to/wirisplugin-generic.js"></script>
<script src="/path/to/mathType.min.js"></script>

The wirisplugin-generic.js file comes from the MathType Generic Integration npm package:

npm install @wiris/mathtype-generic@7.31.0
# File location after install:
# node_modules/@wiris/mathtype-generic/wirisplugin-generic.js

Copy both scripts to your project and reference them after the editor script.

Building an equation from the toolbar

Add MathType buttons to the editor toolbar so users can insert formulas visually. The keys are mathType.math for math and mathType.chem for chemistry.

// synapeditor.config.js
{
  'editor.toolbar': [
    'mathType.math', 'mathType.chem',
    // ...other toolbar buttons
  ],
  // ...
}

When a user clicks the math button, the MathType dialog opens. Build the quadratic formula (e.g., $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$) visually and insert it into a table cell. It appears as a rendered formula in the document.

Typing a formula and letting Synap parse it

Instead of using the dialog, users can type a formula expression directly into a table cell. With the formula parser script loaded, Synap Editor parses the typed expression and renders it as a formula. For example, typing:

x = (-b ± sqrt(b^2-4ac)) / 2a

in a table cell triggers the parser, and the formula is converted to the same rendered output as the dialog.

<script src="/path/to/formula-parser.min.js"></script>

Both methods result in a visually identical formula in the document.

Which balloon button reopens a formula

To allow editing after insertion, ensure the formulaInput button is present in the table cell balloon popup. This button opens the MathType dialog for any formula in a table cell.

// synapeditor.config.js
{
  'editor.balloon': {
    'tableCell': [
      'formulaInput', '-', 'fill', 'selectBorder', 'borderColor',
      'lineThickness', 'lineStyle', 'cellSize', 'mergeCell', 'splitCell',
      // ...other buttons
    ]
  }
}

Clicking a table cell with a formula shows the balloon. The formulaInput button lets you reopen and edit the formula, regardless of how it was created.

Auto, image, or MathML: choosing how it saves

By default, formulas are saved as <img> tags. To ensure both formulas are saved as <math> tags (MathML), set mathType.config.resultType to 'mathML':

// synapeditor.config.js
{
  'mathType.config': {
    resultType: 'mathML'
  }
}

If you enable this setting, any new or edited formula, regardless of whether it was inserted using the dialog or typed directly, will be saved as a <math> tag in the document. This approach ensures consistent rendering and allows you to change font or style within the editor.

Take formula rendering further with the MathType API

If you want formulas to use MathType's own rendering service (for example, to convert MathML to SVG images), set the mathMlToSvgUrl property in mathType.config:

// synapeditor.config.js
{
  'mathType.config': {
    mathMlToSvgUrl: '/render?format=svg&mml={mathML}'
  }
}

This swaps the internal image conversion for MathType's API, which can improve cross-browser consistency for formula display.

Building and checking the result

Start with a blank document. Insert a two-cell table row. In the first cell, click the math button and build the quadratic formula using the MathType dialog. In the second cell, type the same formula expression and let Synap Editor auto-parse it. Both cells now show the same rendered formula.

Click either cell. The table cell balloon popup appears with the formulaInput button. Click it to reopen and edit the formula in either cell. Inspect the document's HTML: both formulas are saved as <math> tags, not <img>.

[[shot: The editor showing a two-cell table row, each cell containing the quadratic formula rendered identically. The balloon popup with the formulaInput button is visible when a cell is selected. The HTML source shows <math> tags in both cells.]]

Now, users can insert, edit, and re-edit formulas in tables, whether built visually or typed, with a consistent MathML result and a single editing workflow.

Common questions

Does mathType.config.resultType convert formulas that were already saved as images?

No. Setting resultType: 'mathML' converts any formula saved as an <img> to <math> on the next edit. Existing formulas remain as they are until edited.

What happens to a formula if mathMlToSvgUrl is never set?

If mathMlToSvgUrl is not set, formulas are displayed as images converted by the internal module. MathType's rendering service is not used.

Which npm package provides wirisplugin-generic.js, and what version?

The file comes from the @wiris/mathtype-generic npm package, version 7.31.0.

Does formulaInput show up outside of table cells?

No. The formulaInput button is present in the tableCell balloon popup only. It does not appear in other balloon popups.