From d7766162d63eb24693b200db41d222fab017d748 Mon Sep 17 00:00:00 2001
From: YAVIIGI <118232419+YAVIIGI@users.noreply.github.com>
Date: Thu, 14 Dec 2023 17:57:57 +0900
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20MFM=20=E3=81=AE=E3=82=A2?=
 =?UTF-8?q?=E3=83=8B=E3=83=A1=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E8=A6=81?=
 =?UTF-8?q?=E7=B4=A0=E3=81=AB=20delay=20=E3=82=AA=E3=83=97=E3=82=B7?=
 =?UTF-8?q?=E3=83=A7=E3=83=B3=E3=82=92=E8=BF=BD=E5=8A=A0=20(#12659)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add delay option

* Update CHANGELOG.md
---
 CHANGELOG.md                                  |  1 +
 .../global/MkMisskeyFlavoredMarkdown.ts       | 24 ++++++++++++-------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d2447bae1..0581466d7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -36,6 +36,7 @@
 ### Client
 - Feat: 今日誕生日のフォロー中のユーザーを一覧表示できるウィジェットを追加
 - Feat: データセーバーでコードハイライトの読み込みを削減できるように
+- Feat: MFMのアニメーション要素（`tada`, `jelly`, `twitch`, `shake`, `spin`, `jump`, `bounce`, `rainbow`）に `delay` オプションを追加
 - Enhance: 投稿フォームの絵文字ピッカーをリアクション時に使用するものと同じのを使用するように #12336 #12560
 - Enhance: リアクション用ピン留め絵文字と投稿時の絵文字入力用ピン留め絵文字を分けて設定できるように #12560
 - Enhance: 絵文字のオートコンプリート機能強化 #12364
diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
index 28293b287..a46c7f0ce 100644
--- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
+++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
@@ -107,22 +107,26 @@ export default function(props: MfmProps) {
 				switch (token.props.name) {
 					case 'tada': {
 						const speed = validTime(token.props.args.speed) ?? '1s';
-						style = 'font-size: 150%;' + (useAnim ? `animation: tada ${speed} linear infinite both;` : '');
+						const delay = validTime(token.props.args.delay) ?? '0s';
+						style = 'font-size: 150%;' + (useAnim ? `animation: tada ${speed} linear infinite both; animation-delay: ${delay};` : '');
 						break;
 					}
 					case 'jelly': {
 						const speed = validTime(token.props.args.speed) ?? '1s';
-						style = (useAnim ? `animation: mfm-rubberBand ${speed} linear infinite both;` : '');
+						const delay = validTime(token.props.args.delay) ?? '0s';
+						style = (useAnim ? `animation: mfm-rubberBand ${speed} linear infinite both; animation-delay: ${delay};` : '');
 						break;
 					}
 					case 'twitch': {
 						const speed = validTime(token.props.args.speed) ?? '0.5s';
-						style = useAnim ? `animation: mfm-twitch ${speed} ease infinite;` : '';
+						const delay = validTime(token.props.args.delay) ?? '0s';
+						style = useAnim ? `animation: mfm-twitch ${speed} ease infinite; animation-delay: ${delay};` : '';
 						break;
 					}
 					case 'shake': {
 						const speed = validTime(token.props.args.speed) ?? '0.5s';
-						style = useAnim ? `animation: mfm-shake ${speed} ease infinite;` : '';
+						const delay = validTime(token.props.args.delay) ?? '0s';
+						style = useAnim ? `animation: mfm-shake ${speed} ease infinite; animation-delay: ${delay};` : '';
 						break;
 					}
 					case 'spin': {
@@ -135,17 +139,20 @@ export default function(props: MfmProps) {
 							token.props.args.y ? 'mfm-spinY' :
 							'mfm-spin';
 						const speed = validTime(token.props.args.speed) ?? '1.5s';
-						style = useAnim ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};` : '';
+						const delay = validTime(token.props.args.delay) ?? '0s';
+						style = useAnim ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction}; animation-delay: ${delay};` : '';
 						break;
 					}
 					case 'jump': {
 						const speed = validTime(token.props.args.speed) ?? '0.75s';
-						style = useAnim ? `animation: mfm-jump ${speed} linear infinite;` : '';
+						const delay = validTime(token.props.args.delay) ?? '0s';
+						style = useAnim ? `animation: mfm-jump ${speed} linear infinite; animation-delay: ${delay};` : '';
 						break;
 					}
 					case 'bounce': {
 						const speed = validTime(token.props.args.speed) ?? '0.75s';
-						style = useAnim ? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;` : '';
+						const delay = validTime(token.props.args.delay) ?? '0s';
+						style = useAnim ? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom; animation-delay: ${delay};` : '';
 						break;
 					}
 					case 'flip': {
@@ -195,7 +202,8 @@ export default function(props: MfmProps) {
 							}, genEl(token.children, scale));
 						}
 						const speed = validTime(token.props.args.speed) ?? '1s';
-						style = `animation: mfm-rainbow ${speed} linear infinite;`;
+						const delay = validTime(token.props.args.delay) ?? '0s';
+						style = `animation: mfm-rainbow ${speed} linear infinite; animation-delay: ${delay};`;
 						break;
 					}
 					case 'sparkle': {