Implemented a rotate MFM (#8016)

Co-authored-by: Richard Bowey <me@epickitty.uk>

locales/en-US.yml

@@ -931,6 +931,8 @@ _mfm:
   rainbowDescription: "Makes the content appear in rainbow colors."
   sparkle: "Sparkle"
   sparkleDescription: "Gives content a sparkling particle effect."
+  rotate: "Rotate"
+  rotateDescription: "Rotates the content by 90 degrees"
 _reversi:
   reversi: "Reversi"
   gameSettings: "Game settings"

packages/client/src/components/mfm.ts

@@ -184,6 +184,11 @@ export default defineComponent({
 								count, speed,
 							}, genEl(token.children));
 						}
+						case 'rotate': {
+							const degrees = parseInt(token.props.args.deg) || '90';
+							style = `transform: rotate(${degrees}deg); transform-origin: center center;`;
+							break;
+						}
 					}
 					if (style == null) {
 						return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children), ']']);

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

@@ -281,6 +281,16 @@
 			</div>
 		</div>
 	</div>
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.rotate }}</div>
+		<div class="content">
+			<p>{{ $ts._mfm.rotateDescription }}</p>
+			<div class="preview">
+				<Mfm :text="preview_rotate"/>
+				<MkTextarea v-model="preview_rotate"><span>MFM</span></MkTextarea>
+			</div>
+		</div>
+	</div>
 </div>
 </template>
 
@@ -328,6 +338,7 @@ export default defineComponent({
 			preview_blur: `$[blur ${this.$ts._mfm.dummy}]`,
 			preview_rainbow: `$[rainbow 🍮]`,
 			preview_sparkle: `$[sparkle 🍮]`,
+			preview_rotate: `$[rotate 🍮]`,
 		}
 	},
 });

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

@@ -1 +1 @@
-export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'font', 'blur', 'rainbow', 'sparkle'];
+export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'font', 'blur', 'rainbow', 'sparkle', 'rotate'];