Refactor MFM

Co-authored-by: syuilo syuilotan@yahoo.co.jp

3 files changed, 29 insertions, 40 deletions

diff --git a/src/client/app/common/scripts/note-mixin.ts b/src/client/app/common/scripts/note-mixin.ts
index 36b8ca32c1..dea36cd2a5 100644
--- a/src/client/app/common/scripts/note-mixin.ts
+++ b/src/client/app/common/scripts/note-mixin.ts
@@ -80,8 +80,8 @@ export default (opts: Opts = {}) => ({
 				const ast = parse(this.appearNote.text);
 				// TODO: 再帰的にURL要素がないか調べる
 				return unique(ast
-					.filter(t => ((t.name == 'url' || t.name == 'link') && t.props.url && !t.props.silent))
-					.map(t => t.props.url));
+					.filter(t => ((t.node.type == 'url' || t.node.type == 'link') && t.node.props.url && !t.node.props.silent))
+					.map(t => t.node.props.url));
 			} else {
 				return null;
 			}
diff --git a/src/client/app/common/views/components/messaging-room.message.vue b/src/client/app/common/views/components/messaging-room.message.vue
index fa77fa7af1..872dc2d89e 100644
--- a/src/client/app/common/views/components/messaging-room.message.vue
+++ b/src/client/app/common/views/components/messaging-room.message.vue
@@ -52,8 +52,8 @@ export default Vue.extend({
 			if (this.message.text) {
 				const ast = parse(this.message.text);
 				return unique(ast
-					.filter(t => ((t.name == 'url' || t.name == 'link') && t.props.url && !t.silent))
-					.map(t => t.props.url));
+					.filter(t => ((t.node.type == 'url' || t.node.type == 'link') && t.node.props.url && !t.node.props.silent))
+					.map(t => t.node.props.url));
 			} else {
 				return null;
 			}
diff --git a/src/client/app/common/views/components/mfm.ts b/src/client/app/common/views/components/mfm.ts
index 399e8e884b..69ae7638a5 100644
--- a/src/client/app/common/views/components/mfm.ts
+++ b/src/client/app/common/views/components/mfm.ts
@@ -1,6 +1,6 @@
 import Vue, { VNode } from 'vue';
 import { length } from 'stringz';
-import { Node } from '../../../../../mfm/parser';
+import { MfmForest } from '../../../../../mfm/parser';
 import parse from '../../../../../mfm/parse';
 import MkUrl from './url.vue';
 import MkMention from './mention.vue';
@@ -9,16 +9,11 @@ import MkFormula from './formula.vue';
 import MkGoogle from './google.vue';
 import syntaxHighlight from '../../../../../mfm/syntax-highlight';
 import { host } from '../../../config';
+import { preorderF, countNodesF } from '../../../../../prelude/tree';
 
-function getTextCount(tokens: Node[]): number {
-	const rootCount = sum(tokens.filter(x => x.name === 'text').map(x => length(x.props.text)));
-	const childrenCount = sum(tokens.filter(x => x.children).map(x => getTextCount(x.children)));
-	return rootCount + childrenCount;
-}
-
-function getChildrenCount(tokens: Node[]): number {
-	const countTree = tokens.filter(x => x.children).map(x => getChildrenCount(x.children));
-	return countTree.length + sum(countTree);
+function sumTextsLength(ts: MfmForest): number {
+	const textNodes = preorderF(ts).filter(n => n.type === 'text');
+	return sum(textNodes.map(x => length(x.props.text)));
 }
 
 export default Vue.component('misskey-flavored-markdown', {
@@ -27,10 +22,6 @@ export default Vue.component('misskey-flavored-markdown', {
 			type: String,
 			required: true
 		},
-		ast: {
-			type: [],
-			required: false
-		},
 		shouldBreak: {
 			type: Boolean,
 			default: true
@@ -55,17 +46,15 @@ export default Vue.component('misskey-flavored-markdown', {
 	render(createElement) {
 		if (this.text == null || this.text == '') return;
 
-		const ast = this.ast == null ?
-			parse(this.text, this.plainText) : // Parse text to ast
-			this.ast as Node[];
+		const ast = parse(this.text, this.plainText);
 
 		let bigCount = 0;
 		let motionCount = 0;
 
-		const genEl = (ast: Node[]) => concat(ast.map((token): VNode[] => {
-			switch (token.name) {
+		const genEl = (ast: MfmForest) => concat(ast.map((token): VNode[] => {
+			switch (token.node.type) {
 				case 'text': {
-					const text = token.props.text.replace(/(\r\n|\n|\r)/g, '\n');
+					const text = token.node.props.text.replace(/(\r\n|\n|\r)/g, '\n');
 
 					if (this.shouldBreak) {
 						const x = text.split('\n')
@@ -95,7 +84,7 @@ export default Vue.component('misskey-flavored-markdown', {
 
 				case 'big': {
 					bigCount++;
-					const isLong = getTextCount(token.children) > 10 || getChildrenCount(token.children) > 5;
+					const isLong = sumTextsLength(token.children) > 10 || countNodesF(token.children) > 5;
 					const isMany = bigCount > 3;
 					return (createElement as any)('strong', {
 						attrs: {
@@ -122,7 +111,7 @@ export default Vue.component('misskey-flavored-markdown', {
 
 				case 'motion': {
 					motionCount++;
-					const isLong = getTextCount(token.children) > 10 || getChildrenCount(token.children) > 5;
+					const isLong = sumTextsLength(token.children) > 10 || countNodesF(token.children) > 5;
 					const isMany = motionCount > 3;
 					return (createElement as any)('span', {
 						attrs: {
@@ -139,7 +128,7 @@ export default Vue.component('misskey-flavored-markdown', {
 					return [createElement(MkUrl, {
 						key: Math.random(),
 						props: {
-							url: token.props.url,
+							url: token.node.props.url,
 							target: '_blank',
 							style: 'color:var(--mfmLink);'
 						}
@@ -150,9 +139,9 @@ export default Vue.component('misskey-flavored-markdown', {
 					return [createElement('a', {
 						attrs: {
 							class: 'link',
-							href: token.props.url,
+							href: token.node.props.url,
 							target: '_blank',
-							title: token.props.url,
+							title: token.node.props.url,
 							style: 'color:var(--mfmLink);'
 						}
 					}, genEl(token.children))];
@@ -162,8 +151,8 @@ export default Vue.component('misskey-flavored-markdown', {
 					return [createElement(MkMention, {
 						key: Math.random(),
 						props: {
-							host: (token.props.host == null && this.author && this.author.host != null ? this.author.host : token.props.host) || host,
-							username: token.props.username
+							host: (token.node.props.host == null && this.author && this.author.host != null ? this.author.host : token.node.props.host) || host,
+							username: token.node.props.username
 						}
 					})];
 				}
@@ -172,10 +161,10 @@ export default Vue.component('misskey-flavored-markdown', {
 					return [createElement('router-link', {
 						key: Math.random(),
 						attrs: {
-							to: `/tags/${encodeURIComponent(token.props.hashtag)}`,
+							to: `/tags/${encodeURIComponent(token.node.props.hashtag)}`,
 							style: 'color:var(--mfmHashtag);'
 						}
-					}, `#${token.props.hashtag}`)];
+					}, `#${token.node.props.hashtag}`)];
 				}
 
 				case 'blockCode': {
@@ -184,7 +173,7 @@ export default Vue.component('misskey-flavored-markdown', {
 					}, [
 						createElement('code', {
 							domProps: {
-								innerHTML: syntaxHighlight(token.props.code)
+								innerHTML: syntaxHighlight(token.node.props.code)
 							}
 						})
 					])];
@@ -193,7 +182,7 @@ export default Vue.component('misskey-flavored-markdown', {
 				case 'inlineCode': {
 					return [createElement('code', {
 						domProps: {
-							innerHTML: syntaxHighlight(token.props.code)
+							innerHTML: syntaxHighlight(token.node.props.code)
 						}
 					})];
 				}
@@ -227,8 +216,8 @@ export default Vue.component('misskey-flavored-markdown', {
 					return [createElement('mk-emoji', {
 						key: Math.random(),
 						attrs: {
-							emoji: token.props.emoji,
-							name: token.props.name
+							emoji: token.node.props.emoji,
+							name: token.node.props.name
 						},
 						props: {
 							customEmojis: this.customEmojis || customEmojis,
@@ -242,7 +231,7 @@ export default Vue.component('misskey-flavored-markdown', {
 					return [createElement(MkFormula, {
 						key: Math.random(),
 						props: {
-							formula: token.props.formula
+							formula: token.node.props.formula
 						}
 					})];
 				}
@@ -252,13 +241,13 @@ export default Vue.component('misskey-flavored-markdown', {
 					return [createElement(MkGoogle, {
 						key: Math.random(),
 						props: {
-							q: token.props.query
+							q: token.node.props.query
 						}
 					})];
 				}
 
 				default: {
-					console.log('unknown ast type:', token.name);
+					console.log('unknown ast type:', token.node.type);
 
 					return [];
 				}