Merge pull request Khan#66 from Khan/update-katex

Update the <TeX> component to the latest upstream KaTeX

Author: David Flanagan

docs/js/katex.js

@@ -174,7 +174,7 @@ var typeHandlers = {
         buildRegion(a11yStrings, function(a11yStrings) {
             buildA11yStrings(tree.value.base, a11yStrings);
             a11yStrings.push("with");
-            buildA11yStrings(tree.value.accent, a11yStrings);
+            buildA11yStrings(tree.value.label, a11yStrings);
             a11yStrings.push("on top");
         });
     },
@@ -227,12 +227,19 @@ var typeHandlers = {
         });
     },
 
-    // inner
+    inner: function(tree, a11yStrings) {
+        buildA11yStrings(tree.value, a11yStrings);
+    },
 
     katex: function(tree, a11yStrings) {
         a11yStrings.push("KaTeX");
     },
 
+    kern: function(tree, a11yStrings) {
+        // No op: we don't attempt to present kerning information
+        // to the screen reader.
+    },
+
     leftright: function(tree, a11yStrings) {
         buildRegion(a11yStrings, function(a11yStrings) {
             buildString(tree.value.left, "open", a11yStrings);
@@ -241,7 +248,7 @@ var typeHandlers = {
         });
     },
 
-    llap: function(tree, a11yStrings) {
+    lap: function(tree, a11yStrings) {
         buildA11yStrings(tree.value.body, a11yStrings);
     },
 
@@ -277,6 +284,10 @@ var typeHandlers = {
         buildString(tree.value, "punct", a11yStrings);
     },
 
+    raisebox: function(tree, a11yStrings) {
+        buildA11yStrings(tree.value, a11yStrings);
+    },
+
     rel: function(tree, a11yStrings) {
         buildString(tree.value, "rel", a11yStrings);
     },
@@ -452,8 +463,13 @@ var flattenStrings = function(a11yStrings, results) {
 };
 
 var parseMath = function(text) {
-    // NOTE: `katex` is a global, should be included using require
-    return katex.__parse(text);
+    // NOTE: `katex` is a global. We assume it has been imported somehow.
+    //
+    // colorIsTextColor is an option added in KaTeX 0.9.0 for backward
+    // compatibility. It makes \color parse like \textcolor. We use it
+    // in the KA webapp, and need it here because the tests are written
+    // assuming it is set.
+    return katex.__parse(text, { colorIsTextColor: true });
 };
 
 var render = function(text, a11yNode) {

js/katex-a11y.js

@@ -79,6 +79,7 @@ const srOnly = {
 const TeX = React.createClass({
     propTypes: {
         children: React.PropTypes.node,
+        katexOptions: React.PropTypes.any,
         onClick: React.PropTypes.func,
         onRender: React.PropTypes.func,
         style: React.PropTypes.any,
@@ -88,6 +89,15 @@ const TeX = React.createClass({
 
     getDefaultProps: function() {
         return {
+            katexOptions: {
+                // There was a breaking change in the behavior of \color{}
+                // in KaTeX 0.8.0. KA content relies on the old behavior
+                // so we set this option to retain that old behavior even
+                // though it is not purely compatible with LaTeX.
+                // See https://github.com/Khan/KaTeX/blob/master/README.md
+                // for details on this option.
+                colorIsTextColor: true
+            },
             // Called after math is rendered or re-rendered
             onRender: function() {},
             onClick: null,
@@ -178,7 +188,8 @@ const TeX = React.createClass({
         let katexHtml = null;
         try {
             katexHtml = {
-                __html: katex.renderToString(this.props.children),
+                __html: katex.renderToString(this.props.children,
+                                             this.props.katexOptions),
             };
         } catch (e) {
             /* jshint -W103 */

js/tex.jsx

@@ -53,7 +53,7 @@
     },
     {
         "input": "\\KaTeX",
-        "output": "KaTeX"
+        "output": "K, A, T, E, X"
     },
     {
         "input": "ab\\llap{f}cd\\rlap{g}h",
@@ -151,4 +151,4 @@
         "input": "4 \\geq 3",
         "output": "4, is greater than or equal to, 3"
     }
-]
+]

test/katex-a11y-tex.json

@@ -32,6 +32,14 @@ describe("TeX", () => {
         assert(html.indexOf('q') === -1);
     });
 
+    it("handles \\color{} in the old mathjax-compatible way", () => {
+        const html = ReactDOMServer.renderToString(
+                <TeX>{"\\text{\\color{#f00} xyz}"}</TeX>
+        );
+        assert(html.indexOf(
+            '<span class="mord" style="color:#f00;">x</span>') !== -1);
+    });
+
     describe("MathJax", () => {
         beforeEach(function() {
             global.document = jsdom.jsdom();