sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor MFM

Browse Source 
Co-authored-by: syuilo syuilotan@yahoo.co.jp
This commit is contained in:
Aya Morisawa
2018-12-20 19:41:04 +09:00
parent e0b107a3a0
commit e9f8897fe2
14 changed files with 588 additions and 518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/client/app/common/views/components/messaging-room.message.vue
View File

@ -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;
}

61
src/client/app/common/views/components/mfm.ts
View File

@ -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 [];
}