katex 0.10.1 → 0.12.0

package/src/functions/includegraphics.js

@@ -0,0 +1,153 @@
+// @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('.'));
+        }
+
+        if (!parser.settings.isTrusted({
+            command: "\\includegraphics",
+            url: src,
+        })) {
+            return parser.formatUnsupportedCmd("\\includegraphics");
+        }
+
+        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/lap.js

@@ -44,19 +44,16 @@ defineFunction({
         // two items involved in the lap.
         // Next, use a strut to set the height of the HTML bounding box.
         // Otherwise, a tall argument may be misplaced.
+        // This code resolved issue #1153
         const strut = buildCommon.makeSpan(["strut"]);
         strut.style.height = (node.height + node.depth) + "em";
         strut.style.verticalAlign = -node.depth + "em";
         node.children.unshift(strut);
 
         // Next, prevent vertical misplacement when next to something tall.
-        node = buildCommon.makeVList({
-            positionType: "firstBaseline",
-            children: [{type: "elem", elem: node}],
-        }, options);
-
-        // Get the horizontal spacing correct relative to adjacent items.
-        return buildCommon.makeSpan(["mord"], [node], options);
+        // This code resolves issue #1234
+        node = buildCommon.makeSpan(["thinbox"], [node], options);
+        return buildCommon.makeSpan(["mord", "vbox"], [node], options);
     },
     mathmlBuilder: (group, options) => {
         // mathllap, mathrlap, mathclap

package/src/functions/math.js

@@ -10,18 +10,14 @@ defineFunction({
         numArgs: 0,
         allowedInText: true,
         allowedInMath: false,
-        consumeMode: "math",
     },
     handler({funcName, parser}, args) {
         const outerMode = parser.mode;
         parser.switchMode("math");
         const close = (funcName === "\\(" ? "\\)" : "$");
         const body = parser.parseExpression(false, close);
-        // We can't expand the next symbol after the closing $ until after
-        // switching modes back.  So don't consume within expect.
-        parser.expect(close, false);
+        parser.expect(close);
         parser.switchMode(outerMode);
-        parser.consume();
         return {
             type: "styling",
             mode: parser.mode,

package/src/functions/mclass.js

@@ -2,6 +2,7 @@
 import defineFunction, {ordargument} from "../defineFunction";
 import buildCommon from "../buildCommon";
 import mathMLTree from "../mathMLTree";
+import utils from "../utils";
 import type {AnyParseNode} from "../parseNode";
 
 import * as html from "../buildHTML";
@@ -17,8 +18,42 @@ function htmlBuilder(group: ParseNode<"mclass">, options) {
 }
 
 function mathmlBuilder(group: ParseNode<"mclass">, options) {
+    let node: mathMLTree.MathNode;
     const inner = mml.buildExpression(group.body, options);
-    return mathMLTree.newDocumentFragment(inner);
+
+    if (group.mclass === "minner") {
+        return mathMLTree.newDocumentFragment(inner);
+    } else if (group.mclass === "mord") {
+        if (group.isCharacterBox) {
+            node = inner[0];
+            node.type = "mi";
+        } else {
+            node = new mathMLTree.MathNode("mi", inner);
+        }
+    } else {
+        if (group.isCharacterBox) {
+            node = inner[0];
+            node.type = "mo";
+        } else {
+            node = new mathMLTree.MathNode("mo", inner);
+        }
+
+        // Set spacing based on what is the most likely adjacent atom type.
+        // See TeXbook p170.
+        if (group.mclass === "mbin") {
+            node.attributes.lspace = "0.22em"; // medium space
+            node.attributes.rspace = "0.22em";
+        } else if (group.mclass === "mpunct") {
+            node.attributes.lspace = "0em";
+            node.attributes.rspace = "0.17em"; // thinspace
+        } else if (group.mclass === "mopen" || group.mclass === "mclose") {
+            node.attributes.lspace = "0em";
+            node.attributes.rspace = "0em";
+        }
+        // MathML <mo> default space is 5/18 em, so <mrel> needs no action.
+        // Ref: https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mo
+    }
+    return node;
 }
 
 // Math class commands except \mathop
@@ -36,8 +71,9 @@ defineFunction({
         return {
             type: "mclass",
             mode: parser.mode,
-            mclass: "m" + funcName.substr(5),
+            mclass: "m" + funcName.substr(5), // TODO(kevinb): don't prefix with 'm'
             body: ordargument(body),
+            isCharacterBox: utils.isCharacterBox(body),
         };
     },
     htmlBuilder,
@@ -71,6 +107,7 @@ defineFunction({
             mode: parser.mode,
             mclass: binrelClass(args[0]),
             body: [args[1]],
+            isCharacterBox: utils.isCharacterBox(args[1]),
         };
     },
 });
@@ -99,6 +136,7 @@ defineFunction({
             mode: baseArg.mode,
             limits: true,
             alwaysHandleSupSub: true,
+            parentIsSupSub: false,
             symbol: false,
             suppressBaseShift: funcName !== "\\stackrel",
             body: ordargument(baseArg),
@@ -117,6 +155,7 @@ defineFunction({
             mode: parser.mode,
             mclass,
             body: [supsub],
+            isCharacterBox: utils.isCharacterBox(supsub),
         };
     },
     htmlBuilder,

package/src/functions/op.js

@@ -6,7 +6,8 @@ import {SymbolNode} from "../domTree";
 import * as mathMLTree from "../mathMLTree";
 import utils from "../utils";
 import Style from "../Style";
-import {assertNodeType, checkNodeType} from "../parseNode";
+import {assembleSupSub} from "./utils/assembleSupSub";
+import {assertNodeType} from "../parseNode";
 
 import * as html from "../buildHTML";
 import * as mml from "../buildMathML";
@@ -14,6 +15,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) => {
@@ -22,14 +28,13 @@ export const htmlBuilder: HtmlBuilderSupSub<"op"> = (grp, options) => {
     let subGroup;
     let hasLimits = false;
     let group: ParseNode<"op">;
-    const supSub = checkNodeType(grp, "supsub");
-    if (supSub) {
+    if (grp.type === "supsub") {
         // If we have limits, supsub will pass us its group to handle. Pull
         // out the superscript and subscript and set the group to the op in
         // its base.
-        supGroup = supSub.sup;
-        subGroup = supSub.sub;
-        group = assertNodeType(supSub.base, "op");
+        supGroup = grp.sup;
+        subGroup = grp.sub;
+        group = assertNodeType(grp.base, "op");
         hasLimits = true;
     } else {
         group = assertNodeType(grp, "op");
@@ -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 &&
@@ -105,7 +105,7 @@ export const htmlBuilder: HtmlBuilderSupSub<"op"> = (grp, options) => {
         // operators, like \limsup
         const output = [];
         for (let i = 1; i < group.name.length; i++) {
-            output.push(buildCommon.mathsym(group.name[i], group.mode));
+            output.push(buildCommon.mathsym(group.name[i], group.mode, options));
         }
         base = buildCommon.makeSpan(["mop"], output, options);
     }
@@ -131,99 +131,9 @@ export const htmlBuilder: HtmlBuilderSupSub<"op"> = (grp, options) => {
     }
 
     if (hasLimits) {
-        // IE 8 clips \int if it is in a display: inline-block. We wrap it
-        // in a new span so it is an inline, and works.
-        base = buildCommon.makeSpan([], [base]);
-
-        let sub;
-        let sup;
-        // We manually have to handle the superscripts and subscripts. This,
-        // aside from the kern calculations, is copied from supsub.
-        if (supGroup) {
-            const elem = html.buildGroup(
-                supGroup, options.havingStyle(style.sup()), options);
-
-            sup = {
-                elem,
-                kern: Math.max(
-                    options.fontMetrics().bigOpSpacing1,
-                    options.fontMetrics().bigOpSpacing3 - elem.depth),
-            };
-        }
-
-        if (subGroup) {
-            const elem = html.buildGroup(
-                subGroup, options.havingStyle(style.sub()), options);
-
-            sub = {
-                elem,
-                kern: Math.max(
-                    options.fontMetrics().bigOpSpacing2,
-                    options.fontMetrics().bigOpSpacing4 - elem.height),
-            };
-        }
-
-        // Build the final group as a vlist of the possible subscript, base,
-        // and possible superscript.
-        let finalGroup;
-        if (sup && sub) {
-            const bottom = options.fontMetrics().bigOpSpacing5 +
-                sub.elem.height + sub.elem.depth +
-                sub.kern +
-                base.depth + baseShift;
-
-            finalGroup = buildCommon.makeVList({
-                positionType: "bottom",
-                positionData: bottom,
-                children: [
-                    {type: "kern", size: options.fontMetrics().bigOpSpacing5},
-                    {type: "elem", elem: sub.elem, marginLeft: -slant + "em"},
-                    {type: "kern", size: sub.kern},
-                    {type: "elem", elem: base},
-                    {type: "kern", size: sup.kern},
-                    {type: "elem", elem: sup.elem, marginLeft: slant + "em"},
-                    {type: "kern", size: options.fontMetrics().bigOpSpacing5},
-                ],
-            }, options);
-        } else if (sub) {
-            const top = base.height - baseShift;
-
-            // Shift the limits by the slant of the symbol. Note
-            // that we are supposed to shift the limits by 1/2 of the slant,
-            // but since we are centering the limits adding a full slant of
-            // margin will shift by 1/2 that.
-            finalGroup = buildCommon.makeVList({
-                positionType: "top",
-                positionData: top,
-                children: [
-                    {type: "kern", size: options.fontMetrics().bigOpSpacing5},
-                    {type: "elem", elem: sub.elem, marginLeft: -slant + "em"},
-                    {type: "kern", size: sub.kern},
-                    {type: "elem", elem: base},
-                ],
-            }, options);
-        } else if (sup) {
-            const bottom = base.depth + baseShift;
-
-            finalGroup = buildCommon.makeVList({
-                positionType: "bottom",
-                positionData: bottom,
-                children: [
-                    {type: "elem", elem: base},
-                    {type: "kern", size: sup.kern},
-                    {type: "elem", elem: sup.elem, marginLeft: slant + "em"},
-                    {type: "kern", size: options.fontMetrics().bigOpSpacing5},
-                ],
-            }, options);
-        } else {
-            // This case probably shouldn't occur (this would mean the
-            // supsub was sending us a group with no superscript or
-            // subscript) but be safe.
-            return base;
-        }
+        return assembleSupSub(base, supGroup, subGroup, options,
+            style, slant, baseShift);
 
-        return buildCommon.makeSpan(
-            ["mop", "op-limits"], [finalGroup], options);
     } else {
         if (baseShift) {
             base.style.position = "relative";
@@ -237,12 +147,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(
@@ -250,17 +161,17 @@ const mathmlBuilder: MathMLBuilder<"op"> = (group, options) => {
     } else {
         // This is a text operator. Add all of the characters from the
         // operator's name.
-        // TODO(emily): Add a space in the middle of some of these
-        // 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 +213,7 @@ defineFunction({
             type: "op",
             mode: parser.mode,
             limits: true,
+            parentIsSupSub: false,
             symbol: true,
             name: fName,
         };
@@ -324,6 +236,7 @@ defineFunction({
             type: "op",
             mode: parser.mode,
             limits: false,
+            parentIsSupSub: false,
             symbol: false,
             body: ordargument(body),
         };
@@ -363,6 +276,7 @@ defineFunction({
             type: "op",
             mode: parser.mode,
             limits: false,
+            parentIsSupSub: false,
             symbol: false,
             name: funcName,
         };
@@ -385,6 +299,7 @@ defineFunction({
             type: "op",
             mode: parser.mode,
             limits: true,
+            parentIsSupSub: false,
             symbol: false,
             name: funcName,
         };
@@ -412,6 +327,7 @@ defineFunction({
             type: "op",
             mode: parser.mode,
             limits: false,
+            parentIsSupSub: false,
             symbol: true,
             name: fName,
         };