katex 0.10.0-rc → 0.10.2

package/src/buildHTML.js

@@ -10,7 +10,7 @@ import ParseError from "./ParseError";
 import Style from "./Style";
 import buildCommon from "./buildCommon";
 import {Anchor} from "./domTree";
-import utils, {assert} from "./utils";
+import utils from "./utils";
 import {checkNodeType} from "./parseNode";
 import {spacings, tightSpacings} from "./spacingData";
 import {_htmlGroupBuilders as groupBuilders} from "./defineFunction";
@@ -25,32 +25,8 @@ const makeSpan = buildCommon.makeSpan;
 // Binary atoms (first class `mbin`) change into ordinary atoms (`mord`)
 // depending on their surroundings. See TeXbook pg. 442-446, Rules 5 and 6,
 // and the text before Rule 19.
-const isBinLeftCanceller = function(
-    node: ?HtmlDomNode,
-    isRealGroup: boolean,
-): boolean {
-    // TODO: This code assumes that a node's math class is the first element
-    // of its `classes` array. A later cleanup should ensure this, for
-    // instance by changing the signature of `makeSpan`.
-    if (node) {
-        return utils.contains(["mbin", "mopen", "mrel", "mop", "mpunct"],
-                              getTypeOfDomTree(node, "right"));
-    } else {
-        return isRealGroup;
-    }
-};
-
-const isBinRightCanceller = function(
-    node: ?HtmlDomNode,
-    isRealGroup: boolean,
-): boolean {
-    if (node) {
-        return utils.contains(["mrel", "mclose", "mpunct"],
-                              getTypeOfDomTree(node, "left"));
-    } else {
-        return isRealGroup;
-    }
-};
+const binLeftCanceller = ["leftmost", "mbin", "mopen", "mrel", "mop", "mpunct"];
+const binRightCanceller = ["rightmost", "mrel", "mclose", "mpunct"];
 
 const styleMap = {
     "display": Style.DISPLAY,
@@ -71,7 +47,7 @@ const DomEnum = {
     mpunct: "mpunct",
     minner: "minner",
 };
-export type DomType = $Keys<typeof DomEnum>;
+type DomType = $Keys<typeof DomEnum>;
 
 /**
  * Take a list of nodes, build them in order, and return a list of the built
@@ -88,101 +64,135 @@ export const buildExpression = function(
     surrounding: [?DomType, ?DomType] = [null, null],
 ): HtmlDomNode[] {
     // Parse expressions into `groups`.
-    const rawGroups: HtmlDomNode[] = [];
+    const groups: HtmlDomNode[] = [];
     for (let i = 0; i < expression.length; i++) {
         const output = buildGroup(expression[i], options);
         if (output instanceof DocumentFragment) {
             const children: HtmlDomNode[] = output.children;
-            rawGroups.push(...children);
+            groups.push(...children);
         } else {
-            rawGroups.push(output);
+            groups.push(output);
+        }
+    }
+
+    // If `expression` is a partial group, let the parent handle spacings
+    // to avoid processing groups multiple times.
+    if (!isRealGroup) {
+        return groups;
+    }
+
+    let glueOptions = options;
+    if (expression.length === 1) {
+        const node = checkNodeType(expression[0], "sizing") ||
+            checkNodeType(expression[0], "styling");
+        if (!node) {
+            // No match.
+        } else if (node.type === "sizing") {
+            glueOptions = options.havingSize(node.size);
+        } else if (node.type === "styling") {
+            glueOptions = options.havingStyle(styleMap[node.style]);
         }
     }
-    // At this point `rawGroups` consists entirely of `symbolNode`s and `span`s.
 
-    // Ignore explicit spaces (e.g., \;, \,) when determining what implicit
-    // spacing should go between atoms of different classes, and add dummy
-    // spans for determining spacings between surrounding atoms.
-    const nonSpaces: (?HtmlDomNode)[] = [
-        surrounding[0] ? makeSpan([surrounding[0]], [], options) : null,
-        ...rawGroups.filter(group => group && group.classes[0] !== "mspace"),
-        surrounding[1] ? makeSpan([surrounding[1]], [], options) : null,
-    ];
+    // Dummy spans for determining spacings between surrounding atoms.
+    // If `expression` has no atoms on the left or right, class "leftmost"
+    // or "rightmost", respectively, is used to indicate it.
+    const dummyPrev = makeSpan([surrounding[0] || "leftmost"], [], options);
+    const dummyNext = makeSpan([surrounding[1] || "rightmost"], [], options);
+
+    // TODO: These code assumes that a node's math class is the first element
+    // of its `classes` array. A later cleanup should ensure this, for
+    // instance by changing the signature of `makeSpan`.
 
     // Before determining what spaces to insert, perform bin cancellation.
     // Binary operators change to ordinary symbols in some contexts.
-    for (let i = 1; i < nonSpaces.length - 1; i++) {
-        const nonSpacesI: HtmlDomNode = assert(nonSpaces[i]);
-        const left = getOutermostNode(nonSpacesI, "left");
-        if (left.classes[0] === "mbin" &&
-                isBinLeftCanceller(nonSpaces[i - 1], isRealGroup)) {
-            left.classes[0] = "mord";
+    traverseNonSpaceNodes(groups, (node, prev) => {
+        const prevType = prev.classes[0];
+        const type = node.classes[0];
+        if (prevType === "mbin" && utils.contains(binRightCanceller, type)) {
+            prev.classes[0] = "mord";
+        } else if (type === "mbin" && utils.contains(binLeftCanceller, prevType)) {
+            node.classes[0] = "mord";
         }
-
-        const right = getOutermostNode(nonSpacesI, "right");
-        if (right.classes[0] === "mbin" &&
-                isBinRightCanceller(nonSpaces[i + 1], isRealGroup)) {
-            right.classes[0] = "mord";
+    }, {node: dummyPrev}, dummyNext);
+
+    traverseNonSpaceNodes(groups, (node, prev) => {
+        const prevType = getTypeOfDomTree(prev);
+        const type = getTypeOfDomTree(node);
+
+        // 'mtight' indicates that the node is script or scriptscript style.
+        const space = prevType && type ? (node.hasClass("mtight")
+            ? tightSpacings[prevType][type]
+            : spacings[prevType][type]) : null;
+        if (space) { // Insert glue (spacing) after the `prev`.
+            return buildCommon.makeGlue(space, glueOptions);
         }
+    }, {node: dummyPrev}, dummyNext);
+
+    return groups;
+};
+
+// Depth-first traverse non-space `nodes`, calling `callback` with the current and
+// previous node as arguments, optionally returning a node to insert after the
+// previous node. `prev` is an object with the previous node and `insertAfter`
+// function to insert after it. `next` is a node that will be added to the right.
+// Used for bin cancellation and inserting spacings.
+const traverseNonSpaceNodes = function(
+    nodes: HtmlDomNode[],
+    callback: (HtmlDomNode, HtmlDomNode) => ?HtmlDomNode,
+    prev: {|
+        node: HtmlDomNode,
+        insertAfter?: HtmlDomNode => void,
+    |},
+    next: ?HtmlDomNode,
+) {
+    if (next) { // temporarily append the right node, if exists
+        nodes.push(next);
     }
+    let i = 0;
+    for (; i < nodes.length; i++) {
+        const node = nodes[i];
+        const partialGroup = checkPartialGroup(node);
+        if (partialGroup) { // Recursive DFS
+            traverseNonSpaceNodes(partialGroup.children, callback, prev);
+            continue;
+        }
 
-    const groups = [];
-    let j = 0;
-    for (let i = 0; i < rawGroups.length; i++) {
-        groups.push(rawGroups[i]);
-
-        // For any group that is not a space, get the next non-space.  Then
-        // lookup what implicit space should be placed between those atoms and
-        // add it to groups.
-        if (rawGroups[i].classes[0] !== "mspace" && j < nonSpaces.length - 1) {
-            // if current non-space node is left dummy span, add a glue before
-            // first real non-space node
-            if (j === 0) {
-                groups.pop();
-                i--;
-            }
+        // Ignore explicit spaces (e.g., \;, \,) when determining what implicit
+        // spacing should go between atoms of different classes
+        if (node.classes[0] === "mspace") {
+            continue;
+        }
 
-            // Get the type of the current non-space node.  If it's a document
-            // fragment, get the type of the rightmost node in the fragment.
-            const left = getTypeOfDomTree(nonSpaces[j], "right");
-
-            // Get the type of the next non-space node.  If it's a document
-            // fragment, get the type of the leftmost node in the fragment.
-            const right = getTypeOfDomTree(nonSpaces[j + 1], "left");
-
-            // We use buildExpression inside of sizingGroup, but it returns a
-            // document fragment of elements.  sizingGroup sets `isRealGroup`
-            // to false to avoid processing spans multiple times.
-            if (left && right && isRealGroup) {
-                const nonSpacesJp1: HtmlDomNode = assert(nonSpaces[j + 1]);
-                const space = isLeftTight(nonSpacesJp1)
-                    ? tightSpacings[left][right]
-                    : spacings[left][right];
-
-                if (space) {
-                    let glueOptions = options;
-
-                    if (expression.length === 1) {
-                        const node =
-                            checkNodeType(expression[0], "sizing") ||
-                            checkNodeType(expression[0], "styling");
-                        if (!node) {
-                            // No match.
-                        } else if (node.type === "sizing") {
-                            glueOptions = options.havingSize(node.size);
-                        } else if (node.type === "styling") {
-                            glueOptions = options.havingStyle(styleMap[node.style]);
-                        }
-                    }
-
-                    groups.push(buildCommon.makeGlue(space, glueOptions));
-                }
+        const result = callback(node, prev.node);
+        if (result) {
+            if (prev.insertAfter) {
+                prev.insertAfter(result);
+            } else { // insert at front
+                nodes.unshift(result);
+                i++;
             }
-            j++;
         }
+
+        prev.node = node;
+        prev.insertAfter = (index => n => {
+            nodes.splice(index + 1, 0, n);
+            i++;
+        })(i);
     }
+    if (next) {
+        nodes.pop();
+    }
+};
 
-    return groups;
+// Check if given node is a partial group, i.e., does not affect spacing around.
+const checkPartialGroup = function(
+    node: HtmlDomNode,
+): ?(DocumentFragment<HtmlDomNode> | Anchor) {
+    if (node instanceof DocumentFragment || node instanceof Anchor) {
+        return node;
+    }
+    return null;
 };
 
 // Return the outermost node of a domTree.
@@ -190,14 +200,14 @@ const getOutermostNode = function(
     node: HtmlDomNode,
     side: Side,
 ): HtmlDomNode {
-    if (node instanceof DocumentFragment ||
-            node instanceof Anchor) {
-        const children = node.children;
+    const partialGroup = checkPartialGroup(node);
+    if (partialGroup) {
+        const children = partialGroup.children;
         if (children.length) {
             if (side === "right") {
                 return getOutermostNode(children[children.length - 1], "right");
             } else if (side === "left") {
-                return getOutermostNode(children[0], "right");
+                return getOutermostNode(children[0], "left");
             }
         }
     }
@@ -205,29 +215,22 @@ const getOutermostNode = function(
 };
 
 // Return math atom class (mclass) of a domTree.
+// If `side` is given, it will get the type of the outermost node at given side.
 export const getTypeOfDomTree = function(
     node: ?HtmlDomNode,
-    side: Side,
+    side: ?Side,
 ): ?DomType {
     if (!node) {
         return null;
     }
-
-    node = getOutermostNode(node, side);
+    if (side) {
+        node = getOutermostNode(node, side);
+    }
     // This makes a lot of assumptions as to where the type of atom
     // appears.  We should do a better job of enforcing this.
     return DomEnum[node.classes[0]] || null;
 };
 
-// If `node` is an atom return whether it's been assigned the mtight class.
-// If `node` is a document fragment, return the value of isLeftTight() for the
-// leftmost node in the fragment.
-// 'mtight' indicates that the node is script or scriptscript style.
-export const isLeftTight = function(node: HtmlDomNode): boolean {
-    node = getOutermostNode(node, "left");
-    return node.hasClass("mtight");
-};
-
 export const makeNullDelimiter = function(
     options: Options,
     classes: string[],
@@ -331,10 +334,11 @@ export default function buildHTML(tree: AnyParseNode[], options: Options): DomSp
             expression[i].hasClass("mrel") ||
             expression[i].hasClass("allowbreak")) {
             // Put any post-operator glue on same line as operator.
-            // Watch for \nobreak along the way.
+            // Watch for \nobreak along the way, and stop at \newline.
             let nobreak = false;
             while (i < expression.length - 1 &&
-                   expression[i + 1].hasClass("mspace")) {
+                   expression[i + 1].hasClass("mspace") &&
+                   !expression[i + 1].hasClass("newline")) {
                 i++;
                 parts.push(expression[i]);
                 if (expression[i].hasClass("nobreak")) {

package/src/buildMathML.js

@@ -85,7 +85,7 @@ export const getVariant = function(
     }
 
     const font = options.font;
-    if (!font) {
+    if (!font || font === "mathnormal") {
         return null;
     }
 
@@ -145,14 +145,24 @@ export const buildExpression = function(
                     lastGroup.children.push(...group.children);
                     continue;
                 }
+            } else if (lastGroup.type === 'mi' && lastGroup.children.length === 1) {
+                const lastChild = lastGroup.children[0];
+                if (lastChild instanceof TextNode && lastChild.text === '\u0338' &&
+                    (group.type === 'mo' || group.type === 'mi' ||
+                        group.type === 'mn')) {
+                    const child = group.children[0];
+                    if (child instanceof TextNode && child.text.length > 0) {
+                        // Overlay with combining character long solidus
+                        child.text = child.text.slice(0, 1) + "\u0338" +
+                            child.text.slice(1);
+                        groups.pop();
+                    }
+                }
             }
         }
         groups.push(group);
         lastGroup = group;
     }
-
-    // TODO(kevinb): combine \\not with mrels and mords
-
     return groups;
 };
 

package/src/buildTree.js

@@ -16,6 +16,20 @@ const optionsFromSettings = function(settings: Settings) {
     });
 };
 
+const displayWrap = function(node: DomSpan, settings: Settings): DomSpan {
+    if (settings.displayMode) {
+        const classes = ["katex-display"];
+        if (settings.leqno) {
+            classes.push("leqno");
+        }
+        if (settings.fleqn) {
+            classes.push("fleqn");
+        }
+        node = buildCommon.makeSpan(classes, [node]);
+    }
+    return node;
+};
+
 export const buildTree = function(
     tree: AnyParseNode[],
     expression: string,
@@ -29,11 +43,7 @@ export const buildTree = function(
         mathMLNode, htmlNode,
     ]);
 
-    if (settings.displayMode) {
-        return buildCommon.makeSpan(["katex-display"], [katexNode]);
-    } else {
-        return katexNode;
-    }
+    return displayWrap(katexNode, settings);
 };
 
 export const buildHTMLTree = function(
@@ -44,11 +54,7 @@ export const buildHTMLTree = function(
     const options = optionsFromSettings(settings);
     const htmlNode = buildHTML(tree, options);
     const katexNode = buildCommon.makeSpan(["katex"], [htmlNode]);
-    if (settings.displayMode) {
-        return buildCommon.makeSpan(["katex-display"], [katexNode]);
-    } else {
-        return katexNode;
-    }
+    return displayWrap(katexNode, settings);
 };
 
 export default buildTree;

package/src/delimiter.js

@@ -245,12 +245,12 @@ const makeStackedDelim = function(
         top = "\u23a4";
         repeat = bottom = "\u23a5";
         font = "Size4-Regular";
-    } else if (delim === "(") {
+    } else if (delim === "(" || delim === "\\lparen") {
         top = "\u239b";
         repeat = "\u239c";
         bottom = "\u239d";
         font = "Size4-Regular";
-    } else if (delim === ")") {
+    } else if (delim === ")" || delim === "\\rparen") {
         top = "\u239e";
         repeat = "\u239f";
         bottom = "\u23a0";
@@ -489,7 +489,8 @@ const makeSqrtImage = function(
 // There are three kinds of delimiters, delimiters that stack when they become
 // too large
 const stackLargeDelimiters = [
-    "(", ")", "[", "\\lbrack", "]", "\\rbrack",
+    "(", "\\lparen", ")", "\\rparen",
+    "[", "\\lbrack", "]", "\\rbrack",
     "\\{", "\\lbrace", "\\}", "\\rbrace",
     "\\lfloor", "\\rfloor", "\u230a", "\u230b",
     "\\lceil", "\\rceil", "\u2308", "\u2309",

package/src/domTree.js

@@ -24,7 +24,7 @@ import type {VirtualNode} from "./tree";
  * Create an HTML className based on a list of classes. In addition to joining
  * with spaces, we also remove empty classes.
  */
-const createClass = function(classes: string[]): string {
+export const createClass = function(classes: string[]): string {
     return classes.filter(cls => cls).join(" ");
 };
 
@@ -125,7 +125,33 @@ const toMarkup = function(tagName: string): string {
     return markup;
 };
 
-export type CssStyle = {[name: string]: string};
+// Making the type below exact with all optional fields doesn't work due to
+// - https://github.com/facebook/flow/issues/4582
+// - https://github.com/facebook/flow/issues/5688
+// However, since *all* fields are optional, $Shape<> works as suggested in 5688
+// above.
+// This type does not include all CSS properties. Additional properties should
+// be added as needed.
+export type CssStyle = $Shape<{
+    backgroundColor: string,
+    borderBottomWidth: string,
+    borderColor: string,
+    borderRightWidth: string,
+    borderTopWidth: string,
+    bottom: string,
+    color: string,
+    height: string,
+    left: string,
+    marginLeft: string,
+    marginRight: string,
+    marginTop: string,
+    minWidth: string,
+    paddingLeft: string,
+    position: string,
+    top: string,
+    width: string,
+    verticalAlign: string,
+}> & {};
 
 export interface HtmlDomNode extends VirtualNode {
     classes: string[];
@@ -135,7 +161,6 @@ export interface HtmlDomNode extends VirtualNode {
     style: CssStyle;
 
     hasClass(className: string): boolean;
-    tryCombine(sibling: HtmlDomNode): boolean;
 }
 
 // Span wrapping other DOM nodes.
@@ -189,15 +214,6 @@ export class Span<ChildType: VirtualNode> implements HtmlDomNode {
         return utils.contains(this.classes, className);
     }
 
-    /**
-     * Try to combine with given sibling.  Returns true if the sibling has
-     * been successfully merged into this node, and false otherwise.
-     * Default behavior fails (returns false).
-     */
-    tryCombine(sibling: HtmlDomNode): boolean {
-        return false;
-    }
-
     toNode(): HTMLElement {
         return toNode.call(this, "span");
     }
@@ -239,10 +255,6 @@ export class Anchor implements HtmlDomNode {
         return utils.contains(this.classes, className);
     }
 
-    tryCombine(sibling: HtmlDomNode): boolean {
-        return false;
-    }
-
     toNode(): HTMLElement {
         return toNode.call(this, "a");
     }
@@ -252,6 +264,69 @@ export class Anchor implements HtmlDomNode {
     }
 }
 
+/**
+ * This node represents an image embed (<img>) element.
+ */
+export class Img implements VirtualNode {
+    src: string;
+    alt: string;
+    classes: string[];
+    height: number;
+    depth: number;
+    maxFontSize: number;
+    style: CssStyle;
+
+    constructor(
+        src: string,
+        alt: string,
+        style: CssStyle,
+    ) {
+        this.alt = alt;
+        this.src = src;
+        this.classes = ["mord"];
+        this.style = style;
+    }
+
+    hasClass(className: string): boolean {
+        return utils.contains(this.classes, className);
+    }
+
+    toNode(): Node {
+        const node = document.createElement("img");
+        node.src = this.src;
+        node.alt = this.alt;
+        node.className = "mord";
+
+        // Apply inline styles
+        for (const style in this.style) {
+            if (this.style.hasOwnProperty(style)) {
+                // $FlowFixMe
+                node.style[style] = this.style[style];
+            }
+        }
+
+        return node;
+    }
+
+    toMarkup(): string {
+        let markup = `<img  src='${this.src} 'alt='${this.alt}' `;
+
+        // Add the styles, after hyphenation
+        let styles = "";
+        for (const style in this.style) {
+            if (this.style.hasOwnProperty(style)) {
+                styles += `${utils.hyphenate(style)}:${this.style[style]};`;
+            }
+        }
+        if (styles) {
+            markup += ` style="${utils.escape(styles)}"`;
+        }
+
+        markup += "'/>";
+        return markup;
+    }
+}
+
 const iCombinations = {
     'î': '\u0131\u0302',
     'ï': '\u0131\u0308',
@@ -317,34 +392,6 @@ export class SymbolNode implements HtmlDomNode {
         return utils.contains(this.classes, className);
     }
 
-    tryCombine(sibling: HtmlDomNode): boolean {
-        if (!sibling
-            || !(sibling instanceof SymbolNode)
-            || this.italic > 0
-            || createClass(this.classes) !== createClass(sibling.classes)
-            || this.skew !== sibling.skew
-            || this.maxFontSize !== sibling.maxFontSize) {
-            return false;
-        }
-        for (const style in this.style) {
-            if (this.style.hasOwnProperty(style)
-                && this.style[style] !== sibling.style[style]) {
-                return false;
-            }
-        }
-        for (const style in sibling.style) {
-            if (sibling.style.hasOwnProperty(style)
-                && this.style[style] !== sibling.style[style]) {
-                return false;
-            }
-        }
-        this.text += sibling.text;
-        this.height = Math.max(this.height, sibling.height);
-        this.depth = Math.max(this.depth, sibling.depth);
-        this.italic = sibling.italic;
-        return true;
-    }
-
     /**
      * Creates a text node or span from a symbol node. Note that a span is only
      * created if it is needed.