temml 0.10.34 → 0.11.1

package/dist/temmlPostProcess.js

@@ -11,7 +11,7 @@
    * https://mit-license.org/
    */
 
-  const version = "0.10.34";
+  const version = "0.11.01";
 
   function postProcess(block) {
     const labelMap = {};
@@ -72,6 +72,7 @@
       mtext.appendChild(document.createTextNode(str));
       const math =  document.createElementNS("http://www.w3.org/1998/Math/MathML", "math");
       math.appendChild(mtext);
+      ref.textContent = '';
       ref.appendChild(math);
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "temml",
-  "version": "0.10.34",
+  "version": "0.11.01",
   "description": "TeX to MathML conversion in JavaScript.",
   "main": "dist/temml.js",
   "engines": {
@@ -44,6 +44,6 @@
     "minify": "terser test/temml.js -o site/assets/temml.min.js -c -m && terser contrib/mhchem/mhchem.js -o site/assets/mhchem.min.js -c -m",
     "build": "rollup --config ./utils/rollupConfig.mjs && yarn minify && node utils/insertPlugins.js",
     "docs": "node utils/buildDocs.js",
-    "dist": "yarn build && node ./utils/copyfiles.js && terser contrib/auto-render/test/auto-render.js -o contrib/auto-render/dist/auto-render.min.js -c -m"
+    "dist": "yarn build && node ./utils/copyfiles.js"
   }
 }

package/src/ParseError.js

@@ -27,7 +27,7 @@ class ParseError {
       if (start === input.length) {
         error += " at end of input: ";
       } else {
-        error += " at position " + (start + 1) + ": ";
+        error += " at position " + (start + 1) + ": \n";
       }
 
       // Underline token in question using combining underscores

package/src/auto-render.js

@@ -0,0 +1,263 @@
+import ParseError from "./ParseError.js"
+import { postProcess } from "./postProcess.js";
+
+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.
+  }
+};
+
+export 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);
+};

package/src/environments/array.js

@@ -1,5 +1,6 @@
 import defineEnvironment from "../defineEnvironment";
 import { parseCD } from "./cd";
+import { bordermatrixParseTree } from "./borderTree.js"
 import defineFunction from "../defineFunction";
 import mathMLTree from "../mathMLTree";
 import { Span } from "../domTree"
@@ -103,6 +104,7 @@ function parseArray(
 },
   scriptLevel
 ) {
+  const endToken = envClasses && envClasses.includes("bordermatrix") ? "}" : "\\end"
   parser.gullet.beginGroup();
   if (!singleRow) {
     // \cr is equivalent to \\ without the optional size argument (see below)
@@ -176,7 +178,7 @@ function parseArray(
         }
       }
       parser.consume();
-    } else if (next === "\\end") {
+    } else if (next === endToken) {
       endRow()
       // Arrays terminate newlines with `\crcr` which consumes a `\cr` if
       // the last line is empty.  However, AMS environments keep the
@@ -213,7 +215,7 @@ function parseArray(
       body.push(row);
       beginRow();
     } else {
-      throw new ParseError("Expected & or \\\\ or \\cr or \\end", parser.nextToken);
+      throw new ParseError("Expected & or \\\\ or \\cr or " + endToken, parser.nextToken);
     }
   }
 
@@ -346,23 +348,44 @@ const mathmlBuilder = function(group, style) {
         })
       }
     }
-    tbl.push(mtr);
+
+    // Check for \hphantom \from \bordermatrix
+    let mustSquashRow = true
+    for (let j = 0; j < mtr.children.length; j++) {
+      const child = mtr.children[j].children[0];
+      if (!(child && child.type === "mpadded" && child.attributes.height === "0px")) {
+        mustSquashRow = false
+        break
+      }
+    }
+    if (mustSquashRow) {
+      // All the cell contents are \hphantom. Squash the padding.
+      for (let j = 0; j < mtr.children.length; j++) {
+        mtr.children[j].style.paddingTop = "0"
+        mtr.children[j].style.paddingBottom = "0"
+      }
+    }
+
+    tbl.push(mtr)
   }
 
