Added dynamic component loading

Author: dat-boris

src/examples/rich_text_table/config.xml

@@ -1,8 +1,8 @@
 <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>
   </HyperTextLabels>
   <TableText name="text" value="$text"></TableText>
 </View>

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'])),
   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

@@ -87,7 +87,7 @@
       border-style: dashed
 
       &::before
-        content "math"
+        content "latex found"
         font-size: 10px
         position: relative
 

src/tags/object/RichText/domManager.ts

@@ -92,17 +92,20 @@ class DDTextElement {
     elements.forEach(el => {
       fragment.appendChild(el.node);
     });
-    parent.replaceChild(dummyReplacer, node);
-    parent.replaceChild(fragment, dummyReplacer);
-
+    if (parent) {
+      parent.replaceChild(dummyReplacer, node);
+      parent.replaceChild(fragment, dummyReplacer);
+    }
     return elements;
   }
 
   removeNode() {
     const { node } = this;
     const parent = node.parentNode as Node;
 
-    parent.removeChild(node);
+    if (parent) {
+      parent.removeChild(node);
+    }
   }
 
   mergeWith(elements: DDTextElement[]) {
@@ -461,6 +464,9 @@ class DomData {
   }
 
   findTextBlock(pos: number, avoid: 'start' | 'end' = 'start'): DDDynamicBlock | undefined {
+    // TODO: issue is that the start/End here only reflects the static start/end of the text block
+    // this does not represent the actual dynamic data that is happening!
+    // e.g. 99 should maps to ...
     const block = this.elements.find(el => (el instanceof DDDynamicBlock) && el.start <= pos && el.end >= pos && el[avoid] !== pos);
 
     if (isDefined(block)) {
@@ -633,7 +639,17 @@ 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;
+
+        // Skip out of the container, to ensure that we don't process anything
+        // inside it.
+        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']), 'symbol'),
 });
 
 const Model = types

src/tags/object/RichText/table.js

@@ -28,14 +28,16 @@ import { HtxRichText } from './view';
 // Note: We use a different marker than what is used in Khanmigo.
 const MAJX_MARKER = '$';
 
-// Extract math from conversation
+// Extract math from conversation, alternate between math and non-math
 // Khanmigo uses "\(.*?\)" as the marker for math
-// TODO: only extract first match at the moment
-const extractMaths = (str) => {
-  const match = Array.from(str.matchAll(/\\\((.*?)\\\)/g));
-
-  if (!match.length) return null;
-  return match.map((m) => m[1]);
+// 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) => {
@@ -54,44 +56,60 @@ const renderTableValue = (val) => {
 
   const itemClass = cn('richtext', { elem: 'table-item' });
   const questionItemClass = cn('richtext', { elem: 'table-item', mod: { qa : 'question' } });
-  const mathItemClass = cn('richtext', { elem: 'table-item', mod: { context: 'math' } });
-  const questionMathItemClass = cn('richtext', { elem: 'table-item', mod: { qa : 'question', context: 'math' } });
   let hasMath = false;
 
   const rowElems = conversations.map((conversation, index) => {
     const question = conversation[0];
     const answer = conversation[1];
-    const mathQuestions = extractMaths(question);
-    const mathAnswers = extractMaths(answer);
+    const mathQuestions = parseConvoWithMath(question);
+    const mathAnswers = parseConvoWithMath(answer);
     let mathQuestionComponent = null;
     let mathAnswerComponent = null;
 
-    const renderAllMathJax = (maths) => (
-      maths.map((equation, i) => <MathJax key={`eq-${i}`}>{MAJX_MARKER + equation + MAJX_MARKER}</MathJax>)
+    // Render an alternate list between Math and non-math expressions
+    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'>{MAJX_MARKER + convo + MAJX_MARKER}</span>
+            </span>
+          );
+        }
+      })
     );
 
-    if (mathQuestions) {
+    if (mathQuestions.length > 1) {
       mathQuestionComponent = (
-        <div className={questionMathItemClass}>
-          {renderAllMathJax(mathQuestions)}
+        <div className={questionItemClass}>
+          <MathJax>{renderAllMathJax(mathQuestions)}</MathJax>
         </div>
       );
       hasMath = true;
+    } else {
+      mathQuestionComponent = <div className={questionItemClass}>{question}</div>;
     }
-    if (mathAnswers) {
+    if (mathAnswers.length > 1) {
       mathAnswerComponent = (
-        <div className={mathItemClass}>
-          {renderAllMathJax(mathAnswers)}
+        <div className={itemClass}>
+          <MathJax>{renderAllMathJax(mathAnswers)}</MathJax>
         </div>
       );
       hasMath = true;
+    } else {
+      mathAnswerComponent = <div className={itemClass}>{answer}</div>;
     }
 
     return (
       <div key={`conversation-${index}`}>
-        <div className={questionItemClass}>{question}</div>
         {mathQuestionComponent}
-        <div className={itemClass}>{answer}</div>
         {mathAnswerComponent}
       </div>
     );
@@ -113,10 +131,23 @@ const renderTableValue = (val) => {
   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
+const triggerMathJaxTypeset = () => {
+  setTimeout(() => {
+    // TODO: this is a hacky way to trigger MathJax typeset
+    // The official way is to useContext(MathJaxBaseContext) but we are not
+    // composing the component here.
+    window?.MathJax?.typeset();
+  });
+};
+
 export const TableText = () => (
   HtxRichText({
     isText: false,
     valueToComponent: renderTableValue,
+    // TODO: do we need this to re-render?
+    // 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

@@ -1,5 +1,6 @@
 import { clamp, isDefined } from './utilities';
 import { FF_LSDV_4620_3, isFF } from './feature-flags';
+import { first, last } from 'strman';
 
 export const isTextNode = node => node && node.nodeType === Node.TEXT_NODE;
 
@@ -170,6 +171,61 @@ const closestBoundarySelection = (selection, boundary) => {
   return selection;
 };
 
+/**
+ * Modify selection to be a boundary to be of parent element with tagName
+ */
+const changeBoundaryToElement = (selection, tagName) => {
+  const {
+    startOffset,
+    startContainer,
+    endOffset,
+    endContainer,
+    firstSymbol,
+    prevSymbol,
+    lastSymbol,
+    nextSymbol,
+  } = destructSelection(selection);
+
+  // find parent of startContainer with tagName
+  const upperCaseTagName = tagName.toUpperCase();
+  let parent = startContainer;
+
+  while (parent && parent.tagName !== upperCaseTagName) {
+    parent = parent.parentNode;
+  }
+  if (!parent) {
+    return;
+  }
+  // Find the first textChild and last, and extent the selections
+  // See doc at: https://developer.mozilla.org/en-US/docs/Web/API/
+  // Note we cannot simply do selectAllChilren, as the selection object
+  // expects multiple range with each range to be a text node.
+  // selection.selectAllChildren(parent);
+  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) {
+    // check if we are in a skip element - if so skip elements within it.
+    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 +318,16 @@ const applyTextGranularity = (selection, granularity) => {
       case 'paragraph':
         boundarySelection(selection, 'paragraphboundary');
         return;
+      case 'div':
+        changeBoundaryToElement(selection, 'div');
+        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 +770,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