MathML polyfill: Update MathJax to ^3.2.0

Drastically reduces MathJax's burden on the build:
* Brings a huge speed boost to Grunt's "copy:js" task (from ~13 to ~2 seconds)
* Reduces MathJax's compiled size down from ~25 MB (1,347 files/809 folders) to ~1 MB (24 files/5 folders)
* Almost halves the production dist folder's size (from ~55 MB to ~31 MB)

Related changes:
* Disable MathJax's context menu
* Add an ES6 polyfill for IE11 support
* Add extra line comments to give more context about how the polyfills are loaded in
* Change the MathJax fallback test to look for a configuration option we're not customizing
* Uses the CDN's latest version of MathJax 3
  * Falls back on WET's local version of MathJax 3.2.0 if the CDN is unreachable
  * Tries loading a local version of MathJax 2 if all else fails
* Add a temporary CSS workaround for mathjax/MathJax#2765 (thanks @dpvc!)
* Remove the build system's string-replace:inline task (was only being used to insert a specific version number in the CDN's URL)
* Update the documentation's known issues section:
  * Change it into an unordered list
  * Replace mentions of IE7-9 support with Chromium and IE11
  * Remove mention of SVG support
  * Add an item about IE11 only being supported in internet-connected networks (due to its ES6 polyfill)
  * Remove items specific to IE7-8

Notes:
* Disabling MathJax's context menu has the following impacts:
  * Works around MathJax 3.x's missing i18n support
  * Makes MathJax more closely mimic native MathML implementations (i.e. scraps bells and whistles that go beyond being a polyfill)
  * Removes some accessibility/usability enhancements that were present in WET's MathJax 2.x implementation (e.g. focusing on expressions, double-click to zoom). But it's not a huge loss since those enhancements don't exist in native MathML implementations. Visually-hidden MathML markup is still provided for ATs that support it.
  * Prevents users from accessing options that are excluded from WET's local copy of MathJax (e.g. "Math Settings - Math Renderer - SVG")
* IE considerations:
  * Breaks compatibility with older versions of IE (older than IE11)
  * IE11 will only work if internet access is available
* Somewhat alleviates wet-boew#8425 (could still be improved by removing MathJax from the "copy:js" task)
* Fixes wet-boew#8769

Gruntfile.coffee

@@ -126,7 +126,6 @@ module.exports = (grunt) ->
 			"copy:js"
 			"concat:core"
 			"concat:coreIE8"
-			"string-replace"
 			"concat:pluginsIE8"
 			"concat:i18n"
 		]
@@ -313,7 +312,6 @@ module.exports = (grunt) ->
 		themeDist: "dist/theme-wet-boew"
 		jqueryVersion: "<%= pkg.dependencies.jquery %>"
 		jqueryOldIEVersion: "1.12.4"
-		MathJaxVersion: "<%= pkg.dependencies.mathjax %>"
 		banner: "/*!\n * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)\n * wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html\n" +
 				" * v<%= pkg.version %> - " + "<%= grunt.template.today('yyyy-mm-dd') %>\n *\n */"
 		modernizrBanner: "/*! Modernizr (Custom Build) | MIT & BSD */\n"
@@ -1141,15 +1139,10 @@ module.exports = (grunt) ->
 					expand: true
 					flatten: true
 				,
-					cwd: "node_modules/mathjax"
+					cwd: "node_modules/mathjax/es5"
 					src: [
-						"MathJax.js"
-						"config/**"
-						"extensions/**"
-						"jax/**"
-						"localization/**"
-						"fonts/HTML-CSS/TeX/woff/**"
-						"fonts/HTML-CSS/TeX/otf/**"
+						"mml-chtml.js"
+						"output/chtml/fonts/woff-v2/**"
 					]
 					dest: "<%= coreDist %>/js/MathJax/"
 					expand: true
@@ -1391,16 +1384,6 @@ module.exports = (grunt) ->
 			assemble:
 				dest: 'site/data/i18n'
 
-		"string-replace":
-			inline:
-				files:
-					"dist/wet-boew/js/": "dist/wet-boew/js/*.js"
-				options:
-					replacements: [
-						pattern: "WET_BOEW_VERSION_MATHJAX"
-						replacement: "<%= MathJaxVersion %>"
-					]
-
 		"gh-pages":
 			options:
 				clone: "wet-boew-dist"

package.json

@@ -41,7 +41,7 @@
     "jquery": "2.2.4",
     "jquery-validation": "1.19.3",
     "magnific-popup": "git+https://github.com/wet-boew/Magnific-Popup.git#1.0.0+keyboard_trap_fix",
-    "mathjax": "2.7.4",
+    "mathjax": "^3.2.0",
     "proj4": "2.3.3",
     "unorm": "^1.6.0"
   },

src/core/wb.js