-  if (group.envClasses.length > 0) {
-    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.
-      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
-        }
+  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.
+    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")
+  }
+
+  let sidePadding
+  let sidePadUnit
+  if (group.envClasses.length > 0) {
+    sidePadding = group.envClasses.includes("abut")
       ? "0"
       : group.envClasses.includes("cases")
       ? "0"
@@ -371,13 +394,14 @@ const mathmlBuilder = function(group, style) {
       : group.envClasses.includes("cd")
       ? "0.25"
       : "0.4" // default side padding
-    let sidePadUnit = "em"
-    if (group.arraycolsep) {
-      const arraySidePad = calculateSize(group.arraycolsep, style)
-      sidePadding = arraySidePad.number.toFixed(4)
-      sidePadUnit = arraySidePad.unit
-    }
-
+    sidePadUnit = "em"
+  }
+  if (group.arraycolsep) {
+    const arraySidePad = calculateSize(group.arraycolsep, style)
+    sidePadding = arraySidePad.number.toFixed(4)
+    sidePadUnit = arraySidePad.unit
+  }
+  if (sidePadding) {
     const numCols = tbl.length === 0 ? 0 : tbl[0].children.length
 
     const sidePad = (j, hand) => {
@@ -399,7 +423,18 @@ const mathmlBuilder = function(group, style) {
         tbl[i].children[j].style.paddingRight = `${sidePad(j, 1)}${sidePadUnit}`
       }
     }
+  }
+  if (group.envClasses.length === 0) {
+    // Set zero padding on side of the matrix
+    for (let i = 0; i < tbl.length; i++) {
+      tbl[i].children[0].style.paddingLeft = "0em"
+      if (tbl[i].children.length === tbl[0].children.length) {
+        tbl[i].children[tbl[i].children.length - 1].style.paddingRight = "0em"
+      }
+    }
+  }
 
+  if (group.envClasses.length > 0) {
     // Justification
     const align = group.envClasses.includes("align") || group.envClasses.includes("alignat")
     for (let i = 0; i < tbl.length; i++) {
@@ -425,14 +460,6 @@ const mathmlBuilder = function(group, style) {
         }
       }
     }
-  } else {
-    // Set zero padding on side of the matrix
-    for (let i = 0; i < tbl.length; i++) {
-      tbl[i].children[0].style.paddingLeft = "0em"
-      if (tbl[i].children.length === tbl[0].children.length) {
-        tbl[i].children[tbl[i].children.length - 1].style.paddingRight = "0em"
-      }
-    }
   }
 
   let table = new mathMLTree.MathNode("mtable", tbl)
@@ -672,7 +699,7 @@ defineEnvironment({
   mathmlBuilder
 });
 
-// The matrix environments of amsmath builds on the array environment
+// The matrix environments of amsmath build on the array environment
 // of LaTeX, which is discussed above.
 // The mathtools package adds starred versions of the same environments.
 // These have an optional argument to choose left|center|right justification.
