Integrate new MathType Beta with Froala

This guide explains how to upgrade an existing Froala integration to MathType plugin v9.0.0 beta and enable the new MathType editor. 

It covers installation, configuration changes, breaking changes, event migration, and rollback options.

Since this is a closed, beta-level distribution version for external testing, the instructions focus on updating via a compressed tarball (.tgz) package. To request entering the beta testing, check the details here.

Preparations before installation

Before installing this beta version, it is highly recommended that you use your preferred version control system (e.g., Git) to save your project's current state. This will allow you to safely roll back if you need to return to the current version.

• Using branches: Create a branch of the current commit with the current (8.x.x) version by running git checkout -b mathtype/v8.x.x, then push it with git push --set-upstream origin mathtype/v8.x.x.
• Using tags: Create a tag of the current commit by running git tag mathtype-v8.x.x, then push it with git push --tags.

Requirements and installation

The plugin requires Froala version 5.3.0 or higher as a peer dependency. If your project uses an older version of Froala, you must upgrade it first.

To install the provided package, run the following command pointing to the .tgz file you were provided:

npm install path/to/your/file/wiris-mathtype-froala-9.x.x-beta.tgz

Note: Make sure to adjust the file path and name according to the actual file you received.

Font Assets for the Modern Editor

If the modern editor is userd, you must copy de font files required for it to render correctly. Copy the contents of the node_modules/@wiris/mathtype-froala/fonts directory into the public or static-assets directory of your application. 

Font files must be copied themselves, not the font folder as a whole. These files must be directly available at the root of your deployed site.

Basic configuration

The primary goal of this upgrade is to transition your integration to the new MathType editor. Unless explicitly stated otherwise in this guide, you can leave the rest of your current Froala configuration exactly as it is.

You can import the plugin into your Froala configuration as usual:

import MathType from "@wiris/mathtype-froala/dist/index.js";

Or using the modern import path:

import { MathType } from "@wiris/mathtype-froala";

Additionally, make sure you remove any CSS MathType for Froala import, such as:

import "@wiris/mathtype-froala/dist/index.css";

New MathType editor configuration

Starting from version 9, you can access the new MathType editor by configuring it via mathTypeParameters:

Example:

mathTypeParameters: {
    editor: "modern",
    editorParameters: {
        toolbar: "general | simple",
    },
}

Important changes and considerations

If you are upgrading from a previous version, please note the following behavioral and breaking changes.

Automatic CSS loading (breaking change)

In previous versions, you had to explicitly import the plugin's CSS file (e.g., import "@wiris/mathtype-froala/dist/index.css"; ). In version >=9.0.0, styles are bundled and injected automatically.

You must remove any explicit CSS imports from your integration to avoid build errors or style conflicts.

Deprecation of the "quizzes" Toolbar

The quizzes value for the toolbar configuration is deprecated. If your integration used this value, you must change it to simple in the new version.

Supported parameters and languages

• Supported Parameters: When using the modern editor, currently only the language and toolbar parameters are supported inside editorParameters. Any other parameters will be ignored.
• Language Fallback: The available languages depend on the product configuration and may change frequently. If the language provided in your environment is not supported, the editor will default to English (en). Please consult the official MathType configuration documentation for the most up-to-date list of supported languages.ChemType interface

ChemType interface 

ChemType will continue to open using its traditional editor interface, regardless of the MathType configuration.

Editing existing formulas

When using the new editor, if a user attempts to edit a pre-existing formula whose MathML content is not fully supported, the system will automatically fall back to the classic editor for that editing session.

Deprecation of the Global WirisPlugin Object

The global window.WirisPlugin object and global helper functions (such as window.wrs_addPluginListener , window.wrs_initParse , etc.) have been completely removed. 

Optional rollback: reverting to v8.x.x

If you need to leave the beta version and return to the classic v8.x.x editor, follow these steps:

Option 1: Using version control (recommended)

If you created a tag or branch before installation, simply revert your repository to that state:

• With branch: git checkout mathtype/v8.x.x
• With tag: git checkout mathtype-v8.x.x

Option 2: Manual downgrade

If you do not have a backup in your version control, you must downgrade the packages manually:

1. Install the previous stable version by running: npm install @wiris/mathtype-froala@^8
2. Downgrade Froala: If you updated your Froala version specifically for this package, reinstall the previous version your project was using.
3. Revert code changes: Remove any version 9-specific configuration (such as editor: “modern”) from your codebase, and restore your global window.WirisPlugin listeners if you had migrated them.