From 92249a15f9f023fcd68257e943cf10be556a9442 Mon Sep 17 00:00:00 2001
From: moshibar <25570708+MoshiBar@users.noreply.github.com>
Date: Mon, 27 Nov 2023 13:07:28 -0600
Subject: [PATCH] KaTeX support

---
 packages/frontend/package.json                |  1 +
 .../frontend/src/components/MkFormula.vue     | 25 +++++++++++++
 .../frontend/src/components/MkFormulaCore.vue | 36 +++++++++++++++++++
 .../global/MkMisskeyFlavoredMarkdown.ts       | 21 ++++++++---
 pnpm-lock.yaml                                |  3 ++
 5 files changed, 82 insertions(+), 4 deletions(-)
 create mode 100644 packages/frontend/src/components/MkFormula.vue
 create mode 100644 packages/frontend/src/components/MkFormulaCore.vue

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 071a8cfa8..8f9eb5545 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -51,6 +51,7 @@
 		"insert-text-at-cursor": "0.3.0",
 		"is-file-animated": "1.0.2",
 		"json5": "2.2.3",
+		"katex": "^0.16.9",
 		"matter-js": "0.19.0",
 		"mfm-js": "0.23.3",
 		"misskey-js": "workspace:*",
diff --git a/packages/frontend/src/components/MkFormula.vue b/packages/frontend/src/components/MkFormula.vue
new file mode 100644
index 000000000..f39a8db01
--- /dev/null
+++ b/packages/frontend/src/components/MkFormula.vue
@@ -0,0 +1,25 @@
+<template>
+	<XFormula :formula="formula" :block="block" />
+</template>
+
+<script lang="ts">
+import { defineAsyncComponent, defineComponent } from "vue";
+
+export default defineComponent({
+	components: {
+		XFormula: defineAsyncComponent(
+			() => import("@/components/MkFormulaCore.vue"),
+		),
+	},
+	props: {
+		formula: {
+			type: String,
+			required: true,
+		},
+		block: {
+			type: Boolean,
+			required: true,
+		},
+	},
+});
+</script>
diff --git a/packages/frontend/src/components/MkFormulaCore.vue b/packages/frontend/src/components/MkFormulaCore.vue
new file mode 100644
index 000000000..2db4c7d00
--- /dev/null
+++ b/packages/frontend/src/components/MkFormulaCore.vue
@@ -0,0 +1,36 @@
+<template>
+	<div v-if="block" v-html="compiledFormula"></div>
+	<span v-else v-html="compiledFormula"></span>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import katex from "katex";
+
+export default defineComponent({
+	props: {
+		formula: {
+			type: String,
+			required: true,
+		},
+		block: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	computed: {
+		compiledFormula(): any {
+			const katexString = katex.renderToString(this.formula, {
+				throwOnError: false,
+			} as any);
+			return this.block
+				? `<div style="text-align:center">${katexString}</div>`
+				: katexString;
+		},
+	},
+});
+</script>
+
+<style>
+@import "../../node_modules/katex/dist/katex.min.css";
+</style>
diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
index 7d55353d9..a7c5e1a9f 100644
--- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
+++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
@@ -12,6 +12,7 @@ import MkLink from '@/components/MkLink.vue';
 import MkMention from '@/components/MkMention.vue';
 import MkEmoji from '@/components/global/MkEmoji.vue';
 import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
+import MkFormula from "@/components/MkFormula.vue";
 import MkCode from '@/components/MkCode.vue';
 import MkGoogle from '@/components/MkGoogle.vue';
 import MkSparkle from '@/components/MkSparkle.vue';
@@ -389,12 +390,24 @@ export default function(props: MfmProps) {
 				})];
 			}
 
-			case 'mathInline': {
-				return [h('code', token.props.formula)];
+			case "mathInline": {
+				return [
+					h(MkFormula, {
+						key: Math.random(),
+						formula: token.props.formula,
+						block: false,
+					}),
+				];
 			}
 
-			case 'mathBlock': {
-				return [h('code', token.props.formula)];
+			case "mathBlock": {
+				return [
+					h(MkFormula, {
+						key: Math.random(),
+						formula: token.props.formula,
+						block: true,
+					}),
+				];
 			}
 
 			case 'search': {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8e750d515..7c11ca2d3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -753,6 +753,9 @@ importers:
       json5:
         specifier: 2.2.3
         version: 2.2.3
+      katex:
+        specifier: ^0.16.9
+        version: 0.16.9
       matter-js:
         specifier: 0.19.0
         version: 0.19.0