Added dynamic component loading

Khan · Aug 14, 2023 · b1b6249 · b1b6249
1 parent f785fb5
commit b1b6249
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git 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
@@ -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} />
+    );
   }));
 };