Added MathJax rendering (#4)

## Summary:

With the recent need for Math rendering in Khan Academy, we need to pick up the MathJax
rendering again.

This added MathJax rendering to the conversation whenever we detect any
conversation that contains MathJax inline in the conversation.

Note we need to also consider the slot filling features - we do this by setting an attribute
(`data-skip-node`) which when met this will allow dynamic MathJax rendering to happen
within the node, without affecting the highlight of the elements.

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

## Test plan:
`yarn test`

`yarn start` and see the equation rendered.

Note that we also added the slots to demonstrate different granularity of the tags

![image](https://github.com/user-attachments/assets/02d35c6b-20b6-4c33-ac29-686d599d6efa)

With the highlight slot (unfortunately we cannot highlight the MathJax expression)

![image](https://github.com/user-attachments/assets/a6fedf35-a80c-4868-b948-dcb989884cd1)

And also test out dynamic rendering by using our local label studio repo with multiiple entries.

## E2E tests

Although the official E2E test is broken (it seems like  it depends on some external resources on some audio test which times out) - We can manaully run those E2E tests manually to confirm that the `rich-text` component is not borken.

```
% npx codeceptjs run tests/rich-text/*.js                              
CodeceptJS v3.3.3 #StandWithUkraine
Using test root "/Users/borislau/khan/label-studio-frontend/e2e"

Richtext basic functional --
Warning: Timeout was set to 2400secs.
Global timeout should be specified in seconds.
  ✔ Creating, removing and restoring regions in 8394ms
  ✔ Rich text content consistency in 25356ms

  OK  | 2 passed   // 35s
```

Author: dat-boris

Reviewers: github-actions[bot], dat-boris, jimmykodes, wwells, lizfaubell

Required Reviewers:

Approved By: jimmykodes, wwells, wwells, lizfaubell

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

Pull Request URL: #4

Author: dat-boris

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