www

commit b29b8c40ea48aebc3e85d3b879968db3dfe4c2cd
parent af8c1307f7b0a1e6f07a33c006359dc94adff3c5
Author: Ben Alpert <ben@benalpert.com>
Date:   Sun, 26 Apr 2015 17:04:11 -0700

[auto-render] Don't stop parsing when one expression fails

Summary: Fixes #223.

Test Plan: Opened http://127.0.0.1:7936/contrib/auto-render/, saw `$\unsupported$` in page and error in console, but other expressions rendered. Made test.

Reviewers: emily

Reviewed By: emily

Differential Revision: https://phabricator.khanacademy.org/D17543

Diffstat:
M
contrib/auto-render/auto-render-spec.js
 | 
52
++++++++++++++++++++++++++++++++++------------------
M
contrib/auto-render/auto-render.js
 | 
19
++++++++++++++++---
M
contrib/auto-render/index.html
 | 
4
++--
M
contrib/auto-render/splitAtDelimiters.js
 | 
3
+++

4 files changed, 55 insertions(+), 23 deletions(-)
diff --git a/contrib/auto-render/auto-render-spec.js b/contrib/auto-render/auto-render-spec.js
@@ -91,7 +91,8 @@ describe("A delimiter splitter", function() {
             "(", ")",
             [
                 {type: "text", data: "hello "},
-                {type: "math", data: " world ", display: false},
+                {type: "math", data: " world ",
+                    rawData: "( world )", display: false},
                 {type: "text", data: " boo"}
             ]);
     });
@@ -101,7 +102,8 @@ describe("A delimiter splitter", function() {
             "[[", "]]",
             [
                 {type: "text", data: "hello "},
-                {type: "math", data: " world ", display: false},
+                {type: "math", data: " world ",
+                    rawData: "[[ world ]]", display: false},
                 {type: "text", data: " boo"}
             ]);
     });
@@ -111,9 +113,11 @@ describe("A delimiter splitter", function() {
             "(", ")",
             [
                 {type: "text", data: "hello "},
-                {type: "math", data: " world ", display: false},
+                {type: "math", data: " world ",
+                    rawData: "( world )", display: false},
                 {type: "text", data: " boo "},
-                {type: "math", data: " more ", display: false},
+                {type: "math", data: " more ",
+                    rawData: "( more )", display: false},
                 {type: "text", data: " stuff"}
             ]);
     });
