diff --git a/editors/demo/src/Editoria/layout/EditorElements.js b/editors/demo/src/Editoria/layout/EditorElements.js
index 7aa3866787d6ad64c7d9aaa06ac3785299998adc..c6d44d363c8bf8c02e55a0f60785465b5441e79a 100644
--- a/editors/demo/src/Editoria/layout/EditorElements.js
+++ b/editors/demo/src/Editoria/layout/EditorElements.js
@@ -386,6 +386,7 @@ export default css`
math-display .math-render {
display: block;
+ text-align: center;
}
math-display.ProseMirror-selectednode {
@@ -404,10 +405,6 @@ export default css`
color: #b0b0b0;
}
- math-display .katex-display {
- margin: 0;
- }
-
/* -- Selection Plugin ---------------------------------- */
p::selection,
diff --git a/editors/demo/src/Editoria/layout/EditoriaLayout.js b/editors/demo/src/Editoria/layout/EditoriaLayout.js
index 0fc9665168b670d03fb8d1118bfc7d2d5a6f9795..3a40000d648c92e861529ce56da83459e152a775 100644
--- a/editors/demo/src/Editoria/layout/EditoriaLayout.js
+++ b/editors/demo/src/Editoria/layout/EditoriaLayout.js
@@ -7,9 +7,6 @@ import { grid, th } from '@pubsweet/ui-toolkit';
import { cokoTheme } from '../theme';
import EditorElements from './EditorElements';
-/* Katex css */
-import '~../../katex/dist/katex.min.css';
-
const divider = css`
.panelGroup {
background: #fff;
diff --git a/editors/demo/src/Editoria/layout/EditoriaMobileLayout.js b/editors/demo/src/Editoria/layout/EditoriaMobileLayout.js
index b0fd63c353d526a34bde8d38c03c75afddaa7a69..8bb9cc23dd4fe33a50a9002e2ab44dd6bc3a2c3e 100644
--- a/editors/demo/src/Editoria/layout/EditoriaMobileLayout.js
+++ b/editors/demo/src/Editoria/layout/EditoriaMobileLayout.js
@@ -8,9 +8,6 @@ import { grid, th } from '@pubsweet/ui-toolkit';
import { cokoTheme } from '../theme';
import EditorElements from './EditorElements';
-/* Katex css */
-import '~../../katex/dist/katex.min.css';
-
const divider = css`
.panelGroup {
background: #fff;
diff --git a/editors/demo/src/HHMI/layout/EditorElements.js b/editors/demo/src/HHMI/layout/EditorElements.js
index a8f39f97290c16ed5e941712347e307fca169c11..4d3b79fc0c922fe76bca10d0c36807d780af3101 100644
--- a/editors/demo/src/HHMI/layout/EditorElements.js
+++ b/editors/demo/src/HHMI/layout/EditorElements.js
@@ -280,6 +280,7 @@ export default css`
math-display .math-render {
display: block;
+ text-align: center;
}
math-display.ProseMirror-selectednode {
@@ -298,10 +299,6 @@ export default css`
color: #b0b0b0;
}
- math-display .katex-display {
- margin: 0;
- }
-
/* -- Selection Plugin ---------------------------------- */
p::selection,
diff --git a/editors/demo/src/HHMI/layout/HhmiLayout.js b/editors/demo/src/HHMI/layout/HhmiLayout.js
index d01b2740b5b68860b187ab3367e63ea036c68b69..d71d53845b509faed167d2a0f488ab08aecd9813 100644
--- a/editors/demo/src/HHMI/layout/HhmiLayout.js
+++ b/editors/demo/src/HHMI/layout/HhmiLayout.js
@@ -5,8 +5,6 @@ import { grid, th } from '@pubsweet/ui-toolkit';
import { cokoTheme } from '../theme';
import 'antd/dist/antd.css';
import EditorElements from './EditorElements';
-/* Katex css */
-import '~../../katex/dist/katex.min.css';
const Wrapper = styled.div`
background: ${th('colorBackground')};
diff --git a/wax-prosemirror-plugins/package.json b/wax-prosemirror-plugins/package.json
index 033239fcaa07dc6156b3cd593e9bc0a3dfabb3d5..eea70a391c1bb1f0942df3823d178f374306c40e 100644
--- a/wax-prosemirror-plugins/package.json
+++ b/wax-prosemirror-plugins/package.json
@@ -14,7 +14,7 @@
},
"dependencies": {
"highlight.js": "^10.1.1",
- "katex": "^0.12.0",
+ "mathjax-full": "3.1.4",
"lodash": "^4.17.4",
"prosemirror-commands": "1.1.10",
"prosemirror-highlightjs": "^0.2.0",
diff --git a/wax-prosemirror-plugins/src/math/math-nodeview.js b/wax-prosemirror-plugins/src/math/math-nodeview.js
index 48e209e7c04d137ccd6694535eeb4abc5be3f37d..04dd5c4e85965a6dd1b7a126dd782d293f24b00f 100644
--- a/wax-prosemirror-plugins/src/math/math-nodeview.js
+++ b/wax-prosemirror-plugins/src/math/math-nodeview.js
@@ -8,9 +8,43 @@ import {
chainCommands,
deleteSelection,
} from 'prosemirror-commands';
-// katex
-import katex, { ParseError } from 'katex';
import { collapseMathCmd } from './helpers/collapse-math-cmd';
+// mathjax
+
+import { mathjax } from 'mathjax-full/js/mathjax';
+import { TeX } from 'mathjax-full/js/input/tex.js';
+import { SVG } from 'mathjax-full/js/output/svg';
+import { liteAdaptor } from 'mathjax-full/js/adaptors/liteAdaptor.js';
+import { browserAdaptor } from 'mathjax-full/js/adaptors/browserAdaptor';
+import { RegisterHTMLHandler } from 'mathjax-full/js/handlers/html';
+import { AssistiveMmlHandler } from 'mathjax-full/js/a11y/assistive-mml.js';
+
+import { AllPackages } from 'mathjax-full/js/input/tex/AllPackages.js';
+import { STATE } from 'mathjax-full/js/core/MathItem';
+
+//
+// Minimal CSS needed for stand-alone image
+//
+const CSS = [
+ 'svg a{fill:blue;stroke:blue}',
+ '[data-mml-node="merror"]>g{fill:red;stroke:red}',
+ '[data-mml-node="merror"]>rect[data-background]{fill:yellow;stroke:none}',
+ '[data-frame],[data-line]{stroke-width:70px;fill:none}',
+ '.mjx-dashed{stroke-dasharray:140}',
+ '.mjx-dotted{stroke-linecap:round;stroke-dasharray:0,140}',
+ 'use[data-c]{stroke-width:3px}',
+].join('');
+
+//
+// Create DOM adaptor and register it for HTML documents
+//
+const packages = AllPackages.sort().join(', ');
+const adaptor = liteAdaptor();
+const handler = RegisterHTMLHandler(adaptor);
+// if (argv.assistiveMml) AssistiveMmlHandler(handler);
+const tex = new TeX({ packages: packages.split(/\s*,\s*/) });
+const svg = new SVG({ fontCache: 'none' });
+const html = mathjax.document('', { InputJax: tex, OutputJax: svg });
export class MathView {
// == Lifecycle ===================================== //
@@ -161,20 +195,14 @@ export class MathView {
} else {
this.dom.classList.remove('empty-math');
}
- // render katex, but fail gracefully
- try {
- katex.render(texString, this._mathRenderElt, this._katexOptions);
- this._mathRenderElt.classList.remove('parse-error');
- this.dom.setAttribute('title', '');
- } catch (err) {
- if (err instanceof ParseError) {
- console.error(err);
- this._mathRenderElt.classList.add('parse-error');
- this.dom.setAttribute('title', err.toString());
- } else {
- throw err;
- }
- }
+
+ const node = html.convert(texString || '', {
+ em: 16,
+ ex: 8,
+ containerWidth: 700,
+ });
+
+ this._mathRenderElt.innerHTML = adaptor.innerHTML(node);
}
// == Inner Editor ================================== //
dispatchInner(tr) {
diff --git a/yarn.lock b/yarn.lock
index 1f0d4bf0e13f2afef25b477285d979c1c450ea22..2a29678a27a84b556eca7a56e4cd502de9673bfa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5854,6 +5854,11 @@ commander@2.9.0:
dependencies:
graceful-readlink ">= 1.0.0"
+commander@>=7.0.0:
+ version "8.3.0"
+ resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
+ integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
+
commander@^2.11.0, commander@^2.19.0, commander@^2.20.0:
version "2.20.3"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@@ -7949,6 +7954,11 @@ eslint@^6.6.0, eslint@^6.8.0:
text-table "^0.2.0"
v8-compile-cache "^2.0.3"
+esm@^3.2.25:
+ version "3.2.25"
+ resolved "https://registry.yarnpkg.com/esm/-/esm-3.2.25.tgz#342c18c29d56157688ba5ce31f8431fbb795cc10"
+ integrity sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==
+
espree@^6.1.2:
version "6.2.1"
resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
@@ -11327,13 +11337,6 @@ jsx-ast-utils@^2.2.1, jsx-ast-utils@^2.2.3, jsx-ast-utils@^2.4.1:
array-includes "^3.1.1"
object.assign "^4.1.0"
-katex@^0.12.0:
- version "0.12.0"
- resolved "https://registry.yarnpkg.com/katex/-/katex-0.12.0.tgz#2fb1c665dbd2b043edcf8a1f5c555f46beaa0cb9"
- integrity sha512-y+8btoc/CK70XqcHqjxiGWBOeIL8upbS0peTPXTvgrh21n1RiWWcIpSWM+4uXq+IAgNh9YYQWdc7LVDPDAEEAg==
- dependencies:
- commander "^2.19.0"
-
killable@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
@@ -11996,6 +11999,15 @@ math-expression-evaluator@^1.2.14:
resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.22.tgz#c14dcb3d8b4d150e5dcea9c68c8dad80309b0d5e"
integrity sha512-L0j0tFVZBQQLeEjmWOvDLoRciIY8gQGWahvkztXUal8jH8R5Rlqo9GCvgqvXcy9LQhEWdQCVvzqAbxgYNt4blQ==
+mathjax-full@3.1.4:
+ version "3.1.4"
+ resolved "https://registry.yarnpkg.com/mathjax-full/-/mathjax-full-3.1.4.tgz#ec9c51abf55b427e0fd54760ca9478d439406e59"
+ integrity sha512-80lZZci7vqQQV2wdLcnFUtI7z5Aru0RL03wPw8JM6kFPmX4CA/SYfnlQQ1WIIBU+0p0YoxJ6Z3gAUcVzvDArhw==
+ dependencies:
+ esm "^3.2.25"
+ mj-context-menu "^0.6.1"
+ speech-rule-engine "^3.2.0"
+
mathml-tag-names@^2.1.3:
version "2.1.3"
resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
@@ -12469,6 +12481,11 @@ mixin-object@^2.0.1:
for-in "^0.1.3"
is-extendable "^0.1.1"
+mj-context-menu@^0.6.1:
+ version "0.6.1"
+ resolved "https://registry.yarnpkg.com/mj-context-menu/-/mj-context-menu-0.6.1.tgz#a043c5282bf7e1cf3821de07b13525ca6f85aa69"
+ integrity sha512-7NO5s6n10TIV96d4g2uDpG7ZDpIhMh0QNfGdJw/W47JswFcosz457wqz/b5sAKvl12sxINGFCn80NZHKwxQEXA==
+
mkdirp@0.5.1:
version "0.5.1"
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
@@ -17222,6 +17239,15 @@ specificity@^0.4.1:
resolved "https://registry.yarnpkg.com/specificity/-/specificity-0.4.1.tgz#aab5e645012db08ba182e151165738d00887b019"
integrity sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg==
+speech-rule-engine@^3.2.0:
+ version "3.3.3"
+ resolved "https://registry.yarnpkg.com/speech-rule-engine/-/speech-rule-engine-3.3.3.tgz#781ed03cbcf3279f94d1d80241025ea954c6d571"
+ integrity sha512-0exWw+0XauLjat+f/aFeo5T8SiDsO1JtwpY3qgJE4cWt+yL/Stl0WP4VNDWdh7lzGkubUD9lWP4J1ASnORXfyQ==
+ dependencies:
+ commander ">=7.0.0"
+ wicked-good-xpath "^1.3.0"
+ xmldom-sre "^0.1.31"
+
split-string@^3.0.1, split-string@^3.0.2:
version "3.1.0"
resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -19192,6 +19218,11 @@ which@^2.0.1, which@^2.0.2:
dependencies:
isexe "^2.0.0"
+wicked-good-xpath@^1.3.0:
+ version "1.3.0"
+ resolved "https://registry.yarnpkg.com/wicked-good-xpath/-/wicked-good-xpath-1.3.0.tgz#81b0e95e8650e49c94b22298fff8686b5553cf6c"
+ integrity sha1-gbDpXoZQ5JyUsiKY//hoa1VTz2w=
+
wide-align@^1.1.0:
version "1.1.3"
resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
@@ -19493,6 +19524,11 @@ xmlchars@^2.1.1:
resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
+xmldom-sre@^0.1.31:
+ version "0.1.31"
+ resolved "https://registry.yarnpkg.com/xmldom-sre/-/xmldom-sre-0.1.31.tgz#10860d5bab2c603144597d04bf2c4980e98067f4"
+ integrity sha512-f9s+fUkX04BxQf+7mMWAp5zk61pciie+fFLC9hX9UVvCeJQfNHRHXpeo5MPcR0EUf57PYLdt+ZO4f3Ipk2oZUw==
+
xregexp@^4.3.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.3.0.tgz#7e92e73d9174a99a59743f67a4ce879a04b5ae50"