@@ -571,18 +571,54 @@ Modernizr.load( [
 					// Start initialization
 					wb.init( document, componentName, selector );
 
+					// Disable MathJax's context menu to more closely mimic native MathML implementations
+					window.MathJax = {
+						options: {
+							enableMenu: false
+						}
+					};
+
+					// Load an ES6 polyfill for IE11
+					Modernizr.load( [ {
+						test: window.navigator.msSaveOrOpenBlob,
+						yep: "timeout=500!https://polyfill.io/v3/polyfill.min.js?features=es6"
+					} ] );
+
 					// Load the MathML dependency. Since the polyfill is only loaded
 					// when !Modernizr.mathml, we can skip the test here.
 					Modernizr.load( [ {
-						load: "timeout=500!https://cdn.jsdelivr.net/npm/mathjax@WET_BOEW_VERSION_MATHJAX/MathJax.js?config=Accessible",
+
+						// Load latest version of MathJax 3 from a CDN
+						// Also load a CSS workaround for a MathJax 3.2.0 bug (refer to CSS file for details)
+						load: [
+							"timeout=500!https://cdn.jsdelivr.net/npm/mathjax@3/es5/mml-chtml.js",
+							"plyfll!mathml.min.css"
+						],
 						complete: function() {
-							Modernizr.load( [ {
-								test: window.MathJax === undefined,
-								yep: "mthjx!MathJax.js?config=Accessible"
-							} ] );
 
-							// Identify that initialization has completed
-							wb.ready( $document, componentName );
+							// Wait a moment to reduce the risk of a race condition
+							setTimeout( function() {
+
+								// Fall back on a local copy of MathJax 3 if CDN loading fails
+								// Note: Won't work with IE11 in isolated networks (ES6 polyfill has no local fallback)
+								Modernizr.load( [ {
+									test: window.MathJax.startup,
+									nope: "mthjx!mml-chtml.js",
+									complete: function() {
+
+										// Try loading a local copy of MathJax 2 as a last dith effort
+										Modernizr.load( [ {
+											test: window.MathJax.startup,
+											nope: "mthjx!MathJax.jsx?config=Accessible",
+											complete: function() {
+
+												// Identify that initialization has completed
+												wb.ready( $document, componentName );
+											}
+										} ] );
+									}
+								} ] );
+							}, 100 );
 						}
 					} ] );
 				} );

src/polyfills/mathml/mathml-en.hbs

@@ -7,18 +7,17 @@
 	"tag": "mathml",
 	"parentdir": "mathml",
 	"altLangPrefix": "mathml",
-	"dateModified": "2014-02-19"
+	"dateModified": "2021-09-20"
 }
 ---
 
 <section><h2>Overview</h2>
 <p>This polyfill loads MathJax when MathML is detected on the page and the browser has inadequate MathML support.</p>
 <section><h3>Known issues</h3>
-<ol>
-<li>Browsers that lack both MathML and SVG support (e.g., IE7 - IE9) will take longer to load MathML than browsers with either SVG or MathML support</li>
-<li>IE8 takes a lot longer to load MathML than either IE7 or IE9 (known MathJax reflow issue)</li>
-<li>Pages with a lot of complex formulas can take a few minutes to load on slow machines running IE8 (known MathJax issue)</li>
-</ol>
+<ul>
+<li>Browsers that lack MathML support (e.g. Chromium and IE11) will take longer to load MathML than browsers with MathML support</li>
+<li>IE11 won't display MathML correctly in isolated networks. It relies on an extra polyfill that requires internet access.</li>
+</ul>
 </section>
 </section>
 

src/polyfills/mathml/mathml-fr.hbs

@@ -7,19 +7,18 @@
 	"tag": "mathml",
 	"parentdir": "mathml",
 	"altLangPrefix": "mathml",
-	"dateModified": "2014-02-19"
+	"dateModified": "2021-09-20"
 }
 ---
 
 <div lang="en">
 <section><h2>Overview</h2>
 <p>This polyfill loads MathJax when MathML is detected on the page and the browser has inadequate MathML support.</p>
 <section><h3>Known issues</h3>
-<ol>
-<li>Browsers that lack both MathML and SVG support (e.g., IE7 - IE9) will take longer to load MathML than browsers with either SVG or MathML support</li>
-<li>IE8 takes a lot longer to load MathML than either IE7 or IE9 (known MathJax reflow issue)</li>
-<li>Pages with a lot of complex formulas can take a few minutes to load on slow machines running IE8 (known MathJax issue)</li>
-</ol>
+<ul>
+<li>Browsers that lack MathML support (e.g. Chromium and IE11) will take longer to load MathML than browsers with MathML support</li>
+<li>IE11 won't display MathML correctly in isolated networks. It relies on an extra polyfill that requires internet access.</li>
+</ul>
 </section>
 </section>
 </div>

src/polyfills/mathml/mathml.scss

@@ -0,0 +1,19 @@
+/*
+ * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
+ * wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
+ */
+
+/*
+Extra CSS for MathJax 3.2.0:
+-Prevent msubsup element's superscripts from looking like subscripts
+-See https://github.com/mathjax/MathJax/issues/2765#issuecomment-920400049
+-Only needed for 3.2.0, remove whenever WET updates to > 3.2.0
+*/
+
+mjx-script > * {
+	display: inline-block !important;
+}
+
+mjx-script > mjx-spacer {
+	display: block !important;
+}