Add rainbow function for MFM

locales/ja-JP.yml

@@ -878,6 +878,8 @@ _mfm:
   blurDescription: "内容をぼかすことができます。ポインターを上に乗せるとはっきり見えるようになります。"
   font: "フォント"
   fontDescription: "内容のフォントを指定することができます。"
+  rainbow: "レインボー"
+  rainbowDescription: "内容をレインボーにします。"
 
 _reversi:
   reversi: "リバーシ"

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>

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

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;