paricafe/src/web/app/common/views/components/post-html.ts

declare const _URL_: string;

import Vue from 'vue';
import * as pictograph from 'pictograph';

import MkUrl from './url.vue';

const escape = text =>
	text
		.replace(/>/g, '>')
		.replace(/</g, '&lt;');

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) {
		const els = [].concat.apply([], (this as any).ast.map(token => {
			switch (token.type) {
				case 'text':
					const text = escape(token.content)
						.replace(/(\r\n|\n|\r)/g, '\n');

					if ((this as any).shouldBreak) {
						return text.split('\n').map(t => [createElement('span', t), createElement('br')]);
					} else {
						return createElement('span', text.replace(/\n/g, ' '));
					}

				case 'bold':
					return createElement('strong', escape(token.bold));

				case 'url':
					return createElement(MkUrl, {
						props: {
							href: escape(token.content),
							target: '_blank'
						}
					});

				case 'link':
					return createElement('a', {
						attrs: {
							class: 'link',
							href: escape(token.url),
							target: '_blank',
							title: escape(token.url)
						}
					}, escape(token.title));

				case 'mention':
					return (createElement as any)('a', {
						attrs: {
							href: `${_URL_}/${escape(token.username)}`,
							target: '_blank',
							dataIsMe: (this as any).i && (this as any).i.username == token.username
						},
						directives: [{
							name: 'user-preview',
							value: token.content
						}]
					}, token.content);

				case 'hashtag':
					return createElement('a', {
						attrs: {
							href: `${_URL_}/search?q=${escape(token.content)}`,
							target: '_blank'
						}
					}, escape(token.content));

				case 'code':
					return createElement('pre', [
						createElement('code', token.html)
					]);

				case 'inline-code':
					return createElement('code', token.html);

				case 'emoji':
					return createElement('span', pictograph.dic[token.emoji] || token.content);
			}
		}));

		return createElement('div', els);
	}
});