1
0
mirror of https://github.com/misskey-dev/misskey synced 2024-12-25 20:18:28 +09:00
misskey/src/client/app/common/views/components/post-html.ts

138 lines
3.0 KiB
TypeScript
Raw Normal View History

2018-02-11 23:26:35 +09:00
import Vue from 'vue';
2018-02-25 17:03:39 +09:00
import * as emojilib from 'emojilib';
2018-03-27 16:51:12 +09:00
import getAcct from '../../../../../common/user/get-acct';
2018-02-23 18:34:14 +09:00
import { url } from '../../../config';
2018-02-11 23:26:35 +09:00
import MkUrl from './url.vue';
2018-02-27 12:32:01 +09:00
const flatten = list => list.reduce(
(a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []
);
2018-02-11 23:26:35 +09:00
export default Vue.component('mk-post-html', {
props: {
ast: {
type: Array,
required: true
},
shouldBreak: {
type: Boolean,
default: true
},
i: {
type: Object,
default: null
}
},
render(createElement) {
2018-02-27 12:32:01 +09:00
const els = flatten((this as any).ast.map(token => {
2018-02-11 23:26:35 +09:00
switch (token.type) {
case 'text':
2018-02-23 18:34:14 +09:00
const text = token.content.replace(/(\r\n|\n|\r)/g, '\n');
2018-02-11 23:26:35 +09:00
if ((this as any).shouldBreak) {
2018-02-27 12:32:01 +09:00
const x = text.split('\n')
.map(t => t == '' ? [createElement('br')] : [createElement('span', t), createElement('br')]);
x[x.length - 1].pop();
return x;
2018-02-11 23:26:35 +09:00
} else {
return createElement('span', text.replace(/\n/g, ' '));
}
case 'bold':
2018-02-23 18:34:14 +09:00
return createElement('strong', token.bold);
2018-02-11 23:26:35 +09:00
case 'url':
return createElement(MkUrl, {
props: {
2018-02-23 18:34:14 +09:00
url: token.content,
2018-02-11 23:26:35 +09:00
target: '_blank'
}
});
case 'link':
return createElement('a', {
attrs: {
class: 'link',
2018-02-23 18:34:14 +09:00
href: token.url,
2018-02-11 23:26:35 +09:00
target: '_blank',
2018-02-23 18:34:14 +09:00
title: token.url
2018-02-11 23:26:35 +09:00
}
2018-02-23 18:34:14 +09:00
}, token.title);
2018-02-11 23:26:35 +09:00
case 'mention':
return (createElement as any)('a', {
attrs: {
2018-03-27 16:51:12 +09:00
href: `${url}/@${getAcct(token)}`,
2018-02-11 23:26:35 +09:00
target: '_blank',
2018-03-27 16:51:12 +09:00
dataIsMe: (this as any).i && getAcct((this as any).i) == getAcct(token)
2018-02-11 23:26:35 +09:00
},
directives: [{
name: 'user-preview',
value: token.content
}]
}, token.content);
case 'hashtag':
return createElement('a', {
attrs: {
2018-02-23 18:34:14 +09:00
href: `${url}/search?q=${token.content}`,
2018-02-11 23:26:35 +09:00
target: '_blank'
}
2018-02-23 18:34:14 +09:00
}, token.content);
2018-02-11 23:26:35 +09:00
case 'code':
return createElement('pre', [
2018-02-24 07:54:37 +09:00
createElement('code', {
domProps: {
innerHTML: token.html
}
})
2018-02-11 23:26:35 +09:00
]);
case 'inline-code':
return createElement('code', token.html);
2018-02-27 12:32:01 +09:00
case 'quote':
const text2 = token.quote.replace(/(\r\n|\n|\r)/g, '\n');
if ((this as any).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);
} else {
return createElement('span', {
attrs: {
class: 'quote'
}
}, text2.replace(/\n/g, ' '));
}
2018-02-11 23:26:35 +09:00
case 'emoji':
2018-02-27 03:48:14 +09:00
const emoji = emojilib.lib[token.emoji];
return createElement('span', emoji ? emoji.char : token.content);
2018-02-27 12:32:01 +09:00
default:
console.log('unknown ast type:', token.type);
2018-02-11 23:26:35 +09:00
}
}));
2018-02-27 12:32:01 +09:00
const _els = [];
els.forEach((el, i) => {
if (el.tag == 'br') {
if (els[i - 1].tag != 'div') {
_els.push(el);
}
} else {
_els.push(el);
}
});
return createElement('span', _els);
2018-02-11 23:26:35 +09:00
}
});