FEATURE: Add KaTeX rendering support (#15)

* FEATURE: Add KaTeX in-browser rendering support.

* Remove ttf fonts from KaTeX

* Update KaTeX to v0.10.1, fix paths to fonts.

Font loading was fixed by rebuilding KaTeX
and specifiying absolute paths to fonts in CSS:
Steps to build KaTeX:

1. `git clone https://github.com/KaTeX/KaTeX.git && cd KaTeX`
    `git submodule update --init --recursive`

2. Change paths to fonts:
    `sed -ri 's/@font-folder.+$/@font-folder:
"\/plugins\/discourse-math\/katex\/fonts";/'
submodules/katex-fonts/fonts.less`

3. Disable TTF fonts:
   `export USE_TTF=false`
    Alternatively, we could modify `.browserslistrc` to match what
Discourse supports

3. Build KaTeX
   `yarn && yarn builld`

4. Copy `katex.min.js` and `katex.min.css` from `dist/` to
`discourse-math/public/katex/`

5. Update fonts, copy woff and woff2 files from
`submodules/katex-fonts/fonts`

* Minor copy edit to settings

Mark MathKJax only settings

* Add Mhchem extension for KaTeX.

It is already automatically loaded for MathJaX.

README.md

@@ -1,5 +1,5 @@
 ## Discourse Math plugin
 
-Adds MathJax support to your Discourse instance.
+Adds LaTeX support to your Discourse instance.
 
 https://meta.discourse.org/t/discourse-math-plugin/65770

assets/javascripts/initializers/discourse-math-katex.js.es6

@@ -0,0 +1,60 @@
+import { withPluginApi } from "discourse/lib/plugin-api";
+import loadScript from "discourse/lib/load-script";
+
+function ensureKaTeX() {
+  return loadScript("/plugins/discourse-math/katex/katex.min.js").then(() => {
+    return loadScript("/plugins/discourse-math/katex/katex.min.css", { css: true }).then(() => {
+      return loadScript("/plugins/discourse-math/katex/mhchem.min.js")
+    })
+  })
+}
+
+function decorate(elem, isPreview) {
+  const $elem = $(elem);
+  const displayMode = elem.tagName === 'DIV';
+
+  if ($elem.data("applied-katex")) {
+    return;
+  }
+  $elem.data("applied-katex", true);
+
+  if ($elem.hasClass("math")) {
+    const text = $elem.text();
+    $elem.text('');
+    window.katex.render(text, elem, { displayMode });
+  }
+}
+
+function katex($elem) {
+  if (!$elem || !$elem.find) {
+    return;
+  }
+
+  const mathElems = $elem.find(".math");
+
+  if (mathElems.length > 0) {
+    const isPreview = $elem.hasClass("d-editor-preview");
+
+    ensureKaTeX().then(() => {
+      mathElems.each((idx, elem) => decorate(elem, isPreview));
+    });
+  }
+}
+
+function initializeMath(api) {
+  api.decorateCooked(function(elem) {
+    katex(elem);
+  });
+}
+
+export default {
+  name: "apply-math-katex",
+  initialize(container) {
+    const siteSettings = container.lookup("site-settings:main");
+    if (siteSettings.discourse_math_enabled && siteSettings.discourse_math_provider === 'katex') {
+      withPluginApi("0.5", function(api) {
+        initializeMath(api);
+      });
+    }
+  }
+};

assets/javascripts/initializers/discourse-math.js.es6 → assets/javascripts/initializers/discourse-math-mathjax.js.es6

@@ -108,15 +108,15 @@ function initializeMath(api, discourse_math_opts) {
 }
 
 export default {
-  name: "apply-math",
+  name: "apply-math-mathjax",
   initialize(container) {
     const siteSettings = container.lookup("site-settings:main");
     let discourse_math_opts = {
       zoom_on_hover: siteSettings.discourse_math_zoom_on_hover,
       enable_accessibility: siteSettings.discourse_math_enable_accessibility,
       enable_asciimath: siteSettings.discourse_math_enable_asciimath
     };
-    if (siteSettings.discourse_math_enabled) {
+    if (siteSettings.discourse_math_enabled && siteSettings.discourse_math_provider == 'mathjax') {
       withPluginApi("0.5", function(api) {
         initializeMath(api, discourse_math_opts);
       });

config/locales/server.en.yml

@@ -4,6 +4,7 @@
 en:
   site_settings:
     discourse_math_enabled: 'Enable Discourse Math plugin (will add special processing to $ and $$ blocks)'
-    discourse_math_zoom_on_hover: 'Zoom 200% on hover'
-    discourse_math_enable_accessibility: 'Enable accessibility features'
-    discourse_math_enable_asciimath: 'Enable asciimath (will add special processing to % delimited input)'
+    discourse_math_provider: 'Default math rendering provider'
+    discourse_math_zoom_on_hover: 'Zoom 200% on hover (MathJax only)'
+    discourse_math_enable_accessibility: 'Enable accessibility features (MathJax only)'
+    discourse_math_enable_asciimath: 'Enable asciimath (will add special processing to % delimited input) (MathJax only)'

config/settings.yml

@@ -2,6 +2,13 @@ plugins:
   discourse_math_enabled:
     default: false
     client: true
+  discourse_math_provider:
+    default: 'mathjax'
+    client: true
+    type: enum
+    choices:
+      - mathjax
+      - katex
   discourse_math_zoom_on_hover:
     default: false
     client: true