mathlive - npm Package Compare versions

Comparing version 0.34.0 to 0.35.0

CHANGELOG.md

@@ -1,5 +0,94 @@
-##
+## 0.35
 
+### New Features
+
+-   **Extensible (stretchy) symbols**:
+
+    **#126** (`\overgroup`, `\overrightarrow`, `\overleftrightarrow`), **#180** (`\xrightarrow`, `\xrightleftharpoons`), **#292** (`\widehat`, `\overbrace`, `\underbrace`), **#338** (`\vec`, `\bar`).
+
+    This work has been made possible thanks to the financial support of a generous sponsor.
+
+    It is now possible for a symbol with operands above or below, or for a decoration above or below an expression, to stretch (extend) so that its width will match the width of the operands or expression.
+
+    These extensible symbols and decorations are important for some domains such as geometry and chemistry.
+
+    This release introduces th following new commands:
+
+    -   `\overrightarrow{base}`
+    -   `\overleftarrow{base}`
+    -   `\Overrightarrow{base}`
+    -   `\overleftharpoon{base}`
+    -   `\overrightharpoon{base}`
+    -   `\overleftrightarrow{base}`
+    -   `\overbrace{base}`
+    -   `\overlinesegment{base}`
+    -   `\overgroup{base}`
+    -   `\underrightarrow{base}`
+    -   `\underleftarrow{base}`
+    -   `\underleftrightarrow{base}`
+    -   `\underbrace{base}`
+    -   `\underlinesegment{base}`
+    -   `\undergroup{base}`
+    -   `\xrightarrow[below]{above}`
+    -   `\xleftarrow[below]{above}`
+    -   `\xRightarrow[below]{above}`
+    -   `\xLeftarrow[below]{above}`
+    -   `\xleftharpoonup[below]{above}`
+    -   `\xleftharpoondown[below]{above}`
+    -   `\xrightharpoonup[below]{above}`
+    -   `\xrightharpoondown[below]{above}`
+    -   `\xlongequal[below]{above}`
+    -   `\xtwoheadleftarrow[below]{above}`
+    -   `\xtwoheadrightarrow[below]{above}`
+    -   `\xleftrightarrow[below]{above}`
+    -   `\xLeftrightarrow[below]{above}`
+    -   `\xrightleftharpoons[below]{above}`
+    -   `\xleftrightharpoons[below]{above}`
+    -   `\xhookleftarrow[below]{above}`
+    -   `\xhookrightarrow[below]{above}`
+    -   `\xmapsto[below]{above}`
+    -   `\xtofrom[below]{above}`
+    -   `\xrightleftarrows[below]{above}`
+    -   `\xrightequilibrium[below]{above}`
+    -   `\xleftequilibrium[below]{above}`
+
+    In addition, the following commands can now be used to represent stretchy accents:
+
+    -   `\widehat{base}`
+    -   `\widecheck{base}`
+    -   `\widetilde{base}`
+    -   `\utilde{base}`
+
+-   Improved rendering and layout of `\enclose`
+
+-   Improved layout of `overunder` atoms
+
+-   Improved layout of `accent` atoms
+
+-   Improved fidelity of styling commands (`\textup`, `\fontseries`, etc...). They are now closer to what LaTeX does, in all its wonderful weirdness (see https://texfaq.org/FAQ-2letterfontcmd). Added `\selectfont` command.
+
 ### Bug Fixes
 
+-   **#371**: When clicking after the last element in the mathfield, always set the anchor to be the last element in the root, i.e. as if `moveToMathFieldEnd` had been performed. For example, if the content is "x^2", clicking after the end of the field will put the caret after the last element (not after the "2" in the superscript)
+
+-   **#372**: Using an argument in a macro will result in the argument to be substituted without a group being inserted. Previously, `#1` with `ax` as a value for the first argument would have resulted in `{ax}`. This was noticeable when using the `x^2` key in the virtual keyboard: if the equation was `ab`, pressing that key resulted in `{ab}^2`. It now results in `ab^2`
+
+-   Fixed an issue rendering some commands such as `\boxed` and others when in static mode. An over-agressive optimization would coalesce spans with no content, even though they may include important styling info.
+
+-   Fixed the rendering of infix commands with arguments, e.g. `\atopwithdelims` and `overwithdelims`. The arguments of infix commands were incorrectly merged with the suffix.
+
+-   Fixed inter-atom spacing of `overunder` atoms (they should space as `mord`)
+
+### Code Maintenance
+
+-   Re-factored the definitions of functions, symbols and environments which are now split in multiple files instead of being all contained in `core/definitions.js`
+
+-   Re-factored and isolated the metadata about LaTex commands (frequency and category). This should reduce the amount of data carried by the core package. All the metadata is now in `definitions-metadata.js`. As a side effect, the examples displayed in the popover window might be less complete, but the removal of popover is on the roadmap.
+
+-   Removal of default export for some modules. Need to complete it for all the remaining modules.
+
+## 0.34 (Feb 5, 2020)
+
+### Bug Fixes
+
 -   Fix #364: Some expressions containing placeholders, when inserted, would not have the placeholder selected. For example, when using the "differentialD" key in the virtual keyboard.
@@ -412,3 +501,3 @@ -   Fix #349:
 MathLive.makeMathField('input', {
-    onContentDidChange: mf => {
+    onContentDidChange: (mf) => {
         document.getElementById('output').innerHTML = mf.latex();
@@ -415,0 +504,0 @@ },

dist/mathlive.d.ts

 /**
  * @typedef {function} MathFieldCallback
- * @param {MathField} mathfield
+ * @param {Mathfield} mathfield
  * @return {void}
  * @global
  */
-declare type MathFieldCallback = (mathfield: MathField) => void;
+declare type MathFieldCallback = (mathfield: Mathfield) => void;
 
@@ -139,6 +139,6 @@ /**
  * past keystrokes
- * @class MathField
+ * @class Mathfield
  * @global
  */
-declare class MathField {
+declare class Mathfield {
     /**
@@ -154,3 +154,3 @@ * Reverts this mathfield to its original content.
      *
-     * @method MathField#$revertToOriginalContent
+     * @method Mathfield#$revertToOriginalContent
      */
@@ -300,3 +300,3 @@ $revertToOriginalContent(): void;
      *
-     * @method MathField#$perform
+     * @method Mathfield#$perform
      */
@@ -323,3 +323,3 @@ $perform(command: string | string[]): void;
      * @category Accessing the Content
-     * @method MathField#$text
+     * @method Mathfield#$text
      */
@@ -346,3 +346,3 @@ $text(format?: string): string;
      * @category Accessing the Content
-     * @method MathField#$selectedText
+     * @method Mathfield#$selectedText
      */
@@ -356,3 +356,3 @@ $selectedText(format?: string): string;
      * @category Selection
-     * @method MathField#$selectionIsCollapsed
+     * @method Mathfield#$selectionIsCollapsed
      */
@@ -371,3 +371,3 @@ $selectionIsCollapsed(): boolean;
      * @category Selection
-     * @method MathField#$selectionDepth
+     * @method Mathfield#$selectionDepth
      */
@@ -380,3 +380,3 @@ $selectionDepth(): number;
      * @category Selection
-     * @method MathField#$selectionAtStart
+     * @method Mathfield#$selectionAtStart
      */
@@ -389,3 +389,3 @@ $selectionAtStart(): boolean;
      * @category Selection
-     * @method MathField#$selectionAtEnd
+     * @method Mathfield#$selectionAtEnd
      */
@@ -410,3 +410,3 @@ $selectionAtEnd(): boolean;
      * @category Accessing the Content
-     * @method MathField#$latex
+     * @method Mathfield#$latex
      */
@@ -422,3 +422,3 @@ $latex(text?: string, options?: {
      * @return {HTMLElement}
-     * @method MathField#$el
+     * @method Mathfield#$el
      */
@@ -429,3 +429,3 @@ $el(): HTMLElement;
      *
-     * This method can be called explicitly or invoked as a selector with {@linkcode MathField#$perform $perform("insert")}
+     * This method can be called explicitly or invoked as a selector with {@linkcode Mathfield#$perform $perform("insert")}
      * .
@@ -487,3 +487,3 @@ *
      * @category Changing the Content
-     * @method MathField#$insert
+     * @method Mathfield#$insert
      */
@@ -584,3 +584,3 @@ $insert(s: string, options?: {
      * @category Changing the Content
-     * @method MathField#$applyStyle
+     * @method Mathfield#$applyStyle
      *
@@ -611,3 +611,3 @@ */
      * @category Changing the Content
-     * @method MathField#$keystroke
+     * @method Mathfield#$keystroke
      */
@@ -620,3 +620,3 @@ $keystroke(keys: string, evt?: Event): boolean;
      * @category Changing the Content
-     * @method MathField#$typedText
+     * @method Mathfield#$typedText
      */
@@ -630,3 +630,3 @@ $typedText(text: string): void;
      *
-     * @method MathField#$setConfig
+     * @method Mathfield#$setConfig
      */
@@ -643,3 +643,3 @@ $setConfig(config: MathFieldConfig): void;
      *
-     * @method MathField#speak_
+     * @method Mathfield#speak_
      */
@@ -690,3 +690,3 @@ speak_(amount: string, speakOptions: {
  *
- * This module exports {@link #functions%3Amathlive some functions} and the {@link #class%3AMathField `MathField`} class.
+ * This module exports {@link #functions%3Amathlive some functions} and the {@link #class%3AMathField `Mathfield`} class.
  *
@@ -726,2 +726,4 @@ * See {@tutorial USAGE_GUIDE the Usage Guide} for more details on how to get
      *
+     * @param {object} [macros] A dictionary of LaTeX macros
+     *
      * @return {string}
@@ -731,3 +733,3 @@ * @category Converting
      */
-    function latexToMarkup(text: string, mathstyle: "displaystyle" | "textstyle", format?: "mathlist" | "span" | "html"): string;
+    function latexToMarkup(text: string, mathstyle: "displaystyle" | "textstyle", format?: "mathlist" | "span" | "html", macros?: any): string;
     /**
@@ -746,3 +748,3 @@ * Convert a DOM element into an editable mathfield.
      *
-     * @return {MathField}
+     * @return {Mathfield}
      *
@@ -761,3 +763,3 @@ * Given the HTML markup:
      */
-    function makeMathField(element: HTMLElement | string, config?: MathFieldConfig): MathField;
+    function makeMathField(element: HTMLElement | string, config?: MathFieldConfig): Mathfield;
     /**
@@ -1046,3 +1048,3 @@ * Converts a LaTeX string to a string of MathML markup.
      *
-     * @param {string|HTMLElement|MathField} element
+     * @param {string|HTMLElement|Mathfield} element
      * @param {Object.<string, any>} [options={}]
@@ -1054,3 +1056,3 @@ * @param {string} options.namespace The namespace used for the `data-`
      */
-    function revertToOriginalContent(element: string | HTMLElement | MathField, options?: {
+    function revertToOriginalContent(element: string | HTMLElement | Mathfield, options?: {
         namespace: string;
@@ -1076,4 +1078,4 @@ }): void;
      * ```
-     * @param {string | HTMLElement | MathField} element - A DOM element ID, a DOM
-     * element or a MathField.
+     * @param {string | HTMLElement | Mathfield} element - A DOM element ID, a DOM
+     * element or a Mathfield.
      * @param {object} [options={}]
@@ -1087,3 +1089,3 @@ * @param {string} [options.namespace=""] The namespace used for the `data-`
      */
-    function getOriginalContent(element: string | HTMLElement | MathField, options?: {
+    function getOriginalContent(element: string | HTMLElement | Mathfield, options?: {
         namespace?: string;
@@ -1090,0 +1092,0 @@ }): string;

dist/src/addons/auto-render.js

 /* eslint no-console:0 */
-import '../core/mathAtom.js'; // eslint-disable-line no-unused-vars
-import Definitions from '../core/definitions.js';
+import '../core/atom.js';
+import { MACROS } from '../core/definitions-utils.js';
 
@@ -431,3 +431,3 @@ function findEndOfMath(delimiter, text, startIndex) {
         );
-        options.macros = Definitions.MACROS;
+        options.macros = MACROS;
 
@@ -434,0 +434,0 @@ // Validate the namespace (used for `data-` attributes)

dist/src/addons/outputLatex.js

 /**
  * This module outputs a formula to LaTeX.
  *
- * To use it, use the {@linkcode MathAtom#toLatex MathAtom.toLatex()}  method.
+ * To use it, use the {@linkcode Atom#toLatex Atom.toLatex()}  method.
  *
@@ -10,4 +10,5 @@ * @module addons/outputLatex
 
-import MathAtom from '../core/mathAtom.js';
+import { Atom } from '../core/atom.js';
 import Color from '../core/color.js';
+import { emit as emitDefinition } from '../core/definitions-utils.js';
 
@@ -42,4 +43,4 @@ function findLongestRun(atoms, property, value) {
  *
- * @param {MathAtom} parent the parent or predecessor of the atom list
- * @param {MathAtom[]} atoms the list of atoms to transform to LaTeX
+ * @param {Atom} parent the parent or predecessor of the atom list
+ * @param {Atom[]} atoms the list of atoms to transform to LaTeX
  * @param {boolean} expandMacro true if macros should be expanded
@@ -297,3 +298,4 @@ * @result {string} a LaTeX string
  * @return {string}
- * @param {string|MathAtom|MathAtom[]} value
+ * @param {string|Atom|Atom[]} value
+ * @param {boolean} expandMacro
  * @private
@@ -344,6 +346,6 @@ */
  * @return {string}
- * @memberof module:core/mathAtom~MathAtom
+ * @memberof module:core/atom~Atom
  * @private
  */
-MathAtom.MathAtom.prototype.toLatex = function(expandMacro) {
+Atom.prototype.toLatex = function(expandMacro) {
     expandMacro = expandMacro === undefined ? false : expandMacro;
@@ -356,2 +358,3 @@ let result = '';
     const command = m ? m[1] : null;
+    const emit = (parent, atom) => latexify(parent, atom, expandMacro);
 
@@ -367,4 +370,3 @@ // this.mode=='text' is handled in the switch by looking at this.type===''
             if (this.cssClass === 'ML__emph') {
-                result +=
-                    '\\emph{' + latexify(this, this.body, expandMacro) + '}';
+                result += `\\emph{${emit(this, this.body)}`;
             } else {
@@ -374,4 +376,4 @@ if (this.cssClass) result += '\\class{' + this.cssClass + '}{';
                 result += expandMacro
-                    ? latexify(this, this.body, true)
-                    : this.latex || latexify(this, this.body, false);
+                    ? emit(this, this.body)
+                    : this.latex || emit(this, this.body);
 
@@ -404,3 +406,3 @@ if (this.cssClass) result += '}';
                     if (col > 0) result += ' & ';
-                    result += latexify(this, this.array[row][col], expandMacro);
+                    result += emit(this, this.array[row][col]);
                 }
@@ -416,3 +418,3 @@ // Adds a separator between rows (but not after the last row)
         case 'root':
-            result = latexify(this, this.body, expandMacro);
+            result = emit(this, this.body);
             break;
@@ -424,5 +426,5 @@
                 result += '{';
-                result += latexify(this, this.numer, expandMacro);
+                result += emit(this, this.numer);
                 result += '\\' + this.body + ' ';
-                result += latexify(this, this.denom, expandMacro);
+                result += emit(this, this.denom);
                 result += '}';
@@ -432,7 +434,6 @@ } else {
                 result += command;
-                result += `{${latexify(
+                result += `{${emit(this, this.numer)}}{${emit(
                     this,
-                    this.numer,
-                    expandMacro
-                )}}{${latexify(this, this.denom, expandMacro)}}`;
+                    this.denom
+                )}}`;
             }
@@ -444,7 +445,5 @@ break;
             if (this.index) {
-                result += '[';
-                result += latexify(this, this.index, expandMacro);
-                result += ']';
+                result += `[${emit(this, this.index)}]`;
             }
-            result += `{${latexify(this, this.body, expandMacro)}}`;
+            result += `{${emit(this, this.body)}}`;
             break;
@@ -456,3 +455,3 @@
                 if (this.leftDelim && this.leftDelim.length > 1) result += ' ';
-                result += latexify(this, this.body, expandMacro);
+                result += emit(this, this.body);
                 result += '\\right' + (this.rightDelim || '.');
@@ -472,4 +471,3 @@ if (this.rightDelim && this.rightDelim.length > 1) {
                     // commands
-                    result +=
-                        '(' + latexify(this, this.body, expandMacro) + ')';
+                    result += `(${emit(this, this.body)})`;
                 } else {
@@ -480,3 +478,3 @@ result += '\\mleft' + (this.leftDelim || '.');
                     }
-                    result += latexify(this, this.body, expandMacro);
+                    result += emit(this, this.body);
                     result += '\\mright' + (this.rightDelim || '.');
@@ -498,9 +496,8 @@ if (this.rightDelim && this.rightDelim.length > 1) {
             if (this.shift) {
-                result += `[${latexify(this, this.shift, expandMacro)}em]`;
+                result += `[${emit(this, this.shift)}em]`;
             }
-            result += `{${latexify(
+            result += `{${emit(this, this.width)}em}{${emit(
                 this,
-                this.width,
-                expandMacro
-            )}em}{${latexify(this, this.height, expandMacro)}em}`;
+                this.height
+            )}em}`;
             break;
@@ -511,11 +508,12 @@
         case 'accent':
-            result += `${command}{${latexify(this, this.body, expandMacro)}}`;
+            result += `${command}{${emit(this, this.body)}}`;
             break;
 
         case 'overunder':
-            result += `${command}{${latexify(
-                this,
-                this.overscript || this.underscript,
-                expandMacro
-            )}}{${latexify(parent, this.body, expandMacro)}}`;
+            result +=
+                emitDefinition(command, parent, this, emit) ||
+                `${command}{${emit(
+                    this,
+                    this.overscript || this.underscript
+                )}}{${emit(parent, this.body)}}`;
             break;
@@ -537,7 +535,3 @@
             ) {
-                result +=
-                    command +
-                    '{' +
-                    latexify(this, this.body, expandMacro) +
-                    '}';
+                result += `${command}{${emit(this, this.body)}}`;
             } else if (command === '\\char"') {
@@ -572,14 +566,6 @@ result += this.latex + ' ';
                     // The argument to mathop is math, therefor this.body can be an expression
-                    result +=
-                        command +
-                        '{' +
-                        latexify(this, this.body, expandMacro) +
-                        '}';
+                    result += command + '{' + emit(this, this.body) + '}';
                 } else if (command === '\\operatorname') {
                     // The argument to `\operatorname` is 'math' and needs to be latexified
-                    result +=
-                        command +
-                        '{' +
-                        latexify(this, this.body, expandMacro) +
-                        '}';
+                    result += command + '{' + emit(this, this.body) + '}';
                 } else {
@@ -631,5 +617,5 @@ if (this.latex && this.latex[0] === '\\') {
                 }
-                result += `{${latexify(this, this.body, expandMacro)}}`;
+                result += `{${emit(this, this.body)}}`;
             } else if (command === '\\boxed') {
-                result += `\\boxed{${latexify(this, this.body, expandMacro)}}`;
+                result += `\\boxed{${emit(this, this.body)}}`;
             } else {
@@ -644,3 +630,3 @@ // \\colorbox, \\fcolorbox
                 }
-                result += `{${latexify(this, this.body, expandMacro)}}`;
+                result += `{${emit(this, this.body)}}`;
             }
@@ -728,3 +714,3 @@ break;
             }
-            result += `{${latexify(this, this.body, expandMacro)}}`;
+            result += `{${emit(this, this.body)}}`;
             break;
@@ -764,3 +750,3 @@
     if (this.superscript) {
-        let sup = latexify(this, this.superscript, expandMacro);
+        let sup = emit(this, this.superscript);
         if (sup.length === 1) {
@@ -780,3 +766,3 @@ if (sup === '\u2032') {
     if (this.subscript) {
-        const sub = latexify(this, this.subscript, expandMacro);
+        const sub = emit(this, this.subscript);
         if (sub.length === 1) {
@@ -783,0 +769,0 @@ result += '_' + sub;

dist/src/addons/outputMathML.js

@@ -5,3 +5,3 @@ /**
  *
- * To use it, use the {@linkcode MathAtom#toMathML MathAtom.toMathML()}  method.
+ * To use it, use the {@linkcode Atom#toMathML Atom.toMathML()}  method.
  *
@@ -12,3 +12,3 @@ * @module addons/outputMathML
 
-import MathAtom from '../core/mathAtom.js';
+import { Atom } from '../core/atom.js';
 import Color from '../core/color.js';
@@ -503,3 +503,3 @@
  * @return {string}
- * @param {string|MathAtom|MathAtom[]} input
+ * @param {string|Atom|Atom[]} input
  * @param {number} initial index of the input to start conversion from
@@ -599,3 +599,46 @@ * @param {number} final last index of the input to stop conversion to
  */
-MathAtom.MathAtom.prototype.toMathML = function(options) {
+Atom.prototype.toMathML = function(options) {
+    // For named SVG atoms, map to a Unicode char
+    const SVG_CODE_POINTS = {
+        widehat: '^',
+        widecheck: 'ˇ',
+        widetilde: '~',
+        utilde: '~',
+        overleftarrow: '\u2190',
+        underleftarrow: '\u2190',
+        xleftarrow: '\u2190',
+        overrightarrow: '\u2192',
+        underrightarrow: '\u2192',
+        xrightarrow: '\u2192',
+        underbrace: '\u23df',
+        overbrace: '\u23de',
+        overgroup: '\u23e0',
+        undergroup: '\u23e1',
+        overleftrightarrow: '\u2194',
+        underleftrightarrow: '\u2194',
+        xleftrightarrow: '\u2194',
+        Overrightarrow: '\u21d2',
+        xRightarrow: '\u21d2',
+        overleftharpoon: '\u21bc',
+        xleftharpoonup: '\u21bc',
+        overrightharpoon: '\u21c0',
+        xrightharpoonup: '\u21c0',
+        xLeftarrow: '\u21d0',
+        xLeftrightarrow: '\u21d4',
+        xhookleftarrow: '\u21a9',
+        xhookrightarrow: '\u21aa',
+        xmapsto: '\u21a6',
+        xrightharpoondown: '\u21c1',
+        xleftharpoondown: '\u21bd',
+        xrightleftharpoons: '\u21cc',
+        xleftrightharpoons: '\u21cb',
+        xtwoheadleftarrow: '\u219e',
+        xtwoheadrightarrow: '\u21a0',
+        xlongequal: '=',
+        xtofrom: '\u21c4',
+        xrightleftarrows: '\u21c4',
+        xrightequilibrium: '\u21cc', // Not a perfect match.
+        xleftequilibrium: '\u21cb', // None better available.
+    };
+
     const SPECIAL_IDENTIFIERS = {
@@ -833,3 +876,6 @@ '\\exponentialE': 'ⅇ',
                 underscript = this.underscript;
-                if (overscript && underscript) {
+                if (
+                    (this.svgAbove || overscript) &&
+                    (this.svgBelow || underscript)
+                ) {
                     body = this.body;
@@ -866,29 +912,37 @@ } else if (overscript) {
 
-                if (overscript && underscript) {
+                if (
+                    (this.svgAbove || overscript) &&
+                    (this.svgBelow || underscript)
+                ) {
+                    result += `<munderover ${variant} ${makeID(
+                        this.id,
+                        options
+                    )}>`;
                     result +=
-                        '<munderover' +
-                        variant +
-                        makeID(this.id, options) +
-                        '>' +
+                        SVG_CODE_POINTS[this.svgBody] ||
                         toMathML(body, 0, 0, options).mathML;
-                    result += toMathML(underscript, 0, 0, options).mathML;
-                    result += toMathML(overscript, 0, 0, options).mathML;
+                    result +=
+                        SVG_CODE_POINTS[this.svgBelow] ||
+                        toMathML(underscript, 0, 0, options).mathML;
+                    result +=
+                        SVG_CODE_POINTS[this.svgAbove] ||
+                        toMathML(overscript, 0, 0, options).mathML;
                     result += '</munderover>';
-                } else if (overscript) {
+                } else if (this.svgAbove || overscript) {
                     result +=
-                        '<mover' +
-                        variant +
-                        makeID(this.id, options) +
-                        '>' +
-                        toMathML(body, 0, 0, options).mathML;
-                    result += toMathML(overscript, 0, 0, options).mathML;
+                        `<mover ${variant} ${makeID(this.id, options)}>` +
+                        (SVG_CODE_POINTS[this.svgBody] ||
+                            toMathML(body, 0, 0, options).mathML);
+                    result +=
+                        SVG_CODE_POINTS[this.svgAbove] ||
+                        toMathML(overscript, 0, 0, options).mathML;
                     result += '</mover>';
-                } else if (underscript) {
+                } else if (this.svgBelow || underscript) {
                     result +=
-                        '<munder' +
-                        variant +
-                        makeID(this.id, options) +
-                        '>' +
-                        toMathML(body, 0, 0, options).mathML;
-                    result += toMathML(underscript, 0, 0, options).mathML;
+                        `<munder ${variant} ${makeID(this.id, options)}>` +
+                        (SVG_CODE_POINTS[this.svgBody] ||
+                            toMathML(body, 0, 0, options).mathML);
+                    result +=
+                        SVG_CODE_POINTS[this.svgBelow] ||
+                        toMathML(underscript, 0, 0, options).mathML;
                     result += '</munder>';
@@ -1051,3 +1105,3 @@ }
 
-MathAtom.toMathML = function(atoms, options) {
+Atom.toMathML = function(atoms, options) {
     return toMathML(atoms, 0, 0, options).mathML;
@@ -1054,0 +1108,0 @@ };

dist/src/addons/outputSpokenText.js

@@ -1,2 +0,2 @@
-import MathAtom from '../core/mathAtom.js';
+import { Atom } from '../core/atom.js';
 import Popover from '../editor/editor-popover.js';
@@ -199,3 +199,3 @@ import '../core/definitions.js';
 
-MathAtom.toSpeakableFragment = function(atom, options) {
+Atom.toSpeakableFragment = function(atom, options) {
     function letter(c) {
@@ -250,5 +250,3 @@ let result = '';
                 result += ' of ';
-                result += emph(
-                    MathAtom.toSpeakableFragment(atom[i + 1], options)
-                );
+                result += emph(Atom.toSpeakableFragment(atom[i + 1], options));
                 i += 2;
@@ -260,3 +258,3 @@ } else if (atom[i].mode === 'text') {
                     isInTextRun = true;
-                    result += MathAtom.toSpeakableFragment(atom[i], options);
+                    result += Atom.toSpeakableFragment(atom[i], options);
                 }
@@ -274,7 +272,7 @@ // '.' and ',' should only be allowed if prev/next entry is a digit
                     isInDigitRun = true;
-                    result += MathAtom.toSpeakableFragment(atom[i], options);
+                    result += Atom.toSpeakableFragment(atom[i], options);
                 }
             } else {
                 isInDigitRun = false;
-                result += MathAtom.toSpeakableFragment(atom[i], options);
+                result += Atom.toSpeakableFragment(atom[i], options);
             }
@@ -292,8 +290,8 @@ }
             case 'root':
-                result += MathAtom.toSpeakableFragment(atom.body, options);
+                result += Atom.toSpeakableFragment(atom.body, options);
                 break;
 
             case 'genfrac':
-                numer = MathAtom.toSpeakableFragment(atom.numer, options);
-                denom = MathAtom.toSpeakableFragment(atom.denom, options);
+                numer = Atom.toSpeakableFragment(atom.numer, options);
+                denom = Atom.toSpeakableFragment(atom.denom, options);
                 if (isAtomic(atom.numer) && isAtomic(atom.denom)) {
@@ -348,3 +346,3 @@ const COMMON_FRACTIONS = {
             case 'surd':
-                body = MathAtom.toSpeakableFragment(atom.body, options);
+                body = Atom.toSpeakableFragment(atom.body, options);
 
@@ -361,6 +359,3 @@ if (!atom.index) {
                 } else {
-                    let index = MathAtom.toSpeakableFragment(
-                        atom.index,
-                        options
-                    );
+                    let index = Atom.toSpeakableFragment(atom.index, options);
                     index = index.trim();
@@ -392,3 +387,3 @@ const index2 = index.replace(/<mark([^/]*)\/>/g, '');
                 result += PRONUNCIATION[atom.leftDelim] || atom.leftDelim;
-                result += MathAtom.toSpeakableFragment(atom.body, options);
+                result += Atom.toSpeakableFragment(atom.body, options);
                 result += PRONUNCIATION[atom.rightDelim] || atom.rightDelim;
@@ -431,3 +426,3 @@ break;
                 ) {
-                    result = MathAtom.toSpeakableFragment(atom.body, options);
+                    result = Atom.toSpeakableFragment(atom.body, options);
                     break;
@@ -466,6 +461,3 @@ }
                     } else {
-                        result += MathAtom.toSpeakableFragment(
-                            atom.body,
-                            options
-                        );
+                        result += Atom.toSpeakableFragment(atom.body, options);
                     }
@@ -485,3 +477,3 @@ if (atom.type === 'mbin') {
                         if (atom.superscript && atom.subscript) {
-                            let sup = MathAtom.toSpeakableFragment(
+                            let sup = Atom.toSpeakableFragment(
                                 atom.superscript,
@@ -491,3 +483,3 @@ options
                             sup = sup.trim();
-                            let sub = MathAtom.toSpeakableFragment(
+                            let sub = Atom.toSpeakableFragment(
                                 atom.subscript,
@@ -505,3 +497,3 @@ options
                         } else if (atom.subscript) {
-                            let sub = MathAtom.toSpeakableFragment(
+                            let sub = Atom.toSpeakableFragment(
                                 atom.subscript,
@@ -521,3 +513,3 @@ options
                         if (atom.superscript && atom.subscript) {
-                            let sup = MathAtom.toSpeakableFragment(
+                            let sup = Atom.toSpeakableFragment(
                                 atom.superscript,
@@ -527,3 +519,3 @@ options
                             sup = sup.trim();
-                            let sub = MathAtom.toSpeakableFragment(
+                            let sub = Atom.toSpeakableFragment(
                                 atom.subscript,
@@ -541,3 +533,3 @@ options
                         } else if (atom.subscript) {
-                            let sub = MathAtom.toSpeakableFragment(
+                            let sub = Atom.toSpeakableFragment(
                                 atom.subscript,
@@ -557,3 +549,3 @@ options
                         if (atom.superscript && atom.subscript) {
-                            let sup = MathAtom.toSpeakableFragment(
+                            let sup = Atom.toSpeakableFragment(
                                 atom.superscript,
@@ -563,3 +555,3 @@ options
                             sup = sup.trim();
-                            let sub = MathAtom.toSpeakableFragment(
+                            let sub = Atom.toSpeakableFragment(
                                 atom.subscript,
@@ -599,3 +591,3 @@ options
             case 'enclose':
-                body = MathAtom.toSpeakableFragment(atom.body, options);
+                body = Atom.toSpeakableFragment(atom.body, options);
 
@@ -617,3 +609,3 @@ if (isAtomic(atom.body)) {
         if (!supsubHandled && atom.superscript) {
-            let sup = MathAtom.toSpeakableFragment(atom.superscript, options);
+            let sup = Atom.toSpeakableFragment(atom.superscript, options);
             sup = sup.trim();
@@ -654,3 +646,3 @@ const sup2 = sup.replace(/<[^>]*>/g, '');
         if (!supsubHandled && atom.subscript) {
-            let sub = MathAtom.toSpeakableFragment(atom.subscript, options);
+            let sub = Atom.toSpeakableFragment(atom.subscript, options);
             sub = sub.trim();
@@ -669,3 +661,3 @@ if (isAtomic(atom.subscript)) {
 /**
- * @param {MathAtom[]}  atoms The atoms to represent as speakable text.
+ * @param {Atom[]}  atoms The atoms to represent as speakable text.
  * If omitted, `this` is used.
@@ -675,3 +667,3 @@ * @param {Object.<string, any>} speechOptions
  */
-MathAtom.toSpeakableText = function(atoms, speechOptions) {
+Atom.toSpeakableText = function(atoms, speechOptions) {
     const options = speechOptions
@@ -687,3 +679,3 @@ ? JSON.parse(JSON.stringify(speechOptions))
         options.generateID = true;
-        const mathML = MathAtom.toMathML(atoms, options);
+        const mathML = Atom.toMathML(atoms, options);
         if (mathML) {
@@ -711,3 +703,3 @@ if (options.textToSpeechMarkup) {
 
-    let result = MathAtom.toSpeakableFragment(atoms, options);
+    let result = Atom.toSpeakableFragment(atoms, options);
 
@@ -714,0 +706,0 @@ if (options.textToSpeechMarkup === 'ssml') {

dist/src/core/context.js

@@ -35,3 +35,3 @@ import Mathstyle from './mathstyle.js';
  */
-class Context {
+export class Context {
     constructor(from) {
@@ -103,5 +103,1 @@ this.macros = from.macros || {};
 }
-
-export default {
-    Context,
-};

dist/src/core/delimiters.js

@@ -26,11 +26,12 @@ /**
 
-import Definitions from './definitions.js';
-import Span from './span.js';
+import { getValue } from './definitions-utils.js';
+import {
+    makeSpanOfType,
+    makeSymbol,
+    makeSpan,
+    makeVlist,
+    makeStyleWrap,
+} from './span.js';
 import Mathstyle from './mathstyle.js';
-import FontMetrics from './fontMetrics.js';
-
-const makeSymbol = Span.makeSymbol;
-const makeSpan = Span.makeSpan;
-const makeVlist = Span.makeVlist;
-
+import { getCharacterMetrics, METRICS } from './font-metrics.js';
 /**
@@ -44,11 +45,5 @@ * Makes a small delimiter. This is a delimiter that comes in the Main-Regular
 function makeSmallDelim(type, delim, style, center, context, classes) {
-    const text = makeSymbol('AMS-Regular', Definitions.getValue('math', delim));
+    const text = makeSymbol('AMS-Regular', getValue('math', delim));
 
-    const span = Span.makeStyleWrap(
-        type,
-        text,
-        context.mathstyle,
-        style,
-        classes
-    );
+    const span = makeStyleWrap(type, text, context.mathstyle, style, classes);
 
@@ -77,6 +72,6 @@ if (center) {
         'Size' + size + '-Regular',
-        Definitions.getValue('math', delim)
+        getValue('math', delim)
     );
 
-    const result = Span.makeStyleWrap(
+    const result = makeStyleWrap(
         type,
@@ -120,3 +115,3 @@ makeSpan(inner, 'delimsizing size' + size),
     const inner = makeSpan(
-        makeSymbol(font, Definitions.getValue('math', symbol)),
+        makeSymbol(font, getValue('math', symbol)),
         'delimsizinginner' + sizeClass
@@ -141,3 +136,3 @@ );
     let bottom;
-    top = repeat = bottom = Definitions.getValue('math', delim);
+    top = repeat = bottom = getValue('math', delim);
     middle = null;
@@ -270,16 +265,7 @@ // Also keep track of what font the delimiters are in
     // Get the metrics of the four sections
-    const topMetrics = FontMetrics.getCharacterMetrics(
-        Definitions.getValue('math', top),
-        font
-    );
+    const topMetrics = getCharacterMetrics(getValue('math', top), font);
     const topHeightTotal = topMetrics.height + topMetrics.depth;
-    const repeatMetrics = FontMetrics.getCharacterMetrics(
-        Definitions.getValue('math', repeat),
-        font
-    );
+    const repeatMetrics = getCharacterMetrics(getValue('math', repeat), font);
     const repeatHeightTotal = repeatMetrics.height + repeatMetrics.depth;
-    const bottomMetrics = FontMetrics.getCharacterMetrics(
-        Definitions.getValue('math', bottom),
-        font
-    );
+    const bottomMetrics = getCharacterMetrics(getValue('math', bottom), font);
     const bottomHeightTotal = bottomMetrics.height + bottomMetrics.depth;
@@ -289,4 +275,4 @@ let middleHeightTotal = 0;
     if (middle !== null) {
-        const middleMetrics = FontMetrics.getCharacterMetrics(
-            Definitions.getValue('math', middle),
+        const middleMetrics = getCharacterMetrics(
+            getValue('math', middle),
             font
@@ -356,3 +342,3 @@ );
 
-    return Span.makeStyleWrap(
+    return makeStyleWrap(
         type,
@@ -543,3 +529,3 @@ makeSpan(inner, 'delimsizing mult'),
 
-        const metrics = FontMetrics.getCharacterMetrics(
+        const metrics = getCharacterMetrics(
             delim,
@@ -580,3 +566,3 @@ delimTypeToFont(sequence[i])
  * @param {boolean} center
- * @param {Context.Context} context
+ * @param {Context} context
  * @param {string[]} classes
@@ -609,3 +595,3 @@ * @memberof module:delimiters
     const delimType = traverseSequence(
-        Definitions.getValue('math', delim),
+        getValue('math', delim),
         height,
@@ -660,3 +646,3 @@ sequence,
     const delimiterFactor = 901; // plain.tex:327
-    const delimiterShortfall = 5.0 / FontMetrics.METRICS.ptPerEm; // plain.tex:345
+    const delimiterShortfall = 5.0 / METRICS.ptPerEm; // plain.tex:345
 
@@ -698,3 +684,3 @@ let delta2 = depth + axisHeight;
 function makeNullFence(type, context, classes) {
-    return Span.makeSpanOfType(
+    return makeSpanOfType(
         type,
@@ -701,0 +687,0 @@ '',

dist/src/core/mathstyle.js

@@ -19,3 +19,3 @@ /**
 
-import { SIGMAS } from './fontMetrics.js';
+import { SIGMAS } from './font-metrics.js';
 
@@ -22,0 +22,0 @@ const metrics = [{}, {}, {}]; /* textstyle, scriptstyle, scriptscriptstyle */

dist/src/core/parser.js

@@ -6,12 +6,14 @@ /**
 
-import Definitions from './definitions.js';
+import {
+    getEnvironmentInfo,
+    getInfo,
+    matchCodepoint,
+} from './definitions-utils.js';
 import Color from './color.js';
-import FontMetrics from './fontMetrics.js';
+import { convertDimenToEm } from './font-metrics.js';
 import Lexer from './lexer.js';
-import MathAtomModule from './mathAtom.js';
+import { Atom } from './atom.js';
 
-const MathAtom = MathAtomModule.MathAtom;
-
 /**
- * A parser transforms a list of tokens into a list of MathAtom.
+ * A parser transforms a list of tokens into a list of Atom.
  *
@@ -32,3 +34,3 @@ * @param {Token[]} tokens - An array of tokens generated by the lexer.
  * @property {number} index - The current token to be parsed: index in `this.tokens`
- * @property {MathAtom[]} mathList - Accumulated result of the parsing by
+ * @property {Atom[]} mathList - Accumulated result of the parsing by
  * `parseAtom()`
@@ -111,3 +113,3 @@ * @property {object} style - The font, weight, color, etc. to apply to the
             // ZERO WIDTH SPACE
-            const lastAtom = new MathAtom(this.parseMode, 'msubsup', '\u200b');
+            const lastAtom = new Atom(this.parseMode, 'msubsup', '\u200b');
             lastAtom.attributes = { 'aria-hidden': true };
@@ -175,3 +177,3 @@ this.mathList.push(lastAtom);
         ) {
-            const info = Definitions.getInfo(
+            const info = getInfo(
                 '\\' + this.tokens[index].value,
@@ -223,8 +225,3 @@ this.parseMode,
         // U+2753 = BLACK QUESTION MARK ORNAMENT
-        const result = new MathAtom(
-            this.parseMode,
-            'placeholder',
-            '?',
-            this.style
-        );
+        const result = new Atom(this.parseMode, 'placeholder', '?', this.style);
         result.captureSelection = true;
@@ -274,2 +271,49 @@ return [result];
     }
+    parseArguments(info) {
+        if (!info || !info.params) return ['', [], ''];
+        let explicitGroup = '';
+        const args = [];
+        let argString = '';
+        let i = info.infix ? 2 : 0;
+        while (i < info.params.length) {
+            const param = info.params[i];
+            // Parse an argument
+            if (param.optional) {
+                args.push(this.scanOptionalArg(param.type));
+            } else if (param.type.endsWith('*')) {
+                explicitGroup = param.type.slice(0, -1);
+            } else {
+                // If it's not present, scanArg returns null.
+                // Add a placeholder instead.
+                const arg = this.scanArg(param.type);
+                if (
+                    arg &&
+                    arg.length === 1 &&
+                    arg[0].type === 'placeholder' &&
+                    param.placeholder
+                ) {
+                    arg[0].value = param.placeholder;
+                }
+                if (arg) {
+                    args.push(arg);
+                } else if (param.placeholder) {
+                    const placeholder = new Atom(
+                        this.parseMode,
+                        'placeholder',
+                        param.placeholder
+                    );
+                    placeholder.captureSelection = true;
+
+                    args.push([placeholder]);
+                } else {
+                    args.push(this.placeholder());
+                }
+                if (param.type !== 'math' && typeof arg === 'string') {
+                    argString += arg;
+                }
+            }
+            i += 1;
+        }
+        return [explicitGroup, args, argString];
+    }
     parseCommand(command) {
@@ -447,26 +491,26 @@ if (this.hasCommand(command)) {
         if (this.parseKeyword('pt')) {
-            result = FontMetrics.toEm(value, 'pt');
+            result = convertDimenToEm(value, 'pt');
         } else if (this.parseKeyword('mm')) {
-            result = FontMetrics.toEm(value, 'mm');
+            result = convertDimenToEm(value, 'mm');
         } else if (this.parseKeyword('cm')) {
-            result = FontMetrics.toEm(value, 'cm');
+            result = convertDimenToEm(value, 'cm');
         } else if (this.parseKeyword('ex')) {
-            result = FontMetrics.toEm(value, 'ex');
+            result = convertDimenToEm(value, 'ex');
         } else if (this.parseKeyword('px')) {
-            result = FontMetrics.toEm(value, 'px');
+            result = convertDimenToEm(value, 'px');
         } else if (this.parseKeyword('em')) {
-            result = FontMetrics.toEm(value, 'em');
+            result = convertDimenToEm(value, 'em');
         } else if (this.parseKeyword('bp')) {
-            result = FontMetrics.toEm(value, 'bp');
+            result = convertDimenToEm(value, 'bp');
         } else if (this.parseKeyword('dd')) {
-            result = FontMetrics.toEm(value, 'dd');
+            result = convertDimenToEm(value, 'dd');
         } else if (this.parseKeyword('pc')) {
-            result = FontMetrics.toEm(value, 'pc');
+            result = convertDimenToEm(value, 'pc');
         } else if (this.parseKeyword('in')) {
-            result = FontMetrics.toEm(value, 'in');
+            result = convertDimenToEm(value, 'in');
         } else if (this.parseKeyword('mu')) {
-            result = FontMetrics.toEm(value, 'mu');
+            result = convertDimenToEm(value, 'mu');
         } else {
             // If the units are missing, TeX assumes 'pt'
-            result = FontMetrics.toEm(value, 'pt');
+            result = convertDimenToEm(value, 'pt');
         }
@@ -509,3 +553,3 @@ return result;
                             gap: this.scanImplicitGroup(
-                                token => token.type === '}'
+                                (token) => token.type === '}'
                             ),
@@ -523,3 +567,3 @@ });
      * Parse a `\(...\)` or `\[...\]` sequence
-     * @return {MathAtom} group for the sequence or null
+     * @return {Atom} group for the sequence or null
      * @method module:core/parser#Parser#scanModeSet
@@ -534,6 +578,6 @@ * @private
         const savedParsemode = this.swapParseMode('math');
-        const result = new MathAtom('math', 'group');
+        const result = new Atom('math', 'group');
         result.mathstyle = final === ')' ? 'textstyle' : 'displaystyle';
         result.body = this.scanImplicitGroup(
-            token => token.type === 'command' && token.value === final
+            (token) => token.type === 'command' && token.value === final
         );
@@ -553,3 +597,3 @@ this.parseCommand(final);
         const final = this.get().type;
-        const result = new MathAtom('math', 'group');
+        const result = new Atom('math', 'group');
         result.mathstyle = final === '$' ? 'textstyle' : 'displaystyle';
@@ -559,3 +603,3 @@ result.latexOpen = result.mathstyle === 'textstyle' ? '$' : '$$';
         const savedParsemode = this.swapParseMode('math');
-        result.body = this.scanImplicitGroup(token => token.type === final);
+        result.body = this.scanImplicitGroup((token) => token.type === final);
         this.parseToken(final);
@@ -577,3 +621,3 @@ this.swapParseMode(savedParsemode);
         const envName = this.scanArg('string');
-        const env = Definitions.getEnvironmentInfo(envName);
+        const env = getEnvironmentInfo(envName);
         // If the environment has some arguments, parse them
@@ -647,3 +691,3 @@ const args = [];
         if (env.tabular && array.length === 0) return null;
-        const result = new MathAtom(
+        const result = new Atom(
             this.parseMode,
@@ -669,3 +713,3 @@ 'array',
      * token signals the end of an implicit group
-     * @return {MathAtom[]}
+     * @return {Atom[]}
      * @method module:core/parser#Parser#scanImplicitGroup
@@ -679,3 +723,3 @@ * @private
         if (!done) {
-            done = token =>
+            done = (token) =>
                 token.type === '}' ||
@@ -685,5 +729,7 @@ (token.type === 'literal' && token.value === '&') ||
         }
-        // To handle infix operators, we'll keep track of their prefix
-        // (tokens coming before them)
+        // To handle infix commands, we'll keep track of their prefix
+        // (tokens coming before them) and their arguments
         let infix = null; // A token
+        let infixInfo = null;
+        let infixArgs = [];
         let prefix = null; // A mathlist
@@ -706,3 +752,3 @@ const savedMathlist = this.swapMathList([]);
                 this.parseMode = 'math';
-                const atom = new MathAtom('math', 'mathstyle');
+                const atom = new Atom('math', 'mathstyle');
                 atom.mathstyle = this.get().value;
@@ -714,2 +760,10 @@ this.mathList.push(atom);
                 infix = this.get();
+                // The current parseMode, this.parseMode, may no longer have the value
+                // it had when we encountered the infix. However, since all infix are
+                // only defined in 'math' mode, we can use the 'math' constant
+                // for the parseMode
+                infixInfo = getInfo('\\' + infix.value, 'math', this.macros);
+                if (infixInfo) {
+                    [, infixArgs] = this.parseArguments(infixInfo);
+                }
                 // Save the math list so far and start a new one
@@ -723,20 +777,12 @@ prefix = this.swapMathList([]);
         if (infix) {
-            const suffix = this.swapMathList(savedMathlist);
-            // The current parseMode, this.parseMode, may no longer have the value
-            // it had when we encountered the infix. However, since all infix are
-            // only defined in 'math' mode, we can use the 'math' constant
-            // for the parseMode
-            const info = Definitions.getInfo(
-                '\\' + infix.value,
-                'math',
-                this.macros
-            );
-            if (info) {
+            if (infixInfo) {
+                infixArgs.unshift(this.swapMathList(savedMathlist)); // suffix
+                infixArgs.unshift(prefix);
                 result = [
-                    new MathAtom(
+                    new Atom(
                         this.parseMode,
-                        info.type,
-                        info.value || infix.value, // Functions don't have
-                        info.parse
-                            ? info.parse('\\' + infix.value, [prefix, suffix])
+                        infixInfo.type,
+                        infixInfo.value || infix.value, // Functions don't have
+                        infixInfo.parse
+                            ? infixInfo.parse('\\' + infix.value, infixArgs)
                             : null
@@ -746,3 +792,3 @@ ),
             } else {
-                result = [new MathAtom(this.parseMode, 'mop', infix.value)];
+                result = [new Atom(this.parseMode, 'mop', infix.value)];
             }
@@ -760,7 +806,7 @@ } else {
      *
-     * Return either a group MathAtom or null if not a group.
+     * Return either a group Atom or null if not a group.
      *
-     * Return a group MathAtom with an empty body if an empty
+     * Return a group Atom with an empty body if an empty
      * group (i.e. `{}`).
-     * @return {MathAtom}
+     * @return {Atom}
      * @method module:core/parser#Parser#scanGroup
@@ -771,4 +817,4 @@ * @private
         if (!this.parseToken('{')) return null;
-        const result = new MathAtom(this.parseMode, 'group');
-        result.body = this.scanImplicitGroup(token => token.type === '}');
+        const result = new Atom(this.parseMode, 'group');
+        result.body = this.scanImplicitGroup((token) => token.type === '}');
         this.parseToken('}');
@@ -783,3 +829,3 @@ result.latexOpen = '{';
         // We've found an open paren... Convert to a `\mleft...\mright`
-        const result = new MathAtom(this.parseMode, 'leftright');
+        const result = new Atom(this.parseMode, 'leftright');
         result.leftDelim = '(';
@@ -817,3 +863,3 @@ result.inner = false; // It's a `\mleft`, not a `\left`
         }
-        const info = Definitions.getInfo(delim, 'math', this.macros);
+        const info = getInfo(delim, 'math', this.macros);
         if (!info) return null;
@@ -843,3 +889,3 @@ if (info.type === 'mopen' || info.type === 'mclose') {
      * Return either an atom of type `'leftright'` or null
-     * @return {MathAtom}
+     * @return {Atom}
      * @method module:core/parser#Parser#scanLeftRight
@@ -875,3 +921,3 @@ * @private
 
-        const result = new MathAtom(this.parseMode, 'leftright');
+        const result = new Atom(this.parseMode, 'leftright');
         result.leftDelim = leftDelim;
@@ -888,3 +934,3 @@ result.rightDelim = rightDelim;
      *
-     * @return {MathAtom}
+     * @return {Atom}
      * @method module:core/parser#Parser#parseSupSub
@@ -925,3 +971,3 @@ * @private
                 atom.superscript.push(
-                    new MathAtom(atom.parseMode, 'mord', '\u2032')
+                    new Atom(atom.parseMode, 'mord', '\u2032')
                 );
@@ -1010,3 +1056,3 @@ result = true;
                             result = result || {};
-                            result.padding = FontMetrics.toEm(m[1], m[2]);
+                            result.padding = convertDimenToEm(m[1], m[2]);
                         } else {
@@ -1028,3 +1074,4 @@ const m = elem.match(/^\s*border\s*:\s*(.*)/);
                     this.scanImplicitGroup(
-                        token => token.type === 'literal' && token.value === ']'
+                        (token) =>
+                            token.type === 'literal' && token.value === ']'
                     )
@@ -1128,3 +1175,3 @@ );
     /**
-     * @return {MathAtom[]|MathAtom}
+     * @return {Atom[]|Atom}
      * @method module:core/parser#Parser#scanToken
@@ -1139,7 +1186,7 @@ * @private
             if (this.parseMode === 'text') {
-                result = new MathAtom('text', '', ' ', this.style);
+                result = new Atom('text', '', ' ', this.style);
             }
         } else if (token.type === 'placeholder') {
             // RENDER PLACEHOLDER
-            result = new MathAtom(this.parseMode, 'placeholder', token.value);
+            result = new Atom(this.parseMode, 'placeholder', token.value);
             result.captureSelection = true;
@@ -1149,3 +1196,3 @@ } else if (token.type === 'command') {
             if (token.value === 'placeholder') {
-                result = new MathAtom(
+                result = new Atom(
                     this.parseMode,
@@ -1168,3 +1215,3 @@ 'placeholder',
                 }
-                result = new MathAtom(
+                result = new Atom(
                     this.parseMode,
@@ -1185,3 +1232,3 @@ this.parseMode === 'math' ? 'mord' : '',
                 if (isFinite(width)) {
-                    result = new MathAtom(
+                    result = new Atom(
                         this.parseMode,
@@ -1198,3 +1245,3 @@ 'spacing',
                 if (!result) {
-                    const info = Definitions.getInfo(
+                    const info = getInfo(
                         '\\' + token.value,
@@ -1204,7 +1251,4 @@ this.parseMode,
                     );
-                    const args = [];
-                    let argString = '';
 
                     // Parse the arguments
-                    // let mandatoryParamsCount = 0;
                     // If explicitGroup is not empty, an explicit group is expected
@@ -1218,49 +1262,7 @@ // to follow the command and will be parsed *after* the
                     // of 'auto*'
-                    let explicitGroup = '';
-                    if (info && info.params) {
-                        for (const param of info.params) {
-                            // Parse an argument
-                            if (param.optional) {
-                                // If it's not present, return the default argument value
-                                const arg = this.scanOptionalArg(param.type);
-                                // args.push(arg ? arg : param.defaultValue); @todo defaultvalue
-                                args.push(arg);
-                            } else if (param.type.endsWith('*')) {
-                                explicitGroup = param.type.slice(0, -1);
-                            } else {
-                                // mandatoryParamsCount += 1;
-                                // If it's not present, scanArg returns null.
-                                // Add a placeholder instead.
-                                const arg = this.scanArg(param.type);
-                                if (
-                                    arg &&
-                                    arg.length === 1 &&
-                                    arg[0].type === 'placeholder' &&
-                                    param.placeholder
-                                ) {
-                                    arg[0].value = param.placeholder;
-                                }
-                                if (arg) {
-                                    args.push(arg);
-                                } else if (param.placeholder) {
-                                    const placeholder = new MathAtom(
-                                        this.parseMode,
-                                        'placeholder',
-                                        param.placeholder
-                                    );
-                                    placeholder.captureSelection = true;
-
-                                    args.push([placeholder]);
-                                } else {
-                                    args.push(this.placeholder());
-                                }
-                                if (
-                                    param.type !== 'math' &&
-                                    typeof arg === 'string'
-                                ) {
-                                    argString += arg;
-                                }
-                            }
-                        }
-                    }
+                    const [
+                        explicitGroup,
+                        args,
+                        argString,
+                    ] = this.parseArguments(info);
                     if (info && !info.infix) {
@@ -1271,3 +1273,3 @@ // Infix commands should be handled in scanImplicitGroup
 
-                        // Create the MathAtom.
+                        // Create the Atom.
                         // If a parse function is present, invoke it with the arguments,
@@ -1309,3 +1311,3 @@ // and pass the result to be appended by the constructor.
                             } else {
-                                result = new MathAtom(
+                                result = new Atom(
                                     this.parseMode,
@@ -1323,3 +1325,3 @@ info.type,
                                 style.baseFontFamily = info.baseFontFamily;
-                            result = new MathAtom(
+                            result = new Atom(
                                 this.parseMode,
@@ -1340,3 +1342,3 @@ info.type || 'mop',
                             result.latex = '\\' + token.value;
-                            if (argString /*|| mandatoryParamsCount > 0*/) {
+                            if (argString) {
                                 result.latex += '{' + argString + '}';
@@ -1357,3 +1359,3 @@ }
                         // An unknown command
-                        result = new MathAtom(
+                        result = new Atom(
                             this.parseMode,
@@ -1368,7 +1370,3 @@ 'error',
         } else if (token.type === 'literal') {
-            const info = Definitions.getInfo(
-                token.value,
-                this.parseMode,
-                this.macros
-            );
+            const info = getInfo(token.value, this.parseMode, this.macros);
             if (info) {
@@ -1378,3 +1376,3 @@ const style = { ...this.style };
                     style.baseFontFamily = info.baseFontFamily;
-                result = new MathAtom(
+                result = new Atom(
                     this.parseMode,
@@ -1389,3 +1387,3 @@ info.type,
             } else {
-                result = new MathAtom(
+                result = new Atom(
                     this.parseMode,
@@ -1397,3 +1395,3 @@ this.parseMode === 'math' ? 'mord' : '',
             }
-            result.latex = Definitions.matchCodepoint(
+            result.latex = matchCodepoint(
                 this.parseMode,
@@ -1411,3 +1409,3 @@ token.value.codePointAt(0)
         } else if (token.type === '#') {
-            // Parameter token in an implicit group (not as a parameter)
+            // Parameter token
             if (token.value === '?') {
@@ -1417,13 +1415,4 @@ // '#?' indicates that a placeholder should be used
             } else if (this.args) {
-                result = this.args[token.value] || null;
-                if (Array.isArray(result) && result.length === 1) {
-                    result = result[0];
-                } else if (Array.isArray(result)) {
-                    const group = new MathAtom(this.parseMode, 'group');
-                    group.body = result;
-                    result = group;
-                } else {
-                    // If there is no argument value specified, use a placeholder
-                    result = this.placeholder();
-                }
+                // Otherwise, substitute the token with a provided argument
+                result = this.args[token.value] || this.placeholder();
             }
@@ -1476,3 +1465,3 @@ } else {
         // unit
-        const atom = new MathAtom(
+        const atom = new Atom(
             this.parseMode,
@@ -1498,3 +1487,3 @@ 'group',
     /**
-     * Make a MathAtom for the current token or token group and
+     * Make a Atom for the current token or token group and
      * add it to the parser's current mathList
@@ -1535,3 +1524,3 @@ * @method module:core/parser#Parser#parseAtom
  * as `\left...\right` or `\mleft...\mright`
- * @return {object[]} An array of MathAtom
+ * @return {object[]} An array of Atom
  * @method module:core/parser#parseTokens
@@ -1538,0 +1527,0 @@ * @private

dist/src/core/span.js

@@ -6,3 +6,4 @@ /**
 
-import FontMetrics from './fontMetrics.js';
+import { getCharacterMetrics } from './font-metrics.js';
+import { svgBodyToMarkup, svgBodyHeight } from './svg-span.js';
 
@@ -96,3 +97,3 @@ /**
         if (this.children) {
-            this.children.forEach(x => {
+            this.children.forEach((x) => {
                 if (x.height > height) height = x.height;
@@ -117,3 +118,3 @@ if (x.depth > depth) depth = x.depth;
         if (this.children) {
-            this.children.forEach(x => x.selected(isSelected));
+            this.children.forEach((x) => x.selected(isSelected));
         }
@@ -252,3 +253,3 @@ }
             for (let i = 0; i < this.body.length; i++) {
-                const metrics = FontMetrics.getCharacterMetrics(
+                const metrics = getCharacterMetrics(
                     this.body.charAt(i),
@@ -324,31 +325,31 @@ fontName
 
-    addMarginRight(margin) {
-        if (margin && margin !== 0) {
-            if (
-                !this.style &&
-                !/qquad|quad|enspace|thickspace|mediumspace|thinspace|negativethinspace/.test(
-                    this.classes
-                )
-            ) {
-                // Attempt to use a class instead of an explicit margin
-                const cls = {
-                    '2': 'qquad',
-                    '1': 'quad',
-                    '.5': 'enspace',
-                    '0.277778': 'thickspace',
-                    '0.222222': 'mediumspace',
-                    '0.166667': 'thinspace',
-                    '-0.166667': 'negativethinspace',
-                }[margin.toString()];
-                if (cls) {
-                    this.classes += ' rspace ' + cls;
-                    return;
-                }
-            }
-            if (!this.style) this.style = {};
-            const currentMargin = parseFloat(this.style['margin-right'] || '0');
-            this.style['margin-right'] =
-                toString(currentMargin + margin) + 'em';
-        }
-    }
+    // addMarginRight(margin) {
+    //     if (margin && margin !== 0) {
+    //         if (
+    //             !this.style &&
+    //             !/qquad|quad|enspace|thickspace|mediumspace|thinspace|negativethinspace/.test(
+    //                 this.classes
+    //             )
+    //         ) {
+    //             // Attempt to use a class instead of an explicit margin
+    //             const cls = {
+    //                 '2': 'qquad',
+    //                 '1': 'quad',
+    //                 '.5': 'enspace',
+    //                 '0.277778': 'thickspace',
+    //                 '0.222222': 'mediumspace',
+    //                 '0.166667': 'thinspace',
+    //                 '-0.166667': 'negativethinspace',
+    //             }[margin.toString()];
+    //             if (cls) {
+    //                 this.classes += ' rspace ' + cls;
+    //                 return;
+    //             }
+    //         }
+    //         if (!this.style) this.style = {};
+    //         const currentMargin = parseFloat(this.style['margin-right'] || '0');
+    //         this.style['margin-right'] =
+    //             toString(currentMargin + margin) + 'em';
+    //     }
+    // }
     /**
@@ -398,4 +399,7 @@ * Generate the HTML markup to represent this span.
         if (
-            (body === '\u200b' || !body) &&
-            (!this.classes || this.classes === 'ML__selected')
+            (body === '\u200b' || (!body && !this.svgBody)) &&
+            (!this.classes || this.classes === 'ML__selected') &&
+            !this.cssId &&
+            !this.style &&
+            !this.svgOverlay
         ) {
@@ -412,24 +416,11 @@ result = '';
 
-            if (this.svgOverlay) {
-                this.setStyle('position', 'relative');
-                this.setStyle('height', this.height + this.depth, 'em');
-                this.setStyle('vertical-align', -this.depth, 'em');
-            }
-
             if (this.attributes) {
-                for (const attribute in this.attributes) {
-                    if (
-                        Object.prototype.hasOwnProperty.call(
-                            this.attributes,
-                            attribute
+                result +=
+                    ' ' +
+                    Object.keys(this.attributes)
+                        .map(
+                            (attribute) =>
+                                `${attribute}="${this.attributes[attribute]}"`
                         )
-                    ) {
-                        result +=
-                            ' ' +
-                            attribute +
-                            '="' +
-                            this.attributes[attribute] +
-                            '"';
-                    }
-                }
+                        .join(' ');
             }
@@ -459,3 +450,3 @@
                 classList = classes
-                    .filter(function(x, e, a) {
+                    .filter(function (x, e, a) {
                         return x.length > 0 && a.indexOf(x) === e;
@@ -469,3 +460,3 @@ })
             if (classList.length > 0) {
-                result += ' class="' + classList + '"';
+                result += ` class="${classList}"`;
             }
@@ -518,3 +509,5 @@
             // include it now
-            if (this.svgOverlay) {
+            if (this.svgBody) {
+                result += svgBodyToMarkup(this.svgBody);
+            } else if (this.svgOverlay) {
                 result += '<span style="';
@@ -528,13 +521,5 @@ result += 'display: inline-block;';
                 result += '<svg ';
-                // result += 'style="position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;';
                 result += 'style="position:absolute;';
                 result += 'overflow:overlay;';
                 result += 'height:' + (this.height + this.depth) + 'em;';
-                result +=
-                    'transform:translateY(-' +
-                    Math.round(
-                        FontMetrics.toPx(this.depth, 'em') +
-                            FontMetrics.toPx(this.style.padding)
-                    ) +
-                    'px);';
                 if (this.style && this.style.padding) {
@@ -590,5 +575,7 @@ result += 'top:' + this.style.padding + ';';
     tryCoalesceWith(span) {
+        // Don't coalesce if the tag or type are different
         if (this.tag !== span.tag) return false;
         if (this.type !== span.type) return false;
-        // Don't coalesce consecutive errors or placeholders
+
+        // Don't coalesce consecutive errors, placeholders or commands
         if (
@@ -600,2 +587,7 @@ this.type === 'error' ||
             return false;
+
+        // Don't coalesce if some of the content is SVG
+        if (this.svgBody || !this.body) return false;
+        if (span.svgBody || !span.body) return false;
+
         // If this span or the candidate span have children, we can't
@@ -606,2 +598,3 @@ // coalesce them, but we'll try to coalesce their children
         if (hasChildren || spanHasChildren) return false;
+
         // If they have a different number of styles, can't coalesce
@@ -611,14 +604,11 @@ const thisStyleCount = this.style ? this.style.length : 0;
         if (thisStyleCount !== spanStyleCount) return false;
+
         // For the purpose of our comparison,
         // any 'empty' classes (whitespace)
-        const classes = this.classes
-            .trim()
-            .replace(/\s+/g, ' ')
-            .split(' ');
-        const spanClasses = span.classes
-            .trim()
-            .replace(/\s+/g, ' ')
-            .split(' ');
+        const classes = this.classes.trim().replace(/\s+/g, ' ').split(' ');
+        const spanClasses = span.classes.trim().replace(/\s+/g, ' ').split(' ');
+
         // If they have a different number of classes, can't coalesce
         if (classes.length !== spanClasses.length) return false;
+
         // OK, let's do the more expensive comparison now.
@@ -634,2 +624,3 @@ // If they have different classes, can't coalesce
         }
+
         // If the styles are different, can't coalesce
@@ -646,2 +637,3 @@ if (this.style && span.style) {
         }
+
         // OK, the attributes of those spans are compatible.
@@ -666,3 +658,3 @@ // Merge span into this
  * This is used to adjust the inter-spacing between spans of different types,
- * e.g. 'bin' and 'rel', according to the TeX rules.
+ * e.g. 'bin' and 'rel', according to the TeX rules (TexBook p.170)
  * @alias module:core/span.INTER_ATOM_SPACING
@@ -758,3 +750,3 @@ * @private
  */
-function coalesce(spans) {
+export function coalesce(spans) {
     if (!spans || spans.length === 0) return [];
@@ -778,3 +770,3 @@
 
-function height(spans) {
+export function height(spans) {
     if (!spans) return 0;
@@ -787,3 +779,3 @@ if (Array.isArray(spans)) {
 
-function depth(spans) {
+export function depth(spans) {
     if (!spans) return 0;
@@ -796,3 +788,3 @@ if (Array.isArray(spans)) {
 
-function skew(spans) {
+export function skew(spans) {
     if (!spans) return 0;
@@ -809,3 +801,3 @@ if (Array.isArray(spans)) {
 
-function italic(spans) {
+export function italic(spans) {
     if (!spans) return 0;
@@ -846,6 +838,6 @@ if (Array.isArray(spans)) {
  */
-function makeSymbol(fontFamily, symbol, classes) {
+export function makeSymbol(fontFamily, symbol, classes) {
     const result = new Span(symbol, classes);
 
-    const metrics = FontMetrics.getCharacterMetrics(symbol, fontFamily);
+    const metrics = getCharacterMetrics(symbol, fontFamily);
     result.height = metrics.height;
@@ -909,3 +901,3 @@ result.depth = metrics.depth;
  */
-function makeSpanOfType(type, content, classes) {
+export function makeSpanOfType(type, content, classes) {
     const result = makeSpan(content, classes);
@@ -916,3 +908,3 @@ result.type = type;
 
-function makeOp(content, classes) {
+export function makeOp(content, classes) {
     return makeSpanOfType('mop', content, classes);
@@ -925,11 +917,11 @@ }
 
-function makeRel(content, classes) {
+export function makeRel(content, classes) {
     return makeSpanOfType('mrel', content, classes);
 }
 
-function makeClose(content, classes) {
+export function makeClose(content, classes) {
     return makeSpanOfType('mclose', content, classes);
 }
 
-function makeOpen(content, classes) {
+export function makeOpen(content, classes) {
     return makeSpanOfType('mopen', content, classes);
@@ -942,7 +934,7 @@ }
 
-function makePunct(content, classes) {
+export function makePunct(content, classes) {
     return makeSpanOfType('mpunct', content, classes);
 }
 
-function makeStyleWrap(type, children, fromStyle, toStyle, classes) {
+export function makeStyleWrap(type, children, fromStyle, toStyle, classes) {
     classes = classes || '';
@@ -970,3 +962,3 @@ classes += ' style-wrap ';
  */
-function makeSVG(body, svgMarkup, svgStyle) {
+export function addSVGOverlay(body, svgMarkup, svgStyle) {
     body.svgOverlay = svgMarkup;
@@ -1125,31 +1117,2 @@ body.svgStyle = svgStyle;
 
-// /**
-//  *
-//  * @param {Span|Span[]} base
-//  * @param {number} strutHeight
-//  * @param {number} strutDepth
-//  */
-// function makeStrut(base, strutHeight, strutDepth) {
-//     return [base];
-//     const topStrut = makeSpan(null, 'ML__strut');
-//     topStrut.height = strutHeight || 0;
-//     topStrut.depth = 0;
-//     topStrut.setStyle('height', strutHeight, 'em');
-
-//     const bottomStrut = makeSpan(null, 'ML__strut--bottom');
-//     bottomStrut.height = strutHeight || 0;
-//     bottomStrut.depth = strutDepth || 0;
-//     bottomStrut.setStyle('height', strutHeight + strutDepth, 'em');
-//     if (strutDepth) {
-//         bottomStrut.setStyle('vertical-align', -strutDepth, 'em');
-//     }
-
-//     if (Array.isArray(base)) {
-//         base.unshift(topStrut);
-//         base.unshift(bottomStrut);
-//         return base;
-//     }
-//     return makeOrd([topStrut, bottomStrut, base]);
-// }
-
 //----------------------------------------------------------------------------
@@ -1233,28 +1196,15 @@ // FONTS
 
-// Export the public interface for this module
-export default {
-    coalesce,
-    makeSpan,
-    makeOp,
-    makeOrd,
-    makeRel,
-    makeClose,
-    makeOpen,
-    makeInner,
-    makePunct,
-
-    makeSpanOfType,
-    makeSymbol,
-    makeVlist,
-    makeHlist,
-    makeStyleWrap,
-
-    // makeStrut,
-
-    makeSVG,
-
-    height,
-    depth,
-    skew,
-    italic,
-};
+/**
+ * Create a span that consist of a (stretchy) SVG element
+ *
+ * @param {string} svgBodyName
+ * @param {string} classes list of classes attributes associated with this node
+ * @private
+ */
+export function makeSVGSpan(svgBodyName, classes) {
+    const span = new Span(null, classes);
+    span.svgBody = svgBodyName;
+    span.height = svgBodyHeight(svgBodyName) / 2;
+    span.depth = span.height;
+    return span;
+}

dist/src/editor/editor-popover.js

@@ -1,115 +0,8 @@
-import MathAtom from '../core/mathAtom.js';
+import { decompose } from '../core/atom-utils.js';
 import Lexer from '../core/lexer.js';
 import ParserModule from '../core/parser.js';
-import Span from '../core/span.js';
+import { makeSpan } from '../core/span.js';
 import Shortcuts from './editor-shortcuts.js';
+import { getInfo } from '../core/definitions-utils.js';
 
-const SAMPLES = {
-    '\\mathrm': '\\mathrm{x=+3.14, x\\in A}',
-    '\\mathbf': '\\mathbf{x=+3.14, x\\in A}',
-    '\\bf': '\\bf{x=+3.14, x\\in A}',
-    '\\bm': '\\bm{x=+3.14, x\\in A}',
-    '\\bold': '\\bold{x=+3.14, x\\in A}',
-    '\\mathit': '\\mathbb{x=+3.14}',
-    '\\mathbb': '\\mathbb{ABCD}',
-    '\\Bbb': '\\mathbb{ABCD}',
-    '\\frak': '\\frak{ABCD}',
-    '\\mathfrak': '\\mathfrak{ABCD}',
-    '\\mathscr': '\\mathscr{ABCD}',
-    '\\mathsf': '\\mathsf{ABab01}',
-    '\\mathtt': '\\mathtt{x=+3.14, x\\in A}',
-    '\\mathcal': '\\mathcal{ABCD}',
-    '\\boldsymbol': '\\boldsymbol{ABab01+=}',
-
-    '\\text': '\\text{ABC abc}',
-    '\\textrm': '\\textrm{ABC abc}',
-    '\\textnormal': '\\textnormal{ABC abc}',
-    '\\textit': '\\textit{ABC abc}',
-    '\\textbf': '\\textbf{ABC abc}',
-    '\\texttt': '\\texttt{ABC abc}',
-    '\\textsf': '\\textsf{ABC abc}',
-    '\\textcolor': `{\\textcolor{m0}A}{\\textcolor{m1}B}{\\textcolor{m2}C }{\\textcolor{m3}a}{\\textcolor{m4}b}{\\textcolor{m5}c}{\\textcolor{m6}8}`,
-    '\\color': `{\\color{m0}A}{\\color{m1}B}{\\color{m2}C}{\\color{m3}a}{\\color{m4}b}{\\color{m5}c}{\\color{m6}8}`,
-
-    '\\underline': '\\underline{\\unicode{"2B1A}}',
-    '\\overline': '\\overline{\\unicode{"2B1A}}',
-
-    '\\vec': '\\vec{\\unicode{"25CC}}',
-    '\\check': '\\check{\\unicode{"25CC}}',
-    '\\acute': '\\acute{\\unicode{"25CC}}',
-    '\\breve': '\\breve{\\unicode{"25CC}}',
-    '\\tilde': '\\tilde{\\unicode{"25CC}}',
-    '\\hat': '\\hat{\\unicode{"25CC}}',
-    '\\ddot': '\\ddot{\\unicode{"25CC}}',
-    '\\dot': '\\dot{\\unicode{"25CC}}',
-    '\\bar': '\\bar{\\unicode{"25CC}}',
-
-    '\\!': '\\unicode{"203A}\\!\\unicode{"2039}',
-    '\\,': '\\unicode{"203A}\\,\\unicode{"2039}',
-    '\\:': '\\unicode{"203A}\\:\\unicode{"2039}',
-    '\\;': '\\unicode{"203A}\\;\\unicode{"2039}',
-    '\\quad': '\\unicode{"203A}\\quad\\unicode{"2039}',
-    '\\qquad': '\\unicode{"203A}\\qquad\\unicode{"2039}',
-    '\\enskip': '\\unicode{"203A}\\enskip\\unicode{"2039}',
-    '\\space': '\\unicode{"203A}\\space\\unicode{"2039}',
-
-    '\\frac': '\\frac{\\unicode{"2B1A}}{\\unicode{"2B1A}}',
-    '\\dfrac': '\\dfrac{\\unicode{"2B1A}}{\\unicode{"2B1A}}',
-    '\\cfrac': '\\cfrac{\\unicode{"2B1A}}{\\unicode{"2B1A}}',
-    '\\tfrac': '\\tfrac{\\unicode{"2B1A}}{\\unicode{"2B1A}}',
-    '\\dbinom': '\\dbinom{\\unicode{"2B1A}}{\\unicode{"2B1A}}',
-    '\\tbinom': '\\tbinom{\\unicode{"2B1A}}{\\unicode{"2B1A}}',
-    '\\binom': '\\binom{\\unicode{"2B1A}}{\\unicode{"2B1A}}',
-    '\\pdiff': '\\pdiff{\\unicode{"2B1A}}{\\unicode{"2B1A}}',
-
-    '\\in': 'n\\in\\N',
-    '\\notin': 'n\\notin\\N',
-    '\\not': 'B \\not A',
-    '\\ni': 'N\\in n',
-    '\\owns': 'N\\owns n',
-    '\\subset': 'A\\subset B',
-    '\\supset': 'B\\supset A',
-    '\\subseteq': 'A\\subseteq B',
-    '\\supseteq': 'B\\supseteq A',
-    '\\nsubseteq': 'A\\nsubseteq B',
-    '\\nsupseteq': 'B\\nsupseteq A',
-    '\\subsetneq': 'A\\subsetneq B',
-    '\\supsetneq': 'B\\supsetneq A',
-    '\\varsubsetneq': 'A\\varsubsetneq B',
-    '\\varsupsetneq': 'B\\varsupsetneq A',
-    '\\nsubseteqq': 'A\\varsupsetneq B',
-    '\\subsetneqq': 'A\\subsetneqq B',
-    '\\varsubsetneqq': 'A\\varsubsetneqq B',
-    '\\nsubset': 'A\\nsubset B',
-    '\\nsupset': 'B\\nsupset A',
-    '\\complement': 'A^\\complement',
-
-    '\\bigcup': '\\bigcup_{\\unicode{"2B1A}}',
-    '\\bigcap': '\\bigcap_{\\unicode{"2B1A}}',
-    '\\sqrt': '\\sqrt{\\unicode{"2B1A}}',
-    '\\prod': '\\prod_{\\unicode{"2B1A}}^{\\unicode{"2B1A}}',
-    '\\sum': '\\sum_{\\unicode{"2B1A}}^{\\unicode{"2B1A}}',
-    '\\int': '\\int_{\\unicode{"2B1A}}^{\\unicode{"2B1A}}',
-    '\\stackrel': '\\stackrel{\\unicode{"2B1A}}{\\unicode{"2B1A}}',
-    '\\stackbin': '\\stackbin{\\unicode{"2B1A}}{\\unicode{"2B1A}}',
-    '\\underset': '\\underset{\\unicode{"2B1A}}{\\unicode{"2B1A}}',
-    '\\overset': '\\overset{\\unicode{"2B1A}}{\\unicode{"2B1A}}',
-    '\\prime': '\\unicode{"2B1A}^{\\prime}',
-
-    '\\boxed': '\\boxed{\\unicode{"2B1A}}',
-    '\\colorbox': '\\colorbox{#fbc0bd}{\\unicode{"2B1A}}',
-    '\\bbox': '\\bbox[#ffd400, solid 2px #ffd400]{\\unicode{"2B1A}}',
-    '\\enclose':
-        '\\enclose{updiagonalstrike,roundedbox}[1px solid red, mathbackground="#fbc0bd"]{23+45}',
-    '\\fcolorbox': '\\fcolorbox{#cd0030}{#ffd400}{\\unicode{"2B1A}}',
-    '\\ ': '\\char"2423', // OPEN BOX
-
-    '\\top': '{\\color{red}P}\\top',
-    '\\bot': '{\\color{#0F0}P}\\bot',
-    '\\mid': 'P(p\\mid q)',
-
-    '\\rlap': '\\rlap{x}o',
-    '\\llap': 'o\\llap{/}',
-};
-
 // A textual description of a LaTeX command.
@@ -120,3 +13,3 @@ // The value can be either a single string, or an array of string
 // to be spoken for accessibility.
-const NOTES = {
+export const NOTES = {
     '\\text': 'roman text',
@@ -384,3 +277,3 @@ '\\textrm': 'roman text',
     );
-    const spans = MathAtom.decompose(
+    const spans = decompose(
         {
@@ -393,13 +286,10 @@ mathstyle: 'displaystyle',
 
-    const base = Span.makeSpan(spans, 'ML__base');
+    const base = makeSpan(spans, 'ML__base');
 
-    const topStrut = Span.makeSpan('', 'ML__strut');
+    const topStrut = makeSpan('', 'ML__strut');
     topStrut.setStyle('height', base.height, 'em');
-    const bottomStrut = Span.makeSpan('', 'ML__strut--bottom');
+    const bottomStrut = makeSpan('', 'ML__strut--bottom');
     bottomStrut.setStyle('height', base.height + base.depth, 'em');
     bottomStrut.setStyle('vertical-align', -base.depth, 'em');
-    const wrapper = Span.makeSpan(
-        [topStrut, bottomStrut, base],
-        'ML__mathlive'
-    );
+    const wrapper = makeSpan([topStrut, bottomStrut, base], 'ML__mathlive');
 
@@ -416,3 +306,4 @@ return wrapper.toMarkup();
     const command = latex;
-    const command_markup = latexToMarkup(SAMPLES[command] || latex, mf);
+    const info = getInfo(command);
+    const command_markup = latexToMarkup((info && info.template) || latex, mf);
     const command_note = getNote(command);
@@ -548,4 +439,2 @@ const command_shortcuts = Shortcuts.forCommand(command);
 export default {
-    getNote,
-    SAMPLES,
     NOTES,
@@ -552,0 +441,0 @@ showPopoverWithLatex,

dist/src/editor/editor-shortcuts.js

@@ -5,3 +5,3 @@ /**
 
-import Definitions from '../core/definitions.js';
+import { LETTER } from '../core/definitions-utils.js';
 
@@ -39,3 +39,3 @@ /**
  * a superscript
- * - the 'MathField' is the entire expression being edited
+ * - the 'Mathfield' is the entire expression being edited
  * - a 'placeholder' is either an actual placeholder atom or an empty child
@@ -810,6 +810,3 @@ * list, for example an empty numerator
         text = sibling.mode === 'text';
-        letter =
-            !text &&
-            sibling.type === 'mord' &&
-            Definitions.LETTER.test(sibling.body);
+        letter = !text && sibling.type === 'mord' && LETTER.test(sibling.body);
         digit =
@@ -816,0 +813,0 @@ !text && sibling.type === 'mord' && /[0-9]+$/.test(sibling.body);

dist/src/editor/editor-undo.js

 /**
  *
  * @class UndoManager
- * @property {MathAtom[]} mathlist
+ * @property {Atom[]} mathlist
  * @property {object[]} stack Stack of undo/redo states
@@ -6,0 +6,0 @@ * @property {number} index Index pointing to the undo/redo stack

dist/src/mathlive.js

@@ -5,3 +5,3 @@ /**
  *
- * This module exports {@link #functions%3Amathlive some functions} and the {@link #class%3AMathField `MathField`} class.
+ * This module exports {@link #functions%3Amathlive some functions} and the {@link #class%3AMathField `Mathfield`} class.
  *
@@ -24,7 +24,9 @@ * See {@tutorial USAGE_GUIDE the Usage Guide} for more details on how to get
 import Lexer from './core/lexer.js';
-import MathAtom from './core/mathAtom.js';
+import { Atom } from './core/atom.js';
+import { decompose } from './core/atom-utils.js';
 import ParserModule from './core/parser.js';
-import Span from './core/span.js';
-import Definitions from './core/definitions.js';
-import MathField from './editor/editor-mathfield.js';
+import { coalesce, makeSpan } from './core/span.js';
+import { MACROS } from './core/definitions-utils.js';
+import './core/definitions.js';
+import { Mathfield } from './editor/editor-mathfield.js';
 import AutoRender from './addons/auto-render.js';
@@ -51,2 +53,4 @@ import mathJson from './addons/mathJson.js';
  *
+ * @param {object} [macros] A dictionary of LaTeX macros
+ *
  * @return {string}
@@ -73,3 +77,3 @@ * @category Converting
     //    Turn the list of tokens in the formula into
-    //    a tree of high-level MathAtom, e.g. 'genfrac'.
+    //    a tree of high-level Atom, e.g. 'genfrac'.
     //
@@ -85,3 +89,3 @@
     //
-    let spans = MathAtom.decompose({ mathstyle: mathstyle }, mathlist);
+    let spans = decompose({ mathstyle: mathstyle }, mathlist);
 
@@ -93,3 +97,3 @@ //
     //
-    spans = Span.coalesce(spans);
+    spans = coalesce(spans);
 
@@ -101,9 +105,9 @@ if (format === 'span') return spans;
     //
-    const base = Span.makeSpan(spans, 'ML__base');
+    const base = makeSpan(spans, 'ML__base');
 
-    const topStrut = Span.makeSpan('', 'ML__strut');
+    const topStrut = makeSpan('', 'ML__strut');
     topStrut.setStyle('height', base.height, 'em');
     const struts = [topStrut];
     if (base.depth !== 0) {
-        const bottomStrut = Span.makeSpan('', 'ML__strut--bottom');
+        const bottomStrut = makeSpan('', 'ML__strut--bottom');
         bottomStrut.setStyle('height', base.height + base.depth, 'em');
@@ -114,3 +118,3 @@ bottomStrut.setStyle('vertical-align', -base.depth, 'em');
     struts.push(base);
-    const wrapper = Span.makeSpan(struts, 'ML__mathlive');
+    const wrapper = makeSpan(struts, 'ML__mathlive');
 
@@ -137,3 +141,3 @@ //
  *
- * @return {MathField}
+ * @return {Mathfield}
  *
@@ -153,9 +157,6 @@ * Given the HTML markup:
 function makeMathField(element, config) {
-    if (!MathField) {
-        throw Error('The MathField module is not loaded.');
-    }
     config = config || {};
     config.handleSpeak = config.handleSpeak || speak;
     config.handleReadAloud = config.handleReadAloud || readAloud;
-    return new MathField.MathField(getElement(element), config);
+    return new Mathfield(getElement(element), config);
 }
@@ -177,3 +178,3 @@
 function toMathML(latex, options) {
-    if (!MathAtom.toMathML) {
+    if (!Atom.toMathML) {
         console.warn('The MathML module is not loaded.');
@@ -184,3 +185,3 @@ return '';
     options.macros = options.macros || {};
-    Object.assign(options.macros, Definitions.MACROS);
+    Object.assign(options.macros, MACROS);
 
@@ -194,3 +195,3 @@ const mathlist = ParserModule.parseTokens(
 
-    return MathAtom.toMathML(mathlist, options);
+    return Atom.toMathML(mathlist, options);
 }
@@ -213,3 +214,3 @@
 function latexToAST(latex, options) {
-    if (!MathAtom.toAST) {
+    if (!Atom.toAST) {
         console.warn('The AST module is not loaded.');
@@ -220,3 +221,3 @@ return {};
     options.macros = options.macros || {};
-    Object.assign(options.macros, Definitions.MACROS);
+    Object.assign(options.macros, MACROS);
 
@@ -230,3 +231,3 @@ const mathlist = ParserModule.parseTokens(
 
-    return MathAtom.toAST(mathlist, options);
+    return Atom.toAST(mathlist, options);
 }
@@ -305,3 +306,3 @@
 function latexToSpeakableText(latex, options) {
-    if (!MathAtom.toSpeakableText) {
+    if (!Atom.toSpeakableText) {
         console.warn('The outputSpokenText module is not loaded.');
@@ -312,3 +313,3 @@ return '';
     options.macros = options.macros || {};
-    Object.assign(options.macros, Definitions.MACROS);
+    Object.assign(options.macros, MACROS);
 
@@ -322,3 +323,3 @@ const mathlist = ParserModule.parseTokens(
 
-    return MathAtom.toSpeakableText(mathlist, options);
+    return Atom.toSpeakableText(mathlist, options);
 }
@@ -861,3 +862,3 @@
         options.renderToSpeakableText || latexToSpeakableText;
-    options.macros = options.macros || Definitions.MACROS;
+    options.macros = options.macros || MACROS;
     AutoRender.renderMathInElement(getElement(element), options);
@@ -881,3 +882,3 @@ }
  *
- * @param {string|HTMLElement|MathField} element
+ * @param {string|HTMLElement|Mathfield} element
  * @param {Object.<string, any>} [options={}]
@@ -895,3 +896,3 @@ * @param {string} options.namespace The namespace used for the `data-`
 
-    if (element instanceof MathField.MathField) {
+    if (element instanceof Mathfield) {
         element.revertToOriginalContent();
@@ -925,4 +926,4 @@ } else {
  * ```
- * @param {string | HTMLElement | MathField} element - A DOM element ID, a DOM
- * element or a MathField.
+ * @param {string | HTMLElement | Mathfield} element - A DOM element ID, a DOM
+ * element or a Mathfield.
  * @param {object} [options={}]
@@ -942,3 +943,3 @@ * @param {string} [options.namespace=""] The namespace used for the `data-`
 
-    if (element instanceof MathField.MathField) {
+    if (element instanceof Mathfield) {
         return element.originalContent;
@@ -945,0 +946,0 @@ }

dist/src/vue-mathlive.js

@@ -84,3 +84,3 @@ export default {
         this.$nextTick(function() {
-            // ... then make the MathField
+            // ... then make the Mathfield
             vm.$mathlive.makeMathField(vm.$el, {
@@ -87,0 +87,0 @@ ...vm.config,

package.json

 {
     "name": "mathlive",
-    "version": "0.34.0",
+    "version": "0.35.0",
     "description": "Render and edit beautifully typeset math",
@@ -67,5 +67,9 @@ "license": "MIT",
         ],
-        "*.{js,css,json,md}": [
+        "/src/**/*.{js,css,json,less}": [
             "prettier --write",
             "git add"
+        ],
+        "/*.md": [
+            "prettier --write",
+            "git add"
         ]
@@ -104,29 +108,29 @@ },
         "@babel/cli": "^7.8.4",
-        "@babel/core": "^7.8.4",
-        "@babel/preset-env": "^7.8.4",
-        "@babel/register": "^7.8.3",
+        "@babel/core": "^7.9.0",
+        "@babel/preset-env": "^7.9.0",
+        "@babel/register": "^7.9.0",
         "@cortex-js/prettier-config": "^1.0.0",
-        "autoprefixer": "^9.7.4",
+        "autoprefixer": "^9.7.5",
         "chokidar-cli": "^2.1.0",
         "cssnano": "^4.1.10",
         "eslint": "^6.8.0",
-        "eslint-config-prettier": "^6.10.0",
+        "eslint-config-prettier": "^6.10.1",
         "eslint-plugin-prettier": "^3.1.2",
         "eslint-watch": "^6.0.1",
         "http-server": "^0.12.1",
-        "husky": "^4.2.1",
+        "husky": "^4.2.3",
         "jsdoc": "^3.6.3",
-        "less": "^3.10.3",
-        "lint-staged": "^10.0.7",
+        "less": "^3.11.1",
+        "lint-staged": "^10.0.9",
         "npm-run-all": "^4.1.5",
         "nyc": "^15.0.0",
         "postcss-cli": "^7.1.0",
-        "prettier": "^1.19.1",
-        "rimraf": "^3.0.1",
-        "rollup": "^1.31.0",
+        "prettier": "^2.0.2",
+        "rimraf": "^3.0.2",
+        "rollup": "^2.2.0",
         "rollup-plugin-copy": "^3.3.0",
-        "rollup-plugin-terser": "^5.2.0",
+        "rollup-plugin-terser": "^5.3.0",
         "sutro-jsdoc-theme": "^1.0",
         "tap-spec": "^5.0.0",
-        "tape": "^4.13.0",
+        "tape": "^4.13.2",
         "tsd-jsdoc": "^2.4.0"
@@ -133,0 +137,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

109

increased by23.86%

Worsened metrics

Total package byte prevSize

3659583

decreased by-11.45%

Lines of code

49271

decreased by-29.27%

No dependency changes