[MFM] Add center syntax

Resolve #1775

src/client/app/common/views/components/mfm.ts

@@ -111,6 +111,14 @@ export default Vue.component('misskey-flavored-markdown', {
 					}, genEl(token.children));
 				}
 
+				case 'center': {
+					return [createElement('div', {
+						attrs: {
+							style: 'text-align:center;'
+						}
+					}, genEl(token.children))];
+				}
+
 				case 'motion': {
 					motionCount++;
 					const isLong = getTextCount(token.children) > 10 || getChildrenCount(token.children) > 5;

src/mfm/html.ts

@@ -45,6 +45,12 @@ export default (tokens: Node[], mentionedRemoteUsers: INote['mentionedRemoteUser
 			return pre;
 		},
 
+		center(token) {
+			const el = doc.createElement('div');
+			dive(token.children).forEach(child => el.appendChild(child));
+			return el;
+		},
+
 		emoji(token) {
 			return doc.createTextNode(token.props.emoji ? token.props.emoji : `:${token.props.name}:`);
 		},

src/mfm/parse.ts

@@ -41,7 +41,7 @@ export default (source: string): Node[] => {
 	}
 
 	function isBlockNode(node: Node): boolean {
-		return ['blockCode', 'quote', 'title'].includes(node.name);
+		return ['blockCode', 'center', 'quote', 'title'].includes(node.name);
 	}
 
 	/**

src/mfm/parser.ts

@@ -73,6 +73,7 @@ const mfm = P.createLanguage({
 		r.math,
 		r.search,
 		r.title,
+		r.center,
 		r.text
 	).atLeast(1),
 
@@ -113,6 +114,23 @@ const mfm = P.createLanguage({
 		).atLeast(1).tryParse(x))),
 	//#endregion
 
+	//#region Center
+	center: r =>
+		P.regexp(/<center>([\s\S]+?)<\/center>/, 1)
+		.map(x => makeNodeWithChildren('center', P.alt(
+			r.big,
+			r.bold,
+			r.motion,
+			r.mention,
+			r.hashtag,
+			r.emoji,
+			r.math,
+			r.url,
+			r.link,
+			r.text
+		).atLeast(1).tryParse(x))),
+	//#endregion
+
 	//#region Emoji
 	emoji: r =>
 		P.alt(

test/mfm.ts

@@ -641,6 +641,17 @@ describe('Text', () => {
 				], tokens);
 			});
 		});
+
+		describe('center', () => {
+			it('simple', () => {
+				const tokens = analyze('<center>foo</center>');
+				assert.deepEqual([
+					nodeWithChildren('center', [
+						text('foo')
+					]),
+				], tokens);
+			});
+		});
 	});
 
 	describe('toHtml', () => {