From 2025a3b55fbf32d0358154a84d3f709ce2ccc043 Mon Sep 17 00:00:00 2001
From: leangseu-edx <83240113+leangseu-edx@users.noreply.github.com>
Date: Tue, 11 Jul 2023 11:19:44 -0400
Subject: [PATCH] fix: MathJax equations flickering (#32696)

* Revert "Revert "fix: mathjax resize on sindow resize (#32606)""

This reverts commit 9dac65a35a3b20291edd6f3a83b2ec1ef1c0c37f.

* fix: mathjax wrap overflow and flickering
---
 cms/djangoapps/pipeline_js/js/xmodule.js      | 24 ++++++++++++++-
 .../content_libraries/xblock_iframe.html      | 24 +++++++++++++++
 common/templates/mathjax_include.html         | 30 +++++++++++++++++++
 3 files changed, 77 insertions(+), 1 deletion(-)

diff --git a/cms/djangoapps/pipeline_js/js/xmodule.js b/cms/djangoapps/pipeline_js/js/xmodule.js
index 6c44da31f1..96f8f1afa9 100644
--- a/cms/djangoapps/pipeline_js/js/xmodule.js
+++ b/cms/djangoapps/pipeline_js/js/xmodule.js
@@ -32,7 +32,10 @@ define(
                             ['\\[', '\\]'],
                             ['[mathjax]', '[/mathjax]']
                         ]
-                    }
+                    },
+                    CommonHTML: { linebreaks: { automatic: true } },
+                    SVG: { linebreaks: { automatic: true } },
+                    "HTML-CSS": { linebreaks: { automatic: true } },
                 });
 
                 // In order to eliminate all flashing during interactive
@@ -42,6 +45,25 @@ define(
                 // the fast preview setting as shown in the context menu.
                 window.MathJax.Hub.processSectionDelay = 0;
                 window.MathJax.Hub.Configured();
+
+                window.addEventListener('resize', MJrenderer);
+
+                let t = -1;
+                let delay = 1000;
+                let oldWidth = document.documentElement.scrollWidth;
+                function MJrenderer() {
+                    // don't rerender if the window is the same size as before
+                    if (t >= 0) {
+                      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);
+                    }
+                  };
             }
         );
         window.CodeMirror = CodeMirror;
diff --git a/cms/templates/content_libraries/xblock_iframe.html b/cms/templates/content_libraries/xblock_iframe.html
index 47966bc4cd..79d0de1409 100644
--- a/cms/templates/content_libraries/xblock_iframe.html
+++ b/cms/templates/content_libraries/xblock_iframe.html
@@ -81,6 +81,12 @@
   <!-- Configure and load MathJax -->
   <script type="text/x-mathjax-config">
     MathJax.Hub.Config({
+      styles: {
+        '.MathJax_SVG>svg': { 'max-width': '100%' },
+      },
+      CommonHTML: { linebreaks: { automatic: true } },
+      SVG: { linebreaks: { automatic: true } },
+      "HTML-CSS": { linebreaks: { automatic: true } },
       tex2jax: {
         inlineMath: [
           ["\\(","\\)"],
@@ -92,6 +98,24 @@
         ]
       }
     });
+    window.addEventListener('resize', MJrenderer);
+
+    let t = -1;
+    let delay = 1000;
+    let oldWidth = document.documentElement.scrollWidth;
+    function MJrenderer() {
+      // don't rerender if the window is the same size as before
+      if (t >= 0) {
+        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);
+      }
+    };
   </script>
   <script type="text/x-mathjax-config">
     MathJax.Hub.signal.Interest(function(message) {
diff --git a/common/templates/mathjax_include.html b/common/templates/mathjax_include.html
index 617ca94d30..53e843d67b 100644
--- a/common/templates/mathjax_include.html
+++ b/common/templates/mathjax_include.html
@@ -29,6 +29,12 @@
 %if mathjax_mode is not Undefined and mathjax_mode == 'wiki':
 <script type="text/x-mathjax-config">
   MathJax.Hub.Config({
+    styles: {
+      '.MathJax_SVG>svg': { 'max-width': '100%', },
+    },
+    CommonHTML: { linebreaks: { automatic: true } },
+    SVG: { linebreaks: { automatic: true } },
+    "HTML-CSS": { linebreaks: { automatic: true } },
     tex2jax: {inlineMath: [ ['$','$'], ["\\(","\\)"]],
               displayMath: [ ['$$','$$'], ["\\[","\\]"]]}
   });
@@ -36,7 +42,13 @@
 %else:
 <script type="text/x-mathjax-config">
   MathJax.Hub.Config({
+    styles: {
+      '.MathJax_SVG>svg': { 'max-width': '100%', },
+    },
     messageStyle: "none",
+    CommonHTML: { linebreaks: { automatic: true } },
+    SVG: { linebreaks: { automatic: true } },
+    "HTML-CSS": { linebreaks: { automatic: true } },
     tex2jax: {
       inlineMath: [
         ["\\(","\\)"],
@@ -85,6 +97,24 @@
             explorer: true
         }
     };
+    window.addEventListener('resize', MJrenderer);
+
+    let t = -1;
+    let delay = 1000;
+    let oldWidth = document.documentElement.scrollWidth;
+    function MJrenderer() {
+      // don't rerender if the window is the same size as before
+      if (t >= 0) {
+        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);
+      }
+    };
 </script>
 
 <!-- This must appear after all mathjax-config blocks, so it is after the imports from the other templates.