Fix selection over on MathJax interaction (#15)

## Summary:
We noticed that for MathJax only interaction it could cause issue
as the `trimLeft/Right` function gets into infinite loop (wow!).

This might be the contribution of some of the slowness issue we see.

This is a fix for that.  We also ensure that the space around the
text is displayed properly, that give some indication of selection.

I also took a look at the upstream, but did not notice any relevant fixes
that is related.

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

## Test plan:

Run `yarn start`

Selecting on the "Pure mathjax" interaction will show this issue without the fix.

Tested on:
- [x] Chrome
- [x] Safari
- [x] Firefox

Author: dat-boris

Reviewers: lizfaubell

Required Reviewers:

Approved By: lizfaubell

Checks: ⌛ Tests / E2E Tests, ✅ Build JS Bundle / Build, ✅ Lint / Run ESLint, ✅ Tests / Unit Tests, ✅ Build JS Bundle / Build Coverage

Pull Request URL: #15

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! $4 to $5.  \\n\\n\\\\(\\\\dfrac{3}{2k - 6} = \\\\dfrac{1}{3}\\\\)\\n\\n\"], [\"Following is not Math\", \"$4 to $5\"]]"
+            "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\"], [\"\\\\(\\\\dfrac{3}{2k - 6} = \\\\dfrac{1}{3}\\\\)\", \"\\\\(\\\\dfrac{3}{2k - 6} = \\\\dfrac{1}{3}\\\\)\"]]"
         },
         "predictions": [
             {

src/tags/object/RichText/table.js

@@ -37,6 +37,10 @@ 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", "?"]
+//
+// Note that even if this only contains MathJax, this will be wrapped in two
+// empty strings, which is what we want.
+// e.g. "\\(2 + 2\\)" will split into ["", "2 + 2", ""]
 const parseConvoWithMath = (str) => {
   // About the capture group:  a cool behaviour of str.split is that if there's
   // capturing group, the group is captured into the group, which is perfect
@@ -79,7 +83,13 @@ const renderTableValue = (val) => {
       convoAndMathList.map((convo, i) => {
         if (i % 2 === 0) {
           // Non math
-          return <span key={`eq=${i}`} className={NO_MATHJAX_CLASS}>{convo}</span>;
+          if (!convo) {
+            // Need to present space here, so if selection happens we can
+            // still observe it.  We tested that en quad space gives the most
+            // obvious selection.
+            return <span key={`eq-${i}`} className={NO_MATHJAX_CLASS}>&#x3000;</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

src/utils/selection-tools.js

@@ -35,12 +35,18 @@ const trimSelectionLeft = (selection) => {
   selection.removeAllRanges();
   selection.collapse(resultRange.startContainer, resultRange.startOffset);
   let currentRange = selection.getRangeAt(0);
+  let lastContainer = currentRange.startContainer;
 
   do {
     selection.collapse(currentRange.endContainer, currentRange.endOffset);
     selection.modify('extend', 'forward', 'character');
     currentRange = selection.getRangeAt(0);
-  } while (!isTextNode(currentRange.startContainer) || isSpace(currentRange.startContainer.textContent[currentRange.startOffset]));
+    lastContainer = currentRange.startContainer;
+  } while (
+    // check that the modify is indeed moving selection forward
+    currentRange.startContainer !== lastContainer &&
+    (!isTextNode(currentRange.startContainer) || isSpace(currentRange.startContainer.textContent[currentRange.startOffset]))
+  );
   resultRange.setStart(currentRange.startContainer, currentRange.startOffset);
   selection.removeAllRanges();
   selection.addRange(resultRange);
@@ -51,12 +57,18 @@ const trimSelectionRight = (selection) => {
   selection.removeAllRanges();
   selection.collapse(resultRange.endContainer, resultRange.endOffset);
   let currentRange = selection.getRangeAt(0);
+  let lastContainer = currentRange.startContainer;
 
   do {
     selection.collapse(currentRange.startContainer, currentRange.startOffset);
     selection.modify('extend', 'backward', 'character');
     currentRange = selection.getRangeAt(0);
-  } while (!isTextNode(currentRange.startContainer) || isSpace(currentRange.startContainer.textContent[currentRange.startOffset]));
+    lastContainer = currentRange.startContainer;
+  } while (
+    // check that the modify is indeed moving selection forward
+    currentRange.startContainer !== lastContainer &&
+    (!isTextNode(currentRange.startContainer) || isSpace(currentRange.startContainer.textContent[currentRange.startOffset]))
+  );
   resultRange.setEnd(currentRange.endContainer, currentRange.endOffset);
   selection.removeAllRanges();
   selection.addRange(resultRange);