Added MathJax rendering

package.json

@@ -90,6 +90,7 @@
     "@types/react-beautiful-dnd": "^13.1.3",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-preset-react-app": "^9.1.1",
+    "better-react-mathjax": "^2.0.2",
     "d3": "^5.16.0",
     "d3-color": "3.1.0",
     "loader-utils": "2.0.4",

src/examples/rich_text_table/config.xml

@@ -1,8 +1,9 @@
 <View>
   <HyperTextLabels name="ner" toName="text">
-    <Label value="Person"></Label>
-    <Label value="Organization"></Label>
-    <Label value="Date"></Label>
+    <Label value="Paragraph" granularity="paragraph"></Label>
+    <Label value="Word" granularity="word"></Label>
+    <Label value="Div" granularity="div"></Label>
+    <Label value="Interaction" granularity="parent_div"></Label>
   </HyperTextLabels>
   <TableText name="text" value="$text"></TableText>
 </View>

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{6}{2k - 6} = \\\\dfrac{1}{3}\\\\)\\n\\n\"], [\"Asking more question?\", \"More LaTex!\\n\\n\\\\(\\\\dfrac{6}{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?\\\\(\\\\dfrac{2}{2k - 6} = \\\\dfrac{1}{3}\\\\)\", \"More LaTex!\\n\\n\\\\(\\\\dfrac{3}{2k - 6} = \\\\dfrac{1}{3}\\\\)\\n\\n\"]]"
         },
         "predictions": [
             {

src/tags/control/Label.js

@@ -60,7 +60,7 @@ const TagAttrs = types.model({
   size: types.optional(types.string, 'medium'),
   background: types.optional(customTypes.color, Constants.LABEL_BACKGROUND),
   selectedcolor: types.optional(customTypes.color, '#ffffff'),
-  granularity: types.maybeNull(types.enumeration(['symbol', 'word', 'sentence', 'paragraph'])),
+  granularity: types.maybeNull(types.enumeration(['symbol', 'word', 'sentence', 'paragraph', 'div', 'parent_div'])),
   groupcancontain: types.maybeNull(types.string),
   // childrencheck: types.optional(types.enumeration(["any", "all"]), "any")
   ...(isFF(FF_DEV_2128) ? { html: types.maybeNull(types.string) } : {}),
@@ -174,7 +174,7 @@ const Model = types.model({
       if (labels.type === 'labels') return true; // universal labels are fine to select
       if (labels.type.includes(region.type.replace(/region$/, ''))) return true; // region type is in label type
       if (labels.type.includes(region.results[0].type)) return true; // any result type of the region is in label type
-      
+
       return false;
     });
 

src/tags/object/RichText/RichText.styl

@@ -80,9 +80,14 @@
     word-wrap: break-word
     margin-top: 16px
 
-    &:first-child
+    &_qa_question
+      // User questions
       margin-left: auto
 
+    &_qa_answer
+      // Khanmigo answer
+      margin-right: 10%
+
   &__error-box
     padding 8px 16px
     background-color: pink

src/tags/object/RichText/domManager.ts

@@ -633,7 +633,16 @@ export default class DomManager {
     while (currentNode) {
       const isText = currentNode.nodeType === Node.TEXT_NODE;
       const isBR = currentNode.nodeName === 'BR';
+      const isSkipSelect = currentNode.nodeType === Node.ELEMENT_NODE && currentNode.getAttribute('data-skip-select');
 
+      if (isSkipSelect) {
+        const ignoreContainer = currentNode;
+
+        // Ignore all nodes within the container
+        while (ignoreContainer.contains(currentNode)) {
+          currentNode = this.nextStep();
+        }
+      }
       if (isText) {
         domData.addTextElement(currentNode as Text, this.currentPath);
       } else if (isBR) {

src/tags/object/RichText/model.js

@@ -49,7 +49,7 @@ const WARNING_MESSAGES = {
  * @param {string} [highlightColor]                       - hex string with highlight color, if not provided uses the labels color
  * @param {boolean} [showLabels=true]                     - whether or not to show labels next to the region
  * @param {none|base64|base64unicode} [encoding]          - decode value from an encoded string
- * @param {symbol|word|sentence|paragraph} [granularity]  - control region selection granularity
+ * @param {symbol|word|sentence|paragraph|div} [granularity]  - control region selection granularity
  */
 const TagAttrs = types.model('RichTextModel', {
   value: types.maybeNull(types.string),
@@ -74,7 +74,7 @@ const TagAttrs = types.model('RichTextModel', {
 
   encoding: types.optional(types.enumeration(['none', 'base64', 'base64unicode']), 'none'),
 
-  granularity: types.optional(types.enumeration(['symbol', 'word', 'sentence', 'paragraph']), 'symbol'),
+  granularity: types.optional(types.enumeration(['symbol', 'word', 'sentence', 'paragraph', 'div', 'parent_div']), 'symbol'),
 });
 
 const Model = types

src/tags/object/RichText/table.js

@@ -18,12 +18,31 @@
 
 import React from 'react';
 import { types } from 'mobx-state-tree';
+import { MathJax, MathJaxContext } from 'better-react-mathjax';
 import { cn } from '../../../utils/bem';
 
 import './RichText.styl';
 import { RichTextModel } from './model';
 import { HtxRichText } from './view';
 
+// To allow us to render MathJax expressions, we need to use a marker
+// However we also want to keep the original \(expressions\), so we swap into
+// a differnet marker instead.
+// We use a different marker than what is used in Khanmigo.
+const MATHJAX_MARKER = '$';
+
+// Extract math from conversation, alternate between math and non-math
+// Khanmigo uses "\(.*?\)" as the marker for math
+// For example, "What is \(2 + 2\)?" will split into ["What is ", "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
+  // for us!
+  const mathRegex = /\\\((.*?)\\\)/g;
+
+  return str.split(mathRegex);
+};
+
 const renderTableValue = (val) => {
   let conversations = [];
 
@@ -38,27 +57,114 @@ const renderTableValue = (val) => {
     return <div className={errClass}>{errMsg}</div>;
   }
 
-  const itemClass = cn('richtext', { elem: 'table-item' });
+  const questionItemClass = cn('richtext', { elem: 'table-item', mod: { qa : 'question' } });
+  const answerItemClass = cn('richtext', { elem: 'table-item', mod: { qa : 'answer' } });
+  let hasMath = false;
 
   const rowElems = conversations.map((conversation, index) => {
     const question = conversation[0];
     const answer = conversation[1];
+    const mathQuestions = parseConvoWithMath(question);
+    const mathAnswers = parseConvoWithMath(answer);
+    let mathQuestionComponent = null;
+    let mathAnswerComponent = null;
+
+    // Render an alternate list between Math and non-math expressions
+    // The list alternates between non-Math and Math expressions from
+    // `parseConvoWithMath`
+    const renderAllMathJax = (convoAndMathList) => (
+      convoAndMathList.map((convo, i) => {
+        if (i % 2 === 0) {
+          // Non math
+          return <span key={`eq=${i}`}>{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 data-skip-select='1'>{MATHJAX_MARKER + convo + MATHJAX_MARKER}</span>
+            </span>
+          );
+        }
+      })
+    );
+
+    if (mathQuestions.length > 1) {
+      mathQuestionComponent = (
+        <div className={questionItemClass}>
+          <MathJax dynamic>{renderAllMathJax(mathQuestions)}</MathJax>
+        </div>
+      );
+      hasMath = true;
+    } else if (question) {
+      mathQuestionComponent = <div className={questionItemClass}>{question}</div>;
+    }
+    if (mathAnswers.length > 1) {
+      mathAnswerComponent = (
+        <div className={answerItemClass}>
+          <MathJax dynamic>{renderAllMathJax(mathAnswers)}</MathJax>
+        </div>
+      );
+      hasMath = true;
+    } else if (answer){
+      mathAnswerComponent = <div className={answerItemClass}>{answer}</div>;
+    }
 
     return (
       <div key={`conversation-${index}`}>
-        <div className={itemClass}>{question}</div>
-        <div className={itemClass}>{answer}</div>
+        {mathQuestionComponent}
+        {mathAnswerComponent}
       </div>
     );
   });
 
+  if (hasMath) {
+    const mathJaxConfig = {
+      tex: {
+        inlineMath: [[MATHJAX_MARKER, MATHJAX_MARKER]],
+      },
+    };
+
+    return (
+      <MathJaxContext config={mathJaxConfig}>
+        {rowElems}
+      </MathJaxContext>
+    );
+  }
   return <div>{rowElems}</div>;
 };
 
+// We need to trigger MathJax typeset after the component is mounted
+// See https://docs.mathjax.org/en/latest/advanced/typeset.html
+// As the document suggest above, we need to ensure that only one typeSet
+// function is running at one time.  We use the promise to ensure that the
+// typeset is only run once at a time.
+let typesetPromise = null;
+
+const triggerMathJaxTypeset = () => {
+  setTimeout(() => {
+    // This means that we already have a typeset running.
+    if (typesetPromise) return;
+
+    // This means that this is first load, and we can wait for
+    // <MathJaxContext/> component to be ready and typeset, instead of doing
+    // this dynamically.
+    if (typeof window?.MathJax?.typesetPromise !== 'function') return;
+
+    typesetPromise = window?.MathJax?.typesetPromise();
+    typesetPromise.finally(() => {
+      typesetPromise = null;
+    });
+  }, 100);
+};
+
 export const TableText = () => (
   HtxRichText({
     isText: false,
     valueToComponent: renderTableValue,
+    didMountCallback: triggerMathJaxTypeset,
     alwaysInline: true,
   })
 );

src/tags/object/RichText/view.js

@@ -237,7 +237,7 @@ class RichTextPieceView extends Component {
    */
   _determineRegion(element) {
     const spanSelector = isFF(FF_LSDV_4620_3) ? this._regionVisibleSpanSelector : this._regionSpanSelector;
-    
+
     if (matchesSelector(element, spanSelector)) {
       const span = element.tagName === 'SPAN' && (!isFF(FF_LSDV_4620_3) || element.matches(spanSelector)) ? element : element.closest(spanSelector);
       const { item } = this.props;
@@ -247,7 +247,7 @@ class RichTextPieceView extends Component {
   }
 
   componentDidMount() {
-    const { item, alwaysInline } = this.props;
+    const { item, alwaysInline, didMountCallback } = this.props;
 
     if (!isFF(FF_LSDV_4620_3)) {
       item.setNeedsUpdateCallbacks(
@@ -256,6 +256,10 @@ class RichTextPieceView extends Component {
       );
     }
 
+    if (didMountCallback) {
+      didMountCallback(item);
+    }
+
     if (!(alwaysInline || item.inline)) {
       this.dispose = observe(item, '_isReady', this.updateLoadingVisibility, true);
     }
@@ -484,9 +488,12 @@ const storeInjector = inject('store');
 const RPTV = storeInjector(observer(RichTextPieceView));
 
 export const HtxRichText = (
-  { isText = false, valueToComponent = null, alwaysInline = false } = {},
+  { isText = false, valueToComponent = null, alwaysInline = false, didMountCallback = null } = {},
 ) => {
   return storeInjector(observer(props => {
-    return <RPTV {...props} isText={isText} valueToComponent={valueToComponent} alwaysInline={alwaysInline}/>;
+    return (
+      <RPTV {...props} isText={isText} alwaysInline={alwaysInline}
+        valueToComponent={valueToComponent} didMountCallback={didMountCallback} />
+    );
   }));
 };

src/utils/selection-tools.js

@@ -170,6 +170,55 @@ const closestBoundarySelection = (selection, boundary) => {
   return selection;
 };
 
+/**
+ * Modify selection to be a boundary to be of parent element with tagName
+ * We will highlight the first and last text node within the parent element,
+ * which is expected from selection-tools.js as we convert this to an offset.
+ */
+const changeBoundaryToElement = (selection, tagName, depth=1) => {
+  const {
+    startContainer,
+  } = destructSelection(selection);
+
+  // find parent of startContainer with tagName
+  const upperCaseTagName = tagName.toUpperCase();
+  let parent = startContainer;
+
+  for (let i = 0; i < depth; i++) {
+    parent = parent.parentNode;
+    while (parent && parent.tagName !== upperCaseTagName) {
+      parent = parent.parentNode;
+    }
+  }
+  if (!parent) {
+    return;
+  }
+  const walker = parent.ownerDocument.createTreeWalker(parent, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
+  let firstTextChild = null;
+  let lastTextChild = null;
+  let currentNode = walker.nextNode();
+  let skipContainer = null;
+
+  while (currentNode) {
+    // skip any elements iwthin `data-skip-select`, which might be added by
+    // other dynamic rendering (e.g. MathJax)
+    if (currentNode.nodeType === Node.ELEMENT_NODE && currentNode.getAttribute('data-skip-select')) {
+      skipContainer = currentNode;
+      while (skipContainer.contains(currentNode)) {
+        currentNode = walker.nextNode();
+      }
+      continue;
+    }
+
+    if (firstTextChild === null) firstTextChild = currentNode;
+    lastTextChild = currentNode;
+
+    currentNode = walker.nextNode();
+  }
+  selection.setPosition(firstTextChild);
+  selection.extend(lastTextChild, lastTextChild.length);
+};
+
 const boundarySelection = (selection, boundary) => {
   const wordBoundary = boundary !== 'symbol';
   const {
@@ -262,13 +311,19 @@ const applyTextGranularity = (selection, granularity) => {
       case 'paragraph':
         boundarySelection(selection, 'paragraphboundary');
         return;
+      case 'div':
+        changeBoundaryToElement(selection, 'div');
+        return;
+      case 'parent_div':
+        changeBoundaryToElement(selection, 'div', 2);
+        return;
       case 'charater':
       case 'symbol':
       default:
         return;
     }
-  } catch {
-    console.warn('Probably, you\'re using browser that doesn\'t support granularity.');
+  } catch (e) {
+    console.warn('Probably, you\'re using browser that doesn\'t support granularity.', e);
   }
 };
 
@@ -711,6 +766,24 @@ const findGlobalOffset = (node, position, root) => {
     const isText = currentNode.nodeType === Node.TEXT_NODE;
     const isBR = currentNode.nodeName === 'BR';
 
+    // if the current node have skip_select attribute, we should skip it
+    const isSkipSelect = currentNode.nodeType === Node.ELEMENT_NODE && currentNode.getAttribute('data-skip-select');
+
+    // Skip MathJax generated nodes, jump to next node (i.e. lastChild's next)
+    if (isSkipSelect) {
+      const ignoreContainer = currentNode;
+
+      // Keep checking the next of lastChild is not part of the container
+      // Note this will end if currentNode = null, which is what we want.
+      while (ignoreContainer.contains(currentNode)) {
+        currentNode = walker.nextNode();
+        // Note: the nodeReached can be within the ignore container, so we need
+        // to check here.
+        nodeReached = nodeReached || node === currentNode;
+      }
+      continue;
+    }
+
     // Stop iteration
     // Break if we passed target node and current node
     // is not target, nor child of a target