Main bulk of moving to MathJax 3

yishn · Sep 22, 2020 · 346195e · 346195e
1 parent 64fb417
commit 346195e
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 33 deletions.
diff --git a/css/master.css b/css/master.css
@@ -359,3 +359,10 @@ a, img {
   .code-box .buttons li.separator {
     flex: 1;
 }
+
+mjx-merror {
+  color: inherit !important;
+  background-color: transparent !important;
+  padding: 2px;
+  border: 1px solid black;
+}
diff --git a/index.html b/index.html
@@ -11,8 +11,6 @@
 
     <link rel="stylesheet" href="./css/master.css" />
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=TeX-AMS_CHTML"></script>
   </head>
   <body>
     <script src="./bundle.js"></script>

diff --git a/src/components/GridArrow.js b/src/components/GridArrow.js
@@ -62,7 +62,7 @@ export default class GridArrow extends Component {
 
     if (nextProps == null) nextProps = this.props
 
-    MathJax.Hub.Queue(() => {
+    MathJax.startup.promise.then(() => {
       let {cellSize, fromSize, toSize} = nextProps
       let [fromWidth, fromHeight] = fromSize || [0, 0]
       let [toWidth, toHeight] = toSize || [0, 0]
@@ -115,18 +115,16 @@ export default class GridArrow extends Component {
 
     let {onTypesetFinish = () => {}} = this.props
 
-    for (let el of this.valueElement.querySelectorAll(
-      ['span[id^="MathJax"]', '.MathJax_Preview', 'script'].join(', ')
-    )) {
-      el.remove()
-    }
-
+    let typesetPromise = Promise.resolve()
     if (this.props.value) {
-      MathJax.Hub.Queue(['Typeset', MathJax.Hub, this.valueElement])
-      MathJax.Hub.Queue(() => {
+      // "Re-render" the value element to give to MathJax
+      MathJax.typesetClear(this.valueElement)
+      this.valueElement.innerHTML = `\\(${this.props.value}\\)`
+
+      typesetPromise = MathJax.typesetPromise([this.valueElement]).then(() => {
         onTypesetFinish({
           id: this.props.id,
-          element: this.valueElement.querySelector('.MathJax_Preview + span')
+          element: this.valueElement.querySelector('mjx-container')
         })
       })
     } else {
@@ -136,7 +134,7 @@ export default class GridArrow extends Component {
       })
     }
 
-    MathJax.Hub.Queue(() => {
+    typesetPromise.then(() => {
       if (
         // Conditions on when we don't need to update label positioning
         this.props === prevProps &&

diff --git a/src/components/GridCell.js b/src/components/GridCell.js
@@ -17,18 +17,15 @@ export default class GridCell extends Component {
   componentDidUpdate(prevProps) {
     let {onTypesetFinish = () => {}} = this.props
 
-    for (let el of this.valueElement.querySelectorAll(
-      ['span[id^="MathJax"]', '.MathJax_Preview', 'script'].join(', ')
-    )) {
-      el.remove()
-    }
-
     if (this.props.value) {
-      MathJax.Hub.Queue(['Typeset', MathJax.Hub, this.valueElement])
-      MathJax.Hub.Queue(() => {
+      // "Re-render" the value element to give to MathJax
+      MathJax.typesetClear(this.valueElement)
+      this.valueElement.innerHTML = `\\(${this.props.value}\\)`
+
+      MathJax.typesetPromise([this.valueElement]).then(() => {
         onTypesetFinish({
           position: this.props.position,
-          element: this.valueElement.querySelector('.MathJax_Preview + span')
+          element: this.valueElement.querySelector('mjx-container')
         })
       })
     } else {

diff --git a/src/index.js b/src/index.js
@@ -1,18 +1,39 @@
 import {h, render} from 'preact'
 import App from './components/App'
 
-// Configure MathJax
+// Render
 
-MathJax.Hub.processSectionDelay = 0
-MathJax.Hub.processUpdateDelay = 0
+render(<App />, document.body)
 
-MathJax.Hub.Config({
-  messageStyle: 'none',
-  skipStartupTypeset: true,
-  showMathMenu: false,
-  errorSettings: {message: ['']}
-})
+// Configure MathJax
 
-// Render
+window.MathJax = {
+  // Load noerrors extension to display raw invalid TeX
+  loader: {load: ['[tex]/noerrors']},
+  startup: {
+    // No typeset at startup
+    typeset: false
+  },
+  tex: {
+    // Use noerrors package
+    packages: {'[+]': ['noerrors']},
+    // Set delimiters for inline math
+    inlineMath: [['\\(', '\\)']]
+  },
+  chtml: {
+    // Set mjx-merror elements to use TeX fonts instead of default browser font
+    merrorFont: ''
+  },
+  options: {
+    // Disable contextual menu
+    enableMenu: false
+  }
+}
 
-render(<App />, document.body)
+// Load MathJax
+
+let script = document.createElement('script')
+script.src =
+  'https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.1.2/es5/tex-chtml.js'
+script.async = true
+document.head.appendChild(script)