plotly · archmoj · Mar 5, 2022 · Dec 14, 2021 · Dec 24, 2021 · Jan 3, 2022
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -160,7 +160,7 @@ jobs:
           name: Run jasmine tests (part D)
           command: .circleci/test.sh bundle-jasmine
 
-  mathjax-firefox81:
+  mathjax-v2-firefox81:
     docker:
       # need '-browsers' version to test in real (xvfb-wrapped) browsers
       - image: cimg/node:16.8.0-browsers
@@ -176,10 +176,10 @@ jobs:
       - attach_workspace:
           at: ~/
       - run:
-          name: Test MathJax on firefox-81
-          command: .circleci/test.sh mathjax-firefox
+          name: Test MathJax v2 on firefox-81
+          command: .circleci/test.sh mathjax-v2-firefox
 
-  mathjax-firefox82:
+  mathjax-v2-firefox82:
     docker:
       # need '-browsers' version to test in real (xvfb-wrapped) browsers
       - image: cimg/node:16.8.0-browsers
@@ -195,10 +195,10 @@ jobs:
       - attach_workspace:
           at: ~/
       - run:
-          name: Test MathJax on firefox-82
-          command: .circleci/test.sh mathjax-firefox82+
+          name: Test MathJax v2 on firefox-82
+          command: .circleci/test.sh mathjax-v2-firefox82+
 
-  mathjax-firefoxLatest:
+  mathjax-v2-firefoxLatest:
     docker:
       # need '-browsers' version to test in real (xvfb-wrapped) browsers
       - image: cimg/node:16.8.0-browsers
@@ -213,8 +213,26 @@ jobs:
       - attach_workspace:
           at: ~/
       - run:
-          name: Test MathJax on firefox-latest
-          command: .circleci/test.sh mathjax-firefox82+
+          name: Test MathJax v2 on firefox-latest
+          command: .circleci/test.sh mathjax-v2-firefox82+
+
+  mathjax-v3-firefoxLatest:
+    docker:
+      # need '-browsers' version to test in real (xvfb-wrapped) browsers
+      - image: cimg/node:16.8.0-browsers
+    environment:
+      # Alaska time (arbitrary timezone to test date logic)
+      TZ: "America/Anchorage"
+    working_directory: ~/plotly.js
+    steps:
+      - browser-tools/install-browser-tools: &browser-versions
+          install-chrome: false
+          install-chromedriver: false
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Test MathJax v3 on firefox-latest
+          command: .circleci/test.sh mathjax-v3-firefox82+
 
   make-baselines:
     parallelism: 4
@@ -395,13 +413,16 @@ workflows:
       - bundle-jasmine:
           requires:
             - install-and-cibuild
-      - mathjax-firefox81:
+      - mathjax-v2-firefox81:
+          requires:
+            - install-and-cibuild
+      - mathjax-v2-firefox82:
           requires:
             - install-and-cibuild
-      - mathjax-firefox82:
+      - mathjax-v2-firefoxLatest:
           requires:
             - install-and-cibuild
-      - mathjax-firefoxLatest:
+      - mathjax-v3-firefoxLatest:
           requires:
             - install-and-cibuild
       - no-gl-jasmine:

diff --git a/.circleci/test.sh b/.circleci/test.sh
@@ -69,13 +69,18 @@ case $1 in
         exit $EXIT_STATE
         ;;
 
-    mathjax-firefox)
-        ./node_modules/karma/bin/karma start test/jasmine/karma.conf.js --FF --bundleTest=mathjax --nowatch || EXIT_STATE=$?
+    mathjax-v2-firefox)
+        ./node_modules/karma/bin/karma start test/jasmine/karma.conf.js --FF --bundleTest=mathjax_v2 --nowatch || EXIT_STATE=$?
         exit $EXIT_STATE
         ;;
 
-    mathjax-firefox82+)
-        ./node_modules/karma/bin/karma start test/jasmine/karma.conf.js --FF --skip-tags=noFF82 --bundleTest=mathjax --nowatch || EXIT_STATE=$?
+    mathjax-v2-firefox82+)
+        ./node_modules/karma/bin/karma start test/jasmine/karma.conf.js --FF --skip-tags=noFF82 --bundleTest=mathjax_v2 --nowatch || EXIT_STATE=$?
+        exit $EXIT_STATE
+        ;;
+
+    mathjax-v3-firefox82+)
+        ./node_modules/karma/bin/karma start test/jasmine/karma.conf.js --FF --skip-tags=noFF82 --bundleTest=mathjax_v2 --nowatch || EXIT_STATE=$?
         exit $EXIT_STATE
         ;;
 

