katex 0.10.0-rc → 0.10.2

package/src/functions/includegraphics.js

@@ -0,0 +1,146 @@
+// @flow
+import defineFunction from "../defineFunction";
+import type {Measurement} from "../units";
+import {calculateSize, validUnit} from "../units";
+import ParseError from "../ParseError";
+import {Img} from "../domTree";
+import mathMLTree from "../mathMLTree";
+import {assertNodeType} from "../parseNode";
+import type {CssStyle} from "../domTree";
+
+const sizeData = function(str: string): Measurement {
+    if (/^[-+]? *(\d+(\.\d*)?|\.\d+)$/.test(str)) {
+        // str is a number with no unit specified.
+        // default unit is bp, per graphix package.
+        return {number: +str, unit: "bp"};
+    } else {
+        const match = (/([-+]?) *(\d+(?:\.\d*)?|\.\d+) *([a-z]{2})/).exec(str);
+        if (!match) {
+            throw new ParseError("Invalid size: '" + str
+                + "' in \\includegraphics");
+        }
+        const data = {
+            number: +(match[1] + match[2]), // sign + magnitude, cast to number
+            unit: match[3],
+        };
+        if (!validUnit(data)) {
+            throw new ParseError("Invalid unit: '" + data.unit
+             + "' in \\includegraphics.");
+        }
+        return data;
+    }
+};
+
+defineFunction({
+    type: "includegraphics",
+    names: ["\\includegraphics"],
+    props: {
+        numArgs: 1,
+        numOptionalArgs: 1,
+        argTypes: ["raw", "url"],
+        allowedInText: false,
+    },
+    handler: ({parser}, args, optArgs) => {
+        let width = {number: 0, unit: "em"};
+        let height = {number: 0.9, unit: "em"};    // sorta character sized.
+        let totalheight = {number: 0, unit: "em"};
+        let alt = "";
+
+        if (optArgs[0]) {
+            const attributeStr = assertNodeType(optArgs[0], "raw").string;
+
+            // Parser.js does not parse key/value pairs. We get a string.
+            const attributes = attributeStr.split(",");
+            for (let i = 0; i < attributes.length; i++) {
+                const keyVal = attributes[i].split("=");
+                if (keyVal.length === 2) {
+                    const str = keyVal[1].trim();
+                    switch (keyVal[0].trim()) {
+                        case "alt":
+                            alt = str;
+                            break;
+                        case "width":
+                            width = sizeData(str);
+                            break;
+                        case "height":
+                            height = sizeData(str);
+                            break;
+                        case "totalheight":
+                            totalheight = sizeData(str);
+                            break;
+                        default:
+                            throw new ParseError("Invalid key: '" + keyVal[0] +
+                                "' in \\includegraphics.");
+                    }
+                }
+            }
+        }
+
+        const src = assertNodeType(args[0], "url").url;
+
+        if (alt === "") {
+            // No alt given. Use the file name. Strip away the path.
+            alt = src;
+            alt = alt.replace(/^.*[\\/]/, '');
+            alt = alt.substring(0, alt.lastIndexOf('.'));
+        }
+
+        return {
+            type: "includegraphics",
+            mode: parser.mode,
+            alt: alt,
+            width: width,
+            height: height,
+            totalheight: totalheight,
+            src: src,
+        };
+    },
+    htmlBuilder: (group, options) => {
+        const height = calculateSize(group.height, options);
+        let depth = 0;
+
+        if (group.totalheight.number > 0) {
+            depth = calculateSize(group.totalheight, options) - height;
+            depth = Number(depth.toFixed(2));
+        }
+
+        let width = 0;
+        if (group.width.number > 0) {
+            width = calculateSize(group.width, options);
+        }
+
+        const style: CssStyle = {height: height + depth + "em"};
+        if (width > 0) {
+            style.width = width + "em";
+        }
+        if (depth > 0) {
+            style.verticalAlign = -depth + "em";
+        }
+
+        const node = new Img(group.src, group.alt, style);
+        node.height = height;
+        node.depth = depth;
+
+        return node;
+    },
+    mathmlBuilder: (group, options) => {
+        const node = new mathMLTree.MathNode("mglyph", []);
+        node.setAttribute("alt", group.alt);
+
+        const height = calculateSize(group.height, options);
+        let depth = 0;
+        if (group.totalheight.number > 0) {
+            depth = calculateSize(group.totalheight, options) - height;
+            depth = depth.toFixed(2);
+            node.setAttribute("valign", "-" + depth + "em");
+        }
+        node.setAttribute("height", height + depth + "em");
+
+        if (group.width.number > 0) {
+            const width = calculateSize(group.width, options);
+            node.setAttribute("width", width + "em");
+        }
+        node.setAttribute("src", group.src);
+        return node;
+    },
+});

