mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-27 08:13:10 +02:00
Store texts as HTML
This commit is contained in:
parent
8c41432907
commit
7da60a0147
31 changed files with 318 additions and 283 deletions
|
@ -4,7 +4,7 @@ import signin from './signin.vue';
|
||||||
import signup from './signup.vue';
|
import signup from './signup.vue';
|
||||||
import forkit from './forkit.vue';
|
import forkit from './forkit.vue';
|
||||||
import nav from './nav.vue';
|
import nav from './nav.vue';
|
||||||
import postHtml from './post-html';
|
import postHtml from './post-html.vue';
|
||||||
import poll from './poll.vue';
|
import poll from './poll.vue';
|
||||||
import pollEditor from './poll-editor.vue';
|
import pollEditor from './poll-editor.vue';
|
||||||
import reactionIcon from './reaction-icon.vue';
|
import reactionIcon from './reaction-icon.vue';
|
||||||
|
|
|
@ -4,13 +4,13 @@
|
||||||
<img class="avatar" :src="`${message.user.avatarUrl}?thumbnail&size=80`" alt=""/>
|
<img class="avatar" :src="`${message.user.avatarUrl}?thumbnail&size=80`" alt=""/>
|
||||||
</router-link>
|
</router-link>
|
||||||
<div class="content">
|
<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>
|
<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%">
|
<button class="delete-button" v-if="isMe" title="%i18n:common.delete%">
|
||||||
<img src="/assets/desktop/messaging/delete.png" alt="Delete"/>
|
<img src="/assets/desktop/messaging/delete.png" alt="Delete"/>
|
||||||
</button>
|
</button>
|
||||||
<div class="content" v-if="!message.isDeleted">
|
<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">
|
<div class="file" v-if="message.file">
|
||||||
<a :href="message.file.url" target="_blank" :title="message.file.name">
|
<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"/>
|
<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({
|
export default Vue.extend({
|
||||||
props: ['message'],
|
props: ['message'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
urls: []
|
||||||
|
};
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
acct() {
|
acct() {
|
||||||
return getAcct(this.message.user);
|
return getAcct(this.message.user);
|
||||||
},
|
},
|
||||||
isMe(): boolean {
|
isMe(): boolean {
|
||||||
return this.message.userId == (this as any).os.i.id;
|
return this.message.userId == (this as any).os.i.id;
|
||||||
},
|
}
|
||||||
urls(): string[] {
|
},
|
||||||
if (this.message.ast) {
|
watch: {
|
||||||
return this.message.ast
|
message: {
|
||||||
.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
|
handler(newMessage, oldMessage) {
|
||||||
.map(t => t.url);
|
if (!oldMessage || newMessage.textHtml !== oldMessage.textHtml) {
|
||||||
} else {
|
this.$nextTick(() => {
|
||||||
return null;
|
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>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<mk-post-html :ast="post.ast"/>
|
<mk-post-html :html="post.textHtml"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<mk-post-html v-if="post.ast" :ast="post.ast" :i="os.i" :class="$style.text"/>
|
<mk-post-html v-if="post.textHtml" :html="post.textHtml" :i="os.i" :class="$style.text"/>
|
||||||
<div class="media" v-if="post.media > 0">
|
<div class="media" v-if="post.media > 0">
|
||||||
<mk-media-list :media-list="post.media"/>
|
<mk-media-list :media-list="post.media"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -38,7 +38,7 @@
|
||||||
</router-link>
|
</router-link>
|
||||||
</header>
|
</header>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<mk-post-html :class="$style.text" v-if="p.ast" :ast="p.ast" :i="os.i"/>
|
<mk-post-html :class="$style.text" v-if="p.text" ref="text" :text="p.text" :i="os.i"/>
|
||||||
<div class="media" v-if="p.media.length > 0">
|
<div class="media" v-if="p.media.length > 0">
|
||||||
<mk-media-list :media-list="p.media"/>
|
<mk-media-list :media-list="p.media"/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -109,6 +109,7 @@ export default Vue.extend({
|
||||||
context: [],
|
context: [],
|
||||||
contextFetching: false,
|
contextFetching: false,
|
||||||
replies: [],
|
replies: [],
|
||||||
|
urls: []
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -130,15 +131,6 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
title(): string {
|
title(): string {
|
||||||
return dateStringify(this.p.createdAt);
|
return dateStringify(this.p.createdAt);
|
||||||
},
|
|
||||||
urls(): string[] {
|
|
||||||
if (this.p.ast) {
|
|
||||||
return this.p.ast
|
|
||||||
.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
|
|
||||||
.map(t => t.url);
|
|
||||||
} else {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
@ -170,6 +162,21 @@ export default Vue.extend({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
post: {
|
||||||
|
handler(newPost, oldPost) {
|
||||||
|
if (!oldPost || newPost.text !== oldPost.text) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const elements = this.$refs.text.$el.getElementsByTagName('a');
|
||||||
|
|
||||||
|
this.urls = [].filter.call(elements, ({ origin }) => origin !== location.origin)
|
||||||
|
.map(({ href }) => href);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
fetchContext() {
|
fetchContext() {
|
||||||
this.contextFetching = true;
|
this.contextFetching = true;
|
||||||
|
|
|
@ -38,7 +38,7 @@
|
||||||
</p>
|
</p>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<a class="reply" v-if="p.reply">%fa:reply%</a>
|
<a class="reply" v-if="p.reply">%fa:reply%</a>
|
||||||
<mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i" :class="$style.text"/>
|
<mk-post-html v-if="p.textHtml" ref="text" :html="p.textHtml" :i="os.i" :class="$style.text"/>
|
||||||
<a class="rp" v-if="p.repost">RP:</a>
|
<a class="rp" v-if="p.repost">RP:</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="media" v-if="p.media.length > 0">
|
<div class="media" v-if="p.media.length > 0">
|
||||||
|
@ -112,7 +112,8 @@ export default Vue.extend({
|
||||||
return {
|
return {
|
||||||
isDetailOpened: false,
|
isDetailOpened: false,
|
||||||
connection: null,
|
connection: null,
|
||||||
connectionId: null
|
connectionId: null,
|
||||||
|
urls: []
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -140,15 +141,6 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
url(): string {
|
url(): string {
|
||||||
return `/@${this.acct}/${this.p.id}`;
|
return `/@${this.acct}/${this.p.id}`;
|
||||||
},
|
|
||||||
urls(): string[] {
|
|
||||||
if (this.p.ast) {
|
|
||||||
return this.p.ast
|
|
||||||
.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
|
|
||||||
.map(t => t.url);
|
|
||||||
} else {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
@ -190,6 +182,21 @@ export default Vue.extend({
|
||||||
(this as any).os.stream.dispose(this.connectionId);
|
(this as any).os.stream.dispose(this.connectionId);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
post: {
|
||||||
|
handler(newPost, oldPost) {
|
||||||
|
if (!oldPost || newPost.textHtml !== oldPost.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
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
capture(withHandler = false) {
|
capture(withHandler = false) {
|
||||||
if ((this as any).os.isSignedIn) {
|
if ((this as any).os.isSignedIn) {
|
||||||
|
@ -450,7 +457,7 @@ export default Vue.extend({
|
||||||
font-size 1.1em
|
font-size 1.1em
|
||||||
color #717171
|
color #717171
|
||||||
|
|
||||||
>>> .quote
|
>>> blockquote
|
||||||
margin 8px
|
margin 8px
|
||||||
padding 6px 12px
|
padding 6px 12px
|
||||||
color #aaa
|
color #aaa
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<div class="mk-sub-post-content">
|
<div class="mk-sub-post-content">
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<a class="reply" v-if="post.replyId">%fa:reply%</a>
|
<a class="reply" v-if="post.replyId">%fa:reply%</a>
|
||||||
<mk-post-html :ast="post.ast" :i="os.i"/>
|
<mk-post-html ref="text" :html="post.textHtml" :i="os.i"/>
|
||||||
<a class="rp" v-if="post.repostId" :href="`/post:${post.repostId}`">RP: ...</a>
|
<a class="rp" v-if="post.repostId" :href="`/post:${post.repostId}`">RP: ...</a>
|
||||||
</div>
|
</div>
|
||||||
<details v-if="post.media.length > 0">
|
<details v-if="post.media.length > 0">
|
||||||
|
|
|
@ -38,7 +38,7 @@
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i" :class="$style.text"/>
|
<mk-post-html v-if="p.text" :ast="p.text" :i="os.i" :class="$style.text"/>
|
||||||
<div class="tags" v-if="p.tags && p.tags.length > 0">
|
<div class="tags" v-if="p.tags && p.tags.length > 0">
|
||||||
<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
|
<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
|
||||||
</div>
|
</div>
|
||||||
|
@ -103,6 +103,7 @@ export default Vue.extend({
|
||||||
context: [],
|
context: [],
|
||||||
contextFetching: false,
|
contextFetching: false,
|
||||||
replies: [],
|
replies: [],
|
||||||
|
urls: []
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -127,15 +128,6 @@ export default Vue.extend({
|
||||||
.map(key => this.p.reactionCounts[key])
|
.map(key => this.p.reactionCounts[key])
|
||||||
.reduce((a, b) => a + b)
|
.reduce((a, b) => a + b)
|
||||||
: 0;
|
: 0;
|
||||||
},
|
|
||||||
urls(): string[] {
|
|
||||||
if (this.p.ast) {
|
|
||||||
return this.p.ast
|
|
||||||
.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
|
|
||||||
.map(t => t.url);
|
|
||||||
} else {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
@ -167,6 +159,21 @@ export default Vue.extend({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
post: {
|
||||||
|
handler(newPost, oldPost) {
|
||||||
|
if (!oldPost || newPost.text !== oldPost.text) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const elements = this.$refs.text.$el.getElementsByTagName('a');
|
||||||
|
|
||||||
|
this.urls = [].filter.call(elements, ({ origin }) => origin !== location.origin)
|
||||||
|
.map(({ href }) => href);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
fetchContext() {
|
fetchContext() {
|
||||||
this.contextFetching = true;
|
this.contextFetching = true;
|
||||||
|
|
|
@ -37,7 +37,7 @@
|
||||||
<a class="reply" v-if="p.reply">
|
<a class="reply" v-if="p.reply">
|
||||||
%fa:reply%
|
%fa:reply%
|
||||||
</a>
|
</a>
|
||||||
<mk-post-html v-if="p.ast" :ast="p.ast" :i="os.i" :class="$style.text"/>
|
<mk-post-html v-if="p.text" ref="text" :text="p.text" :i="os.i" :class="$style.text"/>
|
||||||
<a class="rp" v-if="p.repost != null">RP:</a>
|
<a class="rp" v-if="p.repost != null">RP:</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="media" v-if="p.media.length > 0">
|
<div class="media" v-if="p.media.length > 0">
|
||||||
|
@ -90,7 +90,8 @@ export default Vue.extend({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
connection: null,
|
connection: null,
|
||||||
connectionId: null
|
connectionId: null,
|
||||||
|
urls: []
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -118,15 +119,6 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
url(): string {
|
url(): string {
|
||||||
return `/@${this.pAcct}/${this.p.id}`;
|
return `/@${this.pAcct}/${this.p.id}`;
|
||||||
},
|
|
||||||
urls(): string[] {
|
|
||||||
if (this.p.ast) {
|
|
||||||
return this.p.ast
|
|
||||||
.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
|
|
||||||
.map(t => t.url);
|
|
||||||
} else {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
@ -168,6 +160,21 @@ export default Vue.extend({
|
||||||
(this as any).os.stream.dispose(this.connectionId);
|
(this as any).os.stream.dispose(this.connectionId);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
post: {
|
||||||
|
handler(newPost, oldPost) {
|
||||||
|
if (!oldPost || newPost.text !== oldPost.text) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const elements = this.$refs.text.$el.getElementsByTagName('a');
|
||||||
|
|
||||||
|
this.urls = [].filter.call(elements, ({ origin }) => origin !== location.origin)
|
||||||
|
.map(({ href }) => href);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
capture(withHandler = false) {
|
capture(withHandler = false) {
|
||||||
if ((this as any).os.isSignedIn) {
|
if ((this as any).os.isSignedIn) {
|
||||||
|
@ -389,7 +396,7 @@ export default Vue.extend({
|
||||||
font-size 1.1em
|
font-size 1.1em
|
||||||
color #717171
|
color #717171
|
||||||
|
|
||||||
>>> .quote
|
>>> blockquote
|
||||||
margin 8px
|
margin 8px
|
||||||
padding 6px 12px
|
padding 6px 12px
|
||||||
color #aaa
|
color #aaa
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<div class="mk-sub-post-content">
|
<div class="mk-sub-post-content">
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<a class="reply" v-if="post.replyId">%fa:reply%</a>
|
<a class="reply" v-if="post.replyId">%fa:reply%</a>
|
||||||
<mk-post-html v-if="post.ast" :ast="post.ast" :i="os.i"/>
|
<mk-post-html v-if="post.text" :ast="post.text" :i="os.i"/>
|
||||||
<a class="rp" v-if="post.repostId">RP: ...</a>
|
<a class="rp" v-if="post.repostId">RP: ...</a>
|
||||||
</div>
|
</div>
|
||||||
<details v-if="post.media.length > 0">
|
<details v-if="post.media.length > 0">
|
||||||
|
|
|
@ -27,8 +27,14 @@ props:
|
||||||
type: "string"
|
type: "string"
|
||||||
optional: true
|
optional: true
|
||||||
desc:
|
desc:
|
||||||
ja: "投稿の本文"
|
ja: "投稿の本文 (ローカルの場合Markdown風のフォーマット)"
|
||||||
en: "The text of this post"
|
en: "The text of this post (in Markdown like format if local)"
|
||||||
|
- name: "textHtml"
|
||||||
|
type: "string"
|
||||||
|
optional: true
|
||||||
|
desc:
|
||||||
|
ja: "投稿の本文 (HTML) (投稿時は無視)"
|
||||||
|
en: "The text of this post (in HTML. Ignored when posting.)"
|
||||||
- name: "mediaIds"
|
- name: "mediaIds"
|
||||||
type: "id(DriveFile)[]"
|
type: "id(DriveFile)[]"
|
||||||
optional: true
|
optional: true
|
||||||
|
|
83
src/common/text/html.ts
Normal file
83
src/common/text/html.ts
Normal file
|
@ -0,0 +1,83 @@
|
||||||
|
import { lib as emojilib } from 'emojilib';
|
||||||
|
import { JSDOM } from 'jsdom';
|
||||||
|
|
||||||
|
const handlers = {
|
||||||
|
bold({ document }, { bold }) {
|
||||||
|
const b = document.createElement('b');
|
||||||
|
b.textContent = bold;
|
||||||
|
document.body.appendChild(b);
|
||||||
|
},
|
||||||
|
|
||||||
|
code({ document }, { code }) {
|
||||||
|
const pre = document.createElement('pre');
|
||||||
|
const inner = document.createElement('code');
|
||||||
|
inner.innerHTML = code;
|
||||||
|
pre.appendChild(inner);
|
||||||
|
document.body.appendChild(pre);
|
||||||
|
},
|
||||||
|
|
||||||
|
emoji({ document }, { content, emoji }) {
|
||||||
|
const found = emojilib[emoji];
|
||||||
|
const node = document.createTextNode(found ? found.char : content);
|
||||||
|
document.body.appendChild(node);
|
||||||
|
},
|
||||||
|
|
||||||
|
hashtag({ document }, { hashtag }) {
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = '/search?q=#' + hashtag;
|
||||||
|
a.textContent = hashtag;
|
||||||
|
},
|
||||||
|
|
||||||
|
'inline-code'({ document }, { code }) {
|
||||||
|
const element = document.createElement('code');
|
||||||
|
element.textContent = code;
|
||||||
|
document.body.appendChild(element);
|
||||||
|
},
|
||||||
|
|
||||||
|
link({ document }, { url, title }) {
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
a.textContent = title;
|
||||||
|
document.body.appendChild(a);
|
||||||
|
},
|
||||||
|
|
||||||
|
mention({ document }, { content }) {
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = '/' + content;
|
||||||
|
a.textContent = content;
|
||||||
|
document.body.appendChild(a);
|
||||||
|
},
|
||||||
|
|
||||||
|
quote({ document }, { quote }) {
|
||||||
|
const blockquote = document.createElement('blockquote');
|
||||||
|
blockquote.textContent = quote;
|
||||||
|
document.body.appendChild(blockquote);
|
||||||
|
},
|
||||||
|
|
||||||
|
text({ document }, { content }) {
|
||||||
|
for (const text of content.split('\n')) {
|
||||||
|
const node = document.createTextNode(text);
|
||||||
|
document.body.appendChild(node);
|
||||||
|
|
||||||
|
const br = document.createElement('br');
|
||||||
|
document.body.appendChild(br);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
url({ document }, { url }) {
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
a.textContent = url;
|
||||||
|
document.body.appendChild(a);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default tokens => {
|
||||||
|
const { window } = new JSDOM('');
|
||||||
|
|
||||||
|
for (const token of tokens) {
|
||||||
|
handlers[token.type](window, token);
|
||||||
|
}
|
||||||
|
|
||||||
|
return `<p>${window.document.body.innerHTML}</p>`;
|
||||||
|
};
|
|
@ -1,7 +1,7 @@
|
||||||
/**
|
/**
|
||||||
* Mention
|
* Mention
|
||||||
*/
|
*/
|
||||||
import parseAcct from '../../../common/user/parse-acct';
|
import parseAcct from '../../../../common/user/parse-acct';
|
||||||
|
|
||||||
module.exports = text => {
|
module.exports = text => {
|
||||||
const match = text.match(/^(?:@[a-zA-Z0-9\-]+){1,2}/);
|
const match = text.match(/^(?:@[a-zA-Z0-9\-]+){1,2}/);
|
|
@ -3,7 +3,6 @@ import deepcopy = require('deepcopy');
|
||||||
import { pack as packUser } from './user';
|
import { pack as packUser } from './user';
|
||||||
import { pack as packFile } from './drive-file';
|
import { pack as packFile } from './drive-file';
|
||||||
import db from '../db/mongodb';
|
import db from '../db/mongodb';
|
||||||
import parse from '../common/text';
|
|
||||||
|
|
||||||
const MessagingMessage = db.get<IMessagingMessage>('messagingMessages');
|
const MessagingMessage = db.get<IMessagingMessage>('messagingMessages');
|
||||||
export default MessagingMessage;
|
export default MessagingMessage;
|
||||||
|
@ -12,6 +11,7 @@ export interface IMessagingMessage {
|
||||||
_id: mongo.ObjectID;
|
_id: mongo.ObjectID;
|
||||||
createdAt: Date;
|
createdAt: Date;
|
||||||
text: string;
|
text: string;
|
||||||
|
textHtml: string;
|
||||||
userId: mongo.ObjectID;
|
userId: mongo.ObjectID;
|
||||||
recipientId: mongo.ObjectID;
|
recipientId: mongo.ObjectID;
|
||||||
isRead: boolean;
|
isRead: boolean;
|
||||||
|
@ -60,11 +60,6 @@ export const pack = (
|
||||||
_message.id = _message._id;
|
_message.id = _message._id;
|
||||||
delete _message._id;
|
delete _message._id;
|
||||||
|
|
||||||
// Parse text
|
|
||||||
if (_message.text) {
|
|
||||||
_message.ast = parse(_message.text);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Populate user
|
// Populate user
|
||||||
_message.user = await packUser(_message.userId, me);
|
_message.user = await packUser(_message.userId, me);
|
||||||
|
|
||||||
|
|
|
@ -8,7 +8,6 @@ import { pack as packChannel } from './channel';
|
||||||
import Vote from './poll-vote';
|
import Vote from './poll-vote';
|
||||||
import Reaction from './post-reaction';
|
import Reaction from './post-reaction';
|
||||||
import { pack as packFile } from './drive-file';
|
import { pack as packFile } from './drive-file';
|
||||||
import parse from '../common/text';
|
|
||||||
|
|
||||||
const Post = db.get<IPost>('posts');
|
const Post = db.get<IPost>('posts');
|
||||||
|
|
||||||
|
@ -31,6 +30,7 @@ export type IPost = {
|
||||||
repostId: mongo.ObjectID;
|
repostId: mongo.ObjectID;
|
||||||
poll: any; // todo
|
poll: any; // todo
|
||||||
text: string;
|
text: string;
|
||||||
|
textHtml: string;
|
||||||
cw: string;
|
cw: string;
|
||||||
userId: mongo.ObjectID;
|
userId: mongo.ObjectID;
|
||||||
appId: mongo.ObjectID;
|
appId: mongo.ObjectID;
|
||||||
|
@ -103,11 +103,6 @@ export const pack = async (
|
||||||
delete _post.mentions;
|
delete _post.mentions;
|
||||||
if (_post.geo) delete _post.geo.type;
|
if (_post.geo) delete _post.geo.type;
|
||||||
|
|
||||||
// Parse text
|
|
||||||
if (_post.text) {
|
|
||||||
_post.ast = parse(_post.text);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Populate user
|
// Populate user
|
||||||
_post.user = packUser(_post.userId, meId);
|
_post.user = packUser(_post.userId, meId);
|
||||||
|
|
||||||
|
|
|
@ -11,6 +11,8 @@ import DriveFile from '../../../../../models/drive-file';
|
||||||
import { pack } from '../../../../../models/messaging-message';
|
import { pack } from '../../../../../models/messaging-message';
|
||||||
import publishUserStream from '../../../event';
|
import publishUserStream from '../../../event';
|
||||||
import { publishMessagingStream, publishMessagingIndexStream, pushSw } from '../../../event';
|
import { publishMessagingStream, publishMessagingIndexStream, pushSw } from '../../../event';
|
||||||
|
import html from '../../../../../common/text/html';
|
||||||
|
import parse from '../../../../../common/text/parse';
|
||||||
import config from '../../../../../conf';
|
import config from '../../../../../conf';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -74,6 +76,7 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
|
||||||
fileId: file ? file._id : undefined,
|
fileId: file ? file._id : undefined,
|
||||||
recipientId: recipient._id,
|
recipientId: recipient._id,
|
||||||
text: text ? text : undefined,
|
text: text ? text : undefined,
|
||||||
|
textHtml: text ? html(parse(text)) : undefined,
|
||||||
userId: user._id,
|
userId: user._id,
|
||||||
isRead: false
|
isRead: false
|
||||||
});
|
});
|
||||||
|
|
|
@ -3,7 +3,8 @@
|
||||||
*/
|
*/
|
||||||
import $ from 'cafy';
|
import $ from 'cafy';
|
||||||
import deepEqual = require('deep-equal');
|
import deepEqual = require('deep-equal');
|
||||||
import parse from '../../../../common/text';
|
import html from '../../../../common/text/html';
|
||||||
|
import parse from '../../../../common/text/parse';
|
||||||
import { default as Post, IPost, isValidText, isValidCw } from '../../../../models/post';
|
import { default as Post, IPost, isValidText, isValidCw } from '../../../../models/post';
|
||||||
import { default as User, ILocalAccount, IUser } from '../../../../models/user';
|
import { default as User, ILocalAccount, IUser } from '../../../../models/user';
|
||||||
import { default as Channel, IChannel } from '../../../../models/channel';
|
import { default as Channel, IChannel } from '../../../../models/channel';
|
||||||
|
@ -259,6 +260,7 @@ module.exports = (params, user: IUser, app) => new Promise(async (res, rej) => {
|
||||||
repostId: repost ? repost._id : undefined,
|
repostId: repost ? repost._id : undefined,
|
||||||
poll: poll,
|
poll: poll,
|
||||||
text: text,
|
text: text,
|
||||||
|
textHtml: tokens === null ? null : html(tokens),
|
||||||
cw: cw,
|
cw: cw,
|
||||||
tags: tags,
|
tags: tags,
|
||||||
userId: user._id,
|
userId: user._id,
|
||||||
|
|
16
tools/migration/nighthike/7.js
Normal file
16
tools/migration/nighthike/7.js
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
// for Node.js interpretation
|
||||||
|
|
||||||
|
const Message = require('../../../built/models/messaging-message').default;
|
||||||
|
const Post = require('../../../built/models/post').default;
|
||||||
|
const html = require('../../../built/common/text/html').default;
|
||||||
|
const parse = require('../../../built/common/text/parse').default;
|
||||||
|
|
||||||
|
Promise.all([Message, Post].map(async model => {
|
||||||
|
const documents = await model.find();
|
||||||
|
|
||||||
|
return Promise.all(documents.map(({ _id, text }) => model.update(_id, {
|
||||||
|
$set: {
|
||||||
|
textHtml: html(parse(text))
|
||||||
|
}
|
||||||
|
})));
|
||||||
|
})).catch(console.error).then(process.exit);
|
Loading…
Reference in a new issue