katex 0.10.1 → 0.12.0

package/src/defineFunction.js

@@ -1,10 +1,9 @@
 // @flow
-import {checkNodeType} from "./parseNode";
-
 import type Parser from "./Parser";
-import type {ParseNode, AnyParseNode, NodeType} from "./parseNode";
+import type {ParseNode, AnyParseNode, NodeType, UnsupportedCmdParseNode}
+    from "./parseNode";
 import type Options from "./Options";
-import type {ArgType, BreakToken, Mode} from "./types";
+import type {ArgType, BreakToken} from "./types";
 import type {HtmlDomNode} from "./domTree";
 import type {Token} from "./Token";
 import type {MathDomNode} from "./mathMLTree";
@@ -21,7 +20,9 @@ export type FunctionHandler<NODETYPE: NodeType> = (
     context: FunctionContext,
     args: AnyParseNode[],
     optArgs: (?AnyParseNode)[],
-) => ParseNode<NODETYPE>;
+) => UnsupportedCmdParseNode | ParseNode<NODETYPE>;
+// Note: reverse the order of the return type union will cause a flow error.
+// See https://github.com/facebook/flow/issues/3663.
 
 export type HtmlBuilder<NODETYPE> = (ParseNode<NODETYPE>, Options) => HtmlDomNode;
 export type MathMLBuilder<NODETYPE> = (
@@ -82,14 +83,6 @@ export type FunctionPropSpec = {
 
     // Must be true if the function is an infix operator.
     infix?: boolean,
-
-    // Switch to the specified mode while consuming the command token.
-    // This is useful for commands that switch between math and text mode,
-    // for making sure that a switch happens early enough.  Note that the
-    // mode is switched immediately back to its original value after consuming
-    // the command token, so that the argument parsing and/or function handler
-    // can easily access the old mode while doing their own mode switching.
-    consumeMode?: ?Mode,
 };
 
 type FunctionDefSpec<NODETYPE: NodeType> = {|
@@ -135,7 +128,6 @@ export type FunctionSpec<NODETYPE: NodeType> = {|
     allowedInMath: boolean,
     numOptionalArgs: number,
     infix: boolean,
-    consumeMode: ?Mode,
 
     // FLOW TYPE NOTES: Doing either one of the following two
     //
@@ -176,7 +168,6 @@ export const _mathmlGroupBuilders: {[string]: MathMLBuilder<*>} = {};
 
 export default function defineFunction<NODETYPE: NodeType>({
     type,
-    nodeType,
     names,
     props,
     handler,
@@ -195,14 +186,9 @@ export default function defineFunction<NODETYPE: NodeType>({
             : props.allowedInMath,
         numOptionalArgs: props.numOptionalArgs || 0,
         infix: !!props.infix,
-        consumeMode: props.consumeMode,
         handler: handler,
     };
     for (let i = 0; i < names.length; ++i) {
-        // TODO: The value type of _functions should be a type union of all
-        // possible `FunctionSpec<>` possibilities instead of `FunctionSpec<*>`,
-        // which is an existential type.
-        // $FlowFixMe
         _functions[names[i]] = data;
     }
     if (type) {
@@ -240,6 +226,5 @@ export function defineFunctionBuilders<NODETYPE: NodeType>({
 // Since the corresponding buildHTML/buildMathML function expects a
 // list of elements, we normalize for different kinds of arguments
 export const ordargument = function(arg: AnyParseNode): AnyParseNode[] {
-    const node = checkNodeType(arg, "ordgroup");
-    return node ? node.body : [arg];
+    return arg.type === "ordgroup" ? arg.body : [arg];
 };

package/src/delimiter.js

@@ -25,6 +25,7 @@ import ParseError from "./ParseError";
 import Style from "./Style";
 
 import {PathNode, SvgNode, SymbolNode} from "./domTree";
+import {sqrtPath} from "./svgGeometry";
 import buildCommon from "./buildCommon";
 import {getCharacterMetrics} from "./fontMetrics";
 import symbols from "./symbols";
@@ -177,6 +178,9 @@ const makeInner = function(
     return {type: "elem", elem: inner};
 };
 
+// Helper for makeStackedDelim
+const lap = {type: "kern", size: -0.005};
+
 /**
  * Make a stacked delimiter out of a given delimiter, with the total height at
  * least `heightTotal`. This routine is mentioned on page 442 of the TeXbook.
@@ -309,8 +313,8 @@ const makeStackedDelim = function(
     const minHeight = topHeightTotal + bottomHeightTotal + middleHeightTotal;
 
     // Compute the number of copies of the repeat symbol we will need
-    const repeatCount = Math.ceil(
-        (heightTotal - minHeight) / (middleFactor * repeatHeightTotal));
+    const repeatCount = Math.max(0, Math.ceil(
+        (heightTotal - minHeight) / (middleFactor * repeatHeightTotal)));
 
     // Compute the total height of the delimiter including all the symbols
     const realHeightTotal =
@@ -327,6 +331,15 @@ const makeStackedDelim = function(
     // Calculate the depth
     const depth = realHeightTotal / 2 - axisHeight;
 
+    // This function differs from the TeX procedure in one way.
+    // We shift each repeat element downwards by 0.005em, to prevent a gap
+    // due to browser floating point rounding error.
+    // Then, at the last element-to element joint, we add one extra repeat
+    // element to cover the gap created by the shifts.
+    // Find the shift needed to align the upper end of the extra element at a point
+    // 0.005em above the lower end of the top element.
+    const shiftOfExtraElement = (repeatCount + 1) * 0.005 - repeatHeightTotal;
+
     // Now, we start building the pieces that will go into the vlist
 
     // Keep a list of the inner pieces
@@ -338,20 +351,45 @@ const makeStackedDelim = function(
     if (middle === null) {
         // Add that many symbols
         for (let i = 0; i < repeatCount; i++) {
+            inners.push(lap); // overlap
             inners.push(makeInner(repeat, font, mode));
         }
     } else {
         // When there is a middle bit, we need the middle part and two repeated
         // sections
         for (let i = 0; i < repeatCount; i++) {
+            inners.push(lap);
             inners.push(makeInner(repeat, font, mode));
         }
+        // Insert one extra repeat element.
+        inners.push({type: "kern", size: shiftOfExtraElement});
+        inners.push(makeInner(repeat, font, mode));
+        inners.push(lap);
+        // Now insert the middle of the brace.
         inners.push(makeInner(middle, font, mode));
         for (let i = 0; i < repeatCount; i++) {
+            inners.push(lap);
             inners.push(makeInner(repeat, font, mode));
         }
     }
 
+    // To cover the gap create by the overlaps, insert one more repeat element,
+    // at a position that juts 0.005 above the bottom of the top element.
+    if ((repeat === "\u239c" || repeat === "\u239f") && repeatCount === 0) {
+        // Parentheses need a short repeat element in order to avoid an overrun.
+        // We'll make a 0.3em tall element from a SVG.
+        const overlap = buildCommon.svgData.leftParenInner[2] / 2;
+        inners.push({type: "kern", size: -overlap});
+        const pathName = repeat === "\u239c" ? "leftParenInner" : "rightParenInner";
+        const innerSpan = buildCommon.staticSvg(pathName, options);
+        inners.push({type: "elem", elem: innerSpan});
+        inners.push({type: "kern", size: -overlap});
+    } else {
+        inners.push({type: "kern", size: shiftOfExtraElement});
+        inners.push(makeInner(repeat, font, mode));
+        inners.push(lap);
+    }
+
     // Add the top symbol
     inners.push(makeInner(top, font, mode));
 
@@ -377,21 +415,11 @@ const sqrtSvg = function(
     sqrtName: string,
     height: number,
     viewBoxHeight: number,
+    extraViniculum: number,
     options: Options,
 ): SvgSpan {
-    let alternate;
-    if (sqrtName === "sqrtTall") {
-        // sqrtTall is from glyph U23B7 in the font KaTeX_Size4-Regular
-        // One path edge has a variable length. It runs from the viniculumn
-        // to a point near (14 units) the bottom of the surd. The viniculum
-        // is 40 units thick. So the length of the line in question is:
-        const vertSegment = viewBoxHeight - 54 - vbPad;
-        alternate = `M702 ${vbPad}H400000v40H742v${vertSegment}l-4 4-4 4c-.667.7
--2 1.5-4 2.5s-4.167 1.833-6.5 2.5-5.5 1-9.5 1h-12l-28-84c-16.667-52-96.667
--294.333-240-727l-212 -643 -85 170c-4-3.333-8.333-7.667-13 -13l-13-13l77-155
- 77-156c66 199.333 139 419.667 219 661 l218 661zM702 ${vbPad}H400000v40H742z`;
-    }
-    const pathNode = new PathNode(sqrtName, alternate);
+    const path = sqrtPath(sqrtName, extraViniculum, viewBoxHeight);
+    const pathNode = new PathNode(sqrtName, path);
 
     const svg =  new SvgNode([pathNode], {
         // Note: 1000:1 ratio of viewBox to document em width.
@@ -425,6 +453,11 @@ const makeSqrtImage = function(
 
     let sizeMultiplier = newOptions.sizeMultiplier;  // default
 
+    // The standard sqrt SVGs each have a 0.04em thick viniculum.
+    // If Settings.minRuleThickness is larger than that, we add extraViniculum.
+    const extraViniculum = Math.max(0,
+        options.minRuleThickness - options.fontMetrics().sqrtRuleThickness);
+
     // Create a span containing an SVG image of a sqrt symbol.
     let span;
     let spanHeight = 0;
@@ -440,34 +473,39 @@ const makeSqrtImage = function(
 
     if (delim.type === "small") {
         // Get an SVG that is derived from glyph U+221A in font KaTeX-Main.
-        viewBoxHeight = 1000 + vbPad;  // 1000 unit glyph height.
+        // 1000 unit normal glyph height.
+        viewBoxHeight = 1000 + 1000 * extraViniculum + vbPad;
         if (height < 1.0) {
             sizeMultiplier = 1.0;   // mimic a \textfont radical
         } else if (height < 1.4) {
             sizeMultiplier = 0.7;   // mimic a \scriptfont radical
         }
-        spanHeight = (1.0 + emPad) / sizeMultiplier;
-        texHeight = 1.00 / sizeMultiplier;
-        span = sqrtSvg("sqrtMain", spanHeight, viewBoxHeight, options);
+        spanHeight = (1.0 + extraViniculum + emPad) / sizeMultiplier;
+        texHeight = (1.00 + extraViniculum) / sizeMultiplier;
+        span = sqrtSvg("sqrtMain", spanHeight, viewBoxHeight, extraViniculum,
+            options);
         span.style.minWidth = "0.853em";
         advanceWidth = 0.833 / sizeMultiplier;  // from the font.
 
     } else if (delim.type === "large") {
         // These SVGs come from fonts: KaTeX_Size1, _Size2, etc.
         viewBoxHeight = (1000 + vbPad) * sizeToMaxHeight[delim.size];
-        texHeight = sizeToMaxHeight[delim.size] / sizeMultiplier;
-        spanHeight = (sizeToMaxHeight[delim.size] + emPad) / sizeMultiplier;
-        span = sqrtSvg("sqrtSize" + delim.size, spanHeight, viewBoxHeight, options);
+        texHeight = (sizeToMaxHeight[delim.size] + extraViniculum) / sizeMultiplier;
+        spanHeight = (sizeToMaxHeight[delim.size] + extraViniculum + emPad)
+            / sizeMultiplier;
+        span = sqrtSvg("sqrtSize" + delim.size, spanHeight, viewBoxHeight,
+            extraViniculum, options);
         span.style.minWidth = "1.02em";
         advanceWidth = 1.0 / sizeMultiplier; // 1.0 from the font.
 
     } else {
         // Tall sqrt. In TeX, this would be stacked using multiple glyphs.
         // We'll use a single SVG to accomplish the same thing.
-        spanHeight = height + emPad;
-        texHeight = height;
-        viewBoxHeight = Math.floor(1000 * height) + vbPad;
-        span = sqrtSvg("sqrtTall", spanHeight, viewBoxHeight, options);
+        spanHeight = height + extraViniculum + emPad;
+        texHeight = height + extraViniculum;
+        viewBoxHeight = Math.floor(1000 * height + extraViniculum) + vbPad;
+        span = sqrtSvg("sqrtTall", spanHeight, viewBoxHeight, extraViniculum,
+            options);
         span.style.minWidth = "0.742em";
         advanceWidth = 1.056;
     }
@@ -482,7 +520,8 @@ const makeSqrtImage = function(
         // This actually should depend on the chosen font -- e.g. \boldmath
         // should use the thicker surd symbols from e.g. KaTeX_Main-Bold, and
         // have thicker rules.
-        ruleWidth: options.fontMetrics().sqrtRuleThickness * sizeMultiplier,
+        ruleWidth: (options.fontMetrics().sqrtRuleThickness + extraViniculum)
+            * sizeMultiplier,
     };
 };
 

package/src/domTree.js

@@ -13,7 +13,7 @@
  */
 import {scriptFromCodepoint} from "./unicodeScripts";
 import utils from "./utils";
-import svgGeometry from "./svgGeometry";
+import {path} from "./svgGeometry";
 import type Options from "./Options";
 import {DocumentFragment} from "./tree";
 
@@ -136,12 +136,16 @@ export type CssStyle = $Shape<{
     backgroundColor: string,
     borderBottomWidth: string,
     borderColor: string,
+    borderRightStyle: string,
     borderRightWidth: string,
     borderTopWidth: string,
+    borderStyle: string;
+    borderWidth: string,
     bottom: string,
     color: string,
     height: string,
     left: string,
+    margin: string,
     marginLeft: string,
     marginRight: string,
     marginTop: string,
@@ -264,6 +268,69 @@ export class Anchor implements HtmlDomNode {
     }
 }
 
+/**
+ * This node represents an image embed (<img>) element.
+ */
+export class Img implements VirtualNode {
+    src: string;
+    alt: string;
+    classes: string[];
+    height: number;
+    depth: number;
+    maxFontSize: number;
+    style: CssStyle;
+
+    constructor(
+        src: string,
+        alt: string,
+        style: CssStyle,
+    ) {
+        this.alt = alt;
+        this.src = src;
+        this.classes = ["mord"];
+        this.style = style;
+    }
+
+    hasClass(className: string): boolean {
+        return utils.contains(this.classes, className);
+    }
+
+    toNode(): Node {
+        const node = document.createElement("img");
+        node.src = this.src;
+        node.alt = this.alt;
+        node.className = "mord";
+
+        // Apply inline styles
+        for (const style in this.style) {
+            if (this.style.hasOwnProperty(style)) {
+                // $FlowFixMe
+                node.style[style] = this.style[style];
+            }
+        }
+
+        return node;
+    }
+
+    toMarkup(): string {
+        let markup = `<img  src='${this.src} 'alt='${this.alt}' `;
+
+        // Add the styles, after hyphenation
+        let styles = "";
+        for (const style in this.style) {
+            if (this.style.hasOwnProperty(style)) {
+                styles += `${utils.hyphenate(style)}:${this.style[style]};`;
+            }
+        }
+        if (styles) {
+            markup += ` style="${utils.escape(styles)}"`;
+        }
+
+        markup += "'/>";
+        return markup;
+    }
+}
+
 const iCombinations = {
     'î': '\u0131\u0302',
     'ï': '\u0131\u0308',
@@ -466,7 +533,7 @@ export class PathNode implements VirtualNode {
 
     constructor(pathName: string, alternate?: string) {
         this.pathName = pathName;
-        this.alternate = alternate;  // Used only for tall \sqrt
+        this.alternate = alternate;  // Used only for \sqrt
     }
 
     toNode(): Node {
@@ -476,7 +543,7 @@ export class PathNode implements VirtualNode {
         if (this.alternate) {
             node.setAttribute("d", this.alternate);
         } else {
-            node.setAttribute("d", svgGeometry.path[this.pathName]);
+            node.setAttribute("d", path[this.pathName]);
         }
 
         return node;
@@ -486,7 +553,7 @@ export class PathNode implements VirtualNode {
         if (this.alternate) {
             return `<path d='${this.alternate}'/>`;
         } else {
-            return `<path d='${svgGeometry.path[this.pathName]}'/>`;
+            return `<path d='${path[this.pathName]}'/>`;
         }
     }
 }