fix(frontend): 動きのあるMFM無効時にレインボー文字が出ない問題を修正 (#11361)

* (fix) mfm: rainbow fallback

* Update changelog

* Update CHANGELOG.md (カレンダーリリース対応)

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

CHANGELOG.md

@@ -31,6 +31,8 @@
 - Enhance: 自分が押したリアクションのデザインを改善
 - Enhance: ノート検索にローカルのみ検索可能なオプションの追加
 - Enhance: AiScriptで`LOCALE`として現在の設定言語を取得できるように
+- `$[rainbow ]`記法が、動きのあるMFMが無効になっていても使用できるようになりました
+- Playの操作を行うAPI TokenをAPIコンソールから発行できるように
 - Fix: サーバー情報画面(`/instance-info/{domain}`)でブロックができないのを修正
 - Fix: 未読のお知らせの「わかった」をクリック・タップしてもその場で「わかった」が消えない問題を修正
 - Fix: iOSで画面を回転させるとテキストサイズが変わる問題を修正
@@ -38,7 +40,6 @@
 - Fix: タイムラインを下にスクロールしてノート画面に移動して再び戻ったら以前のスクロール位置を失う問題を修正
 - Fix: Misskeyプラグインをインストールする際のAiScriptバージョンのチェックが0.14.0以降に対応していない問題を修正
 - Fix: 他のサーバーのユーザーへ「メッセージを送信」した時の初期テキストのメンションが間違っている問題を修正
-- Playの操作を行うAPI TokenをAPIコンソールから発行できるように
 
 ### Server
 - Fix: ノート検索 `notes/search` にてhostを指定した際に検索結果に反映されるように

packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts

@@ -175,8 +175,13 @@ export default function(props: {
 						}, genEl(token.children, scale));
 					}
 					case 'rainbow': {
+						if (!useAnim) {
+							return h('span', {
+								class: '_mfm_rainbow_fallback_',
+							}, genEl(token.children, scale));
+						}
 						const speed = validTime(token.props.args.speed) ?? '1s';
-						style = useAnim ? `animation: mfm-rainbow ${speed} linear infinite;` : '';
+						style = `animation: mfm-rainbow ${speed} linear infinite;`;
 						break;
 					}
 					case 'sparkle': {

packages/frontend/src/style.scss

@@ -527,6 +527,13 @@ hr {
 	}
 }
 
+._mfm_rainbow_fallback_ {
+	background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 165, 0) 17%, rgb(255, 255, 0) 33%, rgb(0, 255, 0) 50%, rgb(0, 255, 255) 67%, rgb(0, 0, 255) 83%, rgb(255, 0, 255) 100%);
+	-webkit-background-clip: text;
+	background-clip: text;
+	color: transparent;
+}
+
 @keyframes mfm-spin {
 	0% { transform: rotate(0deg); }
 	100% { transform: rotate(360deg); }