feat!: upgrade to mathjax v4

cms/djangoapps/pipeline_js/js/xmodule.js

@@ -16,36 +16,40 @@ define(
 
         window.$ = $;
         window._ = _;
+        window.MathJax = {
+            tex: {
+                inlineMath: [
+                    ['\\(', '\\)'],
+                    ['[mathjaxinline]', '[/mathjaxinline]']
+                ],
+                displayMath: [
+                    ['\\[', '\\]'],
+                    ['[mathjax]', '[/mathjax]']
+                ],
+                autoload: {
+                    color: [],
+                    colorv2: ['color']
+                },
+                packages: {'[+]': ['noerrors']}
+            },
+            options: {
+                ignoreHtmlClass: 'tex2jax_ignore',
+                processHtmlClass: 'tex2jax_process',
+                menuOptions: {
+                    settings: {
+                        collapsible: true
+                    },
+                },
+            },
+            loader: {
+                load: ['input/asciimath', '[tex]/noerrors']
+            }
+        };
 
         $script(
-            'https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js'
-            + '?config=TeX-MML-AM_SVG&delayStartupUntil=configured',
+            'https://cdn.jsdelivr.net/npm/mathjax@4.1.2/tex-mml-chtml.js',
             'mathjax',
             function() {
-                window.MathJax.Hub.Config({
-                    tex2jax: {
-                        inlineMath: [
-                            ['\\(', '\\)'],
-                            ['[mathjaxinline]', '[/mathjaxinline]']
-                        ],
-                        displayMath: [
-                            ['\\[', '\\]'],
-                            ['[mathjax]', '[/mathjax]']
-                        ]
-                    },
-                    CommonHTML: {linebreaks: {automatic: true}},
-                    SVG: {linebreaks: {automatic: true}},
-                    'HTML-CSS': {linebreaks: {automatic: true}},
-                });
-
-                // In order to eliminate all flashing during interactive
-                // preview, it is necessary to set processSectionDelay to 0
-                // (remove delay between input and output phases). This
-                // effectively disables fast preview, regardless of
-                // 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;
@@ -60,7 +64,8 @@ define(
                     if (oldWidth !== document.documentElement.scrollWidth) {
                         t = window.setTimeout(function() {
                             oldWidth = document.documentElement.scrollWidth;
-                            MathJax.Hub.Queue(['Rerender', MathJax.Hub]);
+                            MathJax.typesetClear();
+                            MathJax.typesetPromise();
                             t = -1;
                         }, delay);
                     }

cms/static/cms/js/require-config.js

@@ -47,19 +47,33 @@
                 }
             });
 
-            // MathJax Fast Preview was introduced in 2.5. However, it
-            // causes undesirable flashing/font size changes when
-            // MathJax is used for interactive preview (equation editor).
-            // Setting processSectionDelay to 0 (see below) fully eliminates
-            // fast preview, but to reduce confusion, we are also setting
-            // the option as displayed in the context menu to false.
-            // When upgrading to 2.6, check if this variable name changed.
             window.MathJax = {
-                menuSettings: {
-                    CHTMLpreview: false,
-                    collapsible: true,
-                    autocollapse: false,
-                    explorer: true
+                tex: {
+                    inlineMath: [
+                        ['\\(', '\\)'],
+                        ['[mathjaxinline]', '[/mathjaxinline]']
+                    ],
+                    displayMath: [
+                        ['\\[', '\\]'],
+                        ['[mathjax]', '[/mathjax]']
+                    ],
+                    autoload: {
+                        color: [],
+                        colorv2: ['color']
+                    },
+                    packages: {'[+]': ['noerrors']}
+                },
+                options: {
+                    ignoreHtmlClass: 'tex2jax_ignore',
+                    processHtmlClass: 'tex2jax_process',
+                    menuOptions: {
+                        settings: {
+                            collapsible: true
+                        },
+                    },
+                },
+                loader: {
+                    load: ['input/asciimath', '[tex]/noerrors']
                 }
             };
         };
@@ -137,7 +151,7 @@
             'jquery_extend_patch': 'js/src/jquery_extend_patch',
 
             // externally hosted files
-            mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js?config=TeX-MML-AM_SVG&delayStartupUntil=configured', // eslint-disable-line max-len
+            mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@4.1.2/tex-mml-chtml.js?noext',
             'youtube': [
                 // youtube URL does not end in '.js'. We add '?noext' to the path so
                 // that require.js adds the '.js' to the query component of the URL,
@@ -249,27 +263,6 @@
             },
             'mathjax': {
                 exports: 'MathJax',
-                init: function() {
-                    window.MathJax.Hub.Config({
-                        tex2jax: {
-                            inlineMath: [
-                                ['\\(', '\\)'],
-                                ['[mathjaxinline]', '[/mathjaxinline]']
-                            ],
-                            displayMath: [
-                                ['\\[', '\\]'],
-                                ['[mathjax]', '[/mathjax]']
-                            ]
-                        }
-                    });
-                    // In order to eliminate all flashing during interactive
-                    // preview, it is necessary to set processSectionDelay to 0
-                    // (remove delay between input and output phases). This
-                    // effectively disables fast preview, regardless of
-                    // the fast preview setting as shown in the context menu.
-                    window.MathJax.Hub.processSectionDelay = 0;
-                    window.MathJax.Hub.Configured();
-                }
             },
             'URI': {
                 exports: 'URI'

cms/static/cms/js/spec/main.js

@@ -19,6 +19,36 @@
                 window.edx.HtmlUtils = HtmlUtils;
                 window.edx.StringUtils = StringUtils;
             });
