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,21 +34,45 @@ const props = withDefaults(
 </script>
 
 <style lang="scss">
-.mfm-x2 {
+.content:not(.advancedMfm):not(.animatedMfm) {
+	.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-x4 {
+	.mfm-x4 {
 		--mfm-zoom-size: 600%;
-}
+	}
 
-.mfm-x2,
+	.mfm-x2,
-.mfm-x3,
+	.mfm-x3,
-.mfm-x4 {
+	.mfm-x4 {
 		font-size: var(--mfm-zoom-size);
 
 		.mfm-x2,
@@ -64,36 +88,36 @@ const props = withDefaults(
 				font-size: 100%;
 			}
 		}
-}
+	}
 
-@keyframes mfm-spin {
+	@keyframes mfm-spin {
 		0% {
 			transform: rotate(0deg);
 		}
 		100% {
 			transform: rotate(360deg);
 		}
-}
+	}
 
-@keyframes mfm-spinX {
+	@keyframes mfm-spinX {
 		0% {
 			transform: perspective(128px) rotateX(0deg);
 		}
 		100% {
 			transform: perspective(128px) rotateX(360deg);
 		}
-}
+	}
 
-@keyframes mfm-spinY {
+	@keyframes mfm-spinY {
 		0% {
 			transform: perspective(128px) rotateY(0deg);
 		}
 		100% {
 			transform: perspective(128px) rotateY(360deg);
 		}
-}
+	}
 
-@keyframes mfm-jump {
+	@keyframes mfm-jump {
 		0% {
 			transform: translateY(0);
 		}
@@ -109,9 +133,9 @@ const props = withDefaults(
 		100% {
 			transform: translateY(0);
 		}
-}
+	}
 
-@keyframes mfm-bounce {
+	@keyframes mfm-bounce {
 		0% {
 			transform: translateY(0) scale(1, 1);
 		}
@@ -127,12 +151,12 @@ const props = withDefaults(
 		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% {
 			transform: translate(7px, -2px);
 		}
@@ -196,12 +220,12 @@ const props = withDefaults(
 		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% {
 			transform: translate(-3px, -1px) rotate(-8deg);
 		}
@@ -265,9 +289,9 @@ const props = withDefaults(
 		100% {
 			transform: translate(2px, 1px) rotate(2deg);
 		}
-}
+	}
 
-@keyframes mfm-rubberBand {
+	@keyframes mfm-rubberBand {
 		from {
 			transform: scale3d(1, 1, 1);
 		}
@@ -289,29 +313,30 @@ const props = withDefaults(
 		to {
 			transform: scale3d(1, 1, 1);
 		}
-}
+	}
 
-@keyframes mfm-rainbow {
+	@keyframes mfm-rainbow {
 		0% {
 			filter: hue-rotate(0deg) contrast(150%) saturate(150%);
 		}
 		100% {
 			filter: hue-rotate(360deg) contrast(150%) saturate(150%);
 		}
-}
+	}
 
-@keyframes mfm-fade {
+	@keyframes mfm-fade {
 		0% {
 			opacity: 0;
 		}
 		100% {
 			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,