Add Temml math formula rendering

packages/frontend/package.json

@@ -136,6 +136,7 @@
 		"storybook": "7.0.18",
 		"storybook-addon-misskey-theme": "github:misskey-dev/storybook-addon-misskey-theme",
 		"summaly": "github:misskey-dev/summaly",
+		"temml": "0.10.3",
 		"vite-plugin-turbosnap": "1.0.2",
 		"vitest": "0.32.2",
 		"vitest-fetch-mock": "0.2.2",

packages/frontend/src/_boot_.ts

@@ -2,6 +2,7 @@
 import 'vite/modulepreload-polyfill';
 
 import '@/style.scss';
+import 'temml/dist/Temml-Latin-Modern.css';
 import { mainBoot } from './boot/main-boot';
 import { subBoot } from './boot/sub-boot';
 

packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts

@@ -1,12 +1,12 @@
 import { VNode, h } from 'vue';
 import * as mfm from 'cherrypick-mfm-js';
 import * as Misskey from 'cherrypick-js';
+import temml from 'temml';
 import MkUrl from '@/components/global/MkUrl.vue';
 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';
@@ -350,21 +350,15 @@ export default function(props: {
 			}
 
 			case 'mathInline': {
-				// return [h('code', token.props.formula)];
-				return [h(MkFormula, {
-					key: Math.random(),
-					formula: token.props.formula,
-					block: false,
-				})];
+				const ret = h('math');
+				temml.render(token.props.formula, ret)
+				return [ret];
 			}
 
 			case 'mathBlock': {
-				// return [h('code', token.props.formula)];
-				return [h(MkFormula, {
-					key: Math.random(),
-					formula: token.props.formula,
-					block: true,
-				})];
+				const ret = h('math');
+				temml.render(token.props.formula, ret, { displayMode: true });
+				return [ret];
 			}
 
 			case 'search': {