[MFM] Resolve #4009

4 files changed, 45 insertions, 10 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 606ee7e999..22772636be 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,10 @@
 ChangeLog
 =========
 
+unreleased
+----------
+* MFMで左回転、往復回転を行えるように
+
 10.79.0
 ----------
 * 返信するときにCWを維持するかどうか設定できるように
diff --git a/src/client/app/common/views/components/mfm.ts b/src/client/app/common/views/components/mfm.ts
index 542f1e34c5..1cf7752cbd 100644
--- a/src/client/app/common/views/components/mfm.ts
+++ b/src/client/app/common/views/components/mfm.ts
@@ -128,9 +128,16 @@ export default Vue.component('misskey-flavored-markdown', {
 					motionCount++;
 					const isLong = sumTextsLength(token.children) > 5 || countNodesF(token.children) > 3;
 					const isMany = motionCount > 3;
+					const direction =
+						token.node.props.attr == 'left' ? 'reverse' :
+						token.node.props.attr == 'alternate' ? 'alternate' :
+						'normal';
+					const style = (this.$store.state.settings.disableAnimatedMfm || isLong || isMany)
+						? ''
+						: `animation: spin 1.5s linear infinite; animation-direction: ${direction};`;
 					return (createElement as any)('span', {
 						attrs: {
-							style: (this.$store.state.settings.disableAnimatedMfm || isLong || isMany) ? 'display: inline-block;' : 'display: inline-block; animation: spin 1.5s linear infinite;'
+							style: 'display: inline-block;' + style
 						},
 					}, genEl(token.children));
 				}
diff --git a/src/mfm/parser.ts b/src/mfm/parser.ts
index 6b7c3c5845..3c917f8d07 100644
--- a/src/mfm/parser.ts
+++ b/src/mfm/parser.ts
@@ -148,12 +148,21 @@ const mfm = P.createLanguage({
 
 	//#region Spin
 	spin: r =>
-		P.regexp(/<spin>(.+?)<\/spin>/, 1)
+		P((input, i) => {
+			const text = input.substr(i);
+			const match = text.match(/^<spin(\s[a-z]+?)?>(.+?)<\/spin>/i);
+			if (!match) return P.makeFailure(i, 'not a spin');
+			return P.makeSuccess(i + match[0].length, {
+				content: match[2], attr: match[1] ? match[1].trim() : null
+			});
+		})
 		.map(x => createTree('spin', P.alt(
 			r.emoji,
 			r.flip,
 			r.text
-		).atLeast(1).tryParse(x), {})),
+		).atLeast(1).tryParse(x.content), {
+			attr: x.attr
+		})),
 	//#endregion
 
 	//#region Jump
diff --git a/test/mfm.ts b/test/mfm.ts
index 0d07add0ee..a1f83fe1db 100644
--- a/test/mfm.ts
+++ b/test/mfm.ts
@@ -253,13 +253,28 @@ describe('MFM', () => {
 			]);
 		});
 
-		it('spin', () => {
-			const tokens = analyze('<spin>:foo:</spin>');
-			assert.deepStrictEqual(tokens, [
-				tree('spin', [
-					leaf('emoji', { name: 'foo' })
-				], {}),
-			]);
+		describe('spin', () => {
+			it('simple', () => {
+				const tokens = analyze('<spin>:foo:</spin>');
+				assert.deepStrictEqual(tokens, [
+					tree('spin', [
+						leaf('emoji', { name: 'foo' })
+					], {
+						attr: null
+					}),
+				]);
+			});
+
+			it('with attr', () => {
+				const tokens = analyze('<spin left>:foo:</spin>');
+				assert.deepStrictEqual(tokens, [
+					tree('spin', [
+						leaf('emoji', { name: 'foo' })
+					], {
+						attr: 'left'
+					}),
+				]);
+			});
 		});
 
 		it('jump', () => {