katex 0.10.1 → 0.12.0

package/src/functions/operatorname.js

@@ -3,115 +3,159 @@ import defineFunction, {ordargument} from "../defineFunction";
 import buildCommon from "../buildCommon";
 import mathMLTree from "../mathMLTree";
 import {SymbolNode} from "../domTree";
+import {assembleSupSub} from "./utils/assembleSupSub";
+import {assertNodeType} from "../parseNode";
 
 import * as html from "../buildHTML";
 import * as mml from "../buildMathML";
 
-// \operatorname
-// amsopn.dtx: \mathop{#1\kern\z@\operator@font#3}\newmcodes@
-defineFunction({
-    type: "operatorname",
-    names: ["\\operatorname"],
-    props: {
-        numArgs: 1,
-    },
-    handler: ({parser}, args) => {
-        const body = args[0];
-        return {
-            type: "operatorname",
-            mode: parser.mode,
-            body: ordargument(body),
-        };
-    },
+import type {HtmlBuilderSupSub, MathMLBuilder} from "../defineFunction";
+import type {ParseNode} from "../parseNode";
 
-    htmlBuilder: (group, options) => {
-        if (group.body.length > 0) {
-            const body = group.body.map(child => {
-                // $FlowFixMe: Check if the node has a string `text` property.
-                const childText = child.text;
-                if (typeof childText === "string") {
-                    return {
-                        type: "textord",
-                        mode: child.mode,
-                        text: childText,
-                    };
-                } else {
-                    return child;
-                }
-            });
-
-            // Consolidate function names into symbol characters.
-            const expression = html.buildExpression(
-                body, options.withFont("mathrm"), true);
-
-            for (let i = 0; i < expression.length; i++) {
-                const child = expression[i];
-                if (child instanceof SymbolNode) {
-                    // Per amsopn package,
-                    // change minus to hyphen and \ast to asterisk
-                    child.text = child.text.replace(/\u2212/, "-")
-                        .replace(/\u2217/, "*");
-                }
+// NOTE: Unlike most `htmlBuilder`s, this one handles not only
+// "operatorname", but also  "supsub" since \operatorname* can
+// affect super/subscripting.
+export const htmlBuilder: HtmlBuilderSupSub<"operatorname"> = (grp, options) => {
+    // Operators are handled in the TeXbook pg. 443-444, rule 13(a).
+    let supGroup;
+    let subGroup;
+    let hasLimits = false;
+    let group: ParseNode<"operatorname">;
+    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 = grp.sup;
+        subGroup = grp.sub;
+        group = assertNodeType(grp.base, "operatorname");
+        hasLimits = true;
+    } else {
+        group = assertNodeType(grp, "operatorname");
+    }
+
+    let base;
+    if (group.body.length > 0) {
+        const body = group.body.map(child => {
+            // $FlowFixMe: Check if the node has a string `text` property.
+            const childText = child.text;
+            if (typeof childText === "string") {
+                return {
+                    type: "textord",
+                    mode: child.mode,
+                    text: childText,
+                };
+            } else {
+                return child;
             }
-            return buildCommon.makeSpan(["mop"], expression, options);
-        } else {
-            return buildCommon.makeSpan(["mop"], [], options);
-        }
-    },
+        });
 
-    mathmlBuilder: (group, options) => {
-        // The steps taken here are similar to the html version.
-        let expression = mml.buildExpression(
-            group.body, options.withFont("mathrm"));
+        // Consolidate function names into symbol characters.
+        const expression = html.buildExpression(
+            body, options.withFont("mathrm"), true);
 
-        // Is expression a string or has it something like a fraction?
-        let isAllString = true;  // default
         for (let i = 0; i < expression.length; i++) {
-            const node = expression[i];
-            if (node instanceof mathMLTree.SpaceNode) {
-                // Do nothing
-            } else if (node instanceof mathMLTree.MathNode) {
-                switch (node.type) {
-                    case "mi":
-                    case "mn":
-                    case "ms":
-                    case "mspace":
-                    case "mtext":
-                        break;  // Do nothing yet.
-                    case "mo": {
-                        const child = node.children[0];
-                        if (node.children.length === 1 &&
-                            child instanceof mathMLTree.TextNode) {
-                            child.text =
-                                child.text.replace(/\u2212/, "-")
-                                    .replace(/\u2217/, "*");
-                        } else {
-                            isAllString = false;
-                        }
-                        break;
-                    }
-                    default:
+            const child = expression[i];
+            if (child instanceof SymbolNode) {
+                // Per amsopn package,
+                // change minus to hyphen and \ast to asterisk
+                child.text = child.text.replace(/\u2212/, "-")
+                    .replace(/\u2217/, "*");
+            }
+        }
+        base = buildCommon.makeSpan(["mop"], expression, options);
+    } else {
+        base = buildCommon.makeSpan(["mop"], [], options);
+    }
+
+    if (hasLimits) {
+        return assembleSupSub(base, supGroup, subGroup, options,
+            options.style, 0, 0);
+
+    } else {
+        return base;
+    }
+};
+
+const mathmlBuilder: MathMLBuilder<"operatorname"> = (group, options) => {
+    // The steps taken here are similar to the html version.
+    let expression = mml.buildExpression(
+        group.body, options.withFont("mathrm"));
+
+    // Is expression a string or has it something like a fraction?
+    let isAllString = true;  // default
+    for (let i = 0; i < expression.length; i++) {
+        const node = expression[i];
+        if (node instanceof mathMLTree.SpaceNode) {
+            // Do nothing
+        } else if (node instanceof mathMLTree.MathNode) {
+            switch (node.type) {
+                case "mi":
+                case "mn":
+                case "ms":
+                case "mspace":
+                case "mtext":
+                    break;  // Do nothing yet.
+                case "mo": {
+                    const child = node.children[0];
+                    if (node.children.length === 1 &&
+                        child instanceof mathMLTree.TextNode) {
+                        child.text =
+                            child.text.replace(/\u2212/, "-")
+                                .replace(/\u2217/, "*");
+                    } else {
                         isAllString = false;
+                    }
+                    break;
                 }
-            } else {
-                isAllString = false;
+                default:
+                    isAllString = false;
             }
+        } else {
+            isAllString = false;
         }
+    }
 
-        if (isAllString) {
-            // Write a single TextNode instead of multiple nested tags.
-            const word = expression.map(node => node.toText()).join("");
-            expression = [new mathMLTree.TextNode(word)];
-        }
+    if (isAllString) {
+        // Write a single TextNode instead of multiple nested tags.
+        const word = expression.map(node => node.toText()).join("");
+        expression = [new mathMLTree.TextNode(word)];
+    }
 
-        const identifier = new mathMLTree.MathNode("mi", expression);
-        identifier.setAttribute("mathvariant", "normal");
+    const identifier = new mathMLTree.MathNode("mi", expression);
+    identifier.setAttribute("mathvariant", "normal");
 
-        // \u2061 is the same as &ApplyFunction;
-        // ref: https://www.w3schools.com/charsets/ref_html_entities_a.asp
-        const operator = new mathMLTree.MathNode("mo",
-            [mml.makeText("\u2061", "text")]);
+    // \u2061 is the same as &ApplyFunction;
+    // ref: https://www.w3schools.com/charsets/ref_html_entities_a.asp
+    const operator = new mathMLTree.MathNode("mo",
+        [mml.makeText("\u2061", "text")]);
 
+    if (group.parentIsSupSub) {
+        return new mathMLTree.MathNode("mo", [identifier, operator]);
+    } else {
         return mathMLTree.newDocumentFragment([identifier, operator]);
+    }
+};
+
+// \operatorname
+// amsopn.dtx: \mathop{#1\kern\z@\operator@font#3}\newmcodes@
+defineFunction({
+    type: "operatorname",
+    names: ["\\operatorname", "\\operatorname*"],
+    props: {
+        numArgs: 1,
     },
+    handler: ({parser, funcName}, args) => {
+        const body = args[0];
+        return {
+            type: "operatorname",
+            mode: parser.mode,
+            body: ordargument(body),
+            alwaysHandleSupSub: (funcName === "\\operatorname*"),
+            limits: false,
+            parentIsSupSub: false,
+        };
+    },
+    htmlBuilder,
+    mathmlBuilder,
 });
+

package/src/functions/ordgroup.js

@@ -16,7 +16,7 @@ defineFunctionBuilders({
             ["mord"], html.buildExpression(group.body, options, true), options);
     },
     mathmlBuilder(group, options) {
-        return mml.buildExpressionRow(group.body, options);
+        return mml.buildExpressionRow(group.body, options, true);
     },
 });
 

package/src/functions/overline.js

@@ -31,13 +31,14 @@ defineFunction({
         const line = buildCommon.makeLineSpan("overline-line", options);
 
         // Generate the vlist, with the appropriate kerns
+        const defaultRuleThickness = options.fontMetrics().defaultRuleThickness;
         const vlist = buildCommon.makeVList({
             positionType: "firstBaseline",
             children: [
                 {type: "elem", elem: innerGroup},
-                {type: "kern", size: 3 * line.height},
+                {type: "kern", size: 3 * defaultRuleThickness},
                 {type: "elem", elem: line},
-                {type: "kern", size: line.height},
+                {type: "kern", size: defaultRuleThickness},
             ],
         }, options);
 

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/raisebox.js

@@ -1,12 +1,12 @@
 // @flow
-import defineFunction, {ordargument} from "../defineFunction";
+import defineFunction from "../defineFunction";
 import buildCommon from "../buildCommon";
 import mathMLTree from "../mathMLTree";
 import {assertNodeType} from "../parseNode";
 import {calculateSize} from "../units";
 
+import * as html from "../buildHTML";
 import * as mml from "../buildMathML";
-import * as sizing from "./sizing";
 
 // Box manipulation
 defineFunction({
@@ -14,7 +14,7 @@ defineFunction({
     names: ["\\raisebox"],
     props: {
         numArgs: 2,
-        argTypes: ["size", "text"],
+        argTypes: ["size", "hbox"],
         allowedInText: true,
     },
     handler({parser}, args) {
@@ -28,19 +28,7 @@ defineFunction({
         };
     },
     htmlBuilder(group, options) {
-        const text = {
-            type: "text",
-            mode: group.mode,
-            body: ordargument(group.body),
-            font: "mathrm", // simulate \textrm
-        };
-        const sizedText = {
-            type: "sizing",
-            mode: group.mode,
-            body: [text],
-            size: 6,                // simulate \normalsize
-        };
-        const body = sizing.htmlBuilder(sizedText, options);
+        const body = html.buildGroup(group.body, options);
         const dy = calculateSize(group.dy, options);
         return buildCommon.makeVList({
             positionType: "shift",

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/styling.js

@@ -48,15 +48,6 @@ defineFunction({
     },
     mathmlBuilder(group, options) {
         // Figure out what style we're changing to.
-        // TODO(kevinb): dedupe this with buildHTML.js
-        // This will be easier of handling of styling nodes is in the same file.
-        const styleMap = {
-            "display": Style.DISPLAY,
-            "text": Style.TEXT,
-            "script": Style.SCRIPT,
-            "scriptscript": Style.SCRIPTSCRIPT,
-        };
-
         const newStyle = styleMap[group.style];
         const newOptions = options.havingStyle(newStyle);
 

package/src/functions/supsub.js

@@ -5,13 +5,13 @@ import {SymbolNode} from "../domTree";
 import mathMLTree from "../mathMLTree";
 import utils from "../utils";
 import Style from "../Style";
-import {checkNodeType} from "../parseNode";
 
 import * as html from "../buildHTML";
 import * as mml from "../buildMathML";
 import * as accent from "./accent";
 import * as horizBrace from "./horizBrace";
 import * as op from "./op";
+import * as operatorname from "./operatorname";
 
 import type Options from "../Options";
 import type {ParseNode} from "../parseNode";
@@ -39,6 +39,10 @@ const htmlBuilderDelegate = function(
             (options.style.size === Style.DISPLAY.size ||
             base.alwaysHandleSupSub);
         return delegate ? op.htmlBuilder : null;
+    } else if (base.type === "operatorname") {
+        const delegate = base.alwaysHandleSupSub &&
+            (options.style.size === Style.DISPLAY.size || base.limits);
+        return delegate ? operatorname.htmlBuilder : null;
     } else if (base.type === "accent") {
         return utils.isCharacterBox(base.base) ? accent.htmlBuilder : null;
     } else if (base.type === "horizBrace") {
@@ -192,15 +196,19 @@ defineFunctionBuilders({
         let isOver;
         let isSup;
 
-        const horizBrace = checkNodeType(group.base, "horizBrace");
-        if (horizBrace) {
+        if (group.base && group.base.type === "horizBrace") {
             isSup = !!group.sup;
-            if (isSup === horizBrace.isOver) {
+            if (isSup === group.base.isOver) {
                 isBrace = true;
-                isOver = horizBrace.isOver;
+                isOver = group.base.isOver;
             }
         }
 
+        if (group.base &&
+            (group.base.type === "op" || group.base.type === "operatorname")) {
+            group.base.parentIsSupSub = true;
+        }
+
         const children = [mml.buildGroup(group.base, options)];
 
         if (group.sub) {
@@ -217,7 +225,11 @@ 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 if (base && base.type === "operatorname" &&
+                base.alwaysHandleSupSub &&
+                (base.limits || options.style === Style.DISPLAY)) {
                 nodeType = "mover";
             } else {
                 nodeType = "msup";
@@ -225,7 +237,11 @@ 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 if (base && base.type === "operatorname" &&
+                base.alwaysHandleSupSub &&
+                (base.limits || options.style === Style.DISPLAY)) {
                 nodeType = "munder";
             } else {
                 nodeType = "msub";
@@ -235,6 +251,10 @@ defineFunctionBuilders({
             if (base && base.type === "op" && base.limits &&
                 options.style === Style.DISPLAY) {
                 nodeType = "munderover";
+            } else if (base && base.type === "operatorname" &&
+                base.alwaysHandleSupSub &&
+                (options.style === Style.DISPLAY || base.limits)) {
+                nodeType = "munderover";
             } else {
                 nodeType = "msubsup";
             }

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,16 +41,15 @@ defineFunction({
         // Font families
         "\\text", "\\textrm", "\\textsf", "\\texttt", "\\textnormal",
         // Font weights
-        "\\textbf",
+        "\\textbf", "\\textmd",
         // Font Shapes
-        "\\textit",
+        "\\textit", "\\textup",
     ],
     props: {
         numArgs: 1,
         argTypes: ["text"],
         greediness: 2,
         allowedInText: true,
-        consumeMode: "text",
     },
     handler({parser, funcName}, args) {
         const body = args[0];

package/src/functions/underline.js

@@ -29,13 +29,14 @@ defineFunction({
         const line = buildCommon.makeLineSpan("underline-line", options);
 
         // Generate the vlist, with the appropriate kerns
+        const defaultRuleThickness = options.fontMetrics().defaultRuleThickness;
         const vlist = buildCommon.makeVList({
             positionType: "top",
             positionData: innerGroup.height,
             children: [
-                {type: "kern", size: line.height},
+                {type: "kern", size: defaultRuleThickness},
                 {type: "elem", elem: line},
-                {type: "kern", size: 3 * line.height},
+                {type: "kern", size: 3 * defaultRuleThickness},
                 {type: "elem", elem: innerGroup},
             ],
         }, options);