diff --git a/devtools/test_dashboard/index-mathjax3.html b/devtools/test_dashboard/index-mathjax3.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Plotly.js Devtools</title>
+  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:600,400,300,200|Droid+Sans|PT+Sans+Narrow|Gravitas+One|Droid+Sans+Mono|Droid+Serif|Raleway|Old+Standard+TT"/>
+  <link rel="stylesheet" type="text/css" href="./style.css">
+</head>
+<body>
+  <header>
+    <img src="http://images.plot.ly/logo/plotlyjs-logo@2x.png" onClick="Tabs.reload();" />
+    <span id="reload-time"></span>
+
+    <input id="mocks-search" type="text" placeholder="mocks search" />
+    <input id="css-transform" type="text" placeholder="css transform" />
+  </header>
+
+  <section id="mocks-list"></section>
+  <div id="plots">
+    <div id="graph"></div>
+  </div>
+  <div id="snapshot"></div>
+
+  <script>
+    window.MathJax = window.MathJax || {
+      tex: {
+        inlineMath: [['$', '$'], ['\\(', '\\)']]
+      }
+    };
+  </script>
+  <script src="../../node_modules/mathjax-v3/es5/tex-mml-svg.js"></script>
+  <script charset="utf-8" id="source"  type="module">import "../../build/plotly.js"</script>
+  <script charset="utf-8" src="../../build/test_dashboard-bundle.js"></script>
+</body>
+</html>
diff --git a/devtools/test_dashboard/index-strict.html b/devtools/test_dashboard/index-strict.html
@@ -22,7 +22,7 @@
   </div>
   <div id="snapshot"></div>
 
-  <script src="../../node_modules/mathjax/MathJax.js?config=TeX-AMS-MML_SVG"></script>
+  <script src="../../node_modules/mathjax-v2/MathJax.js?config=TeX-AMS-MML_SVG"></script>
   <script charset="utf-8" id="source" src="../../build/plotly.js"></script>
   <script charset="utf-8" src="../../build/test_dashboard-bundle.js"></script>
 </body>

diff --git a/devtools/test_dashboard/index.html b/devtools/test_dashboard/index.html
@@ -20,7 +20,7 @@
   </div>
   <div id="snapshot"></div>
 
-  <script src="../../node_modules/mathjax/MathJax.js?config=TeX-AMS-MML_SVG"></script>
+  <script src="../../node_modules/mathjax-v2/MathJax.js?config=TeX-AMS-MML_SVG"></script>
   <script charset="utf-8" id="source"  type="module">import "../../build/plotly.js"</script>
   <script charset="utf-8" src="../../build/test_dashboard-bundle.js"></script>
 </body>

diff --git a/devtools/test_dashboard/server.js b/devtools/test_dashboard/server.js
@@ -13,6 +13,7 @@ var shortcutPaths = require('../../tasks/util/shortcut_paths');
 var args = minimist(process.argv.slice(2), {});
 var PORT = args.port || 3000;
 var strict = args.strict;
