From 10dbd8f07fb5eb011e570a573561e052107a393b Mon Sep 17 00:00:00 2001
From: zyoshoka <107108195+zyoshoka@users.noreply.github.com>
Date: Wed, 14 Aug 2024 15:43:32 +0900
Subject: [PATCH] fix(frontend): MFM doesn't work in some places

---
 packages/frontend/src/components/MkChannelPreview.vue | 5 +++--
 packages/frontend/src/components/MkFlashPreview.vue   | 5 ++---
 packages/frontend/src/components/MkPagePreview.vue    | 5 ++---
 packages/frontend/src/components/MkPageWindow.vue     | 2 +-
 packages/frontend/src/components/MkToast.vue          | 2 +-
 packages/frontend/src/filters/user.ts                 | 4 ----
 6 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/packages/frontend/src/components/MkChannelPreview.vue b/packages/frontend/src/components/MkChannelPreview.vue
index c30cb66c07..dcd40f066e 100644
--- a/packages/frontend/src/components/MkChannelPreview.vue
+++ b/packages/frontend/src/components/MkChannelPreview.vue
@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 		<article v-if="channel.description">
-			<p :title="channel.description">{{ channel.description.length > 85 ? channel.description.slice(0, 85) + '…' : channel.description }}</p>
+			<Mfm :text="channel.description.length > 85 ? channel.description.slice(0, 85) + '…' : channel.description" :isNote="false"/>
 		</article>
 		<footer>
 			<span v-if="channel.lastNotedAt">
@@ -47,11 +47,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
+import * as Misskey from 'misskey-js';
 import { i18n } from '@/i18n.js';
 import { miLocalStorage } from '@/local-storage.js';
 
 const props = defineProps<{
-	channel: Record<string, any>;
+	channel: Misskey.entities.Channel;
 }>();
 
 const getLastReadedAt = (): number | null => {
diff --git a/packages/frontend/src/components/MkFlashPreview.vue b/packages/frontend/src/components/MkFlashPreview.vue
index 8a2a438624..9587e23ba6 100644
--- a/packages/frontend/src/components/MkFlashPreview.vue
+++ b/packages/frontend/src/components/MkFlashPreview.vue
@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</p>
 		<footer>
 			<img class="icon" :src="flash.user.avatarUrl"/>
-			<p>{{ userName(flash.user) }}</p>
+			<MkUserName class="name" :user="flash.user"/>
 		</footer>
 	</article>
 </MkA>
@@ -23,7 +23,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { } from 'vue';
 import * as Misskey from 'misskey-js';
-import { userName } from '@/filters/user.js';
 
 const props = defineProps<{
 	flash: Misskey.entities.Flash;
@@ -80,7 +79,7 @@ const props = defineProps<{
 				vertical-align: top;
 			}
 
-			> p {
+			> .name {
 				display: inline-block;
 				margin: 0;
 				color: var(--urlPreviewInfo);
diff --git a/packages/frontend/src/components/MkPagePreview.vue b/packages/frontend/src/components/MkPagePreview.vue
index 8559d4b96e..7c7e9b5239 100644
--- a/packages/frontend/src/components/MkPagePreview.vue
+++ b/packages/frontend/src/components/MkPagePreview.vue
@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<p v-if="page.summary" :title="page.summary">{{ page.summary.length > 85 ? page.summary.slice(0, 85) + '…' : page.summary }}</p>
 		<footer>
 			<img v-if="page.user.avatarUrl" class="icon" :src="page.user.avatarUrl"/>
-			<p>{{ userName(page.user) }}</p>
+			<MkUserName class="name" :user="page.user"/>
 		</footer>
 	</article>
 </MkA>
@@ -30,7 +30,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { } from 'vue';
 import * as Misskey from 'misskey-js';
-import { userName } from '@/filters/user.js';
 import MediaImage from '@/components/MkMediaImage.vue';
 
 const props = defineProps<{
@@ -112,7 +111,7 @@ const props = defineProps<{
 				vertical-align: top;
 			}
 
-			> p {
+			> .name {
 				display: inline-block;
 				margin: 0;
 				color: var(--urlPreviewInfo);
diff --git a/packages/frontend/src/components/MkPageWindow.vue b/packages/frontend/src/components/MkPageWindow.vue
index bd86b01591..52e7d74aec 100644
--- a/packages/frontend/src/components/MkPageWindow.vue
+++ b/packages/frontend/src/components/MkPageWindow.vue
@@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #header>
 		<template v-if="pageMetadata">
 			<i v-if="pageMetadata.icon" :class="pageMetadata.icon" style="margin-right: 0.5em;"></i>
-			<span>{{ pageMetadata.title }}</span>
+			<Mfm :text="pageMetadata.title" :plain="true"/>
 		</template>
 	</template>
 
diff --git a/packages/frontend/src/components/MkToast.vue b/packages/frontend/src/components/MkToast.vue
index e256640649..1b2b8252cc 100644
--- a/packages/frontend/src/components/MkToast.vue
+++ b/packages/frontend/src/components/MkToast.vue
@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	>
 		<div v-if="showing" class="_acrylic" :class="$style.root" :style="{ zIndex }">
 			<div style="padding: 16px 24px;">
-				{{ message }}
+				<Mfm :text="message" :plain="true" :nowrap="true"/>
 			</div>
 		</div>
 	</Transition>
diff --git a/packages/frontend/src/filters/user.ts b/packages/frontend/src/filters/user.ts
index a87766764d..63b6383bc2 100644
--- a/packages/frontend/src/filters/user.ts
+++ b/packages/frontend/src/filters/user.ts
@@ -10,10 +10,6 @@ export const acct = (user: Misskey.Acct) => {
 	return Misskey.acct.toString(user);
 };
 
-export const userName = (user: Misskey.entities.User) => {
-	return user.name || user.username;
-};
-
 export const userPage = (user: Misskey.Acct, path?: string, absolute = false) => {
 	return `${absolute ? url : ''}/@${acct(user)}${(path ? `/${path}` : '')}`;
 };