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,6 +34,30 @@ const props = withDefaults(
 </script>
 
 <style lang="scss">
+.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%;
 	}
@@ -308,10 +332,11 @@ const props = withDefaults(
 			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,