diff --git a/css/master.css b/css/master.css
index 9ccec6c..650d76d 100644
--- 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
index 30caee0..588c73c 100644
--- a/index.html
+++ b/index.html
@@ -11,8 +11,6 @@
-
-
diff --git a/src/components/GridArrow.js b/src/components/GridArrow.js
index b4dfa31..6eb6483 100644
--- 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
index e90e5cf..d37c0a4 100644
--- 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
index a7108a0..521dcf6 100644
--- 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(, 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(, 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)