package/src/functions/mclass.js

@@ -99,6 +99,7 @@ defineFunction({
             mode: baseArg.mode,
             limits: true,
             alwaysHandleSupSub: true,
+            parentIsSupSub: false,
             symbol: false,
             suppressBaseShift: funcName !== "\\stackrel",
             body: ordargument(baseArg),

package/src/functions/op.js

@@ -14,6 +14,11 @@ import * as mml from "../buildMathML";
 import type {HtmlBuilderSupSub, MathMLBuilder} from "../defineFunction";
 import type {ParseNode} from "../parseNode";
 
+// Most operators have a large successor symbol, but these don't.
+const noSuccessor = [
+    "\\smallint",
+];
+
 // NOTE: Unlike most `htmlBuilder`s, this one handles not only "op", but also
 // "supsub" since some of them (like \int) can affect super/subscripting.
 export const htmlBuilder: HtmlBuilderSupSub<"op"> = (grp, options) => {
@@ -37,11 +42,6 @@ export const htmlBuilder: HtmlBuilderSupSub<"op"> = (grp, options) => {
 
     const style = options.style;
 
-    // Most operators have a large successor symbol, but these don't.
-    const noSuccessor = [
-        "\\smallint",
-    ];
-
     let large = false;
     if (style.size === Style.DISPLAY.size &&
         group.symbol &&
@@ -95,7 +95,8 @@ export const htmlBuilder: HtmlBuilderSupSub<"op"> = (grp, options) => {
             base = inner[0];
             base.classes[0] = "mop"; // replace old mclass
         } else {
-            base = buildCommon.makeSpan(["mop"], inner, options);
+            base = buildCommon.makeSpan(
+                ["mop"], buildCommon.tryCombineChars(inner), options);
         }
     } else {
         // Otherwise, this is a text operator. Build the text from the
@@ -236,12 +237,13 @@ export const htmlBuilder: HtmlBuilderSupSub<"op"> = (grp, options) => {
 const mathmlBuilder: MathMLBuilder<"op"> = (group, options) => {
     let node;
 
-    // TODO(emily): handle big operators using the `largeop` attribute
-
     if (group.symbol) {
         // This is a symbol. Just add the symbol.
         node = new mathMLTree.MathNode(
             "mo", [mml.makeText(group.name, group.mode)]);
+        if (utils.contains(noSuccessor, group.name)) {
+            node.setAttribute("largeop", "false");
+        }
     } else if (group.body) {
         // This is an operator with children. Add them.
         node = new mathMLTree.MathNode(
@@ -253,13 +255,15 @@ const mathmlBuilder: MathMLBuilder<"op"> = (group, options) => {
         // operators, like \limsup.
         node = new mathMLTree.MathNode(
             "mi", [new mathMLTree.TextNode(group.name.slice(1))]);
-
         // Append an <mo>&ApplyFunction;</mo>.
         // ref: https://www.w3.org/TR/REC-MathML/chap3_2.html#sec3.2.4
         const operator = new mathMLTree.MathNode("mo",
             [mml.makeText("\u2061", "text")]);
-
-        return mathMLTree.newDocumentFragment([node, operator]);
+        if (group.parentIsSupSub) {
+            node = new mathMLTree.MathNode("mo", [node, operator]);
+        } else {
+            node = mathMLTree.newDocumentFragment([node, operator]);
+        }
     }
 
     return node;
@@ -272,7 +276,7 @@ const singleCharBigOps: {[string]: string} = {
     "\u22c0": "\\bigwedge",
     "\u22c1": "\\bigvee",
     "\u22c2": "\\bigcap",
-    "\u22c3": "\\bigcap",
+    "\u22c3": "\\bigcup",
     "\u2a00": "\\bigodot",
     "\u2a01": "\\bigoplus",
     "\u2a02": "\\bigotimes",
@@ -301,6 +305,7 @@ defineFunction({
             type: "op",
             mode: parser.mode,
             limits: true,
+            parentIsSupSub: false,
             symbol: true,
             name: fName,
         };
@@ -323,6 +328,7 @@ defineFunction({
             type: "op",
             mode: parser.mode,
             limits: false,
+            parentIsSupSub: false,
             symbol: false,
             body: ordargument(body),
         };
@@ -344,26 +350,6 @@ const singleCharIntegrals: {[string]: string} = {
     "\u2230": "\\oiiint",
 };
 
-defineFunction({
-    type: "op",
-    names: ["\\mathop"],
-    props: {
-        numArgs: 1,
-    },
-    handler: ({parser}, args) => {
-        const body = args[0];
-        return {
-            type: "op",
-            mode: parser.mode,
-            limits: false,
-            symbol: false,
-            body: ordargument(body),
-        };
-    },
-    htmlBuilder,
-    mathmlBuilder,
-});
-
 // No limits, not symbols
 defineFunction({
     type: "op",
@@ -382,6 +368,7 @@ defineFunction({
             type: "op",
             mode: parser.mode,
             limits: false,
+            parentIsSupSub: false,
             symbol: false,
             name: funcName,
         };
@@ -404,6 +391,7 @@ defineFunction({
             type: "op",
             mode: parser.mode,
             limits: true,
+            parentIsSupSub: false,
             symbol: false,
             name: funcName,
         };
@@ -431,6 +419,7 @@ defineFunction({
             type: "op",
             mode: parser.mode,
             limits: false,
+            parentIsSupSub: false,
             symbol: true,
             name: fName,
         };

package/src/functions/operatorname.js

@@ -101,8 +101,7 @@ defineFunction({
         if (isAllString) {
             // Write a single TextNode instead of multiple nested tags.
             const word = expression.map(node => node.toText()).join("");
-            // word has already been escaped by `node.toText()`
-            expression = [new mathMLTree.TextNode(word, false)];
+            expression = [new mathMLTree.TextNode(word)];
         }
 
         const identifier = new mathMLTree.MathNode("mi", expression);

package/src/functions/ordgroup.js

@@ -8,6 +8,10 @@ import * as mml from "../buildMathML";
 defineFunctionBuilders({
     type: "ordgroup",
     htmlBuilder(group, options) {
+        if (group.semisimple) {
+            return buildCommon.makeFragment(
+                html.buildExpression(group.body, options, false));
+        }
         return buildCommon.makeSpan(
             ["mord"], html.buildExpression(group.body, options, true), options);
     },

package/src/functions/phantom.js

@@ -71,12 +71,15 @@ defineFunction({
             children: [{type: "elem", elem: node}],
         }, options);
 
-        return node;
+        // For spacing, TeX treats \smash as a math group (same spacing as ord).
+        return buildCommon.makeSpan(["mord"], [node], options);
     },
     mathmlBuilder: (group, options) => {
         const inner = mml.buildExpression(ordargument(group.body), options);
-        const node = new mathMLTree.MathNode("mphantom", inner);
+        const phantom = new mathMLTree.MathNode("mphantom", inner);
+        const node = new mathMLTree.MathNode("mpadded", [phantom]);
         node.setAttribute("height", "0px");
+        node.setAttribute("depth", "0px");
         return node;
     },
 });
@@ -106,7 +109,8 @@ defineFunction({
     },
     mathmlBuilder: (group, options) => {
         const inner = mml.buildExpression(ordargument(group.body), options);
-        const node = new mathMLTree.MathNode("mphantom", inner);
+        const phantom = new mathMLTree.MathNode("mphantom", inner);
+        const node = new mathMLTree.MathNode("mpadded", [phantom]);
         node.setAttribute("width", "0px");
         return node;
     },

package/src/functions/rule.js

@@ -30,13 +30,9 @@ defineFunction({
         const rule = buildCommon.makeSpan(["mord", "rule"], [], options);
 
         // Calculate the shift, width, and height of the rule, and account for units
-        let shift = 0;
-        if (group.shift) {
-            shift = calculateSize(group.shift, options);
-        }
-
         const width = calculateSize(group.width, options);
         const height = calculateSize(group.height, options);
+        const shift = (group.shift) ? calculateSize(group.shift, options) : 0;
 
         // Style the rule to the right size
         rule.style.borderRightWidth = width + "em";
@@ -55,10 +51,25 @@ defineFunction({
         return rule;
     },
     mathmlBuilder(group, options) {
-        // TODO(emily): Figure out if there's an actual way to draw black boxes
-        // in MathML.
-        const node = new mathMLTree.MathNode("mrow");
+        const width = calculateSize(group.width, options);
+        const height = calculateSize(group.height, options);
+        const shift = (group.shift) ? calculateSize(group.shift, options) : 0;
+        const color = options.color && options.getColor() || "black";
+
+        const rule = new mathMLTree.MathNode("mspace");
+        rule.setAttribute("mathbackground", color);
+        rule.setAttribute("width", width + "em");
+        rule.setAttribute("height", height + "em");
+
+        const wrapper = new mathMLTree.MathNode("mpadded", [rule]);
+        if (shift >= 0) {
+            wrapper.setAttribute("height", "+" + shift + "em");
+        } else {
+            wrapper.setAttribute("height", shift + "em");
+            wrapper.setAttribute("depth", "+" + (-shift) + "em");
+        }
+        wrapper.setAttribute("voffset", shift + "em");
 
-        return node;
+        return wrapper;
     },
 });

package/src/functions/sizing.js

@@ -2,7 +2,6 @@
 import buildCommon from "../buildCommon";
 import defineFunction from "../defineFunction";
 import mathMLTree from "../mathMLTree";
-import utils from "../utils";
 
 import * as html from "../buildHTML";
 import * as mml from "../buildMathML";
@@ -23,7 +22,7 @@ export function sizingGroup(
     // Add size-resetting classes to the inner list and set maxFontSize
     // manually. Handle nested size changes.
     for (let i = 0; i < inner.length; i++) {
-        const pos = utils.indexOf(inner[i].classes, "sizing");
+        const pos = inner[i].classes.indexOf("sizing");
         if (pos < 0) {
             Array.prototype.push.apply(inner[i].classes,
                 options.sizingClasses(baseOptions));
@@ -62,14 +61,13 @@ defineFunction({
         allowedInText: true,
     },
     handler: ({breakOnTokenText, funcName, parser}, args) => {
-        parser.consumeSpaces();
         const body = parser.parseExpression(false, breakOnTokenText);
 
         return {
             type: "sizing",
             mode: parser.mode,
             // Figure out what size to use based on the list of functions above
-            size: utils.indexOf(sizeFuncs, funcName) + 1,
+            size: sizeFuncs.indexOf(funcName) + 1,
             body,
         };
     },

package/src/functions/smash.js

@@ -55,7 +55,7 @@ defineFunction({
     },
     htmlBuilder: (group, options) => {
         const node = buildCommon.makeSpan(
-            ["mord"], [html.buildGroup(group.body, options)]);
+            [], [html.buildGroup(group.body, options)]);
 
         if (!group.smashHeight && !group.smashDepth) {
             return node;
@@ -85,10 +85,13 @@ defineFunction({
         // makeVList applies "display: table-cell", which prevents the browser
         // from acting on that line height. So we'll call makeVList now.
 
-        return buildCommon.makeVList({
+        const smashedNode = buildCommon.makeVList({
             positionType: "firstBaseline",
             children: [{type: "elem", elem: node}],
         }, options);
+
+        // For spacing, TeX treats \hphantom as a math group (same spacing as ord).
+        return buildCommon.makeSpan(["mord"], [smashedNode], options);
     },
     mathmlBuilder: (group, options) => {
         const node = new mathMLTree.MathNode(

package/src/functions/sqrt.js

@@ -5,7 +5,6 @@ import mathMLTree from "../mathMLTree";
 import delimiter from "../delimiter";
 import Style from "../Style";
 
-import {DocumentFragment} from "../tree";
 import * as html from "../buildHTML";
 import * as mml from "../buildMathML";
 
@@ -39,9 +38,7 @@ defineFunction({
 
         // Some groups can return document fragments.  Handle those by wrapping
         // them in a span.
-        if (inner instanceof DocumentFragment) {
-            inner = buildCommon.makeSpan([], [inner], options);
-        }
+        inner = buildCommon.wrapFragment(inner, options);
 
         // Calculate the minimum size for the \surd delimiter
         const metrics = options.fontMetrics();

package/src/functions/styling.js

@@ -25,7 +25,6 @@ defineFunction({
     },
     handler({breakOnTokenText, funcName, parser}, args) {
         // parse out the implicit body
-        parser.consumeSpaces();
         const body = parser.parseExpression(true, breakOnTokenText);
 
         // TODO: Refactor to avoid duplicating styleMap in multiple places (e.g.

package/src/functions/supsub.js

@@ -201,6 +201,10 @@ defineFunctionBuilders({
             }
         }
 
+        if (group.base && group.base.type === "op") {
+            group.base.parentIsSupSub = true;
+        }
+
         const children = [mml.buildGroup(group.base, options)];
 
         if (group.sub) {
@@ -217,7 +221,7 @@ defineFunctionBuilders({
         } else if (!group.sub) {
             const base = group.base;
             if (base && base.type === "op" && base.limits &&
-                options.style === Style.DISPLAY) {
+                (options.style === Style.DISPLAY || base.alwaysHandleSupSub)) {
                 nodeType = "mover";
             } else {
                 nodeType = "msup";
@@ -225,7 +229,7 @@ defineFunctionBuilders({
         } else if (!group.sup) {
             const base = group.base;
             if (base && base.type === "op" && base.limits &&
-                options.style === Style.DISPLAY) {
+                (options.style === Style.DISPLAY || base.alwaysHandleSupSub)) {
                 nodeType = "munder";
             } else {
                 nodeType = "msub";

package/src/functions/symbolsOp.js

@@ -23,6 +23,10 @@ defineFunctionBuilders({
             }
         } else if (group.family === "punct") {
             node.setAttribute("separator", "true");
+        } else if (group.family === "open" || group.family === "close") {
+            // Delims built here should not stretch vertically.
+            // See delimsizing.js for stretchy delims.
+            node.setAttribute("stretchy", "false");
         }
         return node;
     },

package/src/functions/symbolsSpacing.js

@@ -4,13 +4,36 @@ import buildCommon from "../buildCommon";
 import mathMLTree from "../mathMLTree";
 import ParseError from "../ParseError";
 
+// A map of CSS-based spacing functions to their CSS class.
+const cssSpace: {[string]: string} = {
+    "\\nobreak": "nobreak",
+    "\\allowbreak": "allowbreak",
+};
+
+// A lookup table to determine whether a spacing function/symbol should be
+// treated like a regular space character.  If a symbol or command is a key
+// in this table, then it should be a regular space character.  Furthermore,
+// the associated value may have a `className` specifying an extra CSS class
+// to add to the created `span`.
+const regularSpace: {[string]: { className?: string }} = {
+    " ": {},
+    "\\ ": {},
+    "~": {
+        className: "nobreak",
+    },
+    "\\space": {},
+    "\\nobreakspace": {
+        className: "nobreak",
+    },
+};
+
 // ParseNode<"spacing"> created in Parser.js from the "spacing" symbol Groups in
 // src/symbols.js.
 defineFunctionBuilders({
     type: "spacing",
     htmlBuilder(group, options) {
-        if (buildCommon.regularSpace.hasOwnProperty(group.text)) {
-            const className = buildCommon.regularSpace[group.text].className || "";
+        if (regularSpace.hasOwnProperty(group.text)) {
+            const className = regularSpace[group.text].className || "";
             // Spaces are generated by adding an actual space. Each of these
             // things has an entry in the symbols table, so these will be turned
             // into appropriate outputs.
@@ -23,10 +46,10 @@ defineFunctionBuilders({
                     [buildCommon.mathsym(group.text, group.mode, options)],
                     options);
             }
-        } else if (buildCommon.cssSpace.hasOwnProperty(group.text)) {
+        } else if (cssSpace.hasOwnProperty(group.text)) {
             // Spaces based on just a CSS class.
             return buildCommon.makeSpan(
-                ["mspace", buildCommon.cssSpace[group.text]],
+                ["mspace", cssSpace[group.text]],
                 [], options);
         } else {
             throw new ParseError(`Unknown type of space "${group.text}"`);
@@ -35,10 +58,10 @@ defineFunctionBuilders({
     mathmlBuilder(group, options) {
         let node;
 
-        if (buildCommon.regularSpace.hasOwnProperty(group.text)) {
+        if (regularSpace.hasOwnProperty(group.text)) {
             node = new mathMLTree.MathNode(
                 "mtext", [new mathMLTree.TextNode("\u00a0")]);
-        } else if (buildCommon.cssSpace.hasOwnProperty(group.text)) {
+        } else if (cssSpace.hasOwnProperty(group.text)) {
             // CSS-based MathML spaces (\nobreak, \allowbreak) are ignored
             return new mathMLTree.MathNode("mspace");
         } else {

package/src/functions/tag.js

@@ -4,21 +4,37 @@ import mathMLTree from "../mathMLTree";
 
 import * as mml from "../buildMathML";
 
+const pad = () => {
+    const padNode = new mathMLTree.MathNode("mtd", []);
+    padNode.setAttribute("width", "50%");
+    return padNode;
+};
+
 defineFunctionBuilders({
     type: "tag",
     mathmlBuilder(group, options) {
         const table = new mathMLTree.MathNode("mtable", [
-            new mathMLTree.MathNode("mlabeledtr", [
+            new mathMLTree.MathNode("mtr", [
+                pad(),
                 new mathMLTree.MathNode("mtd", [
-                    mml.buildExpressionRow(group.tag, options),
+                    mml.buildExpressionRow(group.body, options),
                 ]),
+                pad(),
                 new mathMLTree.MathNode("mtd", [
-                    mml.buildExpressionRow(group.body, options),
+                    mml.buildExpressionRow(group.tag, options),
                 ]),
             ]),
         ]);
-        table.setAttribute("side", "right");
+        table.setAttribute("width", "100%");
         return table;
+
+        // TODO: Left-aligned tags.
+        // Currently, the group and options passed here do not contain
+        // enough info to set tag alignment. `leqno` is in Settings but it is
+        // not passed to Options. On the HTML side, leqno is
+        // set by a CSS class applied in buildTree.js. That would have worked
+        // in MathML if browsers supported <mlabeledtr>. Since they don't, we
+        // need to rewrite the way this function is called.
     },
 });
 

package/src/functions/text.js

@@ -13,10 +13,12 @@ const textFontFamilies = {
 
 const textFontWeights = {
     "\\textbf": "textbf",
+    "\\textmd": "textmd",
 };
 
 const textFontShapes = {
     "\\textit": "textit",
+    "\\textup": "textup",
 };
 
 const optionsWithFont = (group, options) => {
@@ -39,9 +41,9 @@ defineFunction({
         // Font families
         "\\text", "\\textrm", "\\textsf", "\\texttt", "\\textnormal",
         // Font weights
-        "\\textbf",
+        "\\textbf", "\\textmd",
         // Font Shapes
-        "\\textit",
+        "\\textit", "\\textup",
     ],
     props: {
         numArgs: 1,
@@ -62,8 +64,8 @@ defineFunction({
     htmlBuilder(group, options) {
         const newOptions = optionsWithFont(group, options);
         const inner = html.buildExpression(group.body, newOptions, true);
-        buildCommon.tryCombineChars(inner);
-        return buildCommon.makeSpan(["mord", "text"], inner, newOptions);
+        return buildCommon.makeSpan(
+            ["mord", "text"], buildCommon.tryCombineChars(inner), newOptions);
     },
     mathmlBuilder(group, options) {
         const newOptions = optionsWithFont(group, options);