Add LaTeX / math input and rendering support (#345)

* Initial display support

* Use better colors for error in math parsing

* Parse math markdown

* Use proper jsx

* Better copy support

* use css var directly

* Remove console.debug call

* Lazy load math module

* Show fallback while katex is loading

src/util/markdown.js

@@ -140,4 +140,59 @@ const spoilerExtensionHtml = {
   },
 };
 
-export { inlineExtension, spoilerExtension, spoilerExtensionHtml };
+const mathExtensionHtml = {
+  enter: {
+    mathFlow() {
+      this.lineEndingIfNeeded();
+    },
+    mathFlowFenceMeta() {
+      this.buffer();
+    },
+    mathText() {
+      this.buffer();
+    },
+  },
+  exit: {
+    mathFlow() {
+      const value = this.encode(this.resume().replace(/(?:\r?\n|\r)$/, ''));
+      this.tag('<div data-mx-maths="');
+      this.tag(value);
+      this.tag('"><code>');
+      this.raw(value);
+      this.tag('</code></div>');
+      this.setData('mathFlowOpen');
+      this.setData('slurpOneLineEnding');
+    },
+    mathFlowFence() {
+      // After the first fence.
+      if (!this.getData('mathFlowOpen')) {
+        this.setData('mathFlowOpen', true);
+        this.setData('slurpOneLineEnding', true);
+        this.buffer();
+      }
+    },
+    mathFlowFenceMeta() {
+      this.resume();
+    },
+    mathFlowValue(token) {
+      this.raw(this.sliceSerialize(token));
+    },
+    mathText() {
+      const value = this.encode(this.resume());
+      this.tag('<span data-mx-maths="');
+      this.tag(value);
+      this.tag('"><code>');
+      this.raw(value);
+      this.tag('</code></span>');
+    },
+    mathTextData(token) {
+      this.raw(this.sliceSerialize(token));
+    },
+  },
+};
+
+export {
+  inlineExtension,
+  spoilerExtension, spoilerExtensionHtml,
+  mathExtensionHtml,
+};

src/util/sanitize.js

@@ -15,7 +15,8 @@ const urlSchemes = ['https', 'http', 'ftp', 'mailto', 'magnet'];
 
 const permittedTagToAttributes = {
   font: ['style', 'data-mx-bg-color', 'data-mx-color', 'color'],
-  span: ['style', 'data-mx-bg-color', 'data-mx-color', 'data-mx-spoiler', 'data-mx-pill', 'data-mx-ping'],
+  span: ['style', 'data-mx-bg-color', 'data-mx-color', 'data-mx-spoiler', 'data-mx-maths', 'data-mx-pill', 'data-mx-ping'],
+  div: ['data-mx-maths'],
   a: ['name', 'target', 'href', 'rel'],
   img: ['width', 'height', 'alt', 'title', 'src', 'data-mx-emoticon'],
   o: ['start'],

src/util/twemojify.jsx

@@ -1,17 +1,41 @@
 /* eslint-disable import/prefer-default-export */
+import React, { lazy, Suspense } from 'react';
+
 import linkifyHtml from 'linkifyjs/html';
 import parse from 'html-react-parser';
 import twemoji from 'twemoji';
 import { sanitizeText } from './sanitize';
 
+const Math = lazy(() => import('../app/atoms/math/Math'));
+
+const mathOptions = {
+  replace: (node) => {
+    const maths = node.attribs?.['data-mx-maths'];
+    if (maths) {
+      return (
+        <Suspense fallback={<code>{maths}</code>}>
+          <Math
+            content={maths}
+            throwOnError={false}
+            errorColor="var(--tc-danger-normal)"
+            displayMode={node.name === 'div'}
+          />
+        </Suspense>
+      );
+    }
+    return null;
+  },
+};
+
 /**
  * @param {string} text - text to twemojify
  * @param {object|undefined} opts - options for tweomoji.parse
  * @param {boolean} [linkify=false] - convert links to html tags (default: false)
  * @param {boolean} [sanitize=true] - sanitize html text (default: true)
+ * @param {boolean} [maths=false] - render maths (default: false)
  * @returns React component
  */
-export function twemojify(text, opts, linkify = false, sanitize = true) {
+export function twemojify(text, opts, linkify = false, sanitize = true, maths = false) {
   if (typeof text !== 'string') return text;
   let content = text;
 
@@ -25,5 +49,5 @@ export function twemojify(text, opts, linkify = false, sanitize = true) {
       rel: 'noreferrer noopener',
     });
   }
-  return parse(content);
+  return parse(content, maths ? mathOptions : null);
 }