From 4ae172be576190240e789426fc9a167e45615f9a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 31 Dec 2020 03:02:09 +0900
Subject: [PATCH] Add blur MFM syntax

---
 locales/ja-JP.yml                                     |  2 ++
 .../components/global/misskey-flavored-markdown.vue   |  9 +++++++++
 src/client/components/mfm.ts                          |  5 +++--
 src/client/pages/mfm-cheat-sheet.vue                  | 11 +++++++++++
 4 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 819207689..aba2f7635 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -747,6 +747,8 @@ _mfm:
   x3Description: "内容をとても大きく表示します。"
   x4: "究極に大きく"
   x4Description: "内容を究極に大きく表示します。"
+  blur: "ぼかし"
+  blurDescription: "内容をぼかすことができます。ポインターを上に乗せるとはっきり見えるようになります。"
 
 _reversi:
   reversi: "リバーシ"
diff --git a/src/client/components/global/misskey-flavored-markdown.vue b/src/client/components/global/misskey-flavored-markdown.vue
index a89d2d3a2..a3f443d5d 100644
--- a/src/client/components/global/misskey-flavored-markdown.vue
+++ b/src/client/components/global/misskey-flavored-markdown.vue
@@ -14,6 +14,15 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+._mfm_blur_ {
+	filter: blur(6px);
+	transition: filter 0.3s;
+
+	&:hover {
+		filter: blur(0px);
+	}
+}
+
 @keyframes mfm-spin {
 	0% { transform: rotate(0deg); }
 	100% { transform: rotate(360deg); }
diff --git a/src/client/components/mfm.ts b/src/client/components/mfm.ts
index f7064ee16..76399bf6f 100644
--- a/src/client/components/mfm.ts
+++ b/src/client/components/mfm.ts
@@ -142,8 +142,9 @@ export default defineComponent({
 							break;
 						}
 						case 'blur': {
-							// TODO
-							break;
+							return h('span', {
+								class: '_mfm_blur_',
+							}, genEl(token.children));
 						}
 					}
 					if (style == null) {
diff --git a/src/client/pages/mfm-cheat-sheet.vue b/src/client/pages/mfm-cheat-sheet.vue
index 47a191f52..c66fbfb15 100644
--- a/src/client/pages/mfm-cheat-sheet.vue
+++ b/src/client/pages/mfm-cheat-sheet.vue
@@ -175,6 +175,16 @@
 			</div>
 		</div>
 	</div>
+	<div class="_section">
+		<div class="_title">{{ $ts._mfm.blur }}</div>
+		<div class="_content">
+			<p>{{ $ts._mfm.blurDescription }}</p>
+			<div class="preview _panel">
+				<Mfm :text="preview_blur"/>
+				<MkTextarea v-model:value="preview_blur"><span>MFM</span></MkTextarea>
+			</div>
+		</div>
+	</div>
 	<div class="_section">
 		<div class="_title">{{ $ts._mfm.jelly }}</div>
 		<div class="_content">
@@ -288,6 +298,7 @@ export default defineComponent({
 			preview_x2: `[x2 🍮]`,
 			preview_x3: `[x3 🍮]`,
 			preview_x4: `[x4 🍮]`,
+			preview_blur: `[blur ${this.$ts._mfm.dummy}]`,
 		}
 	},
 });