Add LaTeX / math input and rendering support

package.json

@@ -27,10 +27,12 @@
     "flux": "^4.0.3",
     "formik": "^2.2.9",
     "html-react-parser": "^1.4.11",
+    "katex": "^0.15.2",
     "linkifyjs": "^2.1.9",
     "matrix-js-sdk": "^17.0.0",
     "micromark": "^3.0.10",
     "micromark-extension-gfm": "^2.0.1",
+    "micromark-extension-math": "^2.0.2",
     "micromark-util-chunked": "^1.0.0",
     "micromark-util-resolve-all": "^1.0.0",
     "micromark-util-symbol": "^1.0.1",

src/app/atoms/math/Math.jsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import katex from 'katex';
+import 'katex/dist/katex.min.css';
+
+import 'katex/dist/contrib/copy-tex';
+import 'katex/dist/contrib/copy-tex.css';
+
+const Math = React.memo(({
+  content, throwOnError, errorColor, displayMode,
+}) => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    katex.render(content, ref.current, { throwOnError, errorColor, displayMode });
+  }, [content, throwOnError, errorColor, displayMode]);
+
+  return <span ref={ref} />;
+});
+Math.defaultProps = {
+  throwOnError: null,
+  errorColor: null,
+  displayMode: null,
+};
+Math.propTypes = {
+  content: PropTypes.string.isRequired,
+  throwOnError: PropTypes.bool,
+  errorColor: PropTypes.string,
+  displayMode: PropTypes.bool,
+};
+
+export default Math;

src/app/molecules/message/Message.jsx

@@ -189,7 +189,7 @@ const MessageBody = React.memo(({
   let content = null;
   if (isCustomHTML) {
     try {
-      content = twemojify(sanitizeCustomHtml(body), undefined, true, false);
+      content = twemojify(sanitizeCustomHtml(body), undefined, true, false, true);
     } catch {
       console.error('Malformed custom html: ', body);
       content = twemojify(body, undefined);

src/client/state/RoomsInput.js

@@ -2,8 +2,9 @@ import EventEmitter from 'events';
 import { micromark } from 'micromark';
 import { gfm, gfmHtml } from 'micromark-extension-gfm';
 import encrypt from 'browser-encrypt-attachment';
+import { math } from 'micromark-extension-math';
 import { getShortcodeToEmoji } from '../../app/organisms/emoji-board/custom-emoji';
-import { spoilerExtension, spoilerExtensionHtml } from '../../util/markdown';
+import { mathExtensionHtml, spoilerExtension, spoilerExtensionHtml } from '../../util/markdown';
 import cons from './cons';
 import settings from './settings';
 
@@ -85,8 +86,8 @@ function getVideoThumbnail(video, width, height, mimeType) {
 
 function getFormattedBody(markdown) {
   const result = micromark(markdown, {
-    extensions: [gfm(), spoilerExtension()],
-    htmlExtensions: [gfmHtml(), spoilerExtensionHtml],
+    extensions: [gfm(), spoilerExtension(), math()],
+    htmlExtensions: [gfmHtml(), spoilerExtensionHtml, mathExtensionHtml],
   });
   const bodyParts = result.match(/^(<p>)(.*)(<\/p>)$/);
   if (bodyParts === null) return result;

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'],