Merge

src/components/d-math.js

@@ -2,8 +2,11 @@
 import { Mutating } from '../mixins/mutating.js';
 import { Template } from '../mixins/template.js';
 
-const katexJSURL = 'https://distill.pub/third-party/katex/katex.min.js';
-const katexCSSTag = '<link rel="stylesheet" href="https://distill.pub/third-party/katex/katex.min.css" crossorigin="anonymous">';
+// attaches renderMathInElement to window
+import { renderMathInElement } from '../helpers/katex-auto-render';
+
+export const katexJSURL = 'https://distill.pub/third-party/katex/katex.min.js';
+export const katexCSSTag = '<link rel="stylesheet" href="https://distill.pub/third-party/katex/katex.min.css" crossorigin="anonymous">';
 
 const T = Template('d-math', `
 <style>
@@ -17,19 +20,6 @@ const T = Template('d-math', `
   display: block;
 }
 
-#katex-container .katex-display {
-  text-align: left;
-  padding: 8px 0 8px 40px;
-  margin: 20px 0 ;
-  /*border-left: solid 1px rgba(0, 0, 0, 0.1);*/
-}
-
-#katex-container .katex {
-  -webkit-font-smoothing: antialiased;
-  color: rgba(0, 0, 0, 0.8);
-  font-size: 1.18em;
-}
-
 </style>
 
 ${katexCSSTag}
@@ -38,38 +28,66 @@ ${katexCSSTag}
 `);
 
 
-// DMath, not Math, because that's a JS built-in
+// DMath, not Math, because that would conflict with the JS built-in
 export class DMath extends Mutating(T(HTMLElement)) {
 
+  static set katexOptions(options) {
+    DMath._katexOptions = options;
+    if (DMath.katexOptions.delimiters && !DMath.katexAdded) {
+      DMath.addKatex();
+    }
+  }
+
+  static get katexOptions() {
+    if (!DMath._katexOptions) {
+      DMath._katexOptions = {};
+    }
+    return DMath._katexOptions;
+  }
+
   static katexLoadedCallback() {
+    // render all d-math tags
     const mathTags = document.querySelectorAll('d-math');
     for (const mathTag of mathTags) {
       mathTag.renderContent();
     }
+    // transform inline delimited math to d-math tags
+    if (DMath.katexOptions.delimiters) {
+      const article = document.querySelector('d-article');
+      renderMathInElement(article, DMath.katexOptions);
+    }
+  }
+
+  static addKatex() {
+    // script tag has to be created to work properly
+    const scriptTag = document.createElement('script');
+    scriptTag.src = katexJSURL;
+    scriptTag.async = true;
+    scriptTag.onload = DMath.katexLoadedCallback;
+    scriptTag.crossorigin = 'anonymous';
+    document.head.appendChild(scriptTag);
+    // css tag can use this convenience function
+    document.head.insertAdjacentHTML('beforeend', katexCSSTag);
+
+    DMath.katexAdded = true;
+  }
+
+  get options() {
+    const localOptions = { displayMode: this.hasAttribute('block') };
+    return Object.assign(localOptions, DMath.katexOptions);
   }
 
   connectedCallback() {
     super.connectedCallback();
     if (!DMath.katexAdded) {
-      // script tag has to be created to work properly
-      const scriptTag = document.createElement('script');
-      scriptTag.src = katexJSURL;
-      scriptTag.async = true;
-      scriptTag.onload = DMath.katexLoadedCallback;
-      scriptTag.crossorigin = 'anonymous';
-      document.head.appendChild(scriptTag);
-      // css tag can use this convenience function
-      document.head.insertAdjacentHTML('beforeend', katexCSSTag);
-
-      DMath.katexAdded = true;
+      DMath.addKatex();
     }
   }
 
   renderContent() {
     if (typeof katex !== 'undefined') {
-      const options = { displayMode: this.hasAttribute('block') };
       const container = this.root.querySelector('#katex-container');
-      katex.render(this.textContent, container, options);
+      katex.render(this.textContent, container, this.options);
     }
   }