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) => {MAJX_MARKER + equation + MAJX_MARKER})
+ maths.map((equation, i) => (
+ {MAJX_MARKER + equation + MAJX_MARKER}
+ ))
);
if (mathQuestions) {
@@ -113,10 +115,22 @@ const renderTableValue = (val) => {
return
{rowElems}
;
};
+// 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 ;
+ return (
+
+ );
}));
};