WIP: render Mathjax with markdown-it-mathjax

lib/views/layout/layout.html

@@ -35,6 +35,21 @@
 
   <!-- jQuery, emojione -->
   <script src="https://cdn.jsdelivr.net/combine/npm/emojione@3.1.2,npm/jquery@3.3.1"></script>
+  {% if true %}
+    <!-- Mathjax -->
+    <script type="text/x-mathjax-config" async>
+      MathJax.Hub.Config({
+        skipStartupTypeset: true,
+        TeX: { equationNumbers: { autoNumber: "AMS" }},
+        extensions: ["tex2jax.js"],
+        jax: ["input/TeX", "output/SVG"],
+        tex2jax: {
+          processEscapes: true
+        }
+      });
+    </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js" async></script>
+  {% endif %}
 
   {% if env === 'development' %}
     <script src="/dll/vendor.dll.js"></script>

package.json

@@ -94,6 +94,7 @@
     "jquery.cookie": "~1.4.1",
     "markdown-it": "^8.4.0",
     "markdown-it-emoji": "^1.4.0",
+    "markdown-it-mathjax": "^2.0.0",
     "md5": "^2.2.1",
     "method-override": "^2.3.10",
     "mkdirp": "~0.5.1",

resource/js/components/PageEditor/Preview.js

@@ -7,6 +7,13 @@ export default class Preview extends React.Component {
     super(props);
   }
 
+  componentDidUpdate() {
+    const MathJax = window.MathJax;
+    if (MathJax != null) {
+      MathJax.Hub.Queue(["Typeset", MathJax.Hub, this.element]);
+    }
+  }
+
   generateInnerHtml(html) {
     return {__html: html};
   }
@@ -14,7 +21,10 @@ export default class Preview extends React.Component {
   render() {
     return (
       <div
-        ref={this.props.inputRef}
+        ref={(elm) => {
+          this.element = elm;
+          this.props.inputRef(elm);
+        }}
         className="wiki page-editor-preview-body" dangerouslySetInnerHTML={this.generateInnerHtml(this.props.html)}>
       </div>
     )

resource/js/util/GrowiRenderer.js

@@ -7,9 +7,6 @@ import Linker        from './PreProcessor/Linker';
 import ImageExpander from './PreProcessor/ImageExpander';
 import XssFilter     from './PreProcessor/XssFilter';
 
-import emoji         from 'markdown-it-emoji';
-import Mathjax       from './PostProcessor/Mathjax';
-
 import Tsv2Table from './LangProcessor/Tsv2Table';
 import Template from './LangProcessor/Template';
 import PlantUML from './LangProcessor/PlantUML';
@@ -30,7 +27,6 @@ export default class GrowiRenderer {
       new XssFilter(crowi),
     ];
     this.postProcessors = [
-      new Mathjax(crowi),
     ];
 
     this.langProcessors = {
@@ -63,7 +59,8 @@ export default class GrowiRenderer {
    */
   configurePlugins(config) {
     this.md
-        .use(emoji);
+        .use(require('markdown-it-emoji'))
+        .use(require('markdown-it-mathjax')());
 
     // integrate markdown-it-emoji and emojione
     this.md.renderer.rules.emoji = (token, idx) => {

yarn.lock

@@ -3671,6 +3671,10 @@ markdown-it-emoji@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/markdown-it-emoji/-/markdown-it-emoji-1.4.0.tgz#9bee0e9a990a963ba96df6980c4fddb05dfb4dcc"
 
+markdown-it-mathjax@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-mathjax/-/markdown-it-mathjax-2.0.0.tgz#ae2b4f4c5c719a03f9e475c664f7b2685231d9e9"
+
 markdown-it@^8.4.0:
   version "8.4.0"
   resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.4.0.tgz#e2400881bf171f7018ed1bd9da441dac8af6306d"