egirlskey/src/client/app/common/views/components/misskey-flavored-markdown.ts

223 lines
5 KiB
TypeScript
Raw Normal View History

2018-09-11 18:32:47 +00:00
import Vue, { VNode } from 'vue';
import { length } from 'stringz';
import parse from '../../../../../mfm/parse';
2018-07-07 10:19:00 +00:00
import getAcct from '../../../../../misc/acct/render';
import MkUrl from './url.vue';
2018-04-21 09:59:16 +00:00
import MkGoogle from './google.vue';
2018-09-11 18:32:47 +00:00
import { concat } from '../../../../../prelude/array';
2018-06-20 10:55:34 +00:00
export default Vue.component('misskey-flavored-markdown', {
props: {
text: {
type: String,
required: true
},
ast: {
type: [],
required: false
},
shouldBreak: {
type: Boolean,
default: true
},
i: {
type: Object,
default: null
},
customEmojis: {
required: false,
}
},
render(createElement) {
2018-09-11 18:32:47 +00:00
let ast: any[];
if (this.ast == null) {
// Parse text to ast
ast = parse(this.text);
} else {
2018-09-11 18:32:47 +00:00
ast = this.ast as any[];
}
let bigCount = 0;
let motionCount = 0;
// Parse ast to DOM
2018-09-11 18:32:47 +00:00
const els = concat(ast.map((token): VNode[] => {
switch (token.type) {
case 'text': {
const text = token.content.replace(/(\r\n|\n|\r)/g, '\n');
if (this.shouldBreak) {
const x = text.split('\n')
.map(t => t == '' ? [createElement('br')] : [createElement('span', t), createElement('br')]);
x[x.length - 1].pop();
return x;
} else {
2018-09-11 18:32:47 +00:00
return [createElement('span', text.replace(/\n/g, ' '))];
}
}
case 'bold': {
2018-09-11 18:32:47 +00:00
return [createElement('b', token.bold)];
}
2018-08-03 14:27:37 +00:00
case 'big': {
bigCount++;
const isLong = length(token.big) > 10;
const isMany = bigCount > 3;
2018-08-03 14:27:37 +00:00
return (createElement as any)('strong', {
attrs: {
2018-08-05 14:38:31 +00:00
style: `display: inline-block; font-size: ${ isMany ? '100%' : '150%' };`
2018-08-03 14:27:37 +00:00
},
directives: [this.$store.state.settings.disableAnimatedMfm || isLong || isMany ? {} : {
2018-08-03 14:27:37 +00:00
name: 'animate-css',
value: { classes: 'tada', iteration: 'infinite' }
}]
}, token.big);
}
case 'motion': {
motionCount++;
const isLong = length(token.motion) > 10;
const isMany = motionCount > 3;
2018-08-05 03:33:51 +00:00
return (createElement as any)('span', {
attrs: {
style: 'display: inline-block;'
},
directives: [this.$store.state.settings.disableAnimatedMfm || isLong || isMany ? {} : {
2018-08-05 03:33:51 +00:00
name: 'animate-css',
value: { classes: 'rubberBand', iteration: 'infinite' }
}]
}, token.motion);
}
2018-08-05 03:33:51 +00:00
case 'url': {
2018-09-11 18:32:47 +00:00
return [createElement(MkUrl, {
props: {
url: token.content,
2018-10-08 06:47:41 +00:00
target: '_blank',
style: 'color:var(--mfmLink);'
}
2018-09-11 18:32:47 +00:00
})];
}
case 'link': {
2018-09-11 18:32:47 +00:00
return [createElement('a', {
attrs: {
class: 'link',
href: token.url,
target: '_blank',
2018-10-08 06:47:41 +00:00
title: token.url,
style: 'color:var(--mfmLink);'
}
2018-09-11 18:32:47 +00:00
}, token.title)];
}
case 'mention': {
return (createElement as any)('router-link', {
attrs: {
to: `/${token.canonical}`,
2018-10-08 06:47:41 +00:00
dataIsMe: (this as any).i && getAcct((this as any).i) == getAcct(token),
style: 'color:var(--mfmMention);'
},
directives: [{
name: 'user-preview',
value: token.canonical
}]
}, token.canonical);
}
case 'hashtag': {
return [createElement('router-link', {
attrs: {
to: `/tags/${encodeURIComponent(token.hashtag)}`,
2018-10-08 06:47:41 +00:00
style: 'color:var(--mfmHashtag);'
}
2018-09-11 18:32:47 +00:00
}, token.content)];
}
case 'code': {
2018-09-11 18:32:47 +00:00
return [createElement('pre', {
2018-04-19 06:05:39 +00:00
class: 'code'
}, [
createElement('code', {
domProps: {
innerHTML: token.html
}
})
2018-09-11 18:32:47 +00:00
])];
}
case 'inline-code': {
2018-09-11 18:32:47 +00:00
return [createElement('code', {
domProps: {
innerHTML: token.html
}
2018-09-11 18:32:47 +00:00
})];
}
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();
2018-09-11 18:32:47 +00:00
return [createElement('div', {
attrs: {
class: 'quote'
}
2018-09-11 18:32:47 +00:00
}, x)];
} else {
2018-09-11 18:32:47 +00:00
return [createElement('span', {
attrs: {
class: 'quote'
}
2018-09-11 18:32:47 +00:00
}, text2.replace(/\n/g, ' '))];
}
}
case 'title': {
2018-09-11 18:32:47 +00:00
return [createElement('div', {
2018-04-19 06:05:39 +00:00
attrs: {
class: 'title'
}
2018-09-11 18:32:47 +00:00
}, token.title)];
}
2018-04-19 06:05:39 +00:00
case 'emoji': {
2018-11-08 23:13:34 +00:00
const customEmojis = (this.$root.getMetaSync() || { emojis: [] }).emojis || [];
2018-11-05 02:19:40 +00:00
return [createElement('mk-emoji', {
2018-11-05 11:49:02 +00:00
attrs: {
emoji: token.emoji,
name: token.name
},
props: {
customEmojis: this.customEmojis || customEmojis
2018-11-05 11:49:02 +00:00
}
2018-11-05 02:19:40 +00:00
})];
}
case 'search': {
2018-09-11 18:32:47 +00:00
return [createElement(MkGoogle, {
2018-04-21 09:59:16 +00:00
props: {
q: token.query
}
2018-09-11 18:32:47 +00:00
})];
}
2018-04-21 09:59:16 +00:00
default: {
console.log('unknown ast type:', token.type);
2018-09-11 18:32:47 +00:00
return [];
}
}
}));
2018-09-01 13:32:51 +00:00
// 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);
}
});