+var mathjax3 = args.mathjax3;
 
 // Create server
 var server = http.createServer(ecstatic({
@@ -25,7 +26,10 @@ var server = http.createServer(ecstatic({
 // Make watchified bundle for plotly.js
 var bundlePlotly = makeWatchifiedBundle(strict, function() {
     // open up browser window on first bundle callback
-    open('http://localhost:' + PORT + '/devtools/test_dashboard/index' + (strict ? '-strict' : '') + '.html');
+    open('http://localhost:' + PORT + '/devtools/test_dashboard/index' + (
+        strict ? '-strict' :
+        mathjax3 ? '-mathjax3' : ''
+    ) + '.html');
 });
 
 // Bundle devtools code

diff --git a/draftlogs/add_6073.md b/draftlogs/add_6073.md
@@ -0,0 +1 @@
+ - Add support for MathJax version 3 [[#6073](https://github.com/plotly/plotly.js/pull/6073)]
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     "test-requirejs": "node tasks/test_requirejs.js",
     "test-plain-obj": "node tasks/test_plain_obj.js",
     "test": "npm run test-jasmine -- --nowatch && npm run test-bundle && npm run test-image && npm run test-export && npm run test-syntax && npm run lint",
+    "mathjax3": "node devtools/test_dashboard/server.js --mathjax3",
     "strict": "node devtools/test_dashboard/server.js --strict",
     "start": "node devtools/test_dashboard/server.js",
     "baseline": "node test/image/make_baseline.js",
@@ -152,7 +153,8 @@
     "karma-viewport": "^1.0.8",
     "lodash": "^4.17.21",
     "madge": "^5.0.1",
-    "mathjax": "2.7.5",
+    "mathjax-v2": "npm:mathjax@2.7.5",
+    "mathjax-v3": "npm:mathjax@^3.2.0",
     "minify-stream": "^2.1.0",
     "npm-link-check": "^4.0.0",
     "open": "^8.4.0",

diff --git a/src/lib/svg_text_utils.js b/src/lib/svg_text_utils.js
@@ -174,18 +174,25 @@ function cleanEscapesForTex(s) {
 }
 
 function texToSVG(_texString, _config, _callback) {
+    var MathJaxVersion = parseInt(
+        (MathJax.version || '').split('.')[0]
+    ) || -1;
+
+    if(!MathJaxVersion) {
+        Lib.log('No MathJax version:', MathJax.version);
+    }
+
     var originalRenderer,
         originalConfig,
         originalProcessSectionDelay,
         tmpDiv;
 
-    MathJax.Hub.Queue(
-    function() {
+    var v2SetConfig = function() {
         originalConfig = Lib.extendDeepAll({}, MathJax.Hub.config);
 
         originalProcessSectionDelay = MathJax.Hub.processSectionDelay;
         if(MathJax.Hub.processSectionDelay !== undefined) {
-            // MathJax 2.5+
+            // MathJax 2.5+ but not 3+
             MathJax.Hub.processSectionDelay = 0;
         }
 
@@ -196,47 +203,83 @@ function texToSVG(_texString, _config, _callback) {
             },
             displayAlign: 'left',
         });
-    },
-    function() {
+    };
+
+    var v2SetRenderer = function() {
         // Get original renderer
         originalRenderer = MathJax.Hub.config.menuSettings.renderer;
         if(originalRenderer !== 'SVG') {
             return MathJax.Hub.setRenderer('SVG');
         }
-    },
-    function() {
+    };
+
+    var initiateMathJax = function() {
         var randomID = 'math-output-' + Lib.randstr({}, 64);
         tmpDiv = d3.select('body').append('div')
             .attr({id: randomID})
             .style({visibility: 'hidden', position: 'absolute'})
             .style({'font-size': _config.fontSize + 'px'})
             .text(cleanEscapesForTex(_texString));
 
-        return MathJax.Hub.Typeset(tmpDiv.node());
-    },
-    function() {
+        var tmpNode = tmpDiv.node();
+
+        if(MathJaxVersion < 3) {
+            return MathJax.Hub.Typeset(tmpNode);
+        } {
+            return MathJax.typeset([tmpNode]);
+        }
+    };
+
+    var finalizeMathJax = function() {
         var glyphDefs = d3.select('body').select('#MathJax_SVG_glyphs');
 
-        if(tmpDiv.select('.MathJax_SVG').empty() || !tmpDiv.select('svg').node()) {
+        var q;
+        if(MathJaxVersion < 3) {
+            q = tmpDiv.select('.MathJax_SVG');
+        } else {
+            q = tmpDiv;
+        }
+
+        if(q.empty() || !tmpDiv.select('svg').node()) {
             Lib.log('There was an error in the tex syntax.', _texString);
             _callback();
         } else {
             var svgBBox = tmpDiv.select('svg').node().getBoundingClientRect();
-            _callback(tmpDiv.select('.MathJax_SVG'), glyphDefs, svgBBox);
+            _callback(q, glyphDefs, svgBBox);
         }
 
         tmpDiv.remove();
+    };
 
+    var v2ResetRenderer = function() {
         if(originalRenderer !== 'SVG') {
             return MathJax.Hub.setRenderer(originalRenderer);
         }
-    },
-    function() {
+    };
+
+    var v2ResetConfig = function() {
         if(originalProcessSectionDelay !== undefined) {
             MathJax.Hub.processSectionDelay = originalProcessSectionDelay;
         }
         return MathJax.Hub.Config(originalConfig);
-    });
+    };
+
+    if(MathJaxVersion < 3) {
+        MathJax.Hub.Queue(
+            v2SetConfig,
+            v2SetRenderer,
+            initiateMathJax,
+            finalizeMathJax,
+            v2ResetRenderer,
+            v2ResetConfig
+        );
+    } else {
+        MathJax.startup.defaultReady();
+        MathJax.startup.promise.then(function() {
+            initiateMathJax();
+            finalizeMathJax();
+        });
+    }
 }
 
 var TAG_STYLES = {

diff --git a/tasks/noci_test.sh b/tasks/noci_test.sh
@@ -28,7 +28,7 @@ test_image () {
     $root/../orca/bin/orca.js graph \
         $root/test/image/mocks/mapbox_osm-style.json \
         $root/test/image/mocks/mapbox_density0-legend.json \
-        --mathjax $root/node_modules/mathjax/MathJax.js \
+        --mathjax $root/node_modules/mathjax-v2/MathJax.js \
         --plotly $root/build/plotly.js \
         --mapbox-access-token "pk.eyJ1IjoicGxvdGx5LWpzLXRlc3RzIiwiYSI6ImNrNG9meTJmOTAxa3UzZm10dWdteDQ2eWMifQ.2REjOFyIrleMqwS8H8y1-A" \
         --output-dir $root/test/image/baselines/ \