From ed4860dfd9a84df09888cfbb87ca0896eeb50204 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 5 Dec 2018 17:39:26 +0900
Subject: [PATCH] [MFM] Add italic syntax

Resolve #3486
---
 src/client/app/common/views/components/mfm.ts |  8 ++++++
 src/mfm/html.ts                               |  6 +++++
 src/mfm/parser.ts                             | 25 +++++++++++++++++++
 test/mfm.ts                                   | 11 ++++++++
 4 files changed, 50 insertions(+)

diff --git a/src/client/app/common/views/components/mfm.ts b/src/client/app/common/views/components/mfm.ts
index dbc874c53..9502d64d8 100644
--- a/src/client/app/common/views/components/mfm.ts
+++ b/src/client/app/common/views/components/mfm.ts
@@ -100,6 +100,14 @@ export default Vue.component('misskey-flavored-markdown', {
 					return [createElement('del', genEl(token.children))];
 				}
 
+				case 'italic': {
+					return (createElement as any)('i', {
+						attrs: {
+							style: 'font-style: oblique;'
+						},
+					}, genEl(token.children));
+				}
+
 				case 'big': {
 					bigCount++;
 					const isLong = getTextCount(token.children) > 10 || getChildrenCount(token.children) > 5;
diff --git a/src/mfm/html.ts b/src/mfm/html.ts
index 083150ab7..b01c5ad31 100644
--- a/src/mfm/html.ts
+++ b/src/mfm/html.ts
@@ -37,6 +37,12 @@ export default (tokens: Node[], mentionedRemoteUsers: INote['mentionedRemoteUser
 			return el;
 		},
 
+		italic(token) {
+			const el = doc.createElement('i');
+			dive(token.children).forEach(child => el.appendChild(child));
+			return el;
+		},
+
 		motion(token) {
 			const el = doc.createElement('i');
 			dive(token.children).forEach(child => el.appendChild(child));
diff --git a/src/mfm/parser.ts b/src/mfm/parser.ts
index 4bd45516a..0aec60f82 100644
--- a/src/mfm/parser.ts
+++ b/src/mfm/parser.ts
@@ -69,6 +69,7 @@ const mfm = P.createLanguage({
 		r.big,
 		r.bold,
 		r.strike,
+		r.italic,
 		r.motion,
 		r.url,
 		r.link,
@@ -91,6 +92,8 @@ const mfm = P.createLanguage({
 	big: r =>
 		P.regexp(/^\*\*\*([\s\S]+?)\*\*\*/, 1)
 		.map(x => makeNodeWithChildren('big', P.alt(
+			r.strike,
+			r.italic,
 			r.mention,
 			r.hashtag,
 			r.emoji,
@@ -115,6 +118,8 @@ const mfm = P.createLanguage({
 	bold: r =>
 		P.regexp(/\*\*([\s\S]+?)\*\*/, 1)
 		.map(x => makeNodeWithChildren('bold', P.alt(
+			r.strike,
+			r.italic,
 			r.mention,
 			r.hashtag,
 			r.url,
@@ -131,6 +136,7 @@ const mfm = P.createLanguage({
 			r.big,
 			r.bold,
 			r.strike,
+			r.italic,
 			r.motion,
 			r.mention,
 			r.hashtag,
@@ -176,6 +182,21 @@ const mfm = P.createLanguage({
 		.map(x => makeNode('inlineCode', { code: x })),
 	//#endregion
 
+	//#region Italic
+	italic: r =>
+		P.regexp(/<i>([\s\S]+?)<\/i>/, 1)
+		.map(x => makeNodeWithChildren('italic', P.alt(
+			r.bold,
+			r.strike,
+			r.mention,
+			r.hashtag,
+			r.url,
+			r.link,
+			r.emoji,
+			r.text
+		).atLeast(1).tryParse(x))),
+	//#endregion
+
 	//#region Link
 	link: r =>
 		P.seqObj(
@@ -192,6 +213,7 @@ const mfm = P.createLanguage({
 				r.big,
 				r.bold,
 				r.strike,
+				r.italic,
 				r.motion,
 				r.emoji,
 				r.text
@@ -232,6 +254,7 @@ const mfm = P.createLanguage({
 		.map(x => makeNodeWithChildren('motion', P.alt(
 			r.bold,
 			r.strike,
+			r.italic,
 			r.mention,
 			r.hashtag,
 			r.emoji,
@@ -270,6 +293,7 @@ const mfm = P.createLanguage({
 		P.regexp(/~~(.+?)~~/, 1)
 		.map(x => makeNodeWithChildren('strike', P.alt(
 			r.bold,
+			r.italic,
 			r.mention,
 			r.hashtag,
 			r.url,
@@ -290,6 +314,7 @@ const mfm = P.createLanguage({
 				r.big,
 				r.bold,
 				r.strike,
+				r.italic,
 				r.motion,
 				r.url,
 				r.link,
diff --git a/test/mfm.ts b/test/mfm.ts
index 111f70bef..1fda4c372 100644
--- a/test/mfm.ts
+++ b/test/mfm.ts
@@ -713,6 +713,17 @@ describe('Text', () => {
 				], tokens);
 			});
 		});
+
+		describe('italic', () => {
+			it('simple', () => {
+				const tokens = analyze('<i>foo</i>');
+				assert.deepEqual([
+					nodeWithChildren('italic', [
+						text('foo')
+					]),
+				], tokens);
+			});
+		});
 	});
 
 	describe('toHtml', () => {