[MFM] Add center syntax

Resolve #1775

4 files changed, 33 insertions, 1 deletions

diff --git a/src/client/app/common/views/components/mfm.ts b/src/client/app/common/views/components/mfm.ts
index e93ea5ccba..d1ce4873fe 100644
--- a/src/client/app/common/views/components/mfm.ts
+++ b/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;
diff --git a/src/mfm/html.ts b/src/mfm/html.ts
index d45cc13af4..8b63d8f824 100644
--- a/src/mfm/html.ts
+++ b/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}:`);
 		},
diff --git a/src/mfm/parse.ts b/src/mfm/parse.ts
index 28e61272d3..ee434d8dd9 100644
--- a/src/mfm/parse.ts
+++ b/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);
 	}
 
 	/**
diff --git a/src/mfm/parser.ts b/src/mfm/parser.ts
index b02a885961..1d6a4b8108 100644
--- a/src/mfm/parser.ts
+++ b/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(