send tex math as data-mx-maths attribute

src/HtmlUtils.tsx

@@ -27,6 +27,7 @@ import classNames from 'classnames';
 import EMOJIBASE_REGEX from 'emojibase-regex';
 import url from 'url';
 import katex from 'katex';
+import { AllHtmlEntities } from 'html-entities';
 
 import {MatrixClientPeg} from './MatrixClientPeg';
 import {tryTransformPermalinkToLocalHref} from "./utils/permalinks/Permalinks";
@@ -236,7 +237,8 @@ const sanitizeHtmlParams: sanitizeHtml.IOptions = {
     allowedAttributes: {
         // custom ones first:
         font: ['color', 'data-mx-bg-color', 'data-mx-color', 'style'], // custom to matrix
-        span: ['data-mx-bg-color', 'data-mx-color', 'data-mx-spoiler', 'style'], // custom to matrix
+        span: ['data-mx-maths', 'data-mx-bg-color', 'data-mx-color', 'data-mx-spoiler', 'style'], // custom to matrix
+        div: ['data-mx-maths'],
         a: ['href', 'name', 'target', 'rel'], // remote target: custom to matrix
         img: ['src', 'width', 'height', 'alt', 'title'],
         ol: ['start'],
@@ -409,6 +411,27 @@ export function bodyToHtml(content: IContent, highlights: string[], opts: IOpts
         if (isHtmlMessage) {
             isDisplayedWithHtml = true;
             safeBody = sanitizeHtml(formattedBody, sanitizeParams);
+            if (true) { // TODO: add katex setting
+                const mathDelimiters = [
+                    { left: "<div data-mx-maths=\"", right: "\">.*?</div>", display: true },
+                    { left: "<span data-mx-maths=\"", right: "\">.*?</span>", display: false }
+                ];
+
+                mathDelimiters.forEach(function (d) {
+                    var reg = RegExp(d.left + "(.*?)" + d.right, "g");
+
+                    safeBody = safeBody.replace(reg, function(match, p1) {
+                        return katex.renderToString(
+                            AllHtmlEntities.decode(p1),
+                            {
+                                throwOnError: false,
+                                displayMode: d.display,
+                                output: "mathml"
+                            })
+                    });
+                });
+        }
+
         }
     } finally {
         delete sanitizeParams.textFilter;
@@ -450,6 +473,7 @@ export function bodyToHtml(content: IContent, highlights: string[], opts: IOpts
         'markdown-body': isHtmlMessage && !emojiBody,
     });
 
+
     return isDisplayedWithHtml ?
         <span
             key="body"

src/editor/serialize.ts

@@ -18,6 +18,7 @@ limitations under the License.
 import Markdown from '../Markdown';
 import {makeGenericPermalink} from "../utils/permalinks/Permalinks";
 import EditorModel from "./model";
+import { AllHtmlEntities } from 'html-entities';
 
 export function mdSerialize(model: EditorModel) {
     return model.parts.reduce((html, part) => {
@@ -38,7 +39,27 @@ export function mdSerialize(model: EditorModel) {
 }
 
 export function htmlSerializeIfNeeded(model: EditorModel, {forceHTML = false} = {}) {
-    const md = mdSerialize(model);
+    var md = mdSerialize(model);
+
+    if (true) { // TODO: add katex setting
+        const mathDelimiters = [ // TODO: make customizable
+            { left: "\\$\\$\\$", right: "\\$\\$\\$", display: true },
+            { left: "\\$\\$", right: "\\$\\$", display: false }
+        ];
+
+        mathDelimiters.forEach(function (d) {
+            var reg = RegExp(d.left + "(.*?)" + d.right, "g");
+            md = md.replace(reg, function(match, p1) {
+                const p1e = AllHtmlEntities.encode(p1);
+                if (d.display == true) {
+                    return `<div data-mx-maths="${p1e}"><code>${p1e}</code></div>`;
+                } else {
+                    return `<span data-mx-maths="${p1e}"><code>${p1e}</code></span>`;
+                }
+            });
+        });
+    }
+
     const parser = new Markdown(md);
     if (!parser.isPlainText() || forceHTML) {
         return parser.toHTML();