Add blur MFM syntax

locales/ja-JP.yml

@@ -747,6 +747,8 @@ _mfm:
   x3Description: "内容をとても大きく表示します。"
   x4: "究極に大きく"
   x4Description: "内容を究極に大きく表示します。"
+  blur: "ぼかし"
+  blurDescription: "内容をぼかすことができます。ポインターを上に乗せるとはっきり見えるようになります。"
 
 _reversi:
   reversi: "リバーシ"

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); }

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) {

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}]`,
 		}
 	},
 });