Merge pull request '[PR]: Add advanced MFM toggle' (#10254) from Freeplay/calckey:advanced-mfm into develop

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

locales/en-US.yml

@@ -1211,6 +1211,8 @@ _mfm:
   intro: "MFM is a markup language used on Misskey, Calckey, Akkoma, and more that\
     \ can be used in many places. Here you can view a list of all available MFM syntax."
   dummy: "Calckey expands the world of the Fediverse"
+  advanced: "Advanced MFM"
+  advancedDescription: "If disabled, only allows for basic markup unless animated MFM is playing"
   mention: "Mention"
   mentionDescription: "You can specify a user by using an At-Symbol and a username."
   hashtag: "Hashtag"

packages/client/src/components/MkSubNoteContent.vue

@@ -42,7 +42,8 @@
 				isLong,
 				manyImages: note.files.length > 4,
 				showContent: note.cw && !showContent,
-				disableAnim: disableMfm,
+				animatedMfm: !disableMfm,
+				advancedMfm,
 			}"
 		>
 			<XShowMoreButton
@@ -231,7 +232,9 @@ const mfms = props.note.text
 
 const hasMfm = $ref(mfms && mfms.length > 0);
 
-let disableMfm = $ref(hasMfm && defaultStore.state.animatedMfm);
+let disableMfm = $ref(defaultStore.state.animatedMfm);
+
+const advancedMfm = defaultStore.state.advancedMfm;
 
 async function toggleMfm() {
 	if (disableMfm) {
@@ -385,7 +388,7 @@ function focusFooter(ev) {
 			}
 		}
 
-		&.disableAnim :deep(span) {
+		&:not(.animatedMfm) :deep(span) {
 			animation: none !important;
 		}
 	}

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

@@ -6,7 +6,7 @@
 		:author="author"
 		:customEmojis="customEmojis"
 		:isNote="isNote"
-		class="havbbuyv"
+		class="mfm-object"
 		:class="{ nowrap }"
 	/>
 </template>
@@ -34,284 +34,309 @@ const props = withDefaults(
 </script>
 
 <style lang="scss">
-.mfm-x2 {
+.content:not(.advancedMfm):not(.animatedMfm) {
-	--mfm-zoom-size: 200%;
+	.mfm-object {
+		[style*="animation:"] {
+			animation: none !important;
+		}
+		[style*="transform:"] {
+			transform: none !important;
+		}
+		[style*="background-color:"] {
+			background: none !important;
+		}
+		[style*="color:"] {
+			color: inherit !important;
+		}
+		[style*="font-family:"] {
+			font-family: inherit !important;
+		}
+		[style*="clip-path:"] {
+			clip-path: none !important;
+		}
+	}
 }
+.content.advancedMfm,
+.content.animatedMfm {
+	.mfm-x2 {
+		--mfm-zoom-size: 200%;
+	}
 
-.mfm-x3 {
+	.mfm-x3 {
-	--mfm-zoom-size: 400%;
+		--mfm-zoom-size: 400%;
-}
+	}
 
-.mfm-x4 {
+	.mfm-x4 {
-	--mfm-zoom-size: 600%;
+		--mfm-zoom-size: 600%;
-}
+	}
-
-.mfm-x2,
-.mfm-x3,
-.mfm-x4 {
-	font-size: var(--mfm-zoom-size);
 
 	.mfm-x2,
 	.mfm-x3,
 	.mfm-x4 {
-		/* only half effective */
+		font-size: var(--mfm-zoom-size);
-		font-size: calc(var(--mfm-zoom-size) / 2 + 50%);
 
 		.mfm-x2,
 		.mfm-x3,
 		.mfm-x4 {
-			/* disabled */
+			/* only half effective */
-			font-size: 100%;
+			font-size: calc(var(--mfm-zoom-size) / 2 + 50%);
+
+			.mfm-x2,
+			.mfm-x3,
+			.mfm-x4 {
+				/* disabled */
+				font-size: 100%;
+			}
 		}
 	}
-}
 
-@keyframes mfm-spin {
+	@keyframes mfm-spin {
-	0% {
+		0% {
-		transform: rotate(0deg);
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
 	}
-	100% {
-		transform: rotate(360deg);
-	}
-}
 
-@keyframes mfm-spinX {
+	@keyframes mfm-spinX {
-	0% {
+		0% {
-		transform: perspective(128px) rotateX(0deg);
+			transform: perspective(128px) rotateX(0deg);
+		}
+		100% {
+			transform: perspective(128px) rotateX(360deg);
+		}
 	}
-	100% {
-		transform: perspective(128px) rotateX(360deg);
-	}
-}
 
-@keyframes mfm-spinY {
+	@keyframes mfm-spinY {
-	0% {
+		0% {
-		transform: perspective(128px) rotateY(0deg);
+			transform: perspective(128px) rotateY(0deg);
+		}
+		100% {
+			transform: perspective(128px) rotateY(360deg);
+		}
 	}
-	100% {
-		transform: perspective(128px) rotateY(360deg);
-	}
-}
 
-@keyframes mfm-jump {
+	@keyframes mfm-jump {
-	0% {
+		0% {
-		transform: translateY(0);
+			transform: translateY(0);
+		}
+		25% {
+			transform: translateY(-16px);
+		}
+		50% {
+			transform: translateY(0);
+		}
+		75% {
+			transform: translateY(-8px);
+		}
+		100% {
+			transform: translateY(0);
+		}
 	}
-	25% {
-		transform: translateY(-16px);
-	}
-	50% {
-		transform: translateY(0);
-	}
-	75% {
-		transform: translateY(-8px);
-	}
-	100% {
-		transform: translateY(0);
-	}
-}
 
-@keyframes mfm-bounce {
+	@keyframes mfm-bounce {
-	0% {
+		0% {
-		transform: translateY(0) scale(1, 1);
+			transform: translateY(0) scale(1, 1);
+		}
+		25% {
+			transform: translateY(-16px) scale(1, 1);
+		}
+		50% {
+			transform: translateY(0) scale(1, 1);
+		}
+		75% {
+			transform: translateY(0) scale(1.5, 0.75);
+		}
+		100% {
+			transform: translateY(0) scale(1, 1);
+		}
 	}
-	25% {
-		transform: translateY(-16px) scale(1, 1);
-	}
-	50% {
-		transform: translateY(0) scale(1, 1);
-	}
-	75% {
-		transform: translateY(0) scale(1.5, 0.75);
-	}
-	100% {
-		transform: translateY(0) scale(1, 1);
-	}
-}
 
-// const val = () => `translate(${Math.floor(Math.random() * 20) - 10}px, ${Math.floor(Math.random() * 20) - 10}px)`;
+	// const val = () => `translate(${Math.floor(Math.random() * 20) - 10}px, ${Math.floor(Math.random() * 20) - 10}px)`;
-// let css = '';
+	// let css = '';
-// for (let i = 0; i <= 100; i += 5) { css += `${i}% { transform: ${val()} }\n`; }
+	// for (let i = 0; i <= 100; i += 5) { css += `${i}% { transform: ${val()} }\n`; }
-@keyframes mfm-twitch {
+	@keyframes mfm-twitch {
-	0% {
+		0% {
-		transform: translate(7px, -2px);
+			transform: translate(7px, -2px);
+		}
+		5% {
+			transform: translate(-3px, 1px);
+		}
+		10% {
+			transform: translate(-7px, -1px);
+		}
+		15% {
+			transform: translate(0px, -1px);
+		}
+		20% {
+			transform: translate(-8px, 6px);
+		}
+		25% {
+			transform: translate(-4px, -3px);
+		}
+		30% {
+			transform: translate(-4px, -6px);
+		}
+		35% {
+			transform: translate(-8px, -8px);
+		}
+		40% {
+			transform: translate(4px, 6px);
+		}
+		45% {
+			transform: translate(-3px, 1px);
+		}
+		50% {
+			transform: translate(2px, -10px);
+		}
+		55% {
+			transform: translate(-7px, 0px);
+		}
+		60% {
+			transform: translate(-2px, 4px);
+		}
+		65% {
+			transform: translate(3px, -8px);
+		}
+		70% {
+			transform: translate(6px, 7px);
+		}
+		75% {
+			transform: translate(-7px, -2px);
+		}
+		80% {
+			transform: translate(-7px, -8px);
+		}
+		85% {
+			transform: translate(9px, 3px);
+		}
+		90% {
+			transform: translate(-3px, -2px);
+		}
+		95% {
+			transform: translate(-10px, 2px);
+		}
+		100% {
+			transform: translate(-2px, -6px);
+		}
 	}
-	5% {
-		transform: translate(-3px, 1px);
-	}
-	10% {
-		transform: translate(-7px, -1px);
-	}
-	15% {
-		transform: translate(0px, -1px);
-	}
-	20% {
-		transform: translate(-8px, 6px);
-	}
-	25% {
-		transform: translate(-4px, -3px);
-	}
-	30% {
-		transform: translate(-4px, -6px);
-	}
-	35% {
-		transform: translate(-8px, -8px);
-	}
-	40% {
-		transform: translate(4px, 6px);
-	}
-	45% {
-		transform: translate(-3px, 1px);
-	}
-	50% {
-		transform: translate(2px, -10px);
-	}
-	55% {
-		transform: translate(-7px, 0px);
-	}
-	60% {
-		transform: translate(-2px, 4px);
-	}
-	65% {
-		transform: translate(3px, -8px);
-	}
-	70% {
-		transform: translate(6px, 7px);
-	}
-	75% {
-		transform: translate(-7px, -2px);
-	}
-	80% {
-		transform: translate(-7px, -8px);
-	}
-	85% {
-		transform: translate(9px, 3px);
-	}
-	90% {
-		transform: translate(-3px, -2px);
-	}
-	95% {
-		transform: translate(-10px, 2px);
-	}
-	100% {
-		transform: translate(-2px, -6px);
-	}
-}
 
-// const val = () => `translate(${Math.floor(Math.random() * 6) - 3}px, ${Math.floor(Math.random() * 6) - 3}px) rotate(${Math.floor(Math.random() * 24) - 12}deg)`;
+	// const val = () => `translate(${Math.floor(Math.random() * 6) - 3}px, ${Math.floor(Math.random() * 6) - 3}px) rotate(${Math.floor(Math.random() * 24) - 12}deg)`;
-// let css = '';
+	// let css = '';
-// for (let i = 0; i <= 100; i += 5) { css += `${i}% { transform: ${val()} }\n`; }
+	// for (let i = 0; i <= 100; i += 5) { css += `${i}% { transform: ${val()} }\n`; }
-@keyframes mfm-shake {
+	@keyframes mfm-shake {
-	0% {
+		0% {
-		transform: translate(-3px, -1px) rotate(-8deg);
+			transform: translate(-3px, -1px) rotate(-8deg);
+		}
+		5% {
+			transform: translate(0px, -1px) rotate(-10deg);
+		}
+		10% {
+			transform: translate(1px, -3px) rotate(0deg);
+		}
+		15% {
+			transform: translate(1px, 1px) rotate(11deg);
+		}
+		20% {
+			transform: translate(-2px, 1px) rotate(1deg);
+		}
+		25% {
+			transform: translate(-1px, -2px) rotate(-2deg);
+		}
+		30% {
+			transform: translate(-1px, 2px) rotate(-3deg);
+		}
+		35% {
+			transform: translate(2px, 1px) rotate(6deg);
+		}
+		40% {
+			transform: translate(-2px, -3px) rotate(-9deg);
+		}
+		45% {
+			transform: translate(0px, -1px) rotate(-12deg);
+		}
+		50% {
+			transform: translate(1px, 2px) rotate(10deg);
+		}
+		55% {
+			transform: translate(0px, -3px) rotate(8deg);
+		}
+		60% {
+			transform: translate(1px, -1px) rotate(8deg);
+		}
+		65% {
+			transform: translate(0px, -1px) rotate(-7deg);
+		}
+		70% {
+			transform: translate(-1px, -3px) rotate(6deg);
+		}
+		75% {
+			transform: translate(0px, -2px) rotate(4deg);
+		}
+		80% {
+			transform: translate(-2px, -1px) rotate(3deg);
+		}
+		85% {
+			transform: translate(1px, -3px) rotate(-10deg);
+		}
+		90% {
+			transform: translate(1px, 0px) rotate(3deg);
+		}
+		95% {
+			transform: translate(-2px, 0px) rotate(-3deg);
+		}
+		100% {
+			transform: translate(2px, 1px) rotate(2deg);
+		}
 	}
-	5% {
-		transform: translate(0px, -1px) rotate(-10deg);
-	}
-	10% {
-		transform: translate(1px, -3px) rotate(0deg);
-	}
-	15% {
-		transform: translate(1px, 1px) rotate(11deg);
-	}
-	20% {
-		transform: translate(-2px, 1px) rotate(1deg);
-	}
-	25% {
-		transform: translate(-1px, -2px) rotate(-2deg);
-	}
-	30% {
-		transform: translate(-1px, 2px) rotate(-3deg);
-	}
-	35% {
-		transform: translate(2px, 1px) rotate(6deg);
-	}
-	40% {
-		transform: translate(-2px, -3px) rotate(-9deg);
-	}
-	45% {
-		transform: translate(0px, -1px) rotate(-12deg);
-	}
-	50% {
-		transform: translate(1px, 2px) rotate(10deg);
-	}
-	55% {
-		transform: translate(0px, -3px) rotate(8deg);
-	}
-	60% {
-		transform: translate(1px, -1px) rotate(8deg);
-	}
-	65% {
-		transform: translate(0px, -1px) rotate(-7deg);
-	}
-	70% {
-		transform: translate(-1px, -3px) rotate(6deg);
-	}
-	75% {
-		transform: translate(0px, -2px) rotate(4deg);
-	}
-	80% {
-		transform: translate(-2px, -1px) rotate(3deg);
-	}
-	85% {
-		transform: translate(1px, -3px) rotate(-10deg);
-	}
-	90% {
-		transform: translate(1px, 0px) rotate(3deg);
-	}
-	95% {
-		transform: translate(-2px, 0px) rotate(-3deg);
-	}
-	100% {
-		transform: translate(2px, 1px) rotate(2deg);
-	}
-}
 
-@keyframes mfm-rubberBand {
+	@keyframes mfm-rubberBand {
-	from {
+		from {
-		transform: scale3d(1, 1, 1);
+			transform: scale3d(1, 1, 1);
+		}
+		30% {
+			transform: scale3d(1.25, 0.75, 1);
+		}
+		40% {
+			transform: scale3d(0.75, 1.25, 1);
+		}
+		50% {
+			transform: scale3d(1.15, 0.85, 1);
+		}
+		65% {
+			transform: scale3d(0.95, 1.05, 1);
+		}
+		75% {
+			transform: scale3d(1.05, 0.95, 1);
+		}
+		to {
+			transform: scale3d(1, 1, 1);
+		}
 	}
-	30% {
-		transform: scale3d(1.25, 0.75, 1);
-	}
-	40% {
-		transform: scale3d(0.75, 1.25, 1);
-	}
-	50% {
-		transform: scale3d(1.15, 0.85, 1);
-	}
-	65% {
-		transform: scale3d(0.95, 1.05, 1);
-	}
-	75% {
-		transform: scale3d(1.05, 0.95, 1);
-	}
-	to {
-		transform: scale3d(1, 1, 1);
-	}
-}
 
-@keyframes mfm-rainbow {
+	@keyframes mfm-rainbow {
-	0% {
+		0% {
-		filter: hue-rotate(0deg) contrast(150%) saturate(150%);
+			filter: hue-rotate(0deg) contrast(150%) saturate(150%);
+		}
+		100% {
+			filter: hue-rotate(360deg) contrast(150%) saturate(150%);
+		}
 	}
-	100% {
-		filter: hue-rotate(360deg) contrast(150%) saturate(150%);
-	}
-}
 
-@keyframes mfm-fade {
+	@keyframes mfm-fade {
-	0% {
+		0% {
-		opacity: 0;
+			opacity: 0;
-	}
+		}
-	100% {
+		100% {
-		opacity: 1;
+			opacity: 1;
+		}
 	}
 }
 </style>
 
 <style lang="scss" scoped>
-.havbbuyv {
+.mfm-object {
 	white-space: pre-wrap;
 
 	&.nowrap {

packages/client/src/pages/settings/general.vue

@@ -54,12 +54,6 @@
 			<FormSwitch v-model="disablePagesScript" class="_formBlock">{{
 				i18n.ts.disablePagesScript
 			}}</FormSwitch>
-			<FormSwitch v-model="expandOnNoteClick" class="_formBlock"
-				>{{ i18n.ts.expandOnNoteClick
-				}}<template #caption>{{
-					i18n.ts.expandOnNoteClickDesc
-				}}</template>
-			</FormSwitch>
 			<FormSwitch v-model="profile.showTimelineReplies" class="_formBlock"
 				>{{ i18n.ts.flagShowTimelineReplies
 				}}<template #caption
@@ -87,6 +81,18 @@
 
 		<FormSection>
 			<template #label>{{ i18n.ts.accessibility }}</template>
+			<FormSwitch v-model="expandOnNoteClick" class="_formBlock"
+				>{{ i18n.ts.expandOnNoteClick
+				}}<template #caption>{{
+					i18n.ts.expandOnNoteClickDesc
+				}}</template>
+			</FormSwitch>
+			<FormSwitch v-model="advancedMfm" class="_formBlock">
+				{{ i18n.ts._mfm.advanced
+				}}<template #caption>{{
+					i18n.ts._mfm.advancedDescription
+				}}</template>
+			</FormSwitch>
 			<FormSwitch v-model="autoplayMfm" class="_formBlock">
 				{{ i18n.ts._mfm.alwaysPlay }}
 				<template #caption>
@@ -285,6 +291,7 @@ const showGapBetweenNotesInTimeline = computed(
 	defaultStore.makeGetterSetter("showGapBetweenNotesInTimeline")
 );
 const showAds = computed(defaultStore.makeGetterSetter("showAds"));
+const advancedMfm = computed(defaultStore.makeGetterSetter("advancedMfm"));
 const autoplayMfm = computed(
 	defaultStore.makeGetterSetter(
 		"animatedMfm",
@@ -374,6 +381,7 @@ watch(
 		swipeOnDesktop,
 		seperateRenoteQuote,
 		showAdminUpdates,
+		advancedMfm,
 		autoplayMfm,
 		expandOnNoteClick,
 	],

packages/client/src/store.ts

@@ -174,6 +174,10 @@ export const defaultStore = markRaw(
 			where: "device",
 			default: true,
 		},
+		advancedMfm: {
+			where: "device",
+			default: true,
+		},
 		animatedMfm: {
 			where: "device",
 			default: true,