@@ -732,6 +759,10 @@ defineEnvironment({
     const res = parseArray(context.parser, payload, "text")
     res.cols = new Array(res.body[0].length).fill({ type: "align", align: colAlign })
     const [arraystretch, arraycolsep] = arrayGaps(context.parser.gullet.macros)
+    res.arraystretch = arraystretch
+    if (arraycolsep && !(arraycolsep === 6 && arraycolsep === "pt")) {
+      res.arraycolsep = arraycolsep
+    }
     return delimiters
       ? {
         type: "leftright",
@@ -739,15 +770,31 @@ defineEnvironment({
         body: [res],
         left: delimiters[0],
         right: delimiters[1],
-        rightColor: undefined, // \right uninfluenced by \color in array
-        arraystretch,
-        arraycolsep
+        rightColor: undefined // \right uninfluenced by \color in array
       }
       : res;
   },
   mathmlBuilder
 });
 
+defineEnvironment({
+  type: "array",
+  names: ["bordermatrix"],
+  props: {
+    numArgs: 0
+  },
+  handler(context) {
+    const payload = { cols: [], envClasses: ["bordermatrix"] }
+    const res = parseArray(context.parser, payload, "text")
+    res.cols = new Array(res.body[0].length).fill({ type: "align", align: "c" })
+    res.envClasses = [];
+    res.arraystretch = 1
+    if (context.envName === "matrix") { return res}
+    return bordermatrixParseTree(res, context.delimiters)
+  },
+  mathmlBuilder
+});
+
 defineEnvironment({
   type: "array",
   names: ["smallmatrix"],

package/src/environments/borderTree.js

@@ -0,0 +1,139 @@
+
+const ordGroup = (body) => {
+  return {
+    "type": "ordgroup",
+    "mode": "math",
+    "body": body,
+    "semisimple": true
+  }
+}
+
+const phantom = (body, type) => {
+  return {
+    "type": type,
+    "mode": "math",
+    "body": ordGroup(body)
+  }
+}
+
+/*
+ * A helper for \bordermatrix.
+ * parseArray() has parsed the tokens as if the environment
+ * was \begin{matrix}. That parse tree is this function’s input.
+ * Here, we rearrange the parse tree to get one that will
+ * result in TeX \bordermatrix.
+ * The final result includes a {pmatrix}, which is the bottom
+ * half of a <mover> element. The top of the <mover> contains
+ * the \bordermatrix headings. The top section also contains the
+ * contents of the bottom {pmatrix}. Those elements are hidden via
+ * \hphantom, but they ensure that column widths are the same top and
+ * bottom.
+ *
+ * We also create a left {matrix} with a single column that contains
+ * elements shifted out of the matrix. The left {matrix} also
+ * contains \vphantom copies of the other {pmatrix} elements.
+ * As before, this ensures consistent row heights of left and main.
+ */
+
+export const bordermatrixParseTree = (matrix, delimiters) => {
+  const body = matrix.body
+  body[0].shift() // dispose of top left cell
+
+  // Create an array for the left column
+  const leftColumnBody = new Array(body.length - 1).fill().map(() => [])
+  for (let i = 1; i < body.length; i++) {
+    // The visible part of the cell
+    leftColumnBody[i - 1].push(body[i].shift())
+    // A vphantom with contents from the pmatrix, to set minimum cell height
+    const phantomBody = [];
+    for (let j = 0; j < body[i].length; j++) {
+      phantomBody.push(structuredClone(body[i][j]))
+    }
+    leftColumnBody[i - 1].push(phantom(phantomBody, "vphantom"))
+  }
+
+  // Create an array for the top row
+  const topRowBody = new Array(body.length).fill().map(() => [])
+  for (let j = 0; j < body[0].length; j++) {
+    topRowBody[0].push(structuredClone(body[0][j]))
+  }
+  // Copy the rest of the pmatrix, but squashed via \hphantom
+  for (let i = 1; i < body.length; i++) {
+    for (let j = 0; j < body[0].length; j++) {
+      topRowBody[i].push(phantom(structuredClone(body[i][j]).body, "hphantom"))
+    }
+  }
+
+  // Squash the top row of the main {pmatrix}
+  for (let j = 0; j < body[0].length; j++) {
+    body[0][j] = phantom(structuredClone(body[0][j]).body, "hphantom")
+  }
+
+  // Now wrap the arrays in the proper parse nodes.
+
+  const leftColumn = {
+    type: "array",
+    mode: "math",
+    body: leftColumnBody,
+    cols: [{ type: "align", align: "c" }],
+    rowGaps: new Array(leftColumnBody.length - 1).fill(null),
+    hLinesBeforeRow: new Array(leftColumnBody.length + 1).fill().map(() => []),
+    envClasses: [],
+    scriptLevel: "text",
+    arraystretch: 1,
+    labels: new Array(leftColumnBody.length).fill(""),
+    arraycolsep: { "number": 0.04, unit: "em" }
+  }
+
+  const topRow = {
+    type: "array",
+    mode: "math",
+    body: topRowBody,
+    cols: new Array(topRowBody.length).fill({ type: "align", align: "c" }),
+    rowGaps: new Array(topRowBody.length - 1).fill(null),
+    hLinesBeforeRow: new Array(topRowBody.length + 1).fill().map(() => []),
+    envClasses: [],
+    scriptLevel: "text",
+    arraystretch: 1,
+    labels: new Array(topRowBody.length).fill(""),
+    arraycolsep: null
+  }
+
+  const topWrapper = {
+    type: "styling",
+    mode: "math",
+    scriptLevel: "text", // Must set this explicitly.
+    body: [topRow]       // Default level is "script".
+  }
+
+  const container = {
+    type: "leftright",
+    mode: "math",
+    body: [matrix],
+    left: delimiters ? delimiters[0] : "(",
+    right: delimiters ? delimiters[1] : ")",
+    rightColor: undefined
+  }
+
+  const base = {
+    type: "op",   // The base of a TeX \overset
+    mode: "math",
+    limits: true,
+    alwaysHandleSupSub: true,
+    parentIsSupSub: true,
+    symbol: false,
+    stack: true,
+    suppressBaseShift: true,
+    body: [container]
+  }
+
+  const mover = {
+    type: "supsub",  // We're using the MathML equivalent
+    mode: "math",    // of TeX \overset.
+    base: base,      // That keeps the {pmatrix} aligned with
+    sup: topWrapper, // the math centerline.
+    sub: null
+  }
+
+  return ordGroup([leftColumn, mover])
+}

package/src/functions/bordermatrix.js

@@ -0,0 +1,42 @@
+import defineFunction from "../defineFunction"
+import environments from "../environments"
+
+// \bordermatrix  from TeXbook pp 177 & 361
+// Optional argument from Herbert Voß, Math mode, p 20
+// Ref: https://tug.ctan.org/obsolete/info/math/voss/mathmode/Mathmode.pdf
+
+defineFunction({
+  type: "bordermatrix",
+  names: ["\\bordermatrix", "\\matrix"],
+  props: {
+    numArgs: 0,
+    numOptionalArgs: 1
+  },
+  handler: ({ parser, funcName }, args, optArgs) => {
+    // Find out if the author has defined custom delimiters
+    let delimiters = ["(", ")"]
+    if (funcName === "\\bordermatrix" && optArgs[0] && optArgs[0].body) {
+      const body = optArgs[0].body
+      if (body.length === 2 && body[0].type === "atom" && body[1].type === "atom") {
+        if (body[0].family === "open" && body[1].family === "close") {
+          delimiters = [body[0].text, body[1].text]
+        }
+      }
+    }
+    // consume the opening brace
+    parser.consumeSpaces()
+    parser.consume()
+
+    // Pass control to the environment handler in array.js.
+    const env = environments["bordermatrix"];
+    const context = {
+      mode: parser.mode,
+      envName: funcName.slice(1),
+      delimiters,
+      parser
+    }
+    const result = env.handler(context)
+    parser.expect("}", true)
+    return result
+  }
+});