Merge pull request #3987 from syuilo/math-block

複数行用の数式構文を追加

5 files changed, 47 insertions, 13 deletions

diff --git a/src/client/app/common/views/components/formula-core.vue b/src/client/app/common/views/components/formula-core.vue
index 254e0df308..69697d6df0 100644
--- a/src/client/app/common/views/components/formula-core.vue
+++ b/src/client/app/common/views/components/formula-core.vue
@@ -1,5 +1,6 @@
 <template>
-<span v-html="compiledFormula"></span>
+<div v-if="block" v-html="compiledFormula"></div>
+<span v-else v-html="compiledFormula"></span>
 </template>
 
 <script lang="ts">
@@ -11,6 +12,10 @@ export default Vue.extend({
 		formula: {
 			type: String,
 			required: true
+		},
+		block: {
+			type: Boolean,
+			required: true
 		}
 	},
 	computed: {
diff --git a/src/client/app/common/views/components/formula.vue b/src/client/app/common/views/components/formula.vue
index 02ed96daac..73572b72c6 100644
--- a/src/client/app/common/views/components/formula.vue
+++ b/src/client/app/common/views/components/formula.vue
@@ -1,5 +1,5 @@
 <template>
-<x-formula :formula="formula"/>
+<x-formula :formula="formula" :block="block" />
 </template>
 
 <script lang="ts">
@@ -14,6 +14,10 @@ export default Vue.extend({
 		formula: {
 			type: String,
 			required: true
+		},
+		block: {
+			type: Boolean,
+			required: true
 		}
 	}
 });
diff --git a/src/client/app/common/views/components/mfm.ts b/src/client/app/common/views/components/mfm.ts
index a3849e9607..199d6bb978 100644
--- a/src/client/app/common/views/components/mfm.ts
+++ b/src/client/app/common/views/components/mfm.ts
@@ -248,12 +248,24 @@ export default Vue.component('misskey-flavored-markdown', {
 					})];
 				}
 
-				case 'math': {
+				case 'mathInline': {
 					//const MkFormula = () => import('./formula.vue').then(m => m.default);
 					return [createElement(MkFormula, {
 						key: Math.random(),
 						props: {
-							formula: token.node.props.formula
+							formula: token.node.props.formula,
+							block: false
+						}
+					})];
+				}
+
+				case 'mathBlock': {
+					//const MkFormula = () => import('./formula.vue').then(m => m.default);
+					return [createElement(MkFormula, {
+						key: Math.random(),
+						props: {
+							formula: token.node.props.formula,
+							block: true
 						}
 					})];
 				}
diff --git a/src/mfm/html.ts b/src/mfm/html.ts
index 568a39bc7b..acd6891aba 100644
--- a/src/mfm/html.ts
+++ b/src/mfm/html.ts
@@ -99,7 +99,13 @@ export default (tokens: MfmForest, mentionedRemoteUsers: INote['mentionedRemoteU
 			return el;
 		},
 
-		math(token) {
+		mathInline(token) {
+			const el = doc.createElement('code');
+			el.textContent = token.node.props.formula;
+			return el;
+		},
+
+		mathBlock(token) {
 			const el = doc.createElement('code');
 			el.textContent = token.node.props.formula;
 			return el;
diff --git a/src/mfm/parser.ts b/src/mfm/parser.ts
index 1cf1edfa4e..7bddea2ac2 100644
--- a/src/mfm/parser.ts
+++ b/src/mfm/parser.ts
@@ -105,7 +105,8 @@ const mfm = P.createLanguage({
 		r.flip,
 		r.inlineCode,
 		r.quote,
-		r.math,
+		r.mathInline,
+		r.mathBlock,
 		r.search,
 		r.title,
 		r.center,
@@ -123,7 +124,7 @@ const mfm = P.createLanguage({
 			r.mention,
 			r.hashtag,
 			r.emoji,
-			r.math,
+			r.mathInline,
 			r.spin,
 			r.text
 		).atLeast(1).tryParse(x), {})),
@@ -138,7 +139,7 @@ const mfm = P.createLanguage({
 			r.mention,
 			r.hashtag,
 			r.emoji,
-			r.math,
+			r.mathInline,
 			r.text
 		).atLeast(1).tryParse(x), {})),
 	//#endregion
@@ -194,7 +195,7 @@ const mfm = P.createLanguage({
 			r.mention,
 			r.hashtag,
 			r.emoji,
-			r.math,
+			r.mathInline,
 			r.url,
 			r.link,
 			r.flip,
@@ -308,10 +309,16 @@ const mfm = P.createLanguage({
 		}),
 	//#endregion
 
-	//#region Math
-	math: r =>
+	//#region Math (inline)
+	mathInline: r =>
 		P.regexp(/\\\((.+?)\\\)/, 1)
-		.map(x => createLeaf('math', { formula: x })),
+		.map(x => createLeaf('mathInline', { formula: x })),
+	//#endregion
+
+	//#region Math (block)
+	mathBlock: r =>
+		P.regexp(/\\\[([\s\S]+?)\\\]/, 1)
+		.map(x => createLeaf('mathBlock', { formula: x.trim() })),
 	//#endregion
 
 	//#region Mention
@@ -347,7 +354,7 @@ const mfm = P.createLanguage({
 			r.url,
 			r.link,
 			r.flip,
-			r.math,
+			r.mathInline,
 			r.text
 		).atLeast(1).tryParse(x), {})),
 	//#endregion