Merge pull request 'Feat: MFM fade' (#10179) from ikiko/calckey:Feat-MFM-fade-dev into develop

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10179

locales/de-DE.yml

@@ -1171,6 +1171,8 @@ _mfm:
   sparkleDescription: "Verleiht Inhalt einen glitzernden Partikeleffekt."
   rotate: "Drehen"
   rotateDescription: "Dreht den Inhalt um einen angegebenen Winkel."
+  fade: "Ein-/Ausblenden"
+  fadeDescription: "Blended Inhalt ein and aus."
   plain: "Schlicht"
   plainDescription: "Deaktiviert jegliche MFM-Syntax, die sich innerhalb dieses MFM-Effekts\
     \ befindet."

locales/en-US.yml

@@ -1267,6 +1267,8 @@ _mfm:
   sparkleDescription: "Gives content a sparkling particle effect."
   rotate: "Rotate"
   rotateDescription: "Turns content by a specified angle."
+  fade: "Fade"
+  fadeDescription: "Fades content in and out."
   position: "Position"
   positionDescription: "Move content by a specified amount."
   scale: "Scale"

locales/fr-FR.yml

@@ -1077,6 +1077,8 @@ _mfm:
   sparkle: "Paillettes"
   sparkleDescription: "Ajoute un effet scintillant au contenu."
   rotate: "Pivoter"
+  fade: "Apparaître/Disparaître"
+  fadeDescription: "Fait apparaître et disparaître le contenu."
   plainDescription: Désactiver les effets de tous les MFM contenus dans cet effet
     MFM.
   rotateDescription: Pivoter le contenu d'un angle spécifique.

locales/it-IT.yml

@@ -910,6 +910,8 @@ _mfm:
   fontDescription: "Puoi scegliere il tipo di carattere per il contenuto."
   rainbow: "Arcobaleno"
   rotate: "Ruota"
+  fade: "Dissolvenza"
+  fadeDescription: "Dissolvenza in entrata e in uscita del contenuto."
 _instanceTicker:
   none: "Nascondi"
   remote: "Mostra solo per gli/le utenti remotə"

packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue

@@ -299,6 +299,11 @@ const props = withDefaults(
 		filter: hue-rotate(360deg) contrast(150%) saturate(150%);
 	}
 }
+
+@keyframes mfm-fade {
+	0% { opacity: 0; }
+	100% { opacity: 1; }
+}
 </style>
 
 <style lang="scss" scoped>

packages/client/src/components/mfm.ts

@@ -253,6 +253,16 @@ export default defineComponent({
 									style = `background-color: #${color};`;
 									break;
 								}
+								case "fade": {
+									const direction = token.props.args.out
+										? "alternate-reverse"
+										: "alternate";
+									const speed = validTime(token.props.args.speed) || "1.5s";
+									style =
+										this.$store.state.animatedMfm && !reducedMotion()
+											? `animation: mfm-fade ${speed} linear infinite; animation-direction: ${direction};`
+											: "";
+								}
 							}
 							if (style == null) {
 								return h("span", {}, [

packages/client/src/pages/mfm-cheat-sheet.vue

@@ -353,6 +353,16 @@
 						</div>
 					</div>
 				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.fade }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.fadeDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_fade"/>
+							<MkTextarea v-model="preview_fade"><span>MFM</span></MkTextarea>
+						</div>
+					</div>
+				</div>
 				<div class="section _block">
 					<div class="title">{{ i18n.ts._mfm.position }}</div>
 					<div class="content">
@@ -407,9 +417,7 @@
 						<p>{{ i18n.ts._mfm.plainDescription }}</p>
 						<div class="preview">
 							<Mfm :text="preview_plain"/>
-							<MkTextarea v-model="preview_plain"
-								><span>MFM</span></MkTextarea
-							>
+							<MkTextarea v-model="preview_plain"><span>MFM</span></MkTextarea>
 						</div>
 					</div>
 				</div>
@@ -479,6 +487,7 @@ let preview_bg = $ref("$[bg.color=ff0000 Background color]");
 let preview_plain = $ref(
 	"<plain>**bold** @mention #hashtag `code` $[x2 🍮]</plain>"
 );
+let preview_fade = $ref('$[fade 🍮] $[fade.out 🍮] $[fade.speed=5s 🍮]');
 
 definePageMetadata({
 	title: i18n.ts._mfm.cheatSheet,

packages/client/src/scripts/mfm-tags.ts

@@ -19,4 +19,5 @@ export const MFM_TAGS = [
 	"rainbow",
 	"sparkle",
 	"rotate",
+	"fade",
 ];