feat: Restore the ability to insert formulas into notes

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
 

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:*",

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>

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>

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': {

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'}