diff --git a/locales/en-US.yml b/locales/en-US.yml index 37da6fdc9..c5c8afb50 100644 --- a/locales/en-US.yml +++ b/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" diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts index d41cf6fc2..d1da365d9 100644 --- a/packages/client/src/components/mfm.ts +++ b/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), ']']); diff --git a/packages/client/src/pages/mfm-cheat-sheet.vue b/packages/client/src/pages/mfm-cheat-sheet.vue index e9a3b6deb..ee9d807e7 100644 --- a/packages/client/src/pages/mfm-cheat-sheet.vue +++ b/packages/client/src/pages/mfm-cheat-sheet.vue @@ -281,6 +281,16 @@ +
+
{{ $ts._mfm.rotate }}
+
+

{{ $ts._mfm.rotateDescription }}

+
+ + MFM +
+
+
@@ -328,6 +338,7 @@ export default defineComponent({ preview_blur: `$[blur ${this.$ts._mfm.dummy}]`, preview_rainbow: `$[rainbow 🍮]`, preview_sparkle: `$[sparkle 🍮]`, + preview_rotate: `$[rotate 🍮]`, } }, }); diff --git a/packages/client/src/scripts/mfm-tags.ts b/packages/client/src/scripts/mfm-tags.ts index 1b18210aa..18e8d7038 100644 --- a/packages/client/src/scripts/mfm-tags.ts +++ b/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'];