Fix selection over on MathJax interaction

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,17 @@ 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 (
+    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 +56,17 @@ 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 (
+    currentRange.startContainer !== lastContainer &&
+    (!isTextNode(currentRange.startContainer) || isSpace(currentRange.startContainer.textContent[currentRange.startOffset]))
+  );
   resultRange.setEnd(currentRange.endContainer, currentRange.endOffset);
   selection.removeAllRanges();
   selection.addRange(resultRange);