Fix CSS injection at MFM speed (#7051)

This commit is contained in:
MeiMei 2021-01-03 12:51:50 +09:00 committed by GitHub
parent 761071e1ce
commit e74a47916d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 4 deletions

View File

@ -48,6 +48,11 @@ export default defineComponent({
const ast = (this.plain ? parsePlain : parse)(this.text); const ast = (this.plain ? parsePlain : parse)(this.text);
const validTime = (t: string | null | undefined) => {
if (t == null) return null;
return t.match(/^[0-9.]+s$/) ? t : null;
};
const genEl = (ast: MfmForest) => concat(ast.map((token): VNode[] => { const genEl = (ast: MfmForest) => concat(ast.map((token): VNode[] => {
switch (token.node.type) { switch (token.node.type) {
case 'text': { case 'text': {
@ -86,17 +91,17 @@ export default defineComponent({
break; break;
} }
case 'jelly': { case 'jelly': {
const speed = token.node.props.args.speed || '1s'; const speed = validTime(token.node.props.args.speed) || '1s';
style = (this.$store.state.animatedMfm ? `animation: mfm-rubberBand ${speed} linear infinite both;` : ''); style = (this.$store.state.animatedMfm ? `animation: mfm-rubberBand ${speed} linear infinite both;` : '');
break; break;
} }
case 'twitch': { case 'twitch': {
const speed = token.node.props.args.speed || '0.5s'; const speed = validTime(token.node.props.args.speed) || '0.5s';
style = this.$store.state.animatedMfm ? `animation: mfm-twitch ${speed} ease infinite;` : ''; style = this.$store.state.animatedMfm ? `animation: mfm-twitch ${speed} ease infinite;` : '';
break; break;
} }
case 'shake': { case 'shake': {
const speed = token.node.props.args.speed || '0.5s'; const speed = validTime(token.node.props.args.speed) || '0.5s';
style = this.$store.state.animatedMfm ? `animation: mfm-shake ${speed} ease infinite;` : ''; style = this.$store.state.animatedMfm ? `animation: mfm-shake ${speed} ease infinite;` : '';
break; break;
} }
@ -109,7 +114,7 @@ export default defineComponent({
token.node.props.args.x ? 'mfm-spinX' : token.node.props.args.x ? 'mfm-spinX' :
token.node.props.args.y ? 'mfm-spinY' : token.node.props.args.y ? 'mfm-spinY' :
'mfm-spin'; 'mfm-spin';
const speed = token.node.props.args.speed || '1.5s'; const speed = validTime(token.node.props.args.speed) || '1.5s';
style = this.$store.state.animatedMfm ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};` : ''; style = this.$store.state.animatedMfm ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};` : '';
break; break;
} }