Fix MathJax rendering

This PR deals with the following rendering issue:

* Multiple dollar signs in MathJax expression lead to mistaken MathJax rendering
  - Thread ID: 1a78652b351779b476903c9966ef2c455fc244f2
  - Test task URL: https://data-labeling-test.khanacademy.org/projects/314/data?tab=624&page=1&task=108725

* `/begin{}` and `\end{}` always trigger rendering dispite Marker not exists.  This lead to bad selection threads.
  - Thread ID: 032e483505cd43f2bee52184b4dbec57db559681
  - Test task URL: https://data-labeling-test.khanacademy.org/projects/314/data?tab=624&page=1&task=108659

This PR suppress that by adding `ignoreClass`, as well as removing unnecessary
`no display` tags which also simplifies the rendering.

Issue: https://khanacademy.atlassian.net/browse/DI-1514

Test Plan:

Open the above threads and confirm that the MathJax rendering behaves correctly.

Author: dat-boris

src/examples/rich_text_table/tasks.json

@@ -1,7 +1,7 @@
 [
     {
         "data": {
-            "text": "[[\"Asking question?<a href=\\\"javascript:alert('pwned')\\\">click</a>\", \"Answer! Look at some LaTex\\n\\n\\\\(\\\\dfrac{1}{2k - 6} = \\\\dfrac{1}{3}\\\\) and \\\\(\\\\dfrac{1.5}{2k - 6} = \\\\dfrac{1}{3}\\\\)\\n\\n\"], [\"Asking more question in LaTex?\\n\\n\\\\[\\n\\\\begin{array}{r}\\n  3.050 \\\\\\\\\\n- 0.338 \\\\\\\\\\n\\\\hline\\n\\\\end{array}\\n\\\\]\\n\\n\", \"More LaTex!\\n\\n\\\\(\\\\dfrac{3}{2k - 6} = \\\\dfrac{1}{3}\\\\)\\n\\n\"]]"
+            "text": "[[\"Asking question?<a href=\\\"javascript:alert('pwned')\\\">click</a>\", \"Answer! Look at some LaTex\\n\\n\\\\(\\\\dfrac{1}{2k - 6} = \\\\dfrac{1}{3}\\\\) and \\\\(\\\\dfrac{1.5}{2k - 6} = \\\\dfrac{1}{3}\\\\)\\n\\n\"], [\"Asking more question in LaTex?\\n\\n\\\\[\\n\\\\begin{array}{r}\\n  3.050 \\\\\\\\\\n- 0.338 \\\\\\\\\\n\\\\hline\\n\\\\end{array}\\n\\\\]\\n\\n\", \"More LaTex! $4 to $5.  \\n\\n\\\\(\\\\dfrac{3}{2k - 6} = \\\\dfrac{1}{3}\\\\)\\n\\n\"], [\"Following is not Math\", \"$4 to $5\"]]"
         },
         "predictions": [
             {

src/tags/object/RichText/table.js

@@ -31,6 +31,9 @@ import { HtxRichText } from './view';
 // We use a different marker than what is used in Khanmigo.
 const MATHJAX_MARKER = '$';
 
+// A class that stop rendering MathJax expressions
+const NO_MATHJAX_CLASS = 'tex2jax_ignore';
+
 // Extract math from conversation, alternate between math and non-math
 // Khanmigo uses "\(.*?\)" and "\[.*?\]" as the marker for math
 // For example, "What is \(2 + 2\)?" will split into ["What is ", "2 + 2", "?"]
@@ -76,14 +79,14 @@ const renderTableValue = (val) => {
       convoAndMathList.map((convo, i) => {
         if (i % 2 === 0) {
           // Non math
-          return <span key={`eq=${i}`}>{convo}</span>;
+          return <span key={`eq=${i}`} className={NO_MATHJAX_CLASS}>{convo}</span>;
         } else {
           // So for Math, we need to create a span as we want 2 piece of dom:
           // 1. The hidden raw MathJax expression, to allow slot Label to work
           // 2. A marked MathJax expression that allows <MathJax/> to render
           return (
             <span key={`eq-${i}`}>
-              <span style={{ 'display': 'none' }}>{'\\(' + convo + '\\)'}</span>
+              <span style={{ 'display': 'none' }} className={NO_MATHJAX_CLASS}>{'\\(' + convo + '\\)'}</span>
               <span data-skip-select='1'>{MATHJAX_MARKER + convo + MATHJAX_MARKER}</span>
             </span>
           );
@@ -99,7 +102,7 @@ const renderTableValue = (val) => {
       );
       hasMath = true;
     } else if (question) {
-      mathQuestionComponent = <div className={questionItemClass}>{question}</div>;
+      mathQuestionComponent = <div className={`${questionItemClass} ${NO_MATHJAX_CLASS}`}>{question}</div>;
     }
     if (mathAnswers.length > 1) {
       mathAnswerComponent = (
@@ -109,7 +112,7 @@ const renderTableValue = (val) => {
       );
       hasMath = true;
     } else if (answer){
-      mathAnswerComponent = <div className={answerItemClass}>{answer}</div>;
+      mathAnswerComponent = <div className={`${answerItemClass} ${NO_MATHJAX_CLASS}`}>{answer}</div>;
     }
 
     return (
@@ -125,6 +128,9 @@ const renderTableValue = (val) => {
       tex: {
         inlineMath: [[MATHJAX_MARKER, MATHJAX_MARKER]],
       },
+      options: {
+        ignoreHtmlClass: NO_MATHJAX_CLASS,
+      },
     };
 
     return (