From 078b043cae4363714dbd141d594bd968ece1ffb9 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 31 Dec 2020 19:42:23 +0900
Subject: [PATCH] Add font MFM syntax

---
 locales/ja-JP.yml                    |  2 ++
 src/client/components/mfm.ts         | 12 ++++++++++++
 src/client/pages/mfm-cheat-sheet.vue | 11 +++++++++++
 3 files changed, 25 insertions(+)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index aba2f76356..9135cfda8a 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -749,6 +749,8 @@ _mfm:
   x4Description: "内容を究極に大きく表示します。"
   blur: "ぼかし"
   blurDescription: "内容をぼかすことができます。ポインターを上に乗せるとはっきり見えるようになります。"
+  font: "フォント"
+  fontDescription: "内容のフォントを指定することができます。"
 
 _reversi:
   reversi: "リバーシ"
diff --git a/src/client/components/mfm.ts b/src/client/components/mfm.ts
index 76399bf6f8..1590e29142 100644
--- a/src/client/components/mfm.ts
+++ b/src/client/components/mfm.ts
@@ -141,6 +141,18 @@ export default defineComponent({
 							style = `font-size: 600%;`;
 							break;
 						}
+						case 'font': {
+							const family =
+								token.node.props.args.serif ? 'serif' :
+								token.node.props.args.monospace ? 'monospace' :
+								token.node.props.args.cursive ? 'cursive' :
+								token.node.props.args.fantasy ? 'fantasy' :
+								token.node.props.args.emoji ? 'emoji' :
+								token.node.props.args.math ? 'math' :
+								null;
+							if (family) style = `font-family: ${family};`;
+							break;
+						}
 						case 'blur': {
 							return h('span', {
 								class: '_mfm_blur_',
diff --git a/src/client/pages/mfm-cheat-sheet.vue b/src/client/pages/mfm-cheat-sheet.vue
index c66fbfb15b..0d599e4583 100644
--- a/src/client/pages/mfm-cheat-sheet.vue
+++ b/src/client/pages/mfm-cheat-sheet.vue
@@ -145,6 +145,16 @@
 			</div>
 		</div>
 	</div>
+	<div class="_section">
+		<div class="_title">{{ $ts._mfm.font }}</div>
+		<div class="_content">
+			<p>{{ $ts._mfm.fontDescription }}</p>
+			<div class="preview _panel">
+				<Mfm :text="preview_font"/>
+				<MkTextarea v-model:value="preview_font"><span>MFM</span></MkTextarea>
+			</div>
+		</div>
+	</div>
 	<div class="_section">
 		<div class="_title">{{ $ts._mfm.x2 }}</div>
 		<div class="_content">
@@ -295,6 +305,7 @@ export default defineComponent({
 			preview_twitch: `[twitch 🍮]`,
 			preview_spin: `[spin 🍮] [spin.left 🍮] [spin.alternate 🍮]\n[spin.x 🍮] [spin.x,left 🍮] [spin.x,alternate 🍮]\n[spin.y 🍮] [spin.y,left 🍮] [spin.y,alternate 🍮]`,
 			preview_flip: `[flip ${this.$ts._mfm.dummy}]\n[flip.v ${this.$ts._mfm.dummy}]\n[flip.h,v ${this.$ts._mfm.dummy}]`,
+			preview_font: `[font.serif ${this.$ts._mfm.dummy}]\n[font.monospace ${this.$ts._mfm.dummy}]\n[font.cursive ${this.$ts._mfm.dummy}]\n[font.fantasy ${this.$ts._mfm.dummy}]`,
 			preview_x2: `[x2 🍮]`,
 			preview_x3: `[x3 🍮]`,
 			preview_x4: `[x4 🍮]`,