enhance(client): add new mfm function (position, fg, bg)

Resolve #9527

1 files changed, 28 insertions, 10 deletions

diff --git a/packages/frontend/src/components/mfm.ts b/packages/frontend/src/components/mfm.ts
index 0d5b45461a..32b009bdaa 100644
--- a/packages/frontend/src/components/mfm.ts
+++ b/packages/frontend/src/components/mfm.ts
@@ -87,22 +87,22 @@ export default defineComponent({
 					let style;
 					switch (token.props.name) {
 						case 'tada': {
-							const speed = validTime(token.props.args.speed) || '1s';
+							const speed = validTime(token.props.args.speed) ?? '1s';
 							style = 'font-size: 150%;' + (this.$store.state.animatedMfm ? `animation: tada ${speed} linear infinite both;` : '');
 							break;
 						}
 						case 'jelly': {
-							const speed = validTime(token.props.args.speed) || '1s';
+							const speed = validTime(token.props.args.speed) ?? '1s';
 							style = (this.$store.state.animatedMfm ? `animation: mfm-rubberBand ${speed} linear infinite both;` : '');
 							break;
 						}
 						case 'twitch': {
-							const speed = validTime(token.props.args.speed) || '0.5s';
+							const speed = validTime(token.props.args.speed) ?? '0.5s';
 							style = this.$store.state.animatedMfm ? `animation: mfm-twitch ${speed} ease infinite;` : '';
 							break;
 						}
 						case 'shake': {
-							const speed = validTime(token.props.args.speed) || '0.5s';
+							const speed = validTime(token.props.args.speed) ?? '0.5s';
 							style = this.$store.state.animatedMfm ? `animation: mfm-shake ${speed} ease infinite;` : '';
 							break;
 						}
@@ -115,17 +115,17 @@ export default defineComponent({
 								token.props.args.x ? 'mfm-spinX' :
 								token.props.args.y ? 'mfm-spinY' :
 								'mfm-spin';
-							const speed = validTime(token.props.args.speed) || '1.5s';
+							const speed = validTime(token.props.args.speed) ?? '1.5s';
 							style = this.$store.state.animatedMfm ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};` : '';
 							break;
 						}
 						case 'jump': {
-							const speed = validTime(token.props.args.speed) || '0.75s';
+							const speed = validTime(token.props.args.speed) ?? '0.75s';
 							style = this.$store.state.animatedMfm ? `animation: mfm-jump ${speed} linear infinite;` : '';
 							break;
 						}
 						case 'bounce': {
-							const speed = validTime(token.props.args.speed) || '0.75s';
+							const speed = validTime(token.props.args.speed) ?? '0.75s';
 							style = this.$store.state.animatedMfm ? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;` : '';
 							break;
 						}
@@ -170,7 +170,7 @@ export default defineComponent({
 							}, genEl(token.children));
 						}
 						case 'rainbow': {
-							const speed = validTime(token.props.args.speed) || '1s';
+							const speed = validTime(token.props.args.speed) ?? '1s';
 							style = this.$store.state.animatedMfm ? `animation: mfm-rainbow ${speed} linear infinite;` : '';
 							break;
 						}
@@ -181,16 +181,34 @@ export default defineComponent({
 							return h(MkSparkle, {}, genEl(token.children));
 						}
 						case 'rotate': {
-							const degrees = parseInt(token.props.args.deg) || '90';
+							const degrees = parseInt(token.props.args.deg) ?? '90';
 							style = `transform: rotate(${degrees}deg); transform-origin: center center;`;
 							break;
 						}
+						case 'position': {
+							const x = parseInt(token.props.args.x ?? '0');
+							const y = parseInt(token.props.args.y ?? '0');
+							style = `transform: translateX(${x}em) translateY(${y}em);`;
+							break;
+						}
+						case 'fg': {
+							let color = token.props.args.color;
+							if (!/^[0-9a-f]{3,6}$/i.test(color)) color = 'f00';
+							style = `color: #${color};`;
+							break;
+						}
+						case 'bg': {
+							let color = token.props.args.color;
+							if (!/^[0-9a-f]{3,6}$/i.test(color)) color = 'f00';
+							style = `background-color: #${color};`;
+							break;
+						}
 					}
 					if (style == null) {
 						return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children), ']']);
 					} else {
 						return h('span', {
-							style: 'display: inline-block;' + style,
+							style: 'display: inline-block; ' + style,
 						}, genEl(token.children));
 					}
 				}