katex 0.16.45 → 0.16.46

package/src/buildCommon.ts

@@ -13,11 +13,18 @@ import {DocumentFragment} from "./tree";
 
 import type Options from "./Options";
 import type {ParseNode} from "./parseNode";
-import type {CharacterMetrics} from "./fontMetrics";
-import type {FontVariant, Mode} from "./types";
+import type {Mode} from "./types";
 import type {documentFragment as HtmlDocumentFragment} from "./domTree";
 import type {HtmlDomNode, DomSpan, SvgSpan, CssStyle} from "./domTree";
 import type {Measurement} from "./units";
+import type {
+    CharacterMetrics,
+    FontName,
+    FontShape,
+    FontVariant,
+    FontWeight,
+    TextFont,
+} from "./types/fonts";
 
 /**
  * Looks up the given symbol in fontMetrics, after applying any symbol
@@ -25,8 +32,7 @@ import type {Measurement} from "./units";
  */
 const lookupSymbol = function(
     value: string,
-    // TODO(#963): Use a union type for this.
-    fontName: string,
+    fontName: FontName,
     mode: Mode,
 ): {
     value: string;
@@ -58,7 +64,7 @@ const lookupSymbol = function(
  */
 export const makeSymbol = function(
     value: string,
-    fontName: string,
+    fontName: FontName,
     mode: Mode,
     options?: Options,
     classes?: string[],
@@ -132,18 +138,18 @@ export const mathsym = function(
  * depending on the symbol.  Use this function instead of fontMap for font
  * "boldsymbol".
  */
-const boldsymbol = function(
+const boldSymbol = function(
     value: string,
     mode: Mode,
-    options: Options,
-    classes: string[],
     type: "mathord" | "textord",
 ): {
-    fontName: string;
-    fontClass: string;
+    fontName: "Math-BoldItalic" | "Main-Bold";
+    fontClass: "boldsymbol" | "mathbf";
 } {
-    if (type !== "textord" &&
-        lookupSymbol(value, "Math-BoldItalic", mode).metrics) {
+    if (
+        type !== "textord" &&
+        lookupSymbol(value, "Math-BoldItalic", mode).metrics
+    ) {
         return {
             fontName: "Math-BoldItalic",
             fontClass: "boldsymbol",
@@ -168,35 +174,39 @@ export const makeOrd = function<NODETYPE extends "spacing" | "mathord" | "textor
 ): HtmlDocumentFragment | SymbolNode {
     const mode = group.mode;
     const text = group.text;
-
     const classes = ["mord"];
+    const {font, fontFamily, fontWeight, fontShape} = options;
 
     // Math mode or Old font (i.e. \rm)
-    const isFont = mode === "math" || (mode === "text" && options.font);
-    const fontOrFamily = isFont ? options.font : options.fontFamily;
-    let wideFontName = "";
+    const useFont = mode === "math" || (mode === "text" && !!font);
+    const fontOrFamily = useFont ? font : fontFamily;
+    let wideFontName: FontName | "" = "";
     let wideFontClass = "";
     if (text.charCodeAt(0) === 0xD835) {
-        [wideFontName, wideFontClass] = wideCharacterFont(text, mode);
+        const wideCharData = wideCharacterFont(text);
+        wideFontName = wideCharData.font;
+        wideFontClass = wideCharData[`${mode}Class`];
     }
-    if (wideFontName.length > 0) {
+    if (wideFontName) {
         // surrogate pairs get special treatment
-        return makeSymbol(text, wideFontName, mode, options,
-            classes.concat(wideFontClass));
+        return makeSymbol(text, wideFontName, mode, options, classes.concat(wideFontClass));
     } else if (fontOrFamily) {
         let fontName;
         let fontClasses;
         if (fontOrFamily === "boldsymbol") {
-            const fontData = boldsymbol(text, mode, options, classes, type);
+            const fontData = boldSymbol(text, mode, type);
             fontName = fontData.fontName;
             fontClasses = [fontData.fontClass];
-        } else if (isFont) {
-            fontName = fontMap[fontOrFamily].fontName;
-            fontClasses = [fontOrFamily];
+        } else if (useFont) {
+            fontName = fontMap[font].fontName;
+            fontClasses = [font];
         } else {
-            fontName = retrieveTextFontName(fontOrFamily, options.fontWeight,
-                                            options.fontShape);
-            fontClasses = [fontOrFamily, options.fontWeight, options.fontShape];
+            fontName = retrieveTextFontName(
+                fontFamily,
+                fontWeight,
+                fontShape,
+            );
+            fontClasses = [fontFamily, fontWeight, fontShape];
         }
 
         if (lookupSymbol(text, fontName, mode).metrics) {
@@ -221,24 +231,21 @@ export const makeOrd = function<NODETYPE extends "spacing" | "mathord" | "textor
     } else if (type === "textord") {
         const font = symbols[mode][text] && symbols[mode][text].font;
         if (font === "ams") {
-            const fontName = retrieveTextFontName("amsrm", options.fontWeight,
-                  options.fontShape);
+            const fontName = retrieveTextFontName("amsrm", fontWeight, fontShape);
             return makeSymbol(
                 text, fontName, mode, options,
-                classes.concat("amsrm", options.fontWeight, options.fontShape));
+                classes.concat("amsrm", fontWeight, fontShape));
         } else if (font === "main" || !font) {
-            const fontName = retrieveTextFontName("textrm", options.fontWeight,
-                  options.fontShape);
+            const fontName = retrieveTextFontName("textrm", fontWeight, fontShape);
             return makeSymbol(
                 text, fontName, mode, options,
-                classes.concat(options.fontWeight, options.fontShape));
+                classes.concat(fontWeight, fontShape));
         } else { // fonts added by plugins
-            const fontName = retrieveTextFontName(font, options.fontWeight,
-                  options.fontShape);
+            const fontName = retrieveTextFontName(font, fontWeight, fontShape);
             // We add font name as a css class
             return makeSymbol(
                 text, fontName, mode, options,
-                classes.concat(fontName, options.fontWeight, options.fontShape));
+                classes.concat(fontName, fontWeight, fontShape));
         }
     } else {
         throw new Error("unexpected type: " + type + " in makeOrd");
@@ -643,12 +650,14 @@ export const makeGlue = (measurement: Measurement, options: Options): DomSpan =>
 };
 
 // Takes font options, and returns the appropriate fontLookup name
-const retrieveTextFontName = function(
-    fontFamily: string,
-    fontWeight: string,
-    fontShape: string,
-): string {
-    let baseFontName = "";
+const retrieveTextFontName = (
+    fontFamily: TextFont,
+    fontWeight: FontWeight,
+    fontShape: FontShape,
+): FontName => {
+    let baseFontName: "AMS" | "Main" | "SansSerif" | "Typewriter" | TextFont;
+    let fontStylesName: "BoldItalic" | "Bold" | "Italic" | "Regular";
+
     switch (fontFamily) {
         case "amsrm":
             baseFontName = "AMS";
@@ -666,18 +675,17 @@ const retrieveTextFontName = function(
             baseFontName = fontFamily; // use fonts added by a plugin
     }
 
-    let fontStylesName;
     if (fontWeight === "textbf" && fontShape === "textit") {
         fontStylesName = "BoldItalic";
     } else if (fontWeight === "textbf") {
         fontStylesName = "Bold";
-    } else if (fontWeight === "textit") {
+    } else if (fontShape === "textit") {
         fontStylesName = "Italic";
     } else {
         fontStylesName = "Regular";
     }
 
-    return `${baseFontName}-${fontStylesName}`;
+    return `${baseFontName}-${fontStylesName}` as FontName;
 };
 
 /**
@@ -688,7 +696,7 @@ const retrieveTextFontName = function(
 // A map between tex font commands an MathML mathvariant attribute values
 export const fontMap: Record<string, {
     variant: FontVariant;
-    fontName: string;
+    fontName: FontName;
 }> = {
     // styles
     "mathbf": {

package/src/buildHTML.ts

@@ -159,7 +159,8 @@ const traverseNonSpaceNodes = function(
         const partialGroup = checkPartialGroup(node);
 
         if (partialGroup) { // Recursive DFS
-            // TODO(ts): make nodes a $ReadOnlyArray by returning a new array
+            // TODO(ts): partialGroup.children is ReadonlyArray but this
+            // function mutates the array (insertAfter splices into it).
             traverseNonSpaceNodes(partialGroup.children as HtmlDomNode[],
                 callback, prev, null, isRoot);
             continue;
@@ -266,8 +267,8 @@ export const buildGroup = function(
     }
 
     if (groupBuilders[group.type]) {
-        // Call the groupBuilders function
-        // TODO(ts)
+        // TODO(ts): groupBuilders is Record<string, HtmlBuilder<any>>;
+        // a type-safe registry would need a mapped type keyed by NodeType.
         let groupNode: HtmlDomNode = groupBuilders[group.type](group, options);
 
         // If the size changed between the parent and the current group, account

package/src/buildMathML.ts

@@ -13,9 +13,10 @@ import {MathNode, TextNode} from "./mathMLTree";
 
 import type Options from "./Options";
 import type {AnyParseNode, SymbolParseNode} from "./parseNode";
-import type {DomSpan} from "./domTree";
+import type {DomSpan, HtmlDomNode} from "./domTree";
 import type {MathDomNode} from "./mathMLTree";
-import type {FontVariant, Mode} from "./types";
+import type {Mode} from "./types";
+import type {FontVariant, MathFont} from "./types/fonts";
 
 const noVariantSymbols = new Set(["\\imath", "\\jmath"]);
 const rowLikeTypes = new Set(["mrow", "mtable"]);
@@ -52,36 +53,53 @@ export const makeRow = function(body: MathDomNode[]): MathDomNode {
     }
 };
 
+const mathFontVariants: Partial<
+    Record<MathFont, FontVariant | ((group: SymbolParseNode) => FontVariant)>
+> = {
+    mathit: "italic",
+    boldsymbol: (group) => (group.type === "textord" ? "bold" : "bold-italic"),
+    mathbf: "bold",
+    mathbb: "double-struck",
+    mathsfit: "sans-serif-italic",
+    mathfrak: "fraktur",
+    mathscr: "script",
+    mathcal: "script",
+    mathsf: "sans-serif",
+    mathtt: "monospace",
+};
+
 /**
  * Returns the math variant as a string or null if none is required.
  */
-export const getVariant = function(
+export const getVariant = (
     group: SymbolParseNode,
     options: Options,
-): FontVariant | null | undefined {
+): FontVariant | null | undefined => {
     // Handle \text... font specifiers as best we can.
     // MathML has a limited list of allowable mathvariant specifiers; see
     // https://www.w3.org/TR/MathML3/chapter3.html#presm.commatt
-    if (options.fontFamily === "texttt") {
-        return "monospace";
-    } else if (options.fontFamily === "textsf") {
-        if (options.fontShape === "textit" &&
-            options.fontWeight === "textbf") {
-            return "sans-serif-bold-italic";
+    if (group.mode === "text") {
+        if (options.fontFamily === "texttt") {
+            return "monospace";
+        } else if (options.fontFamily === "textsf") {
+            if (options.fontShape === "textit" &&
+                options.fontWeight === "textbf") {
+                return "sans-serif-bold-italic";
+            } else if (options.fontShape === "textit") {
+                return "sans-serif-italic";
+            } else if (options.fontWeight === "textbf") {
+                return "bold-sans-serif";
+            } else {
+                return "sans-serif";
+            }
+        } else if (options.fontShape === "textit" &&
+                   options.fontWeight === "textbf") {
+            return "bold-italic";
         } else if (options.fontShape === "textit") {
-            return "sans-serif-italic";
+            return "italic";
         } else if (options.fontWeight === "textbf") {
-            return "bold-sans-serif";
-        } else {
-            return "sans-serif";
+            return "bold";
         }
-    } else if (options.fontShape === "textit" &&
-               options.fontWeight === "textbf") {
-        return "bold-italic";
-    } else if (options.fontShape === "textit") {
-        return "italic";
-    } else if (options.fontWeight === "textbf") {
-        return "bold";
     }
 
     const font = options.font;
@@ -90,25 +108,12 @@ export const getVariant = function(
     }
 
     const mode = group.mode;
-    if (font === "mathit") {
-        return "italic";
-    } else if (font === "boldsymbol") {
-        return group.type === "textord" ? "bold" : "bold-italic";
-    } else if (font === "mathbf") {
-        return "bold";
-    } else if (font === "mathbb") {
-        return "double-struck";
-    } else if (font === "mathsfit") {
-        return "sans-serif-italic";
-    } else if (font === "mathfrak") {
-        return "fraktur";
-    } else if (font === "mathscr" || font === "mathcal") {
-        // MathML makes no distinction between script and calligraphic
-        return "script";
-    } else if (font === "mathsf") {
-        return "sans-serif";
-    } else if (font === "mathtt") {
-        return "monospace";
+    const mathVariant = mathFontVariants[font];
+
+    if (mathVariant) {
+        return typeof mathVariant === "function"
+            ? mathVariant(group)
+            : mathVariant;
     }
 
     let text = group.text;
@@ -257,11 +262,10 @@ export const buildGroup = function(
     }
 
     if (groupBuilders[group.type]) {
-        // Call the groupBuilders function
-        // TODO(ts)
-        const result: MathDomNode = groupBuilders[group.type](group, options);
-        // TODO(ts)
-        return result as MathNode;
+        // TODO(ts): MathMLBuilder returns MathDomNode but all concrete
+        // builders return MathNode. Widening the return type here would
+        // require updating all callers that assume MathNode.
+        return groupBuilders[group.type](group, options) as MathNode;
     } else {
         throw new ParseError(
             "Got group of unknown type: '" + group.type + "'");
@@ -319,7 +323,10 @@ export default function buildMathML(
     // NOTE: The span class is not typed to have <math> nodes as children, and
     // we don't want to make the children type more generic since the children
     // of span are expected to have more fields in `buildHtml` contexts.
+    // The MathNode implements VirtualNode (toNode/toMarkup) which is all that
+    // Span needs from its children for rendering.
+    // TODO(ts): Span's child type is HtmlDomNode, but MathNode only implements
+    // VirtualNode. The double-cast acknowledges this architectural limitation.
     const wrapperClass = forMathmlOnly ? "katex" : "katex-mathml";
-    // TODO(ts)
-    return makeSpan([wrapperClass], [math as any]);
+    return makeSpan([wrapperClass], [math as unknown as HtmlDomNode]);
 }

package/src/defineEnvironment.ts

@@ -62,7 +62,7 @@ export type EnvSpec<NODETYPE extends NodeType> = {
  * `environments.js` exports this same dictionary again and makes it public.
  * `Parser.js` requires this dictionary via `environments.js`.
  */
-export const _environments: Record<string, EnvSpec<any>> = {};
+export const _environments: Record<string, EnvSpec<NodeType>> = {};
 
 type EnvDefSpec<NODETYPE extends NodeType> = {
     // Unique string to differentiate parse nodes.

package/src/defineFunction.ts

@@ -130,7 +130,7 @@ export type FunctionSpec<NODETYPE extends NodeType> = {
     // _functions is typed FunctionSpec<*> (it stores all TeX function specs).
 
     // Must be specified unless it's handled directly in the parser.
-    handler: FunctionHandler<any> | null | undefined;
+    handler: FunctionHandler<NodeType> | null | undefined;
 };
 
 /**
@@ -138,18 +138,25 @@ export type FunctionSpec<NODETYPE extends NodeType> = {
  * `functions.js` just exports this same dictionary again and makes it public.
  * `Parser.js` requires this dictionary.
  */
-export const _functions: Record<string, FunctionSpec<any>> = {};
+export const _functions: Record<string, FunctionSpec<NodeType>> = {};
 
 /**
  * All HTML builders. Should be only used in the `define*` and the `build*ML`
  * functions.
+ *
+ * Builders for different node types are stored side by side, but
+ * `HtmlBuilder<T>` is contravariant in `T`, so there is no single type
+ * argument that makes storing/retrieving them typecheck.  `any` is used
+ * as an existential-quantifier escape hatch.
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const _htmlGroupBuilders: Record<string, HtmlBuilder<any>> = {};
 
 /**
  * All MathML builders. Should be only used in the `define*` and the `build*ML`
- * functions.
+ * functions.  See `_htmlGroupBuilders` above for the rationale behind `any`.
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const _mathmlGroupBuilders: Record<string, MathMLBuilder<any>> = {};
 
 export default function defineFunction<NODETYPE extends NodeType>({

package/src/delimiter.ts

@@ -32,11 +32,11 @@ import {makeEm} from "./units";
 import fontMetricsData from "./fontMetricsData";
 
 import type Options from "./Options";
-import type {CharacterMetrics} from "./fontMetrics";
 import type {HtmlDomNode, DomSpan, SvgSpan} from "./domTree";
-import type {Mode} from "./types";
+import type {DelimiterSize, Mode} from "./types";
 import type {StyleInterface} from "./Style";
 import type {VListElem} from "./buildCommon";
+import type {CharacterMetrics, FontName} from "./types/fonts";
 
 type StackedDelimiterFont = "Size1-Regular" | "Size4-Regular";
 
@@ -125,12 +125,11 @@ const makeSmallDelim = function(
  */
 const mathrmSize = function(
     value: string,
-    size: number,
+    size: DelimiterSize,
     mode: Mode,
     options: Options,
 ): SymbolNode {
-    return makeSymbol(value, "Size" + size + "-Regular",
-        mode, options);
+    return makeSymbol(value, `Size${size}-Regular`, mode, options);
 };
 
 /**
@@ -138,7 +137,7 @@ const mathrmSize = function(
  * Size3, or Size4 fonts. It is always rendered in textstyle.
  */
 const makeLargeDelim = function(delim: string,
-    size: number,
+    size: DelimiterSize,
     center: boolean,
     options: Options,
     mode: Mode,
@@ -507,9 +506,9 @@ export const makeSqrtImage = function(
 
     // Create a span containing an SVG image of a sqrt symbol.
     let span;
-    let spanHeight = 0;
-    let texHeight = 0;
-    let viewBoxHeight = 0;
+    let spanHeight;
+    let texHeight;
+    let viewBoxHeight;
     let advanceWidth;
 
     // We create viewBoxes with 80 units of "padding" above each surd.
@@ -608,7 +607,7 @@ export const sizeToMaxHeight = [0, 1.2, 1.8, 2.4, 3.0];
  */
 export const makeSizedDelim = function(
     delim: string,
-    size: number,
+    size: DelimiterSize,
     options: Options,
     mode: Mode,
     classes: string[],
@@ -621,12 +620,17 @@ export const makeSizedDelim = function(
     }
 
     // Sized delimiters are never centered.
-    if (stackLargeDelimiters.has(delim) ||
-        stackNeverDelimiters.has(delim)) {
+    if (stackLargeDelimiters.has(delim) || stackNeverDelimiters.has(delim)) {
         return makeLargeDelim(delim, size, false, options, mode, classes);
     } else if (stackAlwaysDelimiters.has(delim)) {
         return makeStackedDelim(
-            delim, sizeToMaxHeight[size], false, options, mode, classes);
+            delim,
+            sizeToMaxHeight[size],
+            false,
+            options,
+            mode,
+            classes,
+        );
     } else {
         throw new ParseError("Illegal delimiter: '" + delim + "'");
     }

package/src/domTree.ts

@@ -28,6 +28,21 @@ export const createClass = function(classes: string[]): string {
     return classes.filter(cls => cls).join(" ");
 };
 
+/**
+ * Serialize a CssStyle object into a semicolon-delimited inline-style string
+ * (hyphenating camelCase property names). Returns "" when no property is set.
+ */
+const cssStyleToString = function(style: CssStyle): string {
+    let styles = "";
+    for (const key of Object.keys(style) as Array<keyof CssStyle>) {
+        const value = style[key];
+        if (value !== undefined) {
+            styles += `${hyphenate(key)}:${value};`;
+        }
+    }
+    return styles;
+};
+
 type InitNodeData = {
     classes: string[];
     attributes: Record<string, string>;
@@ -74,9 +89,7 @@ const toNode = function(this: HtmlNodeData, tagName: string): HTMLElement {
     node.className = createClass(this.classes);
 
     // Apply inline styles
-    for (const key of Object.keys(this.style) as Array<keyof CssStyle>) {
-        (node.style as any)[key] = this.style[key];
-    }
+    Object.assign(node.style, this.style);
 
     // Apply attributes
     for (const attr of Object.keys(this.attributes)) {
@@ -112,13 +125,7 @@ const toMarkup = function(this: HtmlNodeData, tagName: string): string {
         markup += ` class="${escape(createClass(this.classes))}"`;
     }
 
-    let styles = "";
-
-    // Add the styles, after hyphenation
-    for (const key of Object.keys(this.style) as Array<keyof CssStyle>) {
-        styles += `${hyphenate(key)}:${this.style[key]};`;
-    }
-
+    const styles = cssStyleToString(this.style);
     if (styles) {
         markup += ` style="${escape(styles)}"`;
     }
@@ -211,6 +218,12 @@ export class Span<ChildType extends VirtualNode> implements HtmlDomNode {
     width: number | null | undefined;
     maxFontSize!: number;
     style!: CssStyle;
+    /**
+     * Italic correction carried over from a SymbolNode when the symbol is
+     * wrapped in a vlist (e.g. \oiint / \oiiint).  Read by supsub to adjust
+     * subscript positioning.  Only set when nonzero; use `?? 0` at read sites.
+     */
+    italic?: number;
 
     constructor(
         classes?: string[],
@@ -322,9 +335,7 @@ export class Img implements VirtualNode {
         node.className = "mord";
 
         // Apply inline styles
-        for (const key of Object.keys(this.style) as Array<keyof CssStyle>) {
-            (node.style as any)[key] = this.style[key];
-        }
+        Object.assign(node.style, this.style);
 
         return node;
     }
@@ -333,11 +344,7 @@ export class Img implements VirtualNode {
         let markup = `<img src="${escape(this.src)}"` +
           ` alt="${escape(this.alt)}"`;
 
-        // Add the styles, after hyphenation
-        let styles = "";
-        for (const key of Object.keys(this.style) as Array<keyof CssStyle>) {
-            styles += `${hyphenate(key)}:${this.style[key]};`;
-        }
+        const styles = cssStyleToString(this.style);
         if (styles) {
             markup += ` style="${escape(styles)}"`;
         }
@@ -430,9 +437,9 @@ export class SymbolNode implements HtmlDomNode {
             span.className = createClass(this.classes);
         }
 
-        for (const key of Object.keys(this.style) as Array<keyof CssStyle>) {
+        if (Object.keys(this.style).length > 0) {
             span = span || document.createElement("span");
-            (span.style as any)[key] = this.style[key];
+            Object.assign(span.style, this.style);
         }
 
         if (span) {
@@ -465,9 +472,7 @@ export class SymbolNode implements HtmlDomNode {
         if (this.italic > 0) {
             styles += `margin-right:${makeEm(this.italic)};`;
         }
-        for (const key of Object.keys(this.style) as Array<keyof CssStyle>) {
-            styles += hyphenate(key) + ":" + this.style[key] + ";";
-        }
+        styles += cssStyleToString(this.style);
 
         if (styles) {
             needsSpan = true;

package/src/environments/array.ts

@@ -168,7 +168,7 @@ function parseArray(
     // Test for \hline at the top of the array.
     hLinesBeforeRow.push(getHLines(parser));
 
-    while (true) {  // eslint-disable-line no-constant-condition
+    while (true) {
         // Parse each cell in its own group (namespace)
         const cellBody = parser.parseExpression(false, singleRow ? "\\end" : "\\\\");
         parser.gullet.endGroup();
@@ -183,6 +183,7 @@ function parseArray(
                 type: "styling",
                 mode: parser.mode,
                 style,
+                resetFont: true,
                 body: [cell],
             };
         }
@@ -275,7 +276,7 @@ function dCellStyle(envName: string): StyleStr {
 }
 
 type Outrow = {
-    [idx: number]: any;
+    cells: HtmlDomNode[];
     height: number;
     depth: number;
     pos: number;
@@ -287,7 +288,7 @@ const htmlBuilder: HtmlBuilder<"array"> = function(group, options) {
     const nr = group.body.length;
     const hLinesBeforeRow = group.hLinesBeforeRow;
     let nc = 0;
-    const body = new Array(nr);
+    const body: Outrow[] = new Array(nr);
     const hlines: Array<{pos: number; isDashed: boolean}> = [];
     const ruleThickness = Math.max(
         // From LaTeX \showthe\arrayrulewidth. Equals 0.04 em.
@@ -341,7 +342,12 @@ const htmlBuilder: HtmlBuilder<"array"> = function(group, options) {
             nc = inrow.length;
         }
 
-        const outrow: Outrow = (new Array(inrow.length) as any);
+        const outrow: Outrow = {
+            cells: new Array<HtmlDomNode>(inrow.length),
+            height: 0,
+            depth: 0,
+            pos: 0,
+        };
         for (c = 0; c < inrow.length; ++c) {
             const elt = html.buildGroup(inrow[c], options);
             if (depth < elt.depth) {
@@ -350,7 +356,7 @@ const htmlBuilder: HtmlBuilder<"array"> = function(group, options) {
             if (height < elt.height) {
                 height = elt.height;
             }
-            outrow[c] = elt;
+            outrow.cells[c] = elt;
         }
 
         const rowGap = group.rowGaps[r];
@@ -480,7 +486,7 @@ const htmlBuilder: HtmlBuilder<"array"> = function(group, options) {
         }> = [];
         for (r = 0; r < nr; ++r) {
             const row = body[r];
-            const elem = row[c];
+            const elem = row.cells[c];
             if (!elem) {
                 continue;
             }