Improve MFM parser (#3337)

* wip * wip * Refactor * Refactor * wip * wip * wip * wip * Refactor * Refactor * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * Clean up * Update misskey-flavored-markdown.ts * wip * wip * wip * wip * Update parser.ts * wip * Add new test * wip * Add new test * Add new test * wip * Refactor * Update parse.ts * Refactor * Update parser.ts * wip
2018-11-21 05:11:00 +09:00
parent 6e347e4221
commit 79ffbf95db
44 changed files with 1097 additions and 916 deletions
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -17,7 +17,7 @@ import forkit from './forkit.vue';
 import acct from './acct.vue';
 import avatar from './avatar.vue';
 import nav from './nav.vue';
-import misskeyFlavoredMarkdown from './misskey-flavored-markdown';
+import misskeyFlavoredMarkdown from './misskey-flavored-markdown.vue';
 import poll from './poll.vue';
 import pollEditor from './poll-editor.vue';
 import reactionIcon from './reaction-icon.vue';
--- a/src/client/app/common/views/components/misskey-flavored-markdown.ts
+++ b/src/client/app/common/views/components/misskey-flavored-markdown.ts
@@ -1,11 +1,39 @@
 import Vue, { VNode } from 'vue';
 import { length } from 'stringz';
+import { Node } from '../../../../../mfm/parser';
 import parse from '../../../../../mfm/parse';
-import getAcct from '../../../../../misc/acct/render';
 import MkUrl from './url.vue';
 import { concat } from '../../../../../prelude/array';
 import MkFormula from './formula.vue';
 import MkGoogle from './google.vue';
+import { toUnicode } from 'punycode';
+import syntaxHighlight from '../../../../../mfm/syntax-highlight';
+
+function getText(tokens: Node[]): string {
+	let text = '';
+	const extract = (tokens: Node[]) => {
+		tokens.filter(x => x.name === 'text').forEach(x => {
+			text += x.props.text;
+		});
+		tokens.filter(x => x.children).forEach(x => {
+			extract(x.children);
+		});
+	};
+	extract(tokens);
+	return text;
+}
+
+function getChildrenCount(tokens: Node[]): number {
+	let count = 0;
+	const extract = (tokens: Node[]) => {
+		tokens.filter(x => x.children).forEach(x => {
+			count++;
+			extract(x.children);
+		});
+	};
+	extract(tokens);
+	return count;
+}

 export default Vue.component('misskey-flavored-markdown', {
 	props: {
@@ -21,6 +49,10 @@ export default Vue.component('misskey-flavored-markdown', {
 			type: Boolean,
 			default: true
 		},
+		author: {
+			type: Object,
+			default: null
+		},
 		i: {
 			type: Object,
 			default: null
@@ -31,23 +63,24 @@ export default Vue.component('misskey-flavored-markdown', {
 	},

 	render(createElement) {
-		let ast: any[];
+		if (this.text == null || this.text == '') return;
+
+		let ast: Node[];

 		if (this.ast == null) {
 			// Parse text to ast
 			ast = parse(this.text);
 		} else {
-			ast = this.ast as any[];
+			ast = this.ast as Node[];
 		}

 		let bigCount = 0;
 		let motionCount = 0;

-		// Parse ast to DOM
-		const els = concat(ast.map((token): VNode[] => {
-			switch (token.type) {
+		const genEl = (ast: Node[]) => concat(ast.map((token): VNode[] => {
+			switch (token.name) {
 				case 'text': {
-					const text = token.content.replace(/(\r\n|\n|\r)/g, '\n');
+					const text = token.props.text.replace(/(\r\n|\n|\r)/g, '\n');

 					if (this.shouldBreak) {
 						const x = text.split('\n')
@@ -60,12 +93,12 @@ export default Vue.component('misskey-flavored-markdown', {
 				}

 				case 'bold': {
-					return [createElement('b', token.bold)];
+					return [createElement('b', genEl(token.children))];
 				}

 				case 'big': {
 					bigCount++;
-					const isLong = length(token.big) > 10;
+					const isLong = length(getText(token.children)) > 10 || getChildrenCount(token.children) > 5;
 					const isMany = bigCount > 3;
 					return (createElement as any)('strong', {
 						attrs: {
@@ -75,12 +108,12 @@ export default Vue.component('misskey-flavored-markdown', {
 							name: 'animate-css',
 							value: { classes: 'tada', iteration: 'infinite' }
 						}]
-					}, token.big);
+					}, genEl(token.children));
 				}

 				case 'motion': {
 					motionCount++;
-					const isLong = length(token.motion) > 10;
+					const isLong = length(getText(token.children)) > 10 || getChildrenCount(token.children) > 5;
 					const isMany = motionCount > 3;
 					return (createElement as any)('span', {
 						attrs: {
@@ -90,13 +123,14 @@ export default Vue.component('misskey-flavored-markdown', {
 							name: 'animate-css',
 							value: { classes: 'rubberBand', iteration: 'infinite' }
 						}]
-					}, token.motion);
+					}, genEl(token.children));
 				}

 				case 'url': {
 					return [createElement(MkUrl, {
+						key: Math.random(),
 						props: {
-							url: token.content,
+							url: token.props.url,
 							target: '_blank',
 							style: 'color:var(--mfmLink);'
 						}
@@ -107,75 +141,75 @@ export default Vue.component('misskey-flavored-markdown', {
 					return [createElement('a', {
 						attrs: {
 							class: 'link',
-							href: token.url,
+							href: token.props.url,
 							target: '_blank',
-							title: token.url,
+							title: token.props.url,
 							style: 'color:var(--mfmLink);'
 						}
-					}, token.title)];
+					}, genEl(token.children))];
 				}

 				case 'mention': {
+					const host = token.props.host == null && this.author && this.author.host != null ? this.author.host : token.props.host;
+					const canonical = host != null ? `@${token.props.username}@${toUnicode(host)}` : `@${token.props.username}`;
 					return (createElement as any)('router-link', {
+						key: Math.random(),
 						attrs: {
-							to: `/${token.canonical}`,
-							dataIsMe: (this as any).i && getAcct((this as any).i) == getAcct(token),
+							to: `/${canonical}`,
+							// TODO
+							//dataIsMe: (this as any).i && getAcct((this as any).i) == getAcct(token),
 							style: 'color:var(--mfmMention);'
 						},
 						directives: [{
 							name: 'user-preview',
-							value: token.canonical
+							value: canonical
 						}]
-					}, token.canonical);
+					}, canonical);
 				}

 				case 'hashtag': {
 					return [createElement('router-link', {
+						key: Math.random(),
 						attrs: {
-							to: `/tags/${encodeURIComponent(token.hashtag)}`,
+							to: `/tags/${encodeURIComponent(token.props.hashtag)}`,
 							style: 'color:var(--mfmHashtag);'
 						}
-					}, token.content)];
+					}, `#${token.props.hashtag}`)];
 				}

-				case 'code': {
+				case 'blockCode': {
 					return [createElement('pre', {
 						class: 'code'
 					}, [
 						createElement('code', {
 							domProps: {
-								innerHTML: token.html
+								innerHTML: syntaxHighlight(token.props.code)
 							}
 						})
 					])];
 				}

-				case 'inline-code': {
+				case 'inlineCode': {
 					return [createElement('code', {
 						domProps: {
-							innerHTML: token.html
+							innerHTML: syntaxHighlight(token.props.code)
 						}
 					})];
 				}

 				case 'quote': {
-					const text2 = token.quote.replace(/(\r\n|\n|\r)/g, '\n');
-
 					if (this.shouldBreak) {
-						const x = text2.split('\n')
-							.map(t => [createElement('span', t), createElement('br')]);
-						x[x.length - 1].pop();
 						return [createElement('div', {
 							attrs: {
 								class: 'quote'
 							}
-						}, x)];
+						}, genEl(token.children))];
 					} else {
 						return [createElement('span', {
 							attrs: {
 								class: 'quote'
 							}
-						}, text2.replace(/\n/g, ' '))];
+						}, genEl(token.children))];
 					}
 				}

@@ -184,15 +218,16 @@ export default Vue.component('misskey-flavored-markdown', {
 						attrs: {
 							class: 'title'
 						}
-					}, token.title)];
+					}, genEl(token.children))];
 				}

 				case 'emoji': {
 					const customEmojis = (this.$root.getMetaSync() || { emojis: [] }).emojis || [];
 					return [createElement('mk-emoji', {
+						key: Math.random(),
 						attrs: {
-							emoji: token.emoji,
-							name: token.name
+							emoji: token.props.emoji,
+							name: token.props.name
 						},
 						props: {
 							customEmojis: this.customEmojis || customEmojis
@@ -203,8 +238,9 @@ export default Vue.component('misskey-flavored-markdown', {
 				case 'math': {
 					//const MkFormula = () => import('./formula.vue').then(m => m.default);
 					return [createElement(MkFormula, {
+						key: Math.random(),
 						props: {
-							formula: token.formula
+							formula: token.props.formula
 						}
 					})];
 				}
@@ -212,22 +248,22 @@ export default Vue.component('misskey-flavored-markdown', {
 				case 'search': {
 					//const MkGoogle = () => import('./google.vue').then(m => m.default);
 					return [createElement(MkGoogle, {
+						key: Math.random(),
 						props: {
-							q: token.query
+							q: token.props.query
 						}
 					})];
 				}

 				default: {
-					console.log('unknown ast type:', token.type);
+					console.log('unknown ast type:', token.name);

 					return [];
 				}
 			}
 		}));

-		// el.tag === 'br' のとき i !== 0 が保証されるため、短絡評価により els[i - 1] は配列外参照しない
-		const _els = els.filter((el, i) => !(el.tag === 'br' && ['div', 'pre'].includes(els[i - 1].tag)));
-		return createElement('span', _els);
+		// Parse ast to DOM
+		return createElement('span', genEl(ast));
 	}
 });
--- a/src/client/app/common/views/components/misskey-flavored-markdown.vue
+++ b/src/client/app/common/views/components/misskey-flavored-markdown.vue
@@ -0,0 +1,57 @@
+<template>
+<mfm v-bind="$attrs" class="havbbuyv"/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Mfm from './mfm';
+
+export default Vue.extend({
+	components: {
+		Mfm
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.havbbuyv
+	>>> .title
+		display block
+		margin-bottom 4px
+		padding 4px
+		font-size 90%
+		text-align center
+		background var(--mfmTitleBg)
+		border-radius 4px
+
+	>>> .code
+		margin 8px 0
+
+	>>> .quote
+		margin 8px
+		padding 6px 12px
+		color var(--mfmQuote)
+		border-left solid 3px var(--mfmQuoteLine)
+
+	>>> code
+		padding 4px 8px
+		margin 0 0.5em
+		font-size 80%
+		color #525252
+		background #f8f8f8
+		border-radius 2px
+
+	>>> pre > code
+		padding 16px
+		margin 0
+
+	>>> [data-is-me]:after
+		content "you"
+		padding 0 4px
+		margin-left 4px
+		font-size 80%
+		color var(--primaryForeground)
+		background var(--primary)
+		border-radius 4px
+
+</style>
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -14,7 +14,7 @@
 					</div>
 				</header>
 				<div class="text">
-					<misskey-flavored-markdown v-if="note.text" :text="note.text" :customEmojis="note.emojis"/>
+					<misskey-flavored-markdown v-if="note.text" :text="note.text" :author="note.user" :custom-emojis="note.emojis"/>
 				</div>
 			</div>
 		</div>