katex 0.10.1 → 0.12.0

package/src/functions/def.js

@@ -0,0 +1,184 @@
+//@flow
+import defineFunction from "../defineFunction";
+import ParseError from "../ParseError";
+import {assertNodeType} from "../parseNode";
+
+const globalMap = {
+    "\\global": "\\global",
+    "\\long": "\\\\globallong",
+    "\\\\globallong": "\\\\globallong",
+    "\\def": "\\gdef",
+    "\\gdef": "\\gdef",
+    "\\edef": "\\xdef",
+    "\\xdef": "\\xdef",
+    "\\let": "\\\\globallet",
+    "\\futurelet": "\\\\globalfuture",
+};
+
+const checkControlSequence = (tok) => {
+    const name = tok.text;
+    if (/^(?:[\\{}$&#^_]|EOF)$/.test(name)) {
+        throw new ParseError("Expected a control sequence", tok);
+    }
+    return name;
+};
+
+const getRHS = (parser) => {
+    let tok = parser.gullet.popToken();
+    if (tok.text === "=") { // consume optional equals
+        tok = parser.gullet.popToken();
+        if (tok.text === " ") { // consume one optional space
+            tok = parser.gullet.popToken();
+        }
+    }
+    return tok;
+};
+
+const letCommand = (parser, name, tok, global) => {
+    let macro = parser.gullet.macros.get(tok.text);
+    if (macro == null) {
+        // don't expand it later even if a macro with the same name is defined
+        // e.g., \let\foo=\frac \def\frac{\relax} \frac12
+        tok.noexpand = true;
+        macro = {
+            tokens: [tok],
+            numArgs: 0,
+            // reproduce the same behavior in expansion
+            unexpandable: !parser.gullet.isExpandable(tok.text),
+        };
+    }
+    parser.gullet.macros.set(name, macro, global);
+};
+
+// <assignment> -> <non-macro assignment>|<macro assignment>
+// <non-macro assignment> -> <simple assignment>|\global<non-macro assignment>
+// <macro assignment> -> <definition>|<prefix><macro assignment>
+// <prefix> -> \global|\long|\outer
+defineFunction({
+    type: "internal",
+    names: [
+        "\\global", "\\long",
+        "\\\\globallong", // can’t be entered directly
+    ],
+    props: {
+        numArgs: 0,
+        allowedInText: true,
+    },
+    handler({parser, funcName}) {
+        parser.consumeSpaces();
+        const token = parser.fetch();
+        if (globalMap[token.text]) {
+            // KaTeX doesn't have \par, so ignore \long
+            if (funcName === "\\global" || funcName === "\\\\globallong") {
+                token.text = globalMap[token.text];
+            }
+            return assertNodeType(parser.parseFunction(), "internal");
+        }
+        throw new ParseError(`Invalid token after macro prefix`, token);
+    },
+});
+
+// Basic support for macro definitions: \def, \gdef, \edef, \xdef
+// <definition> -> <def><control sequence><definition text>
+// <def> -> \def|\gdef|\edef|\xdef
+// <definition text> -> <parameter text><left brace><balanced text><right brace>
+defineFunction({
+    type: "internal",
+    names: ["\\def", "\\gdef", "\\edef", "\\xdef"],
+    props: {
+        numArgs: 0,
+        allowedInText: true,
+    },
+    handler({parser, funcName}) {
+        let arg = parser.gullet.consumeArgs(1)[0];
+        if (arg.length !== 1) {
+            throw new ParseError("\\gdef's first argument must be a macro name");
+        }
+        const name = arg[0].text;
+        // Count argument specifiers, and check they are in the order #1 #2 ...
+        let numArgs = 0;
+        arg = parser.gullet.consumeArgs(1)[0];
+        while (arg.length === 1 && arg[0].text === "#") {
+            arg = parser.gullet.consumeArgs(1)[0];
+            if (arg.length !== 1) {
+                throw new ParseError(
+                    `Invalid argument number length "${arg.length}"`);
+            }
+            if (!(/^[1-9]$/.test(arg[0].text))) {
+                throw new ParseError(
+                    `Invalid argument number "${arg[0].text}"`);
+            }
+            numArgs++;
+            if (parseInt(arg[0].text) !== numArgs) {
+                throw new ParseError(
+                    `Argument number "${arg[0].text}" out of order`);
+            }
+            arg = parser.gullet.consumeArgs(1)[0];
+        }
+        if (funcName === "\\edef" || funcName === "\\xdef") {
+            arg = parser.gullet.expandTokens(arg);
+            arg.reverse(); // to fit in with stack order
+        }
+        // Final arg is the expansion of the macro
+        parser.gullet.macros.set(name, {
+            tokens: arg,
+            numArgs,
+        }, funcName === globalMap[funcName]);
+
+        return {
+            type: "internal",
+            mode: parser.mode,
+        };
+    },
+});
+
+// <simple assignment> -> <let assignment>
+// <let assignment> -> \futurelet<control sequence><token><token>
+//     | \let<control sequence><equals><one optional space><token>
+// <equals> -> <optional spaces>|<optional spaces>=
+defineFunction({
+    type: "internal",
+    names: [
+        "\\let",
+        "\\\\globallet", // can’t be entered directly
+    ],
+    props: {
+        numArgs: 0,
+        allowedInText: true,
+    },
+    handler({parser, funcName}) {
+        const name = checkControlSequence(parser.gullet.popToken());
+        parser.gullet.consumeSpaces();
+        const tok = getRHS(parser);
+        letCommand(parser, name, tok, funcName === "\\\\globallet");
+        return {
+            type: "internal",
+            mode: parser.mode,
+        };
+    },
+});
+
+// ref: https://www.tug.org/TUGboat/tb09-3/tb22bechtolsheim.pdf
+defineFunction({
+    type: "internal",
+    names: [
+        "\\futurelet",
+        "\\\\globalfuture", // can’t be entered directly
+    ],
+    props: {
+        numArgs: 0,
+        allowedInText: true,
+    },
+    handler({parser, funcName}) {
+        const name = checkControlSequence(parser.gullet.popToken());
+        const middle = parser.gullet.popToken();
+        const tok = parser.gullet.popToken();
+        letCommand(parser, name, tok, funcName === "\\\\globalfuture");
+        parser.gullet.pushToken(tok);
+        parser.gullet.pushToken(middle);
+        return {
+            type: "internal",
+            mode: parser.mode,
+        };
+    },
+});

package/src/functions/delimsizing.js

@@ -62,11 +62,12 @@ function checkDelimiter(
     const symDelim = checkSymbolNodeType(delim);
     if (symDelim && utils.contains(delimiters, symDelim.text)) {
         return symDelim;
-    } else {
+    } else if (symDelim) {
         throw new ParseError(
-            "Invalid delimiter: '" +
-            (symDelim ? symDelim.text : JSON.stringify(delim)) +
-            "' after '" + context.funcName + "'", delim);
+            `Invalid delimiter '${symDelim.text}' after '${context.funcName}'`,
+            delim);
+    } else {
+        throw new ParseError(`Invalid delimiter type '${delim.type}'`, delim);
     }
 }
 
@@ -145,10 +146,16 @@ defineFunction({
         // \left case below triggers parsing of \right in
         //   `const right = parser.parseFunction();`
         // uses this return value.
+        const color = context.parser.gullet.macros.get("\\current@color");
+        if (color && typeof color !== "string") {
+            throw new ParseError(
+                "\\current@color set to non-string in \\right");
+        }
         return {
             type: "leftright-right",
             mode: context.parser.mode,
             delim: checkDelimiter(args[0], context).text,
+            color, // undefined if not set via \color
         };
     },
 });
