From 626100596de57d336864ff7cf0ec7a0ab5331560 Mon Sep 17 00:00:00 2001
From: Leangseu Kim <lkim@edx.org>
Date: Mon, 24 Jul 2023 11:07:01 -0400
Subject: [PATCH] fix: add correct css and call back for mathjax

---
 cms/djangoapps/pipeline_js/js/xmodule.js      | 29 +++++++++++--------
 .../content_libraries/xblock_iframe.html      | 18 +++++++-----
 common/templates/mathjax_include.html         | 20 ++++++++-----
 3 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/cms/djangoapps/pipeline_js/js/xmodule.js b/cms/djangoapps/pipeline_js/js/xmodule.js
index 9688d97a4b88..c51b3280df66 100644
--- a/cms/djangoapps/pipeline_js/js/xmodule.js
+++ b/cms/djangoapps/pipeline_js/js/xmodule.js
@@ -23,6 +23,11 @@ define(
             'mathjax',
             function() {
                 window.MathJax.Hub.Config({
+                    styles: {
+                        '.MathJax_SVG>svg': { 'max-width': '100%' },
+                        // This is to resolve for people who use center mathjax with tables
+                        'table>tbody>tr>td>.MathJax_SVG>svg': { 'max-width': 'inherit'},
+                    },
                     tex2jax: {
                         inlineMath: [
                             ['\\(', '\\)'],
@@ -57,19 +62,19 @@ define(
                       window.clearTimeout(t);
                     }
                     if (oldWidth !== document.documentElement.scrollWidth) {
-                      t = window.setTimeout(function() {
-                        oldWidth = document.documentElement.scrollWidth;
-                        MathJax.Hub.Queue(["Rerender", MathJax.Hub]);
-                        t = -1;
-                      }, delay);
+                        t = window.setTimeout(function() {
+                          oldWidth = document.documentElement.scrollWidth;
+                          MathJax.Hub.Queue(
+                            ["Rerender", MathJax.Hub],
+                            [() => $('.MathJax_SVG>svg').toArray().forEach(el => {
+                              if ($(el).width() === 0) {
+                                $(el).css('max-width', 'inherit');
+                              }
+                            })]
+                          );
+                          t = -1;
+                        }, delay);
                     }
-
-                    // this is added to compensate for custom css that accidentally hide mathjax
-                    $('.MathJax_SVG>svg').toArray().forEach(el => {
-                        if ($(el).width() === 0) {
-                        $(el).css('max-width', 'inherit');
-                        }
-                    });
                 };
             }
         );
diff --git a/cms/templates/content_libraries/xblock_iframe.html b/cms/templates/content_libraries/xblock_iframe.html
index 6a60530cc9a5..b73a25f257b5 100644
--- a/cms/templates/content_libraries/xblock_iframe.html
+++ b/cms/templates/content_libraries/xblock_iframe.html
@@ -83,6 +83,8 @@
     MathJax.Hub.Config({
       styles: {
         '.MathJax_SVG>svg': { 'max-width': '100%' },
+        // This is to resolve for people who use center mathjax with tables
+        'table>tbody>tr>td>.MathJax_SVG>svg': { 'max-width': 'inherit'},
       },
       CommonHTML: { linebreaks: { automatic: true } },
       SVG: { linebreaks: { automatic: true } },
@@ -111,17 +113,17 @@
       if (oldWidth !== document.documentElement.scrollWidth) {
         t = window.setTimeout(function() {
           oldWidth = document.documentElement.scrollWidth;
-          MathJax.Hub.Queue(["Rerender", MathJax.Hub]);
+          MathJax.Hub.Queue(
+            ["Rerender", MathJax.Hub],
+            [() => $('.MathJax_SVG>svg').toArray().forEach(el => {
+              if ($(el).width() === 0) {
+                $(el).css('max-width', 'inherit');
+              }
+            })]
+          );
           t = -1;
         }, delay);
       }
-
-      // this is added to compensate for custom css that accidentally hide mathjax
-      $('.MathJax_SVG>svg').toArray().forEach(el => {
-        if ($(el).width() === 0) {
-          $(el).css('max-width', 'inherit');
-        }
-      });
     };
   </script>
   <script type="text/x-mathjax-config">
diff --git a/common/templates/mathjax_include.html b/common/templates/mathjax_include.html
index 3c11d1414951..3e94293d789f 100644
--- a/common/templates/mathjax_include.html
+++ b/common/templates/mathjax_include.html
@@ -31,6 +31,8 @@
   MathJax.Hub.Config({
     styles: {
       '.MathJax_SVG>svg': { 'max-width': '100%', },
+      // This is to resolve for people who use center mathjax with tables
+      'table>tbody>tr>td>.MathJax_SVG>svg': { 'max-width': 'inherit'},
     },
     CommonHTML: { linebreaks: { automatic: true } },
     SVG: { linebreaks: { automatic: true } },
@@ -44,6 +46,8 @@
   MathJax.Hub.Config({
     styles: {
       '.MathJax_SVG>svg': { 'max-width': '100%', },
+      // This is to resolve for people who use center mathjax with tables
+      'table>tbody>tr>td>.MathJax_SVG>svg': { 'max-width': 'inherit'},
     },
     messageStyle: "none",
     CommonHTML: { linebreaks: { automatic: true } },
@@ -110,17 +114,17 @@
       if (oldWidth !== document.documentElement.scrollWidth) {
         t = window.setTimeout(function() {
           oldWidth = document.documentElement.scrollWidth;
-          MathJax.Hub.Queue(["Rerender", MathJax.Hub]);
+          MathJax.Hub.Queue(
+            ["Rerender", MathJax.Hub],
+            [() => $('.MathJax_SVG>svg').toArray().forEach(el => {
+              if ($(el).width() === 0) {
+                $(el).css('max-width', 'inherit');
+              }
+            })]
+          );
           t = -1;
         }, delay);
       }
-
-      // this is added to compensate for custom css that accidentally hide mathjax
-      $('.MathJax_SVG>svg').toArray().forEach(el => {
-        if ($(el).width() === 0) {
-          $(el).css('max-width', 'inherit');
-        }
-      });
     };
 </script>