katex 0.10.0-rc → 0.10.2

package/src/environments/array.js

@@ -25,6 +25,9 @@ export type AlignSpec = { type: "separator", separator: string } | {
     postgap?: number,
 };
 
+// Type to indicate column separation in MathML
+export type ColSeparationType = "align" | "alignat";
+
 function getHLines(parser: Parser): boolean[] {
     // Return an array. The array length = number of hlines.
     // Each element in the array tells if the line is dashed.
@@ -48,11 +51,12 @@ function getHLines(parser: Parser): boolean[] {
  */
 function parseArray(
     parser: Parser,
-    {hskipBeforeAndAfter, addJot, cols, arraystretch}: {|
+    {hskipBeforeAndAfter, addJot, cols, arraystretch, colSeparationType}: {|
         hskipBeforeAndAfter?: boolean,
         addJot?: boolean,
         cols?: AlignSpec[],
         arraystretch?: number,
+        colSeparationType?: ColSeparationType,
     |},
     style: StyleStr,
 ): ParseNode<"array"> {
@@ -114,11 +118,8 @@ function parseArray(
             }
             break;
         } else if (next === "\\cr") {
-            const cr = parser.parseFunction();
-            if (!cr) {
-                throw new ParseError(`Failed to parse function after ${next}`);
-            }
-            rowGaps.push(assertNodeType(cr, "cr").size);
+            const cr = assertNodeType(parser.parseFunction(), "cr");
+            rowGaps.push(cr.size);
 
             // check for \hline(s) following the row separator
             hLinesBeforeRow.push(getHLines(parser));
@@ -141,6 +142,7 @@ function parseArray(
         rowGaps,
         hskipBeforeAndAfter,
         hLinesBeforeRow,
+        colSeparationType,
     };
 }
 
@@ -370,8 +372,14 @@ const htmlBuilder: HtmlBuilder<"array"> = function(group, options) {
     return buildCommon.makeSpan(["mord"], [body], options);
 };
 
+const alignMap = {
+    c: "center ",
+    l: "left ",
+    r: "right ",
+};
+
 const mathmlBuilder: MathMLBuilder<"array"> = function(group, options) {
-    return new mathMLTree.MathNode(
+    const table = new mathMLTree.MathNode(
         "mtable", group.body.map(function(row) {
             return new mathMLTree.MathNode(
                 "mtr", row.map(function(cell) {
@@ -379,6 +387,110 @@ const mathmlBuilder: MathMLBuilder<"array"> = function(group, options) {
                         "mtd", [mml.buildGroup(cell, options)]);
                 }));
         }));
+
+    // Set column alignment, row spacing, column spacing, and
+    // array lines by setting attributes on the table element.
+
+    // Set the row spacing. In MathML, we specify a gap distance.
+    // We do not use rowGap[] because MathML automatically increases
+    // cell height with the height/depth of the element content.
+
+    // LaTeX \arraystretch multiplies the row baseline-to-baseline distance.
+    // We simulate this by adding (arraystretch - 1)em to the gap. This
+    // does a reasonable job of adjusting arrays containing 1 em tall content.
+
+    // The 0.16 and 0.09 values are found emprically. They produce an array
+    // similar to LaTeX and in which content does not interfere with \hines.
+    const gap = 0.16 + group.arraystretch - 1 + (group.addJot ? 0.09 : 0);
+    table.setAttribute("rowspacing", gap + "em");
+
+    // MathML table lines go only between cells.
+    // To place a line on an edge we'll use <menclose>, if necessary.
+    let menclose = "";
+    let align = "";
+
+    if (group.cols) {
+        // Find column alignment, column spacing, and  vertical lines.
+        const cols = group.cols;
+        let columnLines = "";
+        let prevTypeWasAlign = false;
+        let iStart = 0;
+        let iEnd = cols.length;
+
+        if (cols[0].type === "separator") {
+            menclose += "top ";
+            iStart = 1;
+        }
+        if (cols[cols.length - 1].type === "separator") {
+            menclose += "bottom ";
+            iEnd -= 1;
+        }
+
+        for (let i = iStart; i < iEnd; i++) {
+            if (cols[i].type === "align") {
+                align += alignMap[cols[i].align];
+
+                if (prevTypeWasAlign) {
+                    columnLines += "none ";
+                }
+                prevTypeWasAlign = true;
+            } else if (cols[i].type === "separator") {
+                // MathML accepts only single lines between cells.
+                // So we read only the first of consecutive separators.
+                if (prevTypeWasAlign) {
+                    columnLines += cols[i].separator === "|"
+                        ? "solid "
+                        : "dashed ";
+                    prevTypeWasAlign = false;
+                }
+            }
+        }
+
+        table.setAttribute("columnalign", align.trim());
+
+        if (/[sd]/.test(columnLines)) {
+            table.setAttribute("columnlines", columnLines.trim());
+        }
+    }
+
+    // Set column spacing.
+    if (group.colSeparationType === "align") {
+        const cols = group.cols || [];
+        let spacing = "";
+        for (let i = 1; i < cols.length; i++) {
+            spacing += i % 2 ? "0em " : "1em ";
+        }
+        table.setAttribute("columnspacing", spacing.trim());
+    } else if (group.colSeparationType === "alignat") {
+        table.setAttribute("columnspacing", "0em");
+    } else {
+        table.setAttribute("columnspacing", "1em");
+    }
+
+    // Address \hline and \hdashline
+    let rowLines = "";
+    const hlines = group.hLinesBeforeRow;
+
+    menclose += hlines[0].length > 0 ? "left " : "";
+    menclose += hlines[hlines.length - 1].length > 0 ? "right " : "";
+
+    for (let i = 1; i < hlines.length - 1; i++) {
+        rowLines += (hlines[i].length === 0)
+          ? "none "
+             // MathML accepts only a single line between rows. Read one element.
+          : hlines[i][0] ? "dashed " : "solid ";
+    }
+    if (/[sd]/.test(rowLines)) {
+        table.setAttribute("rowlines", rowLines.trim());
+    }
+
+    if (menclose === "") {
+        return table;
+    } else {
+        const wrapper =  new mathMLTree.MathNode("menclose", [table]);
+        wrapper.setAttribute("notation", menclose.trim());
+        return wrapper;
+    }
 };
 
 // Convenience function for aligned and alignedat environments.
@@ -451,6 +563,7 @@ const alignedHandler = function(context, args) {
             postgap: 0,
         };
     }
+    res.colSeparationType = isAligned ? "align" : "alignat";
     return res;
 };
 

package/src/fontMetrics.js

@@ -211,10 +211,11 @@ export function getCharacterMetrics(
         throw new Error(`Font metrics not found for font: ${font}.`);
     }
     let ch = character.charCodeAt(0);
-    if (character[0] in extraCharacterMap) {
+    let metrics = metricMap[font][ch];
+    if (!metrics && character[0] in extraCharacterMap) {
         ch = extraCharacterMap[character[0]].charCodeAt(0);
+        metrics = metricMap[font][ch];
     }
-    let metrics = metricMap[font][ch];
 
     if (!metrics && mode === 'text') {
         // We don't typically have font metrics for Asian scripts.

package/src/functions/arrow.js

@@ -9,6 +9,14 @@ import * as mml from "../buildMathML";
 
 import type {ParseNode} from "../parseNode";
 
+// Helper function
+const paddedNode = group => {
+    const node = new mathMLTree.MathNode("mpadded", group ? [group] : []);
+    node.setAttribute("width", "+0.6em");
+    node.setAttribute("lspace", "0.3em");
+    return node;
+};
+
 // Stretchy arrows with an optional argument
 defineFunction({
     type: "xArrow",
@@ -44,15 +52,19 @@ defineFunction({
         // Build the argument groups in the appropriate style.
         // Ref: amsmath.dtx:   \hbox{$\scriptstyle\mkern#3mu{#6}\mkern#4mu$}%
 
+        // Some groups can return document fragments.  Handle those by wrapping
+        // them in a span.
         let newOptions = options.havingStyle(style.sup());
-        const upperGroup = html.buildGroup(group.body, newOptions, options);
+        const upperGroup = buildCommon.wrapFragment(
+            html.buildGroup(group.body, newOptions, options), options);
         upperGroup.classes.push("x-arrow-pad");
 
         let lowerGroup;
         if (group.below) {
             // Build the lower group
             newOptions = options.havingStyle(style.sub());
-            lowerGroup = html.buildGroup(group.below, newOptions, options);
+            lowerGroup = buildCommon.wrapFragment(
+                html.buildGroup(group.below, newOptions, options), options);
             lowerGroup.classes.push("x-arrow-pad");
         }
 
@@ -101,12 +113,11 @@ defineFunction({
     mathmlBuilder(group, options) {
         const arrowNode = stretchy.mathMLnode(group.label);
         let node;
-        let lowerNode;
 
         if (group.body) {
-            const upperNode = mml.buildGroup(group.body, options);
+            const upperNode = paddedNode(mml.buildGroup(group.body, options));
             if (group.below) {
-                lowerNode = mml.buildGroup(group.below, options);
+                const lowerNode = paddedNode(mml.buildGroup(group.below, options));
                 node = new mathMLTree.MathNode(
                     "munderover", [arrowNode, lowerNode, upperNode]
                 );
@@ -114,10 +125,13 @@ defineFunction({
                 node = new mathMLTree.MathNode("mover", [arrowNode, upperNode]);
             }
         } else if (group.below) {
-            lowerNode = mml.buildGroup(group.below, options);
+            const lowerNode = paddedNode(mml.buildGroup(group.below, options));
             node = new mathMLTree.MathNode("munder", [arrowNode, lowerNode]);
         } else {
-            node = new mathMLTree.MathNode("mover", [arrowNode]);
+            // This should never happen.
+            // Parser.js throws an error if there is no argument.
+            node = paddedNode();
+            node = new mathMLTree.MathNode("mover", [arrowNode, node]);
         }
         return node;
     },

package/src/functions/color.js

@@ -22,7 +22,8 @@ const htmlBuilder = (group, options) => {
 };
 
 const mathmlBuilder = (group, options) => {
-    const inner = mml.buildExpression(group.body, options);
+    const inner = mml.buildExpression(group.body,
+        options.withColor(group.color));
 
     const node = new mathMLTree.MathNode("mstyle", inner);
 
@@ -54,42 +55,6 @@ defineFunction({
     mathmlBuilder,
 });
 
-// TODO(kevinb): define these using macros
-defineFunction({
-    type: "color",
-    names: [
-        "\\blue", "\\orange", "\\pink", "\\red",
-        "\\green", "\\gray", "\\purple",
-        "\\blueA", "\\blueB", "\\blueC", "\\blueD", "\\blueE",
-        "\\tealA", "\\tealB", "\\tealC", "\\tealD", "\\tealE",
-        "\\greenA", "\\greenB", "\\greenC", "\\greenD", "\\greenE",
-        "\\goldA", "\\goldB", "\\goldC", "\\goldD", "\\goldE",
-        "\\redA", "\\redB", "\\redC", "\\redD", "\\redE",
-        "\\maroonA", "\\maroonB", "\\maroonC", "\\maroonD", "\\maroonE",
-        "\\purpleA", "\\purpleB", "\\purpleC", "\\purpleD", "\\purpleE",
-        "\\mintA", "\\mintB", "\\mintC",
-        "\\grayA", "\\grayB", "\\grayC", "\\grayD", "\\grayE",
-        "\\grayF", "\\grayG", "\\grayH", "\\grayI",
-        "\\kaBlue", "\\kaGreen",
-    ],
-    props: {
-        numArgs: 1,
-        allowedInText: true,
-        greediness: 3,
-    },
-    handler({parser, funcName}, args) {
-        const body = args[0];
-        return {
-            type: "color",
-            mode: parser.mode,
-            color: "katex-" + funcName.slice(1),
-            body: ordargument(body),
-        };
-    },
-    htmlBuilder,
-    mathmlBuilder,
-});
-
 defineFunction({
     type: "color",
     names: ["\\color"],

package/src/functions/delimsizing.js

@@ -35,7 +35,8 @@ const delimiterSizes = {
 };
 
 const delimiters = [
-    "(", ")", "[", "\\lbrack", "]", "\\rbrack",
+    "(", "\\lparen", ")", "\\rparen",
+    "[", "\\lbrack", "]", "\\rbrack",
     "\\{", "\\lbrace", "\\}", "\\rbrace",
     "\\lfloor", "\\rfloor", "\u230a", "\u230b",
     "\\lceil", "\\rceil", "\u2308", "\u2309",
@@ -64,8 +65,7 @@ function checkDelimiter(
     } else {
         throw new ParseError(
             "Invalid delimiter: '" +
-            // $FlowFixMe, do not polyfill
-            (symDelim ? symDelim.text : JSON["stringify"](delim)) +
+            (symDelim ? symDelim.text : JSON.stringify(delim)) +
             "' after '" + context.funcName + "'", delim);
     }
 }
@@ -171,23 +171,20 @@ defineFunction({
         --parser.leftrightDepth;
         // Check the next token
         parser.expect("\\right", false);
-        const right = parser.parseFunction();
-        if (!right) {
-            throw new ParseError('failed to parse function after \\right');
-        }
+        const right = assertNodeType(parser.parseFunction(), "leftright-right");
         return {
             type: "leftright",
             mode: parser.mode,
             body,
             left: delim.text,
-            right: assertNodeType(right, "leftright-right").delim,
+            right: right.delim,
         };
     },
     htmlBuilder: (group, options) => {
         assertParsed(group);
         // Build the inner expression
         const inner = html.buildExpression(group.body, options, true,
-            [null, "mclose"]);
+            ["mopen", "mclose"]);
 
         let innerHeight = 0;
         let innerDepth = 0;
@@ -321,9 +318,19 @@ defineFunction({
         return middleDelim;
     },
     mathmlBuilder: (group, options) => {
-        const middleNode = new mathMLTree.MathNode(
-            "mo", [mml.makeText(group.delim, group.mode)]);
+        // A Firefox \middle will strech a character vertically only if it
+        // is in the fence part of the operator dictionary at:
+        // https://www.w3.org/TR/MathML3/appendixc.html.
+        // So we need to avoid U+2223 and use plain "|" instead.
+        const textNode = (group.delim === "\\vert" || group.delim === "|")
+            ? mml.makeText("|", "text")
+            : mml.makeText(group.delim, group.mode);
+        const middleNode = new mathMLTree.MathNode("mo", [textNode]);
         middleNode.setAttribute("fence", "true");
+        // MathML gives 5/18em spacing to each <mo> element.
+        // \middle should get delimiter spacing instead.
+        middleNode.setAttribute("lspace", "0.05em");
+        middleNode.setAttribute("rspace", "0.05em");
         return middleNode;
     },
 });

package/src/functions/enclose.js

@@ -12,7 +12,10 @@ import * as mml from "../buildMathML";
 
 const htmlBuilder = (group, options) => {
     // \cancel, \bcancel, \xcancel, \sout, \fbox, \colorbox, \fcolorbox
-    const inner = html.buildGroup(group.body, options);
+    // Some groups can return document fragments.  Handle those by wrapping
+    // them in a span.
+    const inner = buildCommon.wrapFragment(
+        html.buildGroup(group.body, options), options);
 
     const label = group.label.substr(1);
     const scale = options.sizeMultiplier;
@@ -109,7 +112,9 @@ const htmlBuilder = (group, options) => {
 
 const mathmlBuilder = (group, options) => {
     const node = new mathMLTree.MathNode(
-        "menclose", [mml.buildGroup(group.body, options)]);
+        (group.label.indexOf("colorbox") > -1) ? "mpadded" : "menclose",
+        [mml.buildGroup(group.body, options)]
+    );
     switch (group.label) {
         case "\\cancel":
             node.setAttribute("notation", "updiagonalstrike");
@@ -124,8 +129,18 @@ const mathmlBuilder = (group, options) => {
             node.setAttribute("notation", "box");
             break;
         case "\\fcolorbox":
-            // TODO(ron): I don't know any way to set the border color.
-            node.setAttribute("notation", "box");
+        case "\\colorbox":
+            // <menclose> doesn't have a good notation option. So use <mpadded>
+            // instead. Set some attributes that come included with <menclose>.
+            node.setAttribute("width", "+6pt");
+            node.setAttribute("height", "+6pt");
+            node.setAttribute("lspace", "3pt"); // LaTeX source2e: \fboxsep = 3pt
+            node.setAttribute("voffset", "3pt");
+            if (group.label === "\\fcolorbox") {
+                const thk = options.fontMetrics().defaultRuleThickness;
+                node.setAttribute("style", "border: " + thk + "em solid " +
+                    String(group.borderColor));
+            }
             break;
         case "\\xcancel":
             node.setAttribute("notation", "updiagonalstrike downdiagonalstrike");

package/src/functions/environment.js

@@ -2,9 +2,11 @@
 import defineFunction from "../defineFunction";
 import ParseError from "../ParseError";
 import {assertNodeType} from "../parseNode";
+import environments from "../environments";
 
 // Environment delimiters. HTML/MathML rendering is defined in the corresponding
 // defineEnvironment definitions.
+// $FlowFixMe, "environment" handler returns an environment ParseNode
 defineFunction({
     type: "environment",
     names: ["\\begin", "\\end"],
@@ -12,19 +14,48 @@ defineFunction({
         numArgs: 1,
         argTypes: ["text"],
     },
-    handler({parser}, args) {
+    handler({parser, funcName}, args) {
         const nameGroup = args[0];
         if (nameGroup.type !== "ordgroup") {
             throw new ParseError("Invalid environment name", nameGroup);
         }
-        let name = "";
+        let envName = "";
         for (let i = 0; i < nameGroup.body.length; ++i) {
-            name += assertNodeType(nameGroup.body[i], "textord").text;
+            envName += assertNodeType(nameGroup.body[i], "textord").text;
         }
+
+        if (funcName === "\\begin") {
+            // begin...end is similar to left...right
+            if (!environments.hasOwnProperty(envName)) {
+                throw new ParseError(
+                    "No such environment: " + envName, nameGroup);
+            }
+            // Build the environment object. Arguments and other information will
+            // be made available to the begin and end methods using properties.
+            const env = environments[envName];
+            const {args, optArgs} =
+                parser.parseArguments("\\begin{" + envName + "}", env);
+            const context = {
+                mode: parser.mode,
+                envName,
+                parser,
+            };
+            const result = env.handler(context, args, optArgs);
+            parser.expect("\\end", false);
+            const endNameToken = parser.nextToken;
+            const end = assertNodeType(parser.parseFunction(), "environment");
+            if (end.name !== envName) {
+                throw new ParseError(
+                    `Mismatch: \\begin{${envName}} matched by \\end{${end.name}}`,
+                    endNameToken);
+            }
+            return result;
+        }
+
         return {
             type: "environment",
             mode: parser.mode,
-            name,
+            name: envName,
             nameGroup,
         };
     },

package/src/functions/font.js

@@ -32,7 +32,7 @@ defineFunction({
     type: "font",
     names: [
         // styles, except \boldsymbol defined below
-        "\\mathrm", "\\mathit", "\\mathbf",
+        "\\mathrm", "\\mathit", "\\mathbf", "\\mathnormal",
 
         // families
         "\\mathbb", "\\mathcal", "\\mathfrak", "\\mathscr", "\\mathsf",
@@ -99,7 +99,6 @@ defineFunction({
     },
     handler: ({parser, funcName, breakOnTokenText}, args) => {
         const {mode} = parser;
-        parser.consumeSpaces();
         const body = parser.parseExpression(true, breakOnTokenText);
         const style = `math${funcName.slice(1)}`;
 

package/src/functions/genfrac.js

@@ -11,22 +11,29 @@ import * as html from "../buildHTML";
 import * as mml from "../buildMathML";
 import {calculateSize} from "../units";
 
-const htmlBuilder = (group, options) => {
-    // Fractions are handled in the TeXbook on pages 444-445, rules 15(a-e).
+const adjustStyle = (size, originalStyle) => {
     // Figure out what style this fraction should be in based on the
     // function used
-    let style = options.style;
-    if (group.size === "display") {
-        style = Style.DISPLAY;
-    } else if (group.size === "text" &&
+    let style = originalStyle;
+    if (size === "display") {
+        // Get display style as a default.
+        // If incoming style is sub/sup, use style.text() to get correct size.
+        style = style.id >= Style.SCRIPT.id ? style.text() : Style.DISPLAY;
+    } else if (size === "text" &&
         style.size === Style.DISPLAY.size) {
         // We're in a \tfrac but incoming style is displaystyle, so:
         style = Style.TEXT;
-    } else if (group.size === "script") {
+    } else if (size === "script") {
         style = Style.SCRIPT;
-    } else if (group.size === "scriptscript") {
+    } else if (size === "scriptscript") {
         style = Style.SCRIPTSCRIPT;
     }
+    return style;
+};
+
+const htmlBuilder = (group, options) => {
+    // Fractions are handled in the TeXbook on pages 444-445, rules 15(a-e).
+    const style = adjustStyle(group.size, options.style);
 
     const nstyle = style.fracNum();
     const dstyle = style.fracDen();
@@ -69,7 +76,7 @@ const htmlBuilder = (group, options) => {
     let numShift;
     let clearance;
     let denomShift;
-    if (style.size === Style.DISPLAY.size) {
+    if (style.size === Style.DISPLAY.size || group.size === "display") {
         numShift = options.fontMetrics().num1;
         if (ruleWidth > 0) {
             clearance = 3 * ruleSpacing;
@@ -176,7 +183,7 @@ const htmlBuilder = (group, options) => {
 };
 
 const mathmlBuilder = (group, options) => {
-    const node = new mathMLTree.MathNode(
+    let node = new mathMLTree.MathNode(
         "mfrac",
         [
             mml.buildGroup(group.numer, options),
@@ -190,12 +197,22 @@ const mathmlBuilder = (group, options) => {
         node.setAttribute("linethickness", ruleWidth + "em");
     }
 
+    const style = adjustStyle(group.size, options.style);
+    if (style.size !== options.style.size) {
+        node = new mathMLTree.MathNode("mstyle", [node]);
+        const isDisplay = (style.size === Style.DISPLAY.size) ? "true" : "false";
+        node.setAttribute("displaystyle", isDisplay);
+        node.setAttribute("scriptlevel", "0");
+    }
+
     if (group.leftDelim != null || group.rightDelim != null) {
         const withDelims = [];
 
         if (group.leftDelim != null) {
             const leftOp = new mathMLTree.MathNode(
-                "mo", [new mathMLTree.TextNode(group.leftDelim)]);
+                "mo",
+                [new mathMLTree.TextNode(group.leftDelim.replace("\\", ""))]
+            );
 
             leftOp.setAttribute("fence", "true");
 
@@ -206,7 +223,9 @@ const mathmlBuilder = (group, options) => {
 
         if (group.rightDelim != null) {
             const rightOp = new mathMLTree.MathNode(
-                "mo", [new mathMLTree.TextNode(group.rightDelim)]);
+                "mo",
+                [new mathMLTree.TextNode(group.rightDelim.replace("\\", ""))]
+            );
 
             rightOp.setAttribute("fence", "true");
 
@@ -363,21 +382,17 @@ defineFunction({
         const denom = args[5];
 
         // Look into the parse nodes to get the desired delimiters.
-        let leftNode = checkNodeType(args[0], "ordgroup");
+        let leftNode = checkNodeType(args[0], "atom");
         if (leftNode) {
-            leftNode = assertAtomFamily(leftNode.body[0], "open");
-        } else {
             leftNode = assertAtomFamily(args[0], "open");
         }
-        const leftDelim = delimFromValue(leftNode.text);
+        const leftDelim = leftNode ? delimFromValue(leftNode.text) : null;
 
-        let rightNode = checkNodeType(args[1], "ordgroup");
+        let rightNode = checkNodeType(args[1], "atom");
         if (rightNode) {
-            rightNode = assertAtomFamily(rightNode.body[0], "close");
-        } else {
             rightNode = assertAtomFamily(args[1], "close");
         }
-        const rightDelim = delimFromValue(rightNode.text);
+        const rightDelim = rightNode ? delimFromValue(rightNode.text) : null;
 
         const barNode = assertNodeType(args[2], "size");
         let hasBarLine;

package/src/functions/href.js

@@ -2,7 +2,6 @@
 import defineFunction, {ordargument} from "../defineFunction";
 import buildCommon from "../buildCommon";
 import {assertNodeType} from "../parseNode";
-import {assertType} from "../utils";
 import {MathNode} from "../mathMLTree";
 
 import * as html from "../buildHTML";
@@ -31,8 +30,11 @@ defineFunction({
         return buildCommon.makeAnchor(group.href, [], elements, options);
     },
     mathmlBuilder: (group, options) => {
-        const math = mml.buildExpressionRow(group.body, options);
-        assertType(math, MathNode).setAttribute("href", group.href);
+        let math = mml.buildExpressionRow(group.body, options);
+        if (!(math instanceof MathNode)) {
+            math = new MathNode("mrow", [math]);
+        }
+        math.setAttribute("href", group.href);
         return math;
     },
 });