Add new MFM syntax

src/client/app/common/views/components/misskey-flavored-markdown.ts

@@ -69,6 +69,17 @@ export default Vue.component('misskey-flavored-markdown', {
 						}]
 					}, token.big);
 
+				case 'motion':
+					return (createElement as any)('span', {
+						attrs: {
+							style: 'display: inline-block;'
+						},
+						directives: [this.$store.state.settings.disableAnimatedMfm ? {} : {
+							name: 'animate-css',
+							value: { classes: 'rubberBand', iteration: 'infinite' }
+						}]
+					}, token.motion);
+
 				case 'url':
 					return createElement(MkUrl, {
 						props: {

src/mfm/html.ts

@@ -18,6 +18,12 @@ const handlers: { [key: string]: (window: any, token: any, mentionedRemoteUsers:
 		document.body.appendChild(b);
 	},
 
+	motion({ document }, { big }) {
+		const b = document.createElement('strong');
+		b.textContent = big;
+		document.body.appendChild(b);
+	},
+
 	code({ document }, { code }) {
 		const pre = document.createElement('pre');
 		const inner = document.createElement('code');

src/mfm/parse/elements/motion.ts

@@ -0,0 +1,20 @@
+/**
+ * Motion
+ */
+
+export type TextElementMotion = {
+	type: 'motion'
+	content: string
+	motion: string
+};
+
+export default function(text: string) {
+	const match = text.match(/^\(\(\((.+?)\)\)\)/);
+	if (!match) return null;
+	const motion = match[0];
+	return {
+		type: 'motion',
+		content: motion,
+		motion: match[1]
+	} as TextElementMotion;
+}

src/mfm/parse/index.ts

@@ -14,6 +14,7 @@ import { TextElementQuote } from './elements/quote';
 import { TextElementSearch } from './elements/search';
 import { TextElementTitle } from './elements/title';
 import { TextElementUrl } from './elements/url';
+import { TextElementMotion } from './elements/motion';
 
 const elements = [
 	require('./elements/big'),
@@ -27,7 +28,8 @@ const elements = [
 	require('./elements/inline-code'),
 	require('./elements/quote'),
 	require('./elements/emoji'),
-	require('./elements/search')
+	require('./elements/search'),
+	require('./elements/motion')
 ].map(element => element.default as TextElementProcessor);
 
 export type TextElement = { type: 'text', content: string }
@@ -42,7 +44,8 @@ export type TextElement = { type: 'text', content: string }
 	| TextElementQuote
 	| TextElementSearch
 	| TextElementTitle
-	| TextElementUrl;
+	| TextElementUrl
+	| TextElementMotion;
 export type TextElementProcessor = (text: string, i: number) => TextElement | TextElement[];
 
 export default (source: string): TextElement[] => {

test/mfm.ts

@@ -39,6 +39,14 @@ describe('Text', () => {
 			], tokens);
 		});
 
+		it('motion', () => {
+			const tokens = analyze('(((Strawberry))) Pasta');
+			assert.deepEqual([
+				{ type: 'motion', content: '***Strawberry***', motion: 'Strawberry' },
+				{ type: 'text', content: ' Pasta' }
+			], tokens);
+		});
+
 		it('mention', () => {
 			const tokens = analyze('@himawari お腹ペコい');
 			assert.deepEqual([