Store texts as HTML
This commit is contained in:
Akihiko Odaki
@ -4,7 +4,7 @@ import signin from './signin.vue';
|
||||
import signup from './signup.vue';
|
||||
import forkit from './forkit.vue';
|
||||
import nav from './nav.vue';
|
||||
import postHtml from './post-html';
|
||||
import postHtml from './post-html.vue';
|
||||
import poll from './poll.vue';
|
||||
import pollEditor from './poll-editor.vue';
|
||||
import reactionIcon from './reaction-icon.vue';
|
||||
|
||||
@ -4,13 +4,13 @@
|
||||
<img class="avatar" :src="`${message.user.avatarUrl}?thumbnail&size=80`" alt=""/>
|
||||
</router-link>
|
||||
<div class="content">
|
||||
<div class="balloon" :data-no-text="message.text == null">
|
||||
<div class="balloon" :data-no-text="message.textHtml == null">
|
||||
<p class="read" v-if="isMe && message.isRead">%i18n:common.tags.mk-messaging-message.is-read%</p>
|
||||
<button class="delete-button" v-if="isMe" title="%i18n:common.delete%">
|
||||
<img src="/assets/desktop/messaging/delete.png" alt="Delete"/>
|
||||
</button>
|
||||
<div class="content" v-if="!message.isDeleted">
|
||||
<mk-post-html class="text" v-if="message.ast" :ast="message.ast" :i="os.i"/>
|
||||
<mk-post-html class="text" v-if="message.textHtml" ref="text" :html="message.textHtml" :i="os.i"/>
|
||||
<div class="file" v-if="message.file">
|
||||
<a :href="message.file.url" target="_blank" :title="message.file.name">
|
||||
<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"/>
|
||||
@ -38,21 +38,32 @@ import getAcct from '../../../../../common/user/get-acct';
|
||||
|
||||
export default Vue.extend({
|
||||
props: ['message'],
|
||||
data() {
|
||||
return {
|
||||
urls: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
acct() {
|
||||
return getAcct(this.message.user);
|
||||
},
|
||||
isMe(): boolean {
|
||||
return this.message.userId == (this as any).os.i.id;
|
||||
},
|
||||
urls(): string[] {
|
||||
if (this.message.ast) {
|
||||
return this.message.ast
|
||||
.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
|
||||
.map(t => t.url);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
message: {
|
||||
handler(newMessage, oldMessage) {
|
||||
if (!oldMessage || newMessage.textHtml !== oldMessage.textHtml) {
|
||||
this.$nextTick(() => {
|
||||
const elements = this.$refs.text.$el.getElementsByTagName('a');
|
||||
|
||||
this.urls = [].filter.call(elements, ({ origin }) => origin !== location.origin)
|
||||
.map(({ href }) => href);
|
||||
});
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,141 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
import * as emojilib from 'emojilib';
|
||||
import getAcct from '../../../../../common/user/get-acct';
|
||||
import { url } from '../../../config';
|
||||
import MkUrl from './url.vue';
|
||||
|
||||
const flatten = list => list.reduce(
|
||||
(a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []
|
||||
);
|
||||
|
||||
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 = flatten((this as any).ast.map(token => {
|
||||
switch (token.type) {
|
||||
case 'text':
|
||||
const text = token.content.replace(/(\r\n|\n|\r)/g, '\n');
|
||||
|
||||
if ((this as any).shouldBreak) {
|
||||
const x = text.split('\n')
|
||||
.map(t => t == '' ? [createElement('br')] : [createElement('span', t), createElement('br')]);
|
||||
x[x.length - 1].pop();
|
||||
return x;
|
||||
} else {
|
||||
return createElement('span', text.replace(/\n/g, ' '));
|
||||
}
|
||||
|
||||
case 'bold':
|
||||
return createElement('strong', token.bold);
|
||||
|
||||
case 'url':
|
||||
return createElement(MkUrl, {
|
||||
props: {
|
||||
url: token.content,
|
||||
target: '_blank'
|
||||
}
|
||||
});
|
||||
|
||||
case 'link':
|
||||
return createElement('a', {
|
||||
attrs: {
|
||||
class: 'link',
|
||||
href: token.url,
|
||||
target: '_blank',
|
||||
title: token.url
|
||||
}
|
||||
}, token.title);
|
||||
|
||||
case 'mention':
|
||||
return (createElement as any)('a', {
|
||||
attrs: {
|
||||
href: `${url}/@${getAcct(token)}`,
|
||||
target: '_blank',
|
||||
dataIsMe: (this as any).i && getAcct((this as any).i) == getAcct(token)
|
||||
},
|
||||
directives: [{
|
||||
name: 'user-preview',
|
||||
value: token.content
|
||||
}]
|
||||
}, token.content);
|
||||
|
||||
case 'hashtag':
|
||||
return createElement('a', {
|
||||
attrs: {
|
||||
href: `${url}/search?q=${token.content}`,
|
||||
target: '_blank'
|
||||
}
|
||||
}, token.content);
|
||||
|
||||
case 'code':
|
||||
return createElement('pre', [
|
||||
createElement('code', {
|
||||
domProps: {
|
||||
innerHTML: token.html
|
||||
}
|
||||
})
|
||||
]);
|
||||
|
||||
case 'inline-code':
|
||||
return createElement('code', {
|
||||
domProps: {
|
||||
innerHTML: token.html
|
||||
}
|
||||
});
|
||||
|
||||
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, ' '));
|
||||
}
|
||||
|
||||
case 'emoji':
|
||||
const emoji = emojilib.lib[token.emoji];
|
||||
return createElement('span', emoji ? emoji.char : token.content);
|
||||
|
||||
default:
|
||||
console.log('unknown ast type:', token.type);
|
||||
}
|
||||
}));
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
103
src/client/app/common/views/components/post-html.vue
Normal file
103
src/client/app/common/views/components/post-html.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<template><div class="mk-post-html" v-html="html"></div></template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import getAcct from '../../../../../common/user/get-acct';
|
||||
import { url } from '../../../config';
|
||||
|
||||
function markUrl(a) {
|
||||
while (a.firstChild) {
|
||||
a.removeChild(a.firstChild);
|
||||
}
|
||||
|
||||
const schema = document.createElement('span');
|
||||
const delimiter = document.createTextNode('//');
|
||||
const host = document.createElement('span');
|
||||
const pathname = document.createElement('span');
|
||||
const query = document.createElement('span');
|
||||
const hash = document.createElement('span');
|
||||
|
||||
schema.className = 'schema';
|
||||
schema.textContent = a.protocol;
|
||||
|
||||
host.className = 'host';
|
||||
host.textContent = a.host;
|
||||
|
||||
pathname.className = 'pathname';
|
||||
pathname.textContent = a.pathname;
|
||||
|
||||
query.className = 'query';
|
||||
query.textContent = a.search;
|
||||
|
||||
hash.className = 'hash';
|
||||
hash.textContent = a.hash;
|
||||
|
||||
a.appendChild(schema);
|
||||
a.appendChild(delimiter);
|
||||
a.appendChild(host);
|
||||
a.appendChild(pathname);
|
||||
a.appendChild(query);
|
||||
a.appendChild(hash);
|
||||
}
|
||||
|
||||
function markMe(me, a) {
|
||||
a.setAttribute("data-is-me", me && `${url}/@${getAcct(me)}` == a.href);
|
||||
}
|
||||
|
||||
function markTarget(a) {
|
||||
a.setAttribute("target", "_blank");
|
||||
}
|
||||
|
||||
export default Vue.component('mk-post-html', {
|
||||
props: {
|
||||
html: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
i: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
watch {
|
||||
html: {
|
||||
handler() {
|
||||
this.$nextTick(() => [].forEach.call(this.$el.getElementsByTagName('a'), a => {
|
||||
if (a.href === a.textContent) {
|
||||
markUrl(a);
|
||||
} else {
|
||||
markMe((this as any).i, a);
|
||||
}
|
||||
|
||||
markTarget(a);
|
||||
}));
|
||||
},
|
||||
immediate: true,
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.mk-post-html
|
||||
a
|
||||
word-break break-all
|
||||
|
||||
> .schema
|
||||
opacity 0.5
|
||||
|
||||
> .host
|
||||
font-weight bold
|
||||
|
||||
> .pathname
|
||||
opacity 0.8
|
||||
|
||||
> .query
|
||||
opacity 0.5
|
||||
|
||||
> .hash
|
||||
font-style italic
|
||||
|
||||
p
|
||||
margin 0
|
||||
</style>
|
||||
@ -1,66 +0,0 @@
|
||||
<template>
|
||||
<a class="mk-url" :href="url" :target="target">
|
||||
<span class="schema">{{ schema }}//</span>
|
||||
<span class="hostname">{{ hostname }}</span>
|
||||
<span class="port" v-if="port != ''">:{{ port }}</span>
|
||||
<span class="pathname" v-if="pathname != ''">{{ pathname }}</span>
|
||||
<span class="query">{{ query }}</span>
|
||||
<span class="hash">{{ hash }}</span>
|
||||
%fa:external-link-square-alt%
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
|
||||
export default Vue.extend({
|
||||
props: ['url', 'target'],
|
||||
data() {
|
||||
return {
|
||||
schema: null,
|
||||
hostname: null,
|
||||
port: null,
|
||||
pathname: null,
|
||||
query: null,
|
||||
hash: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const url = new URL(this.url);
|
||||
|
||||
this.schema = url.protocol;
|
||||
this.hostname = url.hostname;
|
||||
this.port = url.port;
|
||||
this.pathname = url.pathname;
|
||||
this.query = url.search;
|
||||
this.hash = url.hash;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-url
|
||||
word-break break-all
|
||||
|
||||
> [data-fa]
|
||||
padding-left 2px
|
||||
font-size .9em
|
||||
font-weight 400
|
||||
font-style normal
|
||||
|
||||
> .schema
|
||||
opacity 0.5
|
||||
|
||||
> .hostname
|
||||
font-weight bold
|
||||
|
||||
> .pathname
|
||||
opacity 0.8
|
||||
|
||||
> .query
|
||||
opacity 0.5
|
||||
|
||||
> .hash
|
||||
font-style italic
|
||||
|
||||
</style>
|
||||
@ -15,7 +15,7 @@
|
||||
</div>
|
||||
</header>
|
||||
<div class="text">
|
||||
<mk-post-html :ast="post.ast"/>
|
||||
<mk-post-html :html="post.textHtml"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user