+
+        window.MathJax = {
+            tex: {
+                inlineMath: [
+                    ['\\(', '\\)'],
+                    ['[mathjaxinline]', '[/mathjaxinline]']
+                ],
+                displayMath: [
+                    ['\\[', '\\]'],
+                    ['[mathjax]', '[/mathjax]']
+                ],
+                autoload: {
+                    color: [],
+                    colorv2: ['color']
+                },
+                packages: {'[+]': ['noerrors']}
+            },
+            options: {
+                ignoreHtmlClass: 'tex2jax_ignore',
+                processHtmlClass: 'tex2jax_process',
+                menuOptions: {
+                    settings: {
+                        collapsible: true
+                    },
+                },
+            },
+            loader: {
+                load: ['input/asciimath', '[tex]/noerrors']
+            }
+        };
     }
 
     requirejs.config({
@@ -69,7 +99,7 @@
             'domReady': 'xmodule_js/common_static/js/vendor/domReady',
             'URI': 'xmodule_js/common_static/js/vendor/URI.min',
             'mock-ajax': 'xmodule_js/common_static/js/vendor/mock-ajax',
-            mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js?config=TeX-MML-AM_SVG&delayStartupUntil=configured', // eslint-disable-line max-len
+            mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@4.1.2/tex-mml-chtml.js?noext',
             'youtube': '//www.youtube.com/player_api?noext',
             'js/src/ajax_prefix': 'xmodule_js/common_static/js/src/ajax_prefix',
             'js/spec/test_utils': 'js/spec/test_utils'
@@ -172,15 +202,6 @@
             },
             'mathjax': {
                 exports: 'MathJax',
-                init: function() {
-                    window.MathJax.Hub.Config({
-                        tex2jax: {
-                            inlineMath: [['\\(', '\\)'], ['[mathjaxinline]', '[/mathjaxinline]']],
-                            displayMath: [['\\[', '\\]'], ['[mathjax]', '[/mathjax]']]
-                        }
-                    });
-                    return window.MathJax.Hub.Configured();
-                }
             },
             'accessibility': {
                 exports: 'accessibility',

cms/static/cms/js/spec/main_squire.js

@@ -5,6 +5,37 @@
     'use strict';
 
     var i, specHelpers, testFiles;
+    if (window) {
+        window.MathJax = {
+            tex: {
+                inlineMath: [
+                    ['\\(', '\\)'],
+                    ['[mathjaxinline]', '[/mathjaxinline]']
+                ],
+                displayMath: [
+                    ['\\[', '\\]'],
+                    ['[mathjax]', '[/mathjax]']
+                ],
+                autoload: {
+                    color: [],
+                    colorv2: ['color']
+                },
+                packages: {'[+]': ['noerrors']}
+            },
+            options: {
+                ignoreHtmlClass: 'tex2jax_ignore',
+                processHtmlClass: 'tex2jax_process',
+                menuOptions: {
+                    settings: {
+                        collapsible: true
+                    },
+                },
+            },
+            loader: {
+                load: ['input/asciimath', '[tex]/noerrors']
+            }
+        };
+    }
 
     requirejs.config({
         baseUrl: '/base/',
@@ -48,7 +79,7 @@
             'draggabilly': 'xmodule_js/common_static/js/vendor/draggabilly',
             'domReady': 'xmodule_js/common_static/js/vendor/domReady',
             'URI': 'xmodule_js/common_static/js/vendor/URI.min',
-            mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js?config=TeX-MML-AM_SVG&delayStartupUntil=configured', // eslint-disable-line max-len
+            mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@4.1.2/tex-mml-chtml.js?noext',
             'youtube': '//www.youtube.com/player_api?noext',
             'js/src/ajax_prefix': 'xmodule_js/common_static/js/src/ajax_prefix'
         },
@@ -142,15 +173,6 @@
             },
             'mathjax': {
                 exports: 'MathJax',
-                init: function() {
-                    window.MathJax.Hub.Config({
-                        tex2jax: {
-                            inlineMath: [['\\(', '\\)'], ['[mathjaxinline]', '[/mathjaxinline]']],
-                            displayMath: [['\\[', '\\]'], ['[mathjax]', '[/mathjax]']]
-                        }
-                    });
-                    window.MathJax.Hub.Configured();
-                }
             },
             'URI': {
                 exports: 'URI'

cms/static/sass/studio-main-v1.scss

@@ -20,3 +20,16 @@
 @import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
 @import 'build-v1'; // shared app style assets/rendering
 @import '_builtin-block-variables';
+
+
+mjx-container {
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+table>tbody>tr>td>mjx-container {
+    max-width: inherit;
+    overflow-x: auto;
+    overflow-y: hidden;
+}

common/static/common/js/discussion/mathjax_include.js

@@ -1,56 +1,34 @@
-// See common/templates/mathjax_include.html for info on Fast Preview mode.
-var disableFastPreview = true,
-    vendorScript;
 if (typeof MathJax === 'undefined') {
-    if (disableFastPreview) {
-        window.MathJax = {
-            menuSettings: {CHTMLpreview: false}
-        };
-    }
-
-    vendorScript = document.createElement('script');
-    vendorScript.onload = function() {
-        'use strict';
-
-        var MathJax = window.MathJax,
-            setMathJaxDisplayDivSettings;
-        MathJax.Hub.Config({
-            tex2jax: {
-                inlineMath: [
-                    ['\\(', '\\)'],
-                    ['[mathjaxinline]', '[/mathjaxinline]']
-                ],
-                displayMath: [
-                    ['\\[', '\\]'],
-                    ['[mathjax]', '[/mathjax]']
-                ]
-            }
-        });
-        if (disableFastPreview) {
-            MathJax.Hub.processSectionDelay = 0;
-        }
-        MathJax.Hub.signal.Interest(function(message) {
-            if (message[0] === 'End Math') {
-                setMathJaxDisplayDivSettings();
-            }
-        });
-        setMathJaxDisplayDivSettings = function() {
-            $('.MathJax_Display').each(function() {
-                this.setAttribute('tabindex', '0');
-                this.setAttribute('aria-live', 'off');
-                this.removeAttribute('role');
-                this.removeAttribute('aria-readonly');
-            });
-        };
-    };
-    // Automatic loading of Mathjax accessibility files
     window.MathJax = {
-        menuSettings: {
-            collapsible: true,
-            autocollapse: false,
-            explorer: true
+        tex: {
+            inlineMath: [
+                ['\\(', '\\)'],
+                ['[mathjaxinline]', '[/mathjaxinline]']
+            ],
+            displayMath: [
+                ['\\[', '\\]'],
+                ['[mathjax]', '[/mathjax]']
+            ],
+            autoload: {
+                color: [],
+                colorv2: ['color']
+            },
+            packages: {'[+]': ['noerrors']}
+        },
+        options: {
+            ignoreHtmlClass: 'tex2jax_ignore',
+            processHtmlClass: 'tex2jax_process',
+            menuOptions: {
+                settings: {
+                    collapsible: true
+                },
+            },
+        },
+        loader: {
+            load: ['input/asciimath', '[tex]/noerrors']
         }
     };
-    vendorScript.src = 'https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js?config=TeX-MML-AM_HTMLorMML';
+    var vendorScript = document.createElement('script');
+    vendorScript.src = 'https://cdn.jsdelivr.net/npm/mathjax@4.1.2/tex-mml-chtml.js';
     document.body.appendChild(vendorScript);
 }

common/static/common/js/discussion/utils.js

@@ -493,8 +493,9 @@
         };
 
         DiscussionUtil.typesetMathJax = function(element) {
-            if (typeof MathJax !== 'undefined' && MathJax !== null && typeof MathJax.Hub !== 'undefined') {
-                MathJax.Hub.Queue(['Typeset', MathJax.Hub, element[0]]);
+            if (typeof MathJax !== 'undefined' && MathJax !== null && typeof MathJax.startup !== 'undefined') {
+                MathJax.startup.promise
+                    .then(() => MathJax.typesetPromise([element[0]]));
             }
         };