katex 0.10.1 → 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 &&
@@ -237,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(
@@ -254,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;
@@ -302,6 +305,7 @@ defineFunction({
             type: "op",
             mode: parser.mode,
             limits: true,
+            parentIsSupSub: false,
             symbol: true,
             name: fName,
         };
@@ -324,6 +328,7 @@ defineFunction({
             type: "op",
             mode: parser.mode,
             limits: false,
+            parentIsSupSub: false,
             symbol: false,
             body: ordargument(body),
         };
@@ -363,6 +368,7 @@ defineFunction({
             type: "op",
             mode: parser.mode,
             limits: false,
+            parentIsSupSub: false,
             symbol: false,
             name: funcName,
         };
@@ -385,6 +391,7 @@ defineFunction({
             type: "op",
             mode: parser.mode,
             limits: true,
+            parentIsSupSub: false,
             symbol: false,
             name: funcName,
         };
@@ -412,6 +419,7 @@ defineFunction({
             type: "op",
             mode: parser.mode,
             limits: false,
+            parentIsSupSub: false,
             symbol: true,
             name: fName,
         };

package/src/functions/phantom.js

@@ -76,8 +76,10 @@ 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("height", "0px");
+        node.setAttribute("depth", "0px");
         return node;
     },
 });
@@ -107,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/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/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,

package/src/functions.js

@@ -21,6 +21,8 @@ import "./functions/genfrac";
 import "./functions/horizBrace";
 import "./functions/href";
 import "./functions/htmlmathml";
+// Disabled until https://github.com/KaTeX/KaTeX/pull/1794 is merged.
+// import "./functions/includegraphics";
 import "./functions/kern";
 import "./functions/lap";
 import "./functions/math";

package/src/katex.less

@@ -4,6 +4,9 @@
 // The mu unit is defined as 1/18 em
 @mu: 1/18em;
 
+// The version is dynamically set from package.json via webpack.common.js
+@version: "";
+
 .katex {
     font: normal 1.21em KaTeX_Main, Times New Roman, serif;
     line-height: 1.2;
@@ -18,6 +21,10 @@
     // mode, while still allowing background/foreground setting on root .katex
     * { -ms-high-contrast-adjust: none !important; }
 
+    .katex-version::after {
+        content: @version;
+    }
+
     .katex-mathml {
         // Accessibility hack to only show to screen readers
         // Found at: http://a11yproject.com/posts/how-to-hide-content/
@@ -464,6 +471,14 @@
         stroke-opacity: 1;
     }
 
+    img {
+        border-style: none;
+        min-width: 0;
+        min-height: 0;
+        max-width: none;
+        max-height: none;
+    }
+
     // Define CSS for image whose width will match its span width.
     .stretchy {
         width: 100%;