From ad9f9662330f960a8f805f933d6ac16daf416c3b Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Tue, 16 May 2023 20:17:38 +0900
Subject: [PATCH] feat: Restore the ability to insert formulas into notes

---
 CHANGELOG_CHERRYPICK.md                       |  1 +
 packages/frontend/package.json                |  1 +
 .../frontend/src/components/MkFormula.vue     | 23 +++++++++++++
 .../frontend/src/components/MkFormulaCore.vue | 34 +++++++++++++++++++
 packages/frontend/src/components/mfm.ts       | 15 ++++++--
 pnpm-lock.yaml                                |  7 ++++
 6 files changed, 79 insertions(+), 2 deletions(-)
 create mode 100644 packages/frontend/src/components/MkFormula.vue
 create mode 100644 packages/frontend/src/components/MkFormulaCore.vue

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index 9912149629..978ac60d03 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@@ -15,6 +15,7 @@
 - 클라이언트: 채팅 및 그룹 기능 유지 (revert: [misskey-dev#9919](https://github.com/misskey-dev/misskey/pull/9919), [misskey-dev#9942](https://github.com/misskey-dev/misskey/pull/9942))
 - 클라이언트: 클라이언트에서 사용되는 폰트의 확장자를 ttf에서 woff2 및 woff로 변경 ([@mk-castella](https://github.com/libnare/mk-castella/commit/f439b3e007618c02da7a352016b3d0f397311f54))
 - 클라이언트: about-misskey 페이지에 CherryPick 관련 정보 추가 및 Misskey 문단 구분명 추가
+- 클라이언트: 노트 수식 삽입 기능 복원
 
 ### Bugfixes
 
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 5b4004d8e3..17ec49a3ac 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -45,6 +45,7 @@
 		"insert-text-at-cursor": "0.3.0",
 		"is-file-animated": "1.0.2",
 		"json5": "2.2.3",
+		"temml": "0.10.0",
 		"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 0000000000..3d18e0a582
--- /dev/null
+++ b/packages/frontend/src/components/MkFormula.vue
@@ -0,0 +1,23 @@
+<template>
+<XFormula :formula="formula" :block="block"/>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent } 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 0000000000..5860ff1ea8
--- /dev/null
+++ b/packages/frontend/src/components/MkFormulaCore.vue
@@ -0,0 +1,34 @@
+<!-- eslint-disable vue/no-v-html -->
+<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 temml from '../../node_modules/temml/dist/temml.cjs';
+
+export default defineComponent({
+	props: {
+		formula: {
+			type: String,
+			required: true,
+		},
+		block: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	computed: {
+		compiledFormula(): any {
+			return temml.renderToString(this.formula, {
+				throwOnError: false,
+			} as any);
+		},
+	},
+});
+</script>
+
+<style>
+@import "../../node_modules/temml/dist/Temml-Local.css";
+</style>
diff --git a/packages/frontend/src/components/mfm.ts b/packages/frontend/src/components/mfm.ts
index c3c07b5834..8af795aa3a 100644
--- a/packages/frontend/src/components/mfm.ts
+++ b/packages/frontend/src/components/mfm.ts
@@ -5,6 +5,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';
@@ -357,11 +358,21 @@ export default defineComponent({
 				}
 
 				case 'mathInline': {
-					return [h('code', token.props.formula)];
+					// return [h('code', token.props.formula)];
+					return [h(MkFormula, {
+						key: Math.random(),
+						formula: token.props.formula,
+						block: false,
+					})];
 				}
 
 				case 'mathBlock': {
-					return [h('code', token.props.formula)];
+					// return [h('code', token.props.formula)];
+					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 79b0e8e862..912c0c10a5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -771,6 +771,9 @@ importers:
       syuilo-password-strength:
         specifier: 0.0.1
         version: 0.0.1
+      temml:
+        specifier: 0.10.0
+        version: 0.10.0
       textarea-caret:
         specifier: 3.1.0
         version: 3.1.0
@@ -18834,6 +18837,10 @@ packages:
       memoizerific: 1.11.3
     dev: true
 
+  /temml@0.10.0:
+    resolution: {integrity: sha512-l3hKkvNYsPAUfUhIgLtlVY5QlSuRtJrnoy74O1aO3Al8PWsmgl97ASRoAanJEviitj/9f+7SjdXn+pEwbSFVoA==}
+    dev: false
+
   /temp-dir@2.0.0:
     resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
     engines: {node: '>=8'}