feat (backend): federate math expressions using MathML

Co-authored-by: Johann150 <johann.galle@protonmail.com>

packages/backend/package.json

@@ -71,6 +71,7 @@
 		"json5": "2.2.3",
 		"jsonld": "8.3.2",
 		"jsrsasign": "11.1.0",
+		"katex": "0.16.10",
 		"koa": "2.15.2",
 		"koa-body": "^6.0.1",
 		"koa-bodyparser": "4.4.1",
@@ -139,6 +140,7 @@
 		"@types/js-yaml": "4.0.9",
 		"@types/jsonld": "1.5.13",
 		"@types/jsrsasign": "10.5.13",
+		"@types/katex": "0.16.7",
 		"@types/koa": "2.15.0",
 		"@types/koa-bodyparser": "4.3.12",
 		"@types/koa-cors": "0.0.6",

packages/backend/src/mfm/to-html.ts

@@ -1,9 +1,23 @@
-import { Window } from "happy-dom";
+import { type HTMLElement, Window } from "happy-dom";
 import type * as mfm from "mfm-js";
+import katex from "katex";
 import config from "@/config/index.js";
 import { intersperse } from "@/prelude/array.js";
 import type { IMentionedRemoteUsers } from "@/models/entities/note.js";
 
+function toMathMl(code: string, displayMode: boolean): HTMLElement | null {
+	const { window } = new Window();
+	const document = window.document;
+
+	document.body.innerHTML = katex.renderToString(code, {
+		throwOnError: false,
+		output: "mathml",
+		displayMode,
+	});
+
+	return document.querySelector("math");
+}
+
 export function toHtml(
 	nodes: mfm.MfmNode[] | null,
 	mentionedRemoteUsers: IMentionedRemoteUsers = [],
@@ -93,12 +107,24 @@ export function toHtml(
 		},
 
 		mathInline(node) {
+			const mathml = toMathMl(node.props.formula, false);
+			if (mathml != null) {
+				return mathml;
+			}
+
+			// fallbacks to <code> element
 			const el = doc.createElement("code");
 			el.textContent = node.props.formula;
 			return el;
 		},
 
 		mathBlock(node) {
+			const mathml = toMathMl(node.props.formula, true);
+			if (mathml != null) {
+				return mathml;
+			}
+
+			// fallbacks to <code> element
 			const el = doc.createElement("code");
 			el.textContent = node.props.formula;
 			return el;

pnpm-lock.yaml

@@ -201,6 +201,9 @@ importers:
       jsrsasign:
         specifier: 11.1.0
         version: 11.1.0
+      katex:
+        specifier: 0.16.10
+        version: 0.16.10
       koa:
         specifier: 2.15.2
         version: 2.15.2
@@ -404,6 +407,9 @@ importers:
       '@types/jsrsasign':
         specifier: 10.5.13
         version: 10.5.13
+      '@types/katex':
+        specifier: 0.16.7
+        version: 0.16.7
       '@types/koa':
         specifier: 2.15.0
         version: 2.15.0
@@ -6859,7 +6865,6 @@ packages:
   /commander@8.3.0:
     resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
     engines: {node: '>= 12'}
-    dev: true
 
   /comment-parser@1.4.1:
     resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
@@ -12021,7 +12026,6 @@ packages:
     hasBin: true
     dependencies:
       commander: 8.3.0
-    dev: true
 
   /keygrip@1.1.0:
     resolution: {integrity: sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==}