Support version 3 of MathJax and add config.typesetMath

.circleci/config.yml

@@ -89,7 +89,7 @@ jobs:
     environment:
       # Alaska time (arbitrary timezone to test date logic)
       TZ: "America/Anchorage"
-    parallelism: 8
+    parallelism: 12
     working_directory: ~/plotly.js
     steps:
       - browser-tools/install-browser-tools: &browser-versions
@@ -216,6 +216,24 @@ jobs:
           name: Test MathJax on firefox-latest
           command: .circleci/test.sh mathjax-firefox82+
 
+  make-baselines-mathjax3:
+    docker:
+      - image: circleci/python:3.8.9
+    working_directory: ~/plotly.js
+    steps:
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Install kaleido, plotly.io and required fonts
+          command: .circleci/env_image.sh
+      - run:
+          name: Create mathjax v3 png files
+          command: .circleci/test.sh make-baselines-mathjax3
+      - persist_to_workspace:
+          root: ~/
+          paths:
+            - plotly.js
+
   make-baselines:
     parallelism: 4
     docker:
@@ -249,6 +267,20 @@ jobs:
           path: build
           destination: /
 
+  test-baselines-mathjax3:
+    docker:
+      - image: circleci/node:16.8.0
+    working_directory: ~/plotly.js
+    steps:
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Compare pixels of mathjax v3 baselines
+          command: .circleci/test.sh test-image-mathjax3
+      - store_artifacts:
+          path: build
+          destination: /
+
   make-exports:
     docker:
       - image: circleci/python:3.8.9
@@ -413,6 +445,12 @@ workflows:
       - flaky-no-gl-jasmine:
           requires:
             - install-and-cibuild
+      - make-baselines-mathjax3:
+          requires:
+            - install-and-cibuild
+      - test-baselines-mathjax3:
+          requires:
+            - make-baselines-mathjax3
       - make-baselines:
           requires:
             - install-and-cibuild

.circleci/test.sh

@@ -75,7 +75,15 @@ case $1 in
         ;;
 
     mathjax-firefox82+)
-        ./node_modules/karma/bin/karma start test/jasmine/karma.conf.js --FF --skip-tags=noFF82 --bundleTest=mathjax --nowatch || EXIT_STATE=$?
+        ./node_modules/karma/bin/karma start test/jasmine/karma.conf.js --FF --bundleTest=mathjax --skip-tags=noFF82 --nowatch &&
+        ./node_modules/karma/bin/karma start test/jasmine/karma.conf.js --FF --bundleTest=mathjax --mathjax3 --skip-tags=noFF82 --nowatch &&
+        ./node_modules/karma/bin/karma start test/jasmine/karma.conf.js --FF --bundleTest=mathjax_config --mathjax3 --nowatch &&
+        ./node_modules/karma/bin/karma start test/jasmine/karma.conf.js --FF --bundleTest=mathjax_config --nowatch || EXIT_STATE=$?
+        exit $EXIT_STATE
+        ;;
+
+    make-baselines-mathjax3)
+        python3 test/image/make_baseline.py mathjax3    legend_mathjax_title_and_items mathjax parcats_grid_subplots table_latex_multitrace_scatter table_plain_birds table_wrapped_birds ternary-mathjax || EXIT_STATE=$?
         exit $EXIT_STATE
         ;;
 
@@ -90,6 +98,11 @@ case $1 in
         exit $EXIT_STATE
         ;;
 
