From b1b62492ccb2f44ad5ef9878a1ff80e825c8701e Mon Sep 17 00:00:00 2001
From: Boris Lau <boris@techie.im>
Date: Mon, 14 Aug 2023 16:54:08 -0700
Subject: [PATCH] Added dynamic component loading

---
 src/tags/object/RichText/table.js | 16 +++++++++++++++-
 src/tags/object/RichText/view.js  | 15 +++++++++++----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/tags/object/RichText/table.js b/src/tags/object/RichText/table.js
index 234859828..432209c2d 100644
--- a/src/tags/object/RichText/table.js
+++ b/src/tags/object/RichText/table.js
@@ -67,7 +67,9 @@ const renderTableValue = (val) => {
     let mathAnswerComponent = null;
 
     const renderAllMathJax = (maths) => (
-      maths.map((equation, i) => <MathJax key={`eq-${i}`}>{MAJX_MARKER + equation + MAJX_MARKER}</MathJax>)
+      maths.map((equation, i) => (
+        <MathJax dynamic key={`eq-${i}`}>{MAJX_MARKER + equation + MAJX_MARKER}</MathJax>
+      ))
     );
 
     if (mathQuestions) {
@@ -113,10 +115,22 @@ 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,
+    didMountCallback: triggerMathJaxTypeset,
     alwaysInline: true,
   })
 );
diff --git a/src/tags/object/RichText/view.js b/src/tags/object/RichText/view.js
index 1f6c6a56f..baffeb08f 100644
--- a/src/tags/object/RichText/view.js
+++ b/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} />
+    );
   }));
 };