@@ -123,7 +127,8 @@ describe("A delimiter splitter", function() {
             "(", ")",
             [
                 {type: "text", data: "hello "},
-                {type: "math", data: " world ", display: false},
+                {type: "math", data: " world ",
+                    rawData: "( world )", display: false},
                 {type: "text", data: " boo "},
                 {type: "text", data: "( left"}
             ]);
@@ -134,7 +139,8 @@ describe("A delimiter splitter", function() {
             "(", ")",
             [
                 {type: "text", data: "hello "},
-                {type: "math", data: " world { ) } ", display: false},
+                {type: "math", data: " world { ) } ",
+                    rawData: "( world { ) } )", display: false},
                 {type: "text", data: " boo"}
             ]);
 
@@ -142,7 +148,8 @@ describe("A delimiter splitter", function() {
             "(", ")",
             [
                 {type: "text", data: "hello "},
-                {type: "math", data: " world { { } ) } ", display: false},
+                {type: "math", data: " world { { } ) } ",
+                    rawData: "( world { { } ) } )", display: false},
                 {type: "text", data: " boo"}
             ]);
     });
@@ -152,7 +159,8 @@ describe("A delimiter splitter", function() {
             "(", ")",
             [
                 {type: "text", data: "hello "},
-                {type: "math", data: " world \\) ", display: false},
+                {type: "math", data: " world \\) ",
+                    rawData: "( world \\) )", display: false},
                 {type: "text", data: " boo"}
             ]);
 
@@ -161,7 +169,8 @@ describe("A delimiter splitter", function() {
             "(", ")",
             [
                 {type: "text", data: "hello \\( "},
-                {type: "math", data: " world ", display: false},
+                {type: "math", data: " world ",
+                    rawData: "( world )", display: false},
                 {type: "text", data: " boo"}
             ]);
         */
@@ -172,7 +181,8 @@ describe("A delimiter splitter", function() {
             "$", "$",
             [
                 {type: "text", data: "hello "},
-                {type: "math", data: " world ", display: false},
+                {type: "math", data: " world ",
+                    rawData: "$ world $", display: false},
                 {type: "text", data: " boo"}
             ]);
     });
@@ -183,7 +193,8 @@ describe("A delimiter splitter", function() {
         expect(splitAtDelimiters(startData, "(", ")", true)).toEqual(
             [
                 {type: "text", data: "hello "},
-                {type: "math", data: " world ", display: true},
+                {type: "math", data: " world ",
+                    rawData: "( world )", display: true},
                 {type: "text", data: " boo"}
             ]);
     });
@@ -191,18 +202,20 @@ describe("A delimiter splitter", function() {
     it("works with more than one start datum", function() {
         var startData = [
             {type: "text", data: "hello ( world ) boo"},
-            {type: "math", data: "math", display: true},
+            {type: "math", data: "math", rawData: "(math)", display: true},
             {type: "text", data: "hello ( world ) boo"}
         ];
 
         expect(splitAtDelimiters(startData, "(", ")", false)).toEqual(
             [
                 {type: "text", data: "hello "},
-                {type: "math", data: " world ", display: false},
+                {type: "math", data: " world ",
+                    rawData: "( world )", display: false},
                 {type: "text", data: " boo"},
-                {type: "math", data: "math", display: true},
+                {type: "math", data: "math", rawData: "(math)", display: true},
                 {type: "text", data: "hello "},
-                {type: "math", data: " world ", display: false},
+                {type: "math", data: " world ",
+                    rawData: "( world )", display: false},
                 {type: "text", data: " boo"}
             ]);
     });
@@ -210,15 +223,18 @@ describe("A delimiter splitter", function() {
     it("doesn't do splitting inside of math nodes", function() {
         var startData = [
             {type: "text", data: "hello ( world ) boo"},
-            {type: "math", data: "hello ( world ) boo", display: true}
+            {type: "math", data: "hello ( world ) boo",
+                rawData: "(hello ( world ) boo)", display: true}
         ];
 
         expect(splitAtDelimiters(startData, "(", ")", false)).toEqual(
             [
                 {type: "text", data: "hello "},
-                {type: "math", data: " world ", display: false},
+                {type: "math", data: " world ",
+                    rawData: "( world )", display: false},
                 {type: "text", data: " boo"},
-                {type: "math", data: "hello ( world ) boo", display: true}
+                {type: "math", data: "hello ( world ) boo",
+                    rawData: "(hello ( world ) boo)", display: true}
             ]);
     });
 });
diff --git a/contrib/auto-render/auto-render.js b/contrib/auto-render/auto-render.js
@@ -24,9 +24,22 @@ var renderMathInText = function(text, delimiters) {
         } else {
             var span = document.createElement("span");
             var math = data[i].data;
-            katex.render(math, span, {
-                displayMode: data[i].display
-            });
+            try {
+                katex.render(math, span, {
+                    displayMode: data[i].display
+                });
+            } catch (e) {
+                if (!(e instanceof katex.ParseError)) {
+                    throw e;
+                }
+                console.error(
+                    "KaTeX auto-render: Failed to parse `" + data[i].data +
+                    "` with ",
+                    e
+                );
+                fragment.appendChild(document.createTextNode(data[i].rawData));
+                continue;
+            }
             fragment.appendChild(span);
         }
     }
diff --git a/contrib/auto-render/index.html b/contrib/auto-render/index.html
@@ -10,7 +10,7 @@
       body {
           margin: 0px;
           padding: 0px;
-          font-size: 72px;
+          font-size: 36px;
       }
 
       #test > .blue {
@@ -20,7 +20,7 @@
   </head>
   <body>
     <div id="test">
-      This is some text $math \frac12$ other text
+      This is some text $math \frac12$ other text $\unsupported$
       <span class="blue">
         Other node \[ displaymath \frac{1}{2} \] blah $$ \int_2^3 $$
       </span>
diff --git a/contrib/auto-render/splitAtDelimiters.js b/contrib/auto-render/splitAtDelimiters.js
@@ -74,6 +74,9 @@ var splitAtDelimiters = function(startData, leftDelim, rightDelim, display) {
                         data: text.slice(
                             currIndex + leftDelim.length,
                             nextIndex),
+                        rawData: text.slice(
+                            currIndex,
+                            nextIndex + rightDelim.length),
                         display: display
                     });