+    test-image-mathjax3)
+        node test/image/compare_pixels_test.js mathjax3 || { tar -cvf build/baselines.tar build/test_images/*.png ; exit 1 ; } || EXIT_STATE=$?
+        exit $EXIT_STATE
+        ;;
+
     source-syntax)
         npm run lint        || EXIT_STATE=$?
         npm run test-syntax || EXIT_STATE=$?

README.md

@@ -87,11 +87,19 @@ While non-minified source files may contain characters outside UTF-8, it is reco
 
 > Please note that as of v2 the "plotly-latest" outputs (e.g. https://cdn.plot.ly/plotly-latest.min.js) will no longer be updated on the CDN, and will stay at the last v1 patch v1.58.5. Therefore, to use the CDN with plotly.js v2 and higher, you must specify an exact plotly.js version.
 
-To support MathJax, you need to load version two of MathJax e.g. `v2.7.5` files from CDN or npm.
+To support MathJax, you could load either version two or version three of MathJax files, for example:
 ```html
 <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG.js"></script>
 ```
 
+```html
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-svg.js"></script>
+```
+
+> When using MathJax version 3, it is also possible to use `chtml` output on the other parts of the page in addition to `svg` output for the plotly graph.
+Please refer to `devtools/test_dashboard/index-mathjax3chtml.html` to see an example.
+
+
 ## Bundles
 There are two kinds of plotly.js bundles:
 1. Complete and partial official bundles that are distributed to `npm` and the `CDN`, described in [the dist README](https://github.com/plotly/plotly.js/blob/master/dist/README.md).

devtools/test_dashboard/index-mathjax3.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Plotly.js Devtools - MathJax v3 loaded with svg output</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/[email protected]" 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>
+
+  <p id="pWithMathJax">MathJax $V^3$ with $svg$ output on the page as well as plotly graphs</p>
+  <h4>no MathJax: Apple: $2, Orange: $3</h4>
+
+  <div id="plots">
+    <div id="graph"></div>
+  </div>
+  <div id="snapshot"></div>
+
+  <script>
+    window.MathJax = {
+      startup: {
+        elements: [
+          document.getElementById('pWithMathJax')
+        ],
+        // typeset: false,
+        // in case the elements array is empty one could disable startup typeset
+        // https://docs.mathjax.org/en/latest/options/startup/startup.html#the-configuration-block
+      }
+    };
+  </script>
+  <script src="../../node_modules/mathjax-v3/es5/tex-svg.js"></script>
+  <script charset="utf-8" id="source" src="../../build/plotly.js" type="module"></script>
+  <script charset="utf-8" src="../../build/test_dashboard-bundle.js"></script>
+</body>
+</html>

devtools/test_dashboard/index-mathjax3chtml.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Plotly.js Devtools - MathJax v3 loaded with chtml output</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/[email protected]" 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>
+
+  <p>MathJax $V^3$ with $chtml$ output on the page and <b>svg</b> output on the plotly graphs</p>
+  <div id="plots">
+    <div id="graph"></div>
+  </div>
+  <div id="snapshot"></div>
+
+  <script>
+    window.MathJax = window.MathJax || {
+      // see https://github.com/mathjax/MathJax/issues/2705#issuecomment-859742446
+      loader: {load: ['output/svg']},
+      startup: {
+        ready() {
+          // Get the MathJax modules that we need.
+          const {mathjax} = MathJax._.mathjax;
+          const {SVG} = MathJax._.output.svg_ts;
+
+          // Do the normal setup
+          MathJax.startup.defaultReady();
+
+          // Create an SVG output jax and a new MathDocument that uses it.
+          const svgOutput = new SVG(MathJax.config.svg);
+          const svgDocument = mathjax.document(document, {
+            ...MathJax.config.options,
+            InputJax: MathJax.startup.input,
+            OutputJax: svgOutput
+          });
+
+          // Define the SVG-based conversion methods
+          MathJax.tex2svg = (math, options = {}) => {
+            options.format = svgDocument.inputJax[0].name;
+            return svgDocument.convert(math, options);
+          };
+          /*
+          MathJax.tex2svgPromise = (math, options = {}) => {
+            options.format = svgDocument.inputJax[0].name;
+            return mathjax.handleRetriesFor(() => svgDocument.convert(math, options));
+          };
+          */
+          MathJax.svgStylesheet = () => svgOutput.styleSheet(svgDocument);
+        }
+      }
+    };
+  </script>
+  <script src="../../node_modules/mathjax-v3/es5/tex-chtml.js"></script>
+
+  <script charset="utf-8" id="source" src="../../build/plotly.js" type="module"></script>
+  <script charset="utf-8" src="../../build/test_dashboard-bundle.js"></script>
+</body>
+</html>

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>

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" src="../../build/plotly.js" type="module"></script>
   <script charset="utf-8" src="../../build/test_dashboard-bundle.js"></script>
 </body>

devtools/test_dashboard/server.js

@@ -13,6 +13,8 @@ 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;
+var mathjax3chtml = args.mathjax3chtml;
 
 // Create server
 var server = http.createServer(ecstatic({
@@ -25,7 +27,11 @@ 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' :
+        mathjax3chtml ? '-mathjax3chtml' : ''
+    ) + '.html');
 });
 
 // Bundle devtools code

draftlogs/add_6073.md

@@ -0,0 +1,2 @@
+ - Add support for MathJax version 3 and `typesetMath` attribute to config [[#6073](https://github.com/plotly/plotly.js/pull/6073)],
+   with thanks to [Equinor](https://www.equinor.com) for sponsoring the related development!

package.json

@@ -52,6 +52,8 @@
     "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",
+    "mathjax3chtml": "node devtools/test_dashboard/server.js --mathjax3chtml",
     "strict": "node devtools/test_dashboard/server.js --strict",
     "start": "node devtools/test_dashboard/server.js",
     "baseline": "node test/image/make_baseline.js",
@@ -152,7 +154,8 @@
     "karma-viewport": "1.0.2",
     "lodash": "^4.17.21",
     "madge": "^5.0.1",
-    "mathjax": "2.7.5",
+    "mathjax-v2": "npm:[email protected]",
+    "mathjax-v3": "npm:mathjax@^3.2.0",
     "minify-stream": "^2.1.0",
     "npm-link-check": "^4.0.0",
     "open": "^8.4.0",