temml 0.10.33 → 0.11.0

package/dist/temml.js

@@ -610,6 +610,7 @@ var temml = (function () {
       this.children = children || [];
       this.classes = classes || [];
       this.style = style || {};   // Used for <mstyle> elements
+      this.label = "";
     }
 
     /**
@@ -627,6 +628,10 @@ var temml = (function () {
       return this.attributes[name];
     }
 
+    setLabel(value) {
+      this.label = value;
+    }
+
     /**
      * Converts the math node into a MathML-namespaced DOM element.
      */
@@ -1543,7 +1548,7 @@ var temml = (function () {
   defineSymbol(math, mathord, "\u2aeb", "\\Bot");
   defineSymbol(math, bin, "\u2217", "\u2217", true);
   defineSymbol(math, bin, "+", "+");
-  defineSymbol(math, bin, "*", "*");
+  defineSymbol(math, bin, "\u2217", "*");
   defineSymbol(math, bin, "\u2044", "/", true);
   defineSymbol(math, bin, "\u2044", "\u2044");
   defineSymbol(math, bin, "\u2212", "-", true);
@@ -2006,7 +2011,7 @@ var temml = (function () {
       }
       block.push(node);
       if (node.type && node.type === "mo" && node.children.length === 1 &&
-          !Object.hasOwn(node.attributes, "movablelimits")) {
+          !Object.prototype.hasOwnProperty.call(node.attributes, "movablelimits")) {
         const ch = node.children[0].text;
         if (openDelims.indexOf(ch) > -1) {
           level += 1;
@@ -2342,16 +2347,36 @@ var temml = (function () {
     return new mathMLTree.MathNode("mtd", [], [], { padding: "0", width: "50%" })
   };
 
+  const labelContainers = ["mrow", "mtd", "mtable", "mtr"];
+  const getLabel = parent => {
+    for (const node of parent.children) {
+      if (node.type && labelContainers.includes(node.type)) {
+        if (node.classes && node.classes[0] === "tml-label") {
+          const label = node.label;
+          return label
+        } else {
+          const label = getLabel(node);
+          if (label) { return label }
+        }
+      } else if (!node.type) {
+        const label = getLabel(node);
+        if (label) { return label }
+      }
+    }
+  };
+
   const taggedExpression = (expression, tag, style, leqno) => {
     tag = buildExpressionRow(tag[0].body, style);
     tag = consolidateText(tag);
     tag.classes.push("tml-tag");
 
+    const label = getLabel(expression); // from a \label{} function.
     expression = new mathMLTree.MathNode("mtd", [expression]);
     const rowArray = [glue$1(), expression, glue$1()];
     rowArray[leqno ? 0 : 2].classes.push(leqno ? "tml-left" : "tml-right");
     rowArray[leqno ? 0 : 2].children.push(tag);
     const mtr = new mathMLTree.MathNode("mtr", rowArray, ["tml-tageqn"]);
+    if (label) { mtr.setAttribute("id", label); }
     const table = new mathMLTree.MathNode("mtable", [mtr]);
     table.style.width = "100%";
     table.setAttribute("displaystyle", "true");
@@ -3182,6 +3207,8 @@ var temml = (function () {
       type: "array",
       mode: "math",
       body,
+      tags: null,
+      labels: new Array(body.length + 1).fill(""),
       envClasses: ["jot", "cd"],
       cols: [],
       hLinesBeforeRow: new Array(body.length + 1).fill([])
@@ -4422,6 +4449,75 @@ var temml = (function () {
     }
   }
 
+  /**
+   * Lexing or parsing positional information for error reporting.
+   * This object is immutable.
+   */
+  class SourceLocation {
+    constructor(lexer, start, end) {
+      this.lexer = lexer; // Lexer holding the input string.
+      this.start = start; // Start offset, zero-based inclusive.
+      this.end = end;     // End offset, zero-based exclusive.
+    }
+
+    /**
+     * Merges two `SourceLocation`s from location providers, given they are
+     * provided in order of appearance.
+     * - Returns the first one's location if only the first is provided.
+     * - Returns a merged range of the first and the last if both are provided
+     *   and their lexers match.
+     * - Otherwise, returns null.
+     */
+    static range(first, second) {
+      if (!second) {
+        return first && first.loc;
+      } else if (!first || !first.loc || !second.loc || first.loc.lexer !== second.loc.lexer) {
+        return null;
+      } else {
+        return new SourceLocation(first.loc.lexer, first.loc.start, second.loc.end);
+      }
+    }
+  }
+
+  /**
+   * Interface required to break circular dependency between Token, Lexer, and
+   * ParseError.
+   */
+
+  /**
+   * The resulting token returned from `lex`.
+   *
+   * It consists of the token text plus some position information.
+   * The position information is essentially a range in an input string,
+   * but instead of referencing the bare input string, we refer to the lexer.
+   * That way it is possible to attach extra metadata to the input string,
+   * like for example a file name or similar.
+   *
+   * The position information is optional, so it is OK to construct synthetic
+   * tokens if appropriate. Not providing available position information may
+   * lead to degraded error reporting, though.
+   */
+  class Token {
+    constructor(
+      text, // the text of this token
+      loc
+    ) {
+      this.text = text;
+      this.loc = loc;
+    }
+
+    /**
+     * Given a pair of tokens (this and endToken), compute a `Token` encompassing
+     * the whole input range enclosed by these two.
+     */
+    range(
+      endToken, // last token of the range, inclusive
+      text // the text of the newly constructed token
+    ) {
+      return new Token(text, SourceLocation.range(this, endToken));
+    }
+  }
+
   // In TeX, there are actually three sets of dimensions, one for each of
   // textstyle, scriptstyle, and scriptscriptstyle.  These are
   // provided in the the arrays below, in that order.
@@ -4906,8 +5002,10 @@ var temml = (function () {
     if (context.macros.get("\\df@tag")) {
       throw new ParseError("Multiple \\tag");
     }
-    return "\\def\\df@tag{\\text{#1}}";
+    return "\\gdef\\df@tag{\\text{#1}}";
   });
+  defineMacro("\\notag", "\\nonumber");
+  defineMacro("\\nonumber", "\\gdef\\@eqnsw{0}");
 
   // \renewcommand{\bmod}{\nonscript\mskip-\medmuskip\mkern5mu\mathbin
   //   {\operator@font mod}\penalty900
@@ -5197,33 +5295,30 @@ var temml = (function () {
     return [arraystretch, arraycolsep]
   };
 
-  const getTag = (group, style, rowNum) => {
-    let tag;
-    const tagContents = group.tags.shift();
-    if (tagContents) {
-      // The author has written a \tag or a \notag in this row.
-      if (tagContents.body) {
-        tag = buildExpressionRow(tagContents.body, style, true);
-        tag.classes = ["tml-tag"];
-      } else {
-        // \notag. Return an empty span.
-        tag = new mathMLTree.MathNode("mtext", [], []);
-        return tag
-      }
-    } else if (group.envClasses.includes("multline") &&
-      ((group.leqno && rowNum !== 0) || (!group.leqno && rowNum !== group.body.length - 1))) {
-      // A multiline that does not receive a tag. Return an empty cell.
-      tag = new mathMLTree.MathNode("mtext", [], []);
-      return tag
-    } else {
-      // AMS automatcally numbered equaton.
-      // Insert a class so the element can be populated by a CSS counter.
-      // WebKit will display the CSS counter only inside a span.
-      tag = new mathMLTree.MathNode("mtext", [new Span(["tml-eqn"])]);
+  const checkCellForLabels = cell => {
+    // Check if the author wrote a \tag{} inside this cell.
+    let rowLabel = "";
+    for (let i = 0; i < cell.length; i++) {
+      if (cell[i].type === "label") {
+        if (rowLabel) { throw new ParseError(("Multiple \\labels in one row")) }
+        rowLabel = cell[i].string;
+      }
     }
-    return tag
+    return rowLabel
   };
 
+  // autoTag (an argument to parseArray) can be one of three values:
+  // * undefined: Regular (not-top-level) array; no tags on each row
+  // * true: Automatic equation numbering, overridable by \tag
+  // * false: Tags allowed on each row, but no automatic numbering
+  // This function *doesn't* work with the "split" environment name.
+  function getAutoTag(name) {
+    if (name.indexOf("ed") === -1) {
+      return name.indexOf("*") === -1;
+    }
+    // return undefined;
+  }
+
   /**
    * Parse the body of the environment, with rows delimited by \\ and
    * columns delimited by &, and create a nested list in row-major order
@@ -5235,7 +5330,7 @@ var temml = (function () {
     {
       cols, // [{ type: string , align: l|c|r|null }]
       envClasses, // align(ed|at|edat) | array | cases | cd | small | multline
-      addEqnNum,      // boolean
+      autoTag,        // boolean
       singleRow,      // boolean
       emptySingleRow, // boolean
       maxNumCols,     // number
@@ -5251,13 +5346,6 @@ var temml = (function () {
       // TODO: provide helpful error when \cr is used outside array environment
       parser.gullet.macros.set("\\cr", "\\\\\\relax");
     }
-    if (addEqnNum) {
-      parser.gullet.macros.set("\\tag", "\\@ifstar\\envtag@literal\\envtag@paren");
-      parser.gullet.macros.set("\\envtag@paren", "\\env@tag{{(\\text{#1})}}");
-      parser.gullet.macros.set("\\envtag@literal", "\\env@tag{\\text{#1}}");
-      parser.gullet.macros.set("\\notag", "\\env@notag");
-      parser.gullet.macros.set("\\nonumber", "\\env@notag");
-    }
 
     // Start group for first cell
     parser.gullet.beginGroup();
@@ -5265,29 +5353,39 @@ var temml = (function () {
     let row = [];
     const body = [row];
     const rowGaps = [];
-    const tags = [];
-    let rowTag;
+    const labels = [];
+
     const hLinesBeforeRow = [];
 
+    const tags = (autoTag != null ? [] : undefined);
+
+    // amsmath uses \global\@eqnswtrue and \global\@eqnswfalse to represent
+    // whether this row should have an equation number.  Simulate this with
+    // a \@eqnsw macro set to 1 or 0.
+    function beginRow() {
+      if (autoTag) {
+        parser.gullet.macros.set("\\@eqnsw", "1", true);
+      }
+    }
+    function endRow() {
+      if (tags) {
+        if (parser.gullet.macros.get("\\df@tag")) {
+          tags.push(parser.subparse([new Token("\\df@tag")]));
+          parser.gullet.macros.set("\\df@tag", undefined, true);
+        } else {
+          tags.push(Boolean(autoTag) &&
+              parser.gullet.macros.get("\\@eqnsw") === "1");
+        }
+      }
+    }
+    beginRow();
+
     // Test for \hline at the top of the array.
     hLinesBeforeRow.push(getHLines(parser));
 
     while (true) {
       // Parse each cell in its own group (namespace)
       let cell = parser.parseExpression(false, singleRow ? "\\end" : "\\\\");
-
-      if (addEqnNum && !rowTag) {
-        // Check if the author wrote a \tag{} inside this cell.
-        for (let i = 0; i < cell.length; i++) {
-          if (cell[i].type === "envTag" || cell[i].type === "noTag") {
-            // Get the contents of the \text{} nested inside the \env@Tag{}
-            rowTag = cell[i].type === "envTag"
-              ? cell.splice(i, 1)[0].body.body[0]
-              : { body: null };
-            break
-          }
-        }
-      }
       parser.gullet.endGroup();
       parser.gullet.beginGroup();
 
@@ -5316,6 +5414,7 @@ var temml = (function () {
         }
         parser.consume();
       } else if (next === "\\end") {
+        endRow();
         // Arrays terminate newlines with `\crcr` which consumes a `\cr` if
         // the last line is empty.  However, AMS environments keep the
         // empty row if it's the only one.
@@ -5323,6 +5422,7 @@ var temml = (function () {
         if (row.length === 1 && cell.body.length === 0 && (body.length > 1 || !emptySingleRow)) {
           body.pop();
         }
+        labels.push(checkCellForLabels(cell.body));
         if (hLinesBeforeRow.length < body.length + 1) {
           hLinesBeforeRow.push([]);
         }
@@ -5339,15 +5439,16 @@ var temml = (function () {
           size = parser.parseSizeGroup(true);
         }
         rowGaps.push(size ? size.value : null);
+        endRow();
 
-        tags.push(rowTag);
+        labels.push(checkCellForLabels(cell.body));
 
         // check for \hline(s) following the row separator
         hLinesBeforeRow.push(getHLines(parser));
 
         row = [];
-        rowTag = null;
         body.push(row);
+        beginRow();
       } else {
         throw new ParseError("Expected & or \\\\ or \\cr or \\end", parser.nextToken);
       }
@@ -5358,8 +5459,6 @@ var temml = (function () {
     // End array group defining \cr
     parser.gullet.endGroup();
 
-    tags.push(rowTag);
-
     return {
       type: "array",
       mode: parser.mode,
@@ -5368,9 +5467,10 @@ var temml = (function () {
       rowGaps,
       hLinesBeforeRow,
       envClasses,
-      addEqnNum,
+      autoTag,
       scriptLevel,
       tags,
+      labels,
       leqno,
       arraystretch,
       arraycolsep
@@ -5427,19 +5527,43 @@ var temml = (function () {
         }
         row.push(mtd);
       }
-      if (group.addEqnNum) {
-        row.unshift(glue(group));
-        row.push(glue(group));
-        const tag = getTag(group, style.withLevel(cellLevel), i);
-        if (group.leqno) {
-          row[0].children.push(tag);
-          row[0].classes.push("tml-left");
-        } else {
-          row[row.length - 1].children.push(tag);
-          row[row.length - 1].classes.push("tml-right");
+      const numColumns = group.body[0].length;
+      // Fill out a short row with empty <mtd> elements.
+      for (let k = 0; k < numColumns - rw.length; k++) {
+        row.push(new mathMLTree.MathNode("mtd", [], style));
+      }
+      if (group.autoTag) {
+        const tag = group.tags[i];
+        let tagElement;
+        if (tag === true) {  // automatic numbering
+          tagElement = new mathMLTree.MathNode("mtext", [new Span(["tml-eqn"])]);
+        } else if (tag === false) {
+          // \nonumber/\notag or starred environment
+          tagElement = new mathMLTree.MathNode("mtext", [], []);
+        } else {  // manual \tag
+          tagElement = buildExpressionRow(tag[0].body, style.withLevel(cellLevel), true);
+          tagElement = consolidateText(tagElement);
+          tagElement.classes = ["tml-tag"];
+        }
+        if (tagElement) {
+          row.unshift(glue(group));
+          row.push(glue(group));
+          if (group.leqno) {
+            row[0].children.push(tagElement);
+            row[0].classes.push("tml-left");
+          } else {
+            row[row.length - 1].children.push(tagElement);
+            row[row.length - 1].classes.push("tml-right");
+          }
         }
       }
       const mtr = new mathMLTree.MathNode("mtr", row, []);
+      const label = group.labels.shift();
+      if (label && group.tags && group.tags[i]) {
+        mtr.setAttribute("id", label);
+        if (Array.isArray(group.tags[i])) { mtr.classes.push("tml-tageqn"); }
+      }
+
       // Write horizontal rules
       if (i === 0 && hlines[0].length > 0) {
         if (hlines[0].length === 2) {
@@ -5463,16 +5587,17 @@ var temml = (function () {
     }
 
     if (group.envClasses.length > 0) {
-      let pad = group.envClasses.includes("jot")
-        ? "0.7" // 0.5ex + 0.09em top & bot padding
-        : group.envClasses.includes("small")
-        ? "0.35"
-        : "0.5"; // 0.5ex default top & bot padding
       if (group.arraystretch && group.arraystretch !== 1) {
         // In LaTeX, \arraystretch is a factor applied to a 12pt strut height.
         // It defines a baseline to baseline distance.
         // Here, we do an approximation of that approach.
-        pad = String(1.4 * group.arraystretch - 0.8);
+        const pad = String(1.4 * group.arraystretch - 0.8) + "ex";
+        for (let i = 0; i < tbl.length; i++) {
+          for (let j = 0; j < tbl[i].children.length; j++) {
+            tbl[i].children[j].style.paddingTop = pad;
+            tbl[i].children[j].style.paddingBottom = pad;
+          }
+        }
       }
       let sidePadding = group.envClasses.includes("abut")
         ? "0"
@@ -5486,7 +5611,7 @@ var temml = (function () {
       let sidePadUnit = "em";
       if (group.arraycolsep) {
         const arraySidePad = calculateSize(group.arraycolsep, style);
-        sidePadding = arraySidePad.number;
+        sidePadding = arraySidePad.number.toFixed(4);
         sidePadUnit = arraySidePad.unit;
       }
 
@@ -5497,18 +5622,18 @@ var temml = (function () {
         if (j === numCols - 1 && hand === 1) { return "0" }
         if (group.envClasses[0] !== "align") { return sidePadding }
         if (hand === 1) { return "0" }
-        if (group.addEqnNum) {
+        if (group.autoTag) {
           return (j % 2) ? "1" : "0"
         } else {
           return (j % 2) ? "0" : "1"
         }
       };
 
-      // Padding
+      // Side padding
       for (let i = 0; i < tbl.length; i++) {
         for (let j = 0; j < tbl[i].children.length; j++) {
-          tbl[i].children[j].style.padding = `${pad}ex ${sidePad(j, 1)}${sidePadUnit}`
-            + ` ${pad}ex ${sidePad(j, 0)}${sidePadUnit}`;
+          tbl[i].children[j].style.paddingLeft = `${sidePad(j, 0)}${sidePadUnit}`;
+          tbl[i].children[j].style.paddingRight = `${sidePad(j, 1)}${sidePadUnit}`;
         }
       }
 
@@ -5522,13 +5647,13 @@ var temml = (function () {
             // TODO: Remove -webkit- when Chromium no longer needs it.
             row.children[j].classes = ["tml-" + (j % 2 ? "left" : "right")];
           }
-          if (group.addEqnNum) {
+          if (group.autoTag) {
             const k = group.leqno ? 0 : row.children.length - 1;
             row.children[k].classes = ["tml-" + (group.leqno ? "left" : "right")];
           }
         }
         if (row.children.length > 1 && group.envClasses.includes("cases")) {
-          row.children[1].style.padding = row.children[1].style.padding.replace(/0em$/, "1em");
+          row.children[1].style.paddingLeft = "1em";
         }
 
         if (group.envClasses.includes("cases") || group.envClasses.includes("subarray")) {
@@ -5548,9 +5673,17 @@ var temml = (function () {
     }
 
     let table = new mathMLTree.MathNode("mtable", tbl);
+    if (group.envClasses.length > 0) {
+      // Top & bottom padding
+      if (group.envClasses.includes("jot")) {
+        table.classes.push("tml-jot");
+      } else if (group.envClasses.includes("small")) {
+        table.classes.push("tml-small");
+      }
+    }
     if (group.scriptLevel === "display") { table.setAttribute("displaystyle", "true"); }
 
-    if (group.addEqnNum || group.envClasses.includes("multline")) {
+    if (group.autoTag || group.envClasses.includes("multline")) {
       table.style.width = "100%";
     }
 
@@ -5580,7 +5713,7 @@ var temml = (function () {
           row.children[0].style.borderLeft = sep;
         }
       }
-      let iCol = group.addEqnNum ? 0 : -1;
+      let iCol = group.autoTag ? 0 : -1;
       for (let i = iStart; i < iEnd; i++) {
         if (cols[i].type === "align") {
           const colAlign = alignMap[cols[i].align];
@@ -5622,7 +5755,7 @@ var temml = (function () {
         }
       }
     }
-    if (group.addEqnNum) {
+    if (group.autoTag) {
        // allow for glue cells on each side
       align = "left " + (align.length > 0 ? align : "center ") + "right ";
     }
@@ -5646,13 +5779,14 @@ var temml = (function () {
     if (context.envName.indexOf("ed") === -1) {
       validateAmsEnvironmentContext(context);
     }
+    const isSplit = context.envName === "split";
     const cols = [];
     const res = parseArray(
       context.parser,
       {
         cols,
-        addEqnNum: context.envName === "align" || context.envName === "alignat",
         emptySingleRow: true,
+        autoTag: isSplit ? undefined : getAutoTag(context.envName),
         envClasses: ["abut", "jot"], // set row spacing & provisional column spacing
         maxNumCols: context.envName === "split" ? 2 : undefined,
         leqno: context.parser.settings.leqno
@@ -5974,7 +6108,7 @@ var temml = (function () {
       const res = {
         cols: [],
         envClasses: ["abut", "jot"],
-        addEqnNum: context.envName === "gather",
+        autoTag: getAutoTag(context.envName),
         emptySingleRow: true,
         leqno: context.parser.settings.leqno
       };
@@ -5992,7 +6126,7 @@ var temml = (function () {
     handler(context) {
       validateAmsEnvironmentContext(context);
       const res = {
-        addEqnNum: context.envName === "equation",
+        autoTag: getAutoTag(context.envName),
         emptySingleRow: true,
         singleRow: true,
         maxNumCols: 1,
@@ -6013,7 +6147,7 @@ var temml = (function () {
     handler(context) {
       validateAmsEnvironmentContext(context);
       const res = {
-        addEqnNum: context.envName === "multline",
+        autoTag: context.envName === "multline",
         maxNumCols: 1,
         envClasses: ["jot", "multline"],
         leqno: context.parser.settings.leqno
@@ -7070,7 +7204,7 @@ var temml = (function () {
       // Return a no-width, no-ink element with an HTML id.
       const node = new mathMLTree.MathNode("mrow", [], ["tml-label"]);
       if (group.string.length > 0) {
-        node.setAttribute("id", group.string);
+        node.setLabel(group.string);
       }
       return node
     }
@@ -9333,75 +9467,6 @@ var temml = (function () {
 
   const functions = _functions;
 
-  /**
-   * Lexing or parsing positional information for error reporting.
-   * This object is immutable.
-   */
-  class SourceLocation {
-    constructor(lexer, start, end) {
-      this.lexer = lexer; // Lexer holding the input string.
-      this.start = start; // Start offset, zero-based inclusive.
-      this.end = end;     // End offset, zero-based exclusive.
-    }
-
-    /**
-     * Merges two `SourceLocation`s from location providers, given they are
-     * provided in order of appearance.
-     * - Returns the first one's location if only the first is provided.
-     * - Returns a merged range of the first and the last if both are provided
-     *   and their lexers match.
-     * - Otherwise, returns null.
-     */
-    static range(first, second) {
-      if (!second) {
-        return first && first.loc;
-      } else if (!first || !first.loc || !second.loc || first.loc.lexer !== second.loc.lexer) {
-        return null;
-      } else {
-        return new SourceLocation(first.loc.lexer, first.loc.start, second.loc.end);
-      }
-    }
-  }
-
-  /**
-   * Interface required to break circular dependency between Token, Lexer, and
-   * ParseError.
-   */
-
-  /**
-   * The resulting token returned from `lex`.
-   *
-   * It consists of the token text plus some position information.
-   * The position information is essentially a range in an input string,
-   * but instead of referencing the bare input string, we refer to the lexer.
-   * That way it is possible to attach extra metadata to the input string,
-   * like for example a file name or similar.
-   *
-   * The position information is optional, so it is OK to construct synthetic
-   * tokens if appropriate. Not providing available position information may
-   * lead to degraded error reporting, though.
-   */
-  class Token {
-    constructor(
-      text, // the text of this token
-      loc
-    ) {
-      this.text = text;
-      this.loc = loc;
-    }
-
-    /**
-     * Given a pair of tokens (this and endToken), compute a `Token` encompassing
-     * the whole input range enclosed by these two.
-     */
-    range(
-      endToken, // last token of the range, inclusive
-      text // the text of the newly constructed token
-    ) {
-      return new Token(text, SourceLocation.range(this, endToken));
-    }
-  }
-
   /**
    * The Lexer class handles tokenizing the input in various ways. Since our
    * parser expects us to be able to backtrack, the lexer allows lexing from any
@@ -11699,7 +11764,7 @@ var temml = (function () {
    * https://mit-license.org/
    */
 
-  const version = "0.10.33";
+  const version = "0.11.00";
 
   function postProcess(block) {
     const labelMap = {};
@@ -11715,15 +11780,15 @@ var temml = (function () {
       // No need to write a number into the text content of the element.
       // A CSS counter has done that even if this postProcess() function is not used.
 
-      // Find any \label that refers to an AMS eqn number.
+      // Find any \label that refers to an AMS automatic eqn number.
       while (true) {
+        if (parent.tagName === "mtable") { break }
         const labels = parent.getElementsByClassName("tml-label");
         if (labels.length > 0) {
-          parent.setAttribute("id", labels[0].id);
-          labelMap[labels[0].id] = String(i);
+          const id = parent.attributes.id.value;
+          labelMap[id] = String(i);
           break
         } else {
-          if (parent.tagName === "mtable") { break }
           parent = parent.parentElement;
         }
       }
@@ -11736,7 +11801,8 @@ var temml = (function () {
       if (labels.length > 0) {
         const tags = parent.getElementsByClassName("tml-tag");
         if (tags.length > 0) {
-          labelMap[labels[0].id] = tags[0].textContent;
+          const id = parent.attributes.id.value;
+          labelMap[id] = tags[0].textContent;
         }
       }
     }
@@ -11763,6 +11829,267 @@ var temml = (function () {
     });
   }
 
+  const findEndOfMath = function(delimiter, text, startIndex) {
+    // Adapted from
+    // https://github.com/Khan/perseus/blob/master/src/perseus-markdown.jsx
+    let index = startIndex;
+    let braceLevel = 0;
+
+    const delimLength = delimiter.length;
+
+    while (index < text.length) {
+      const character = text[index];
+
+      if (braceLevel <= 0 && text.slice(index, index + delimLength) === delimiter) {
+        return index;
+      } else if (character === "\\") {
+        index++;
+      } else if (character === "{") {
+        braceLevel++;
+      } else if (character === "}") {
+        braceLevel--;
+      }
+
+      index++;
+    }
+
+    return -1;
+  };
+
+  const escapeRegex = function(string) {
+    return string.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
+  };
+
+  const amsRegex = /^\\(?:begin|(?:eq)?ref){/;
+
+  const splitAtDelimiters = function(text, delimiters) {
+    let index;
+    const data = [];
+
+    const regexLeft = new RegExp(
+      "(" + delimiters.map((x) => escapeRegex(x.left)).join("|") + ")"
+    );
+
+    while (true) {
+      index = text.search(regexLeft);
+      if (index === -1) {
+        break;
+      }
+      if (index > 0) {
+        data.push({
+          type: "text",
+          data: text.slice(0, index)
+        });
+        text = text.slice(index); // now text starts with delimiter
+      }
+      // ... so this always succeeds:
+      const i = delimiters.findIndex((delim) => text.startsWith(delim.left));
+      index = findEndOfMath(delimiters[i].right, text, delimiters[i].left.length);
+      if (index === -1) {
+        break;
+      }
+      const rawData = text.slice(0, index + delimiters[i].right.length);
+      const math = amsRegex.test(rawData)
+        ? rawData
+        : text.slice(delimiters[i].left.length, index);
+      data.push({
+        type: "math",
+        data: math,
+        rawData,
+        display: delimiters[i].display
+      });
+      text = text.slice(index + delimiters[i].right.length);
+    }
+
+    if (text !== "") {
+      data.push({
+        type: "text",
+        data: text
+      });
+    }
+
+    return data;
+  };
+
+  const defaultDelimiters = [
+    { left: "$$", right: "$$", display: true },
+    { left: "\\(", right: "\\)", display: false },
+    // LaTeX uses $…$, but it ruins the display of normal `$` in text:
+    // {left: "$", right: "$", display: false},
+    // $ must come after $$
+
+    // Render AMS environments even if outside $$…$$ delimiters.
+    { left: "\\begin{equation}", right: "\\end{equation}", display: true },
+    { left: "\\begin{equation*}", right: "\\end{equation*}", display: true },
+    { left: "\\begin{align}", right: "\\end{align}", display: true },
+    { left: "\\begin{align*}", right: "\\end{align*}", display: true },
+    { left: "\\begin{alignat}", right: "\\end{alignat}", display: true },
+    { left: "\\begin{alignat*}", right: "\\end{alignat*}", display: true },
+    { left: "\\begin{gather}", right: "\\end{gather}", display: true },
+    { left: "\\begin{gather*}", right: "\\end{gather*}", display: true },
+    { left: "\\begin{CD}", right: "\\end{CD}", display: true },
+    // Ditto \ref & \eqref
+    { left: "\\ref{", right: "}", display: false },
+    { left: "\\eqref{", right: "}", display: false },
+
+    { left: "\\[", right: "\\]", display: true }
+  ];
+
+  const firstDraftDelimiters = {
+    "$": [
+           { left: "$$", right: "$$", display: true },
+           { left: "$`", right: "`$", display: false },
+           { left: "$", right: "$", display: false }
+    ],
+    "(": [
+      { left: "\\[", right: "\\]", display: true },
+      { left: "\\(", right: "\\)", display: false }
+    ]
+  };
+
+  const amsDelimiters = [
+    { left: "\\begin{equation}", right: "\\end{equation}", display: true },
+    { left: "\\begin{equation*}", right: "\\end{equation*}", display: true },
+    { left: "\\begin{align}", right: "\\end{align}", display: true },
+    { left: "\\begin{align*}", right: "\\end{align*}", display: true },
+    { left: "\\begin{alignat}", right: "\\end{alignat}", display: true },
+    { left: "\\begin{alignat*}", right: "\\end{alignat*}", display: true },
+    { left: "\\begin{gather}", right: "\\end{gather}", display: true },
+    { left: "\\begin{gather*}", right: "\\end{gather*}", display: true },
+    { left: "\\begin{CD}", right: "\\end{CD}", display: true },
+    { left: "\\ref{", right: "}", display: false },
+    { left: "\\eqref{", right: "}", display: false }
+  ];
+
+  const delimitersFromKey = key => {
+    if (key === "$" || key === "(") {
+      return firstDraftDelimiters[key];
+    } else if (key === "$+" || key === "(+") {
+      const firstDraft = firstDraftDelimiters[key.slice(0, 1)];
+      return firstDraft.concat(amsDelimiters)
+    } else if (key === "ams") {
+      return amsDelimiters
+    } else if (key === "all") {
+      return (firstDraftDelimiters["("]).concat(firstDraftDelimiters["$"]).concat(amsDelimiters)
+    } else {
+      return defaultDelimiters
+    }
+  };
+
+  /* Note: optionsCopy is mutated by this method. If it is ever exposed in the
+   * API, we should copy it before mutating.
+   */
+  const renderMathInText = function(text, optionsCopy) {
+    const data = splitAtDelimiters(text, optionsCopy.delimiters);
+    if (data.length === 1 && data[0].type === "text") {
+      // There is no formula in the text.
+      // Let's return null which means there is no need to replace
+      // the current text node with a new one.
+      return null;
+    }
+
+    const fragment = document.createDocumentFragment();
+
+    for (let i = 0; i < data.length; i++) {
+      if (data[i].type === "text") {
+        fragment.appendChild(document.createTextNode(data[i].data));
+      } else {
+        const span = document.createElement("span");
+        let math = data[i].data;
+        // Override any display mode defined in the settings with that
+        // defined by the text itself
+        optionsCopy.displayMode = data[i].display;
+        try {
+          if (optionsCopy.preProcess) {
+            math = optionsCopy.preProcess(math);
+          }
+          // Importing render() from temml.js would be a circular dependency.
+          // So call the global version.
+          // eslint-disable-next-line no-undef
+          temml.render(math, span, optionsCopy);
+        } catch (e) {
+          if (!(e instanceof ParseError)) {
+            throw e;
+          }
+          optionsCopy.errorCallback(
+            "Temml auto-render: Failed to parse `" + data[i].data + "` with ",
+            e
+          );
+          fragment.appendChild(document.createTextNode(data[i].rawData));
+          continue;
+        }
+        fragment.appendChild(span);
+      }
+    }
+
+    return fragment;
+  };
+
+  const renderElem = function(elem, optionsCopy) {
+    for (let i = 0; i < elem.childNodes.length; i++) {
+      const childNode = elem.childNodes[i];
+      if (childNode.nodeType === 3) {
+        // Text node
+        const frag = renderMathInText(childNode.textContent, optionsCopy);
+        if (frag) {
+          i += frag.childNodes.length - 1;
+          elem.replaceChild(frag, childNode);
+        }
+      } else if (childNode.nodeType === 1) {
+        // Element node
+        const className = " " + childNode.className + " ";
+        const shouldRender =
+          optionsCopy.ignoredTags.indexOf(childNode.nodeName.toLowerCase()) === -1 &&
+          optionsCopy.ignoredClasses.every((x) => className.indexOf(" " + x + " ") === -1);
+
+        if (shouldRender) {
+          renderElem(childNode, optionsCopy);
+        }
+      }
+      // Otherwise, it's something else, and ignore it.
+    }
+  };
+
+  const renderMathInElement = function(elem, options) {
+    if (!elem) {
+      throw new Error("No element provided to render");
+    }
+
+    const optionsCopy = {};
+
+    // Object.assign(optionsCopy, option)
+    for (const option in options) {
+      if (Object.prototype.hasOwnProperty.call(options, option)) {
+        optionsCopy[option] = options[option];
+      }
+    }
+
+    if (optionsCopy.fences) {
+      optionsCopy.delimiters = delimitersFromKey(optionsCopy.fences);
+    } else {
+      optionsCopy.delimiters = optionsCopy.delimiters || defaultDelimiters;
+    }
+    optionsCopy.ignoredTags = optionsCopy.ignoredTags || [
+      "script",
+      "noscript",
+      "style",
+      "textarea",
+      "pre",
+      "code",
+      "option"
+    ];
+    optionsCopy.ignoredClasses = optionsCopy.ignoredClasses || [];
+    // eslint-disable-next-line no-console
+    optionsCopy.errorCallback = optionsCopy.errorCallback || console.error;
+
+    // Enable sharing of global macros defined via `\gdef` between different
+    // math elements within a single call to `renderMathInElement`.
+    optionsCopy.macros = optionsCopy.macros || {};
+
+    renderElem(elem, optionsCopy);
+    postProcess(elem);
+  };
+
   /* eslint no-console:0 */
   /**
    * This is the main entry point for Temml. Here, we expose functions for
@@ -11882,7 +12209,7 @@ var temml = (function () {
   };
 
   /** @type {import('./temml').default} */
-  var temml = {
+  var temml$1 = {
     /**
      * Current Temml version
      */
@@ -11897,6 +12224,11 @@ var temml = (function () {
      * for sending to the client.
      */
     renderToString,
+    /**
+     * Finds all the math delimiters in a given element of a running HTML document
+     * and converts the contents of each instance into a <math> element.
+     */
+    renderMathInElement,
     /**
      * Post-process an entire HTML block.
      * Writes AMS auto-numbers and implements \ref{}.
@@ -11939,6 +12271,6 @@ var temml = (function () {
     __defineMacro: defineMacro
   };
 
-  return temml;
+  return temml$1;
 
 })();