From 73e0f3ff6c323a324bd94ea830166c4df652f5d4 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Tue, 30 May 2023 17:54:11 +0900
Subject: [PATCH] =?UTF-8?q?enhance(client):=20MFM=E8=A8=AD=E5=AE=9A?=
 =?UTF-8?q?=E3=82=92=E5=A4=89=E6=9B=B4=E3=81=99=E3=82=8B=E3=81=A8=E7=8F=BE?=
 =?UTF-8?q?=E3=82=8C=E3=82=8B=E5=A4=89=E5=8C=96=E3=82=92=E8=A6=96=E8=A6=9A?=
 =?UTF-8?q?=E7=9A=84=E3=81=AB=E8=A1=A8=E7=A4=BA=E3=81=99=E3=82=8B=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...kUserSetupDialog.MisskeyFlavoredMarkdown.vue | 17 +++++++++++++++--
 .../frontend/src/pages/settings/general.vue     | 14 ++++++++++++--
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/MkUserSetupDialog.MisskeyFlavoredMarkdown.vue b/packages/frontend/src/components/MkUserSetupDialog.MisskeyFlavoredMarkdown.vue
index c338635d48..96c3af606b 100644
--- a/packages/frontend/src/components/MkUserSetupDialog.MisskeyFlavoredMarkdown.vue
+++ b/packages/frontend/src/components/MkUserSetupDialog.MisskeyFlavoredMarkdown.vue
@@ -2,6 +2,13 @@
 <div class="_gaps">
 	<MkInfo>{{ i18n.ts._initialAccountSetting.theseSettingsCanEditLater }}</MkInfo>
 
+	<div :class="$style.preview" class="_panel">
+		<div style="margin: 0 0 8px; font-size: 1.5em;">
+			<Mfm v-if="advancedMfm && animatedMfm" :key="emojiStyle" text="$[jelly 🍮] $[spin 🍪] $[shake 🍭]"/>
+			<Mfm v-else :key="emojiStyle" text="🍮 🍪 🍭"/>
+		</div>
+	</div>
+
 	<MkFolder>
 		<template #label>{{ i18n.ts.enableAdvancedMfm }}</template>
 		<template #icon><i class="ti ti-markdown"></i></template>
@@ -41,13 +48,19 @@ import MkInfo from '@/components/MkInfo.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import * as os from '@/os';
 import { $i } from '@/account';
-import { defaultStore } from "@/store";
+import { defaultStore } from '@/store';
 
 const animatedMfm = computed(defaultStore.makeGetterSetter('animatedMfm'));
 const advancedMfm = computed(defaultStore.makeGetterSetter('advancedMfm'));
 const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages'));
+const emojiStyle = computed(defaultStore.makeGetterSetter('emojiStyle'));
 </script>
 
 <style lang="scss" module>
-
+.preview {
+	padding: 20px;
+	border-radius: 6px;
+	text-align: center;
+	background: var(--bg);
+}
 </style>
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 2a39d13f12..cf1f77f15e 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -38,6 +38,12 @@
 				<MkSwitch v-model="collapseRenotes">{{ i18n.ts.collapseRenotes }}</MkSwitch>
 				<MkSwitch v-model="advancedMfm">{{ i18n.ts.enableAdvancedMfm }}</MkSwitch>
 				<MkSwitch v-if="advancedMfm" v-model="animatedMfm">{{ i18n.ts.enableAnimatedMfm }}</MkSwitch>
+				<div class="mfmPreview _panel">
+					<div style="margin: 0 0 8px; font-size: 1.5em;">
+						<Mfm v-if="advancedMfm && animatedMfm" :key="emojiStyle" text="$[jelly 🍮] $[spin 🍪] $[shake 🍭]"/>
+						<Mfm v-else :key="emojiStyle" text="🍮 🍪 🍭"/>
+					</div>
+				</div>
 				<MkSwitch v-model="showGapBetweenNotesInTimeline">{{ i18n.ts.showGapBetweenNotesInTimeline }}</MkSwitch>
 				<MkSwitch v-model="loadRawImages">{{ i18n.ts.loadRawImages }}</MkSwitch>
 				<MkSwitch v-model="useReactionPickerForContextMenu">{{ i18n.ts.useReactionPickerForContextMenu }}</MkSwitch>
@@ -332,7 +338,6 @@ watch(useSystemFont, () => {
 
 watch([
 	lang,
-	animatedMfm,
 	useBlurEffect,
 	// fontSize,
 	useBoldFont,
@@ -370,12 +375,17 @@ definePageMetadata({
 	user-select: none;
 }
 
-.fontSize {
+.mfmPreview, .fontSize {
 	padding: 20px 20px 28px;
 	border-radius: 6px;
 	text-align: center;
 }
 
+.mfmPreview {
+	padding: 5px;
+	max-width: 110px;
+}
+
 .fontSize_slider {
 	display: flex;
 	margin-top: -8px;