@@ -178,6 +185,7 @@ defineFunction({
             body,
             left: delim.text,
             right: right.delim,
+            rightColor: right.color,
         };
     },
     htmlBuilder: (group, options) => {
@@ -241,12 +249,14 @@ defineFunction({
         }
 
         let rightDelim;
-        // Same for the right delimiter
+        // Same for the right delimiter, but using color specified by \color
         if (group.right === ".") {
             rightDelim = html.makeNullDelimiter(options, ["mclose"]);
         } else {
+            const colorOptions = group.rightColor ?
+                options.withColor(group.rightColor) : options;
             rightDelim = delimiter.leftRightDelim(
-                group.right, innerHeight, innerDepth, options,
+                group.right, innerHeight, innerDepth, colorOptions,
                 group.mode, ["mclose"]);
         }
         // Add it to the end of the expression.
@@ -273,6 +283,10 @@ defineFunction({
 
             rightNode.setAttribute("fence", "true");
 
+            if (group.rightColor) {
+                rightNode.setAttribute("mathcolor", group.rightColor);
+            }
+
             inner.push(rightNode);
         }
 
@@ -318,9 +332,19 @@ defineFunction({
         return middleDelim;
     },
     mathmlBuilder: (group, options) => {
-        const middleNode = new mathMLTree.MathNode(
-            "mo", [mml.makeText(group.delim, group.mode)]);
+        // A Firefox \middle will strech a character vertically only if it
+        // is in the fence part of the operator dictionary at:
+        // https://www.w3.org/TR/MathML3/appendixc.html.
+        // So we need to avoid U+2223 and use plain "|" instead.
+        const textNode = (group.delim === "\\vert" || group.delim === "|")
+            ? mml.makeText("|", "text")
+            : mml.makeText(group.delim, group.mode);
+        const middleNode = new mathMLTree.MathNode("mo", [textNode]);
         middleNode.setAttribute("fence", "true");
+        // MathML gives 5/18em spacing to each <mo> element.
+        // \middle should get delimiter spacing instead.
+        middleNode.setAttribute("lspace", "0.05em");
+        middleNode.setAttribute("rspace", "0.05em");
         return middleNode;
     },
 });

package/src/functions/enclose.js

@@ -46,15 +46,24 @@ const htmlBuilder = (group, options) => {
 
         // Add vertical padding
         let vertPad = 0;
-        // ref: LaTeX source2e: \fboxsep = 3pt;  \fboxrule = .4pt
+        let ruleThickness = 0;
         // ref: cancel package: \advance\totalheight2\p@ % "+2"
         if (/box/.test(label)) {
-            vertPad = label === "colorbox" ? 0.3 : 0.34;
+            ruleThickness = Math.max(
+                options.fontMetrics().fboxrule, // default
+                options.minRuleThickness, // User override.
+            );
+            vertPad = options.fontMetrics().fboxsep +
+                (label === "colorbox" ? 0 : ruleThickness);
         } else {
             vertPad = isSingleChar ? 0.2 : 0;
         }
 
         img = stretchy.encloseSpan(inner, label, vertPad, options);
+        if (/fbox|boxed|fcolorbox/.test(label)) {
+            img.style.borderStyle = "solid";
+            img.style.borderWidth = `${ruleThickness}em`;
+        }
         imgShift = inner.depth + vertPad;
 
         if (group.backgroundColor) {
@@ -111,8 +120,11 @@ const htmlBuilder = (group, options) => {
 };
 
 const mathmlBuilder = (group, options) => {
+    let fboxsep = 0;
     const node = new mathMLTree.MathNode(
-        "menclose", [mml.buildGroup(group.body, options)]);
+        (group.label.indexOf("colorbox") > -1) ? "mpadded" : "menclose",
+        [mml.buildGroup(group.body, options)]
+    );
     switch (group.label) {
         case "\\cancel":
             node.setAttribute("notation", "updiagonalstrike");
@@ -127,8 +139,23 @@ const mathmlBuilder = (group, options) => {
             node.setAttribute("notation", "box");
             break;
         case "\\fcolorbox":
-            // TODO(ron): I don't know any way to set the border color.
-            node.setAttribute("notation", "box");
+        case "\\colorbox":
+            // <menclose> doesn't have a good notation option. So use <mpadded>
+            // instead. Set some attributes that come included with <menclose>.
+            fboxsep = options.fontMetrics().fboxsep *
+                options.fontMetrics().ptPerEm;
+            node.setAttribute("width", `+${2 * fboxsep}pt`);
+            node.setAttribute("height", `+${2 * fboxsep}pt`);
+            node.setAttribute("lspace", `${fboxsep}pt`); //
+            node.setAttribute("voffset", `${fboxsep}pt`);
+            if (group.label === "\\fcolorbox") {
+                const thk = Math.max(
+                    options.fontMetrics().fboxrule, // default
+                    options.minRuleThickness, // user override
+                );
+                node.setAttribute("style", "border: " + thk + "em solid " +
+                    String(group.borderColor));
+            }
             break;
         case "\\xcancel":
             node.setAttribute("notation", "updiagonalstrike downdiagonalstrike");
@@ -195,7 +222,7 @@ defineFunction({
     names: ["\\fbox"],
     props: {
         numArgs: 1,
-        argTypes: ["text"],
+        argTypes: ["hbox"],
         allowedInText: true,
     },
     handler({parser}, args) {

package/src/functions/font.js

@@ -3,6 +3,7 @@
 
 import {binrelClass} from "./mclass";
 import defineFunction from "../defineFunction";
+import utils from "../utils";
 
 import * as html from "../buildHTML";
 import * as mml from "../buildMathML";
@@ -71,6 +72,7 @@ defineFunction({
     },
     handler: ({parser}, args) => {
         const body = args[0];
+        const isCharacterBox = utils.isCharacterBox(body);
         // amsbsy.sty's \boldsymbol uses \binrel spacing to inherit the
         // argument's bin|rel|ord status
         return {
@@ -85,6 +87,7 @@ defineFunction({
                     body,
                 },
             ],
+            isCharacterBox: isCharacterBox,
         };
     },
 });
@@ -92,7 +95,7 @@ defineFunction({
 // Old font changing functions
 defineFunction({
     type: "font",
-    names: ["\\rm", "\\sf", "\\tt", "\\bf", "\\it"],
+    names: ["\\rm", "\\sf", "\\tt", "\\bf", "\\it", "\\cal"],
     props: {
         numArgs: 0,
         allowedInText: true,

package/src/functions/genfrac.js

@@ -4,29 +4,36 @@ import buildCommon from "../buildCommon";
 import delimiter from "../delimiter";
 import mathMLTree from "../mathMLTree";
 import Style from "../Style";
-import {assertNodeType, assertAtomFamily, checkNodeType} from "../parseNode";
+import {assertNodeType} from "../parseNode";
 import {assert} from "../utils";
 
 import * as html from "../buildHTML";
 import * as mml from "../buildMathML";
 import {calculateSize} from "../units";
 
-const htmlBuilder = (group, options) => {
-    // Fractions are handled in the TeXbook on pages 444-445, rules 15(a-e).
+const adjustStyle = (size, originalStyle) => {
     // Figure out what style this fraction should be in based on the
     // function used
-    let style = options.style;
-    if (group.size === "display") {
-        style = Style.DISPLAY;
-    } else if (group.size === "text" &&
+    let style = originalStyle;
+    if (size === "display") {
+        // Get display style as a default.
+        // If incoming style is sub/sup, use style.text() to get correct size.
+        style = style.id >= Style.SCRIPT.id ? style.text() : Style.DISPLAY;
+    } else if (size === "text" &&
         style.size === Style.DISPLAY.size) {
         // We're in a \tfrac but incoming style is displaystyle, so:
         style = Style.TEXT;
-    } else if (group.size === "script") {
+    } else if (size === "script") {
         style = Style.SCRIPT;
-    } else if (group.size === "scriptscript") {
+    } else if (size === "scriptscript") {
         style = Style.SCRIPTSCRIPT;
     }
+    return style;
+};
+
+const htmlBuilder = (group, options) => {
+    // Fractions are handled in the TeXbook on pages 444-445, rules 15(a-e).
+    const style = adjustStyle(group.size, options.style);
 
     const nstyle = style.fracNum();
     const dstyle = style.fracDen();
@@ -69,7 +76,7 @@ const htmlBuilder = (group, options) => {
     let numShift;
     let clearance;
     let denomShift;
-    if (style.size === Style.DISPLAY.size) {
+    if (style.size === Style.DISPLAY.size || group.size === "display") {
         numShift = options.fontMetrics().num1;
         if (ruleWidth > 0) {
             clearance = 3 * ruleSpacing;
@@ -176,7 +183,7 @@ const htmlBuilder = (group, options) => {
 };
 
 const mathmlBuilder = (group, options) => {
-    const node = new mathMLTree.MathNode(
+    let node = new mathMLTree.MathNode(
         "mfrac",
         [
             mml.buildGroup(group.numer, options),
@@ -190,12 +197,22 @@ const mathmlBuilder = (group, options) => {
         node.setAttribute("linethickness", ruleWidth + "em");
     }
 
+    const style = adjustStyle(group.size, options.style);
+    if (style.size !== options.style.size) {
+        node = new mathMLTree.MathNode("mstyle", [node]);
+        const isDisplay = (style.size === Style.DISPLAY.size) ? "true" : "false";
+        node.setAttribute("displaystyle", isDisplay);
+        node.setAttribute("scriptlevel", "0");
+    }
+
     if (group.leftDelim != null || group.rightDelim != null) {
         const withDelims = [];
 
         if (group.leftDelim != null) {
             const leftOp = new mathMLTree.MathNode(
-                "mo", [new mathMLTree.TextNode(group.leftDelim)]);
+                "mo",
+                [new mathMLTree.TextNode(group.leftDelim.replace("\\", ""))]
+            );
 
             leftOp.setAttribute("fence", "true");
 
@@ -206,7 +223,9 @@ const mathmlBuilder = (group, options) => {
 
         if (group.rightDelim != null) {
             const rightOp = new mathMLTree.MathNode(
-                "mo", [new mathMLTree.TextNode(group.rightDelim)]);
+                "mo",
+                [new mathMLTree.TextNode(group.rightDelim.replace("\\", ""))]
+            );
 
             rightOp.setAttribute("fence", "true");
 
@@ -363,17 +382,10 @@ defineFunction({
         const denom = args[5];
 
         // Look into the parse nodes to get the desired delimiters.
-        let leftNode = checkNodeType(args[0], "atom");
-        if (leftNode) {
-            leftNode = assertAtomFamily(args[0], "open");
-        }
-        const leftDelim = leftNode ? delimFromValue(leftNode.text) : null;
-
-        let rightNode = checkNodeType(args[1], "atom");
-        if (rightNode) {
-            rightNode = assertAtomFamily(args[1], "close");
-        }
-        const rightDelim = rightNode ? delimFromValue(rightNode.text) : null;
+        const leftDelim = args[0].type === "atom" && args[0].family === "open"
+            ? delimFromValue(args[0].text) : null;
+        const rightDelim = args[1].type === "atom" && args[1].family === "close"
+            ? delimFromValue(args[1].text) : null;
 
         const barNode = assertNodeType(args[2], "size");
         let hasBarLine;
@@ -390,14 +402,14 @@ defineFunction({
 
         // Find out if we want displaystyle, textstyle, etc.
         let size = "auto";
-        let styl = checkNodeType(args[3], "ordgroup");
-        if (styl) {
+        let styl = args[3];
+        if (styl.type === "ordgroup") {
             if (styl.body.length > 0) {
                 const textOrd = assertNodeType(styl.body[0], "textord");
                 size = stylArray[Number(textOrd.text)];
             }
         } else {
-            styl = assertNodeType(args[3], "textord");
+            styl = assertNodeType(styl, "textord");
             size = stylArray[Number(styl.text)];
         }
 

package/src/functions/horizBrace.js

@@ -4,7 +4,7 @@ import buildCommon from "../buildCommon";
 import mathMLTree from "../mathMLTree";
 import stretchy from "../stretchy";
 import Style from "../Style";
-import {assertNodeType, checkNodeType} from "../parseNode";
+import {assertNodeType} from "../parseNode";
 
 import * as html from "../buildHTML";
 import * as mml from "../buildMathML";
@@ -20,15 +20,14 @@ export const htmlBuilder: HtmlBuilderSupSub<"horizBrace"> = (grp, options) => {
     // Pull out the `ParseNode<"horizBrace">` if `grp` is a "supsub" node.
     let supSubGroup;
     let group: ParseNode<"horizBrace">;
-    const supSub = checkNodeType(grp, "supsub");
-    if (supSub) {
+    if (grp.type === "supsub") {
         // Ref: LaTeX source2e: }}}}\limits}
         // i.e. LaTeX treats the brace similar to an op and passes it
         // with \limits, so we need to assign supsub style.
-        supSubGroup = supSub.sup ?
-            html.buildGroup(supSub.sup, options.havingStyle(style.sup()), options) :
-            html.buildGroup(supSub.sub, options.havingStyle(style.sub()), options);
-        group = assertNodeType(supSub.base, "horizBrace");
+        supSubGroup = grp.sup ?
+            html.buildGroup(grp.sup, options.havingStyle(style.sup()), options) :
+            html.buildGroup(grp.sub, options.havingStyle(style.sub()), options);
+        group = assertNodeType(grp.base, "horizBrace");
     } else {
         group = assertNodeType(grp, "horizBrace");
     }

package/src/functions/href.js

@@ -18,6 +18,14 @@ defineFunction({
     handler: ({parser}, args) => {
         const body = args[1];
         const href = assertNodeType(args[0], "url").url;
+
+        if (!parser.settings.isTrusted({
+            command: "\\href",
+            url: href,
+        })) {
+            return parser.formatUnsupportedCmd("\\href");
+        }
+
         return {
             type: "href",
             mode: parser.mode,
@@ -49,6 +57,14 @@ defineFunction({
     },
     handler: ({parser}, args) => {
         const href = assertNodeType(args[0], "url").url;
+
+        if (!parser.settings.isTrusted({
+            command: "\\url",
+            url: href,
+        })) {
+            return parser.formatUnsupportedCmd("\\url");
+        }
+
         const chars = [];
         for (let i = 0; i < href.length; i++) {
             let c = href[i];

package/src/functions/html.js

@@ -0,0 +1,102 @@
+// @flow
+import defineFunction, {ordargument} from "../defineFunction";
+import buildCommon from "../buildCommon";
+import {assertNodeType} from "../parseNode";
+import ParseError from "../ParseError";
+
+import * as html from "../buildHTML";
+import * as mml from "../buildMathML";
+
+defineFunction({
+    type: "html",
+    names: ["\\htmlClass", "\\htmlId", "\\htmlStyle", "\\htmlData"],
+    props: {
+        numArgs: 2,
+        argTypes: ["raw", "original"],
+        allowedInText: true,
+    },
+    handler: ({parser, funcName, token}, args) => {
+        const value = assertNodeType(args[0], "raw").string;
+        const body = args[1];
+
+        if (parser.settings.strict) {
+            parser.settings.reportNonstrict("htmlExtension",
+                "HTML extension is disabled on strict mode");
+        }
+
+        let trustContext;
+        const attributes = {};
+
+        switch (funcName) {
+            case "\\htmlClass":
+                attributes.class = value;
+                trustContext = {
+                    command: "\\htmlClass",
+                    class: value,
+                };
+                break;
+            case "\\htmlId":
+                attributes.id = value;
+                trustContext = {
+                    command: "\\htmlId",
+                    id: value,
+                };
+                break;
+            case "\\htmlStyle":
+                attributes.style = value;
+                trustContext = {
+                    command: "\\htmlStyle",
+                    style: value,
+                };
+                break;
+            case "\\htmlData": {
+                const data = value.split(",");
+                for (let i = 0; i < data.length; i++) {
+                    const keyVal = data[i].split("=");
+                    if (keyVal.length !== 2) {
+                        throw new ParseError(
+                            "Error parsing key-value for \\htmlData");
+                    }
+                    attributes["data-" + keyVal[0].trim()] = keyVal[1].trim();
+                }
+
+                trustContext = {
+                    command: "\\htmlData",
+                    attributes,
+                };
+                break;
+            }
+            default:
+                throw new Error("Unrecognized html command");
+        }
+
+        if (!parser.settings.isTrusted(trustContext)) {
+            return parser.formatUnsupportedCmd(funcName);
+        }
+        return {
+            type: "html",
+            mode: parser.mode,
+            attributes,
+            body: ordargument(body),
+        };
+    },
+    htmlBuilder: (group, options) => {
+        const elements = html.buildExpression(group.body, options, false);
+
+        const classes = ["enclosing"];
+        if (group.attributes.class) {
+            classes.push(...group.attributes.class.trim().split(/\s+/));
+        }
+
+        const span = buildCommon.makeSpan(classes, elements, options);
+        for (const attr in group.attributes) {
+            if (attr !== "class" && group.attributes.hasOwnProperty(attr)) {
+                span.setAttribute(attr, group.attributes[attr]);
+            }
+        }
+        return span;
+    },
+    mathmlBuilder: (group, options) => {
+        return mml.buildExpressionRow(group.body, options);
+    },
+});