From 62ccb53c243bf252f000cee2b832f6f3db1b74e8 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 5 Aug 2021 21:55:41 +0900
Subject: [PATCH] Add rainbow function for MFM

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

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index e35514ded9..9fa4531db5 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -878,6 +878,8 @@ _mfm:
   blurDescription: "内容をぼかすことができます。ポインターを上に乗せるとはっきり見えるようになります。"
   font: "フォント"
   fontDescription: "内容のフォントを指定することができます。"
+  rainbow: "レインボー"
+  rainbowDescription: "内容をレインボーにします。"
 
 _reversi:
   reversi: "リバーシ"
diff --git a/src/client/components/global/misskey-flavored-markdown.vue b/src/client/components/global/misskey-flavored-markdown.vue
index 988cf9cf47..c4f75bee93 100644
--- a/src/client/components/global/misskey-flavored-markdown.vue
+++ b/src/client/components/global/misskey-flavored-markdown.vue
@@ -117,6 +117,11 @@ export default defineComponent({
 	75% { transform: scale3d(1.05, 0.95, 1); }
 	to { transform: scale3d(1, 1, 1); }
 }
+
+@keyframes mfm-rainbow {
+	0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
+	100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
+}
 </style>
 
 <style lang="scss" scoped>
diff --git a/src/client/components/mfm.ts b/src/client/components/mfm.ts
index 3b08c83c7f..c248f934df 100644
--- a/src/client/components/mfm.ts
+++ b/src/client/components/mfm.ts
@@ -165,6 +165,10 @@ export default defineComponent({
 								class: '_mfm_blur_',
 							}, genEl(token.children));
 						}
+						case 'rainbow': {
+							style = this.$store.state.animatedMfm ? 'animation: mfm-rainbow 1s linear infinite;' : '';
+							break;
+						}
 					}
 					if (style == null) {
 						return h('span', {}, ['[', token.props.name, ...genEl(token.children), ']']);
diff --git a/src/client/pages/mfm-cheat-sheet.vue b/src/client/pages/mfm-cheat-sheet.vue
index 5227855236..75bbfce7e8 100644
--- a/src/client/pages/mfm-cheat-sheet.vue
+++ b/src/client/pages/mfm-cheat-sheet.vue
@@ -261,6 +261,16 @@
 			</div>
 		</div>
 	</div>
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.rainbow }}</div>
+		<div class="content">
+			<p>{{ $ts._mfm.rainbowDescription }}</p>
+			<div class="preview">
+				<Mfm :text="preview_rainbow"/>
+				<MkTextarea v-model:value="preview_rainbow"><span>MFM</span></MkTextarea>
+			</div>
+		</div>
+	</div>
 </div>
 </template>
 
@@ -306,6 +316,7 @@ export default defineComponent({
 			preview_x3: `$[x3 🍮]`,
 			preview_x4: `$[x4 🍮]`,
 			preview_blur: `$[blur ${this.$ts._mfm.dummy}]`,
+			preview_rainbow: `$[rainbow 🍮]`,
 		}
 	},
 });
@@ -313,6 +324,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .mwysmxbg {
+	background: var(--bg);
+
 	> .section {
 		> .title {
 			position: sticky;