From ea2b5a5aace235ce7355644c65ee831dd83e551a Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 11 Feb 2018 23:26:35 +0900 Subject: [PATCH] wip --- src/web/app/common/scripts/text-compiler.ts | 48 --------- src/web/app/common/views/components/index.ts | 2 + .../app/common/views/components/post-html.ts | 98 +++++++++++++++++++ .../views/components/timeline-post.vue | 10 +- .../app/desktop/views/components/timeline.vue | 4 +- .../app/desktop/views/components/window.vue | 2 +- 6 files changed, 105 insertions(+), 59 deletions(-) delete mode 100644 src/web/app/common/scripts/text-compiler.ts create mode 100644 src/web/app/common/views/components/post-html.ts diff --git a/src/web/app/common/scripts/text-compiler.ts b/src/web/app/common/scripts/text-compiler.ts deleted file mode 100644 index e0ea47df26..0000000000 --- a/src/web/app/common/scripts/text-compiler.ts +++ /dev/null @@ -1,48 +0,0 @@ -declare const _URL_: string; - -import * as riot from 'riot'; -import * as pictograph from 'pictograph'; - -const escape = text => - text - .replace(/>/g, '>') - .replace(/ { - if (shouldBreak == null) { - shouldBreak = true; - } - - const me = (riot as any).mixin('i').me; - - let text = tokens.map(token => { - switch (token.type) { - case 'text': - return escape(token.content) - .replace(/(\r\n|\n|\r)/g, shouldBreak ? '
' : ' '); - case 'bold': - return `${escape(token.bold)}`; - case 'url': - return ``; - case 'link': - return `${escape(token.title)}`; - case 'mention': - return `${token.content}`; - case 'hashtag': // TODO - return `${escape(token.content)}`; - case 'code': - return `
${token.html}
`; - case 'inline-code': - return `${token.html}`; - case 'emoji': - return pictograph.dic[token.emoji] || token.content; - } - }).join(''); - - // Remove needless whitespaces - text = text - .replace(/ /g, '').replace(/<\/code> /g, '') - .replace(/
/g, '
').replace(/<\/code><\/pre>
/g, '
'); - - return text; -}; diff --git a/src/web/app/common/views/components/index.ts b/src/web/app/common/views/components/index.ts index 9097c30814..c4c3475ee2 100644 --- a/src/web/app/common/views/components/index.ts +++ b/src/web/app/common/views/components/index.ts @@ -4,8 +4,10 @@ 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'; Vue.component('mk-signin', signin); Vue.component('mk-signup', signup); Vue.component('mk-forkit', forkit); Vue.component('mk-nav', nav); +Vue.component('mk-post-html', postHtml); diff --git a/src/web/app/common/views/components/post-html.ts b/src/web/app/common/views/components/post-html.ts new file mode 100644 index 0000000000..88ced03429 --- /dev/null +++ b/src/web/app/common/views/components/post-html.ts @@ -0,0 +1,98 @@ +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(/ { + 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); + } +}); diff --git a/src/web/app/desktop/views/components/timeline-post.vue b/src/web/app/desktop/views/components/timeline-post.vue index e4eaa8f793..f722ea3340 100644 --- a/src/web/app/desktop/views/components/timeline-post.vue +++ b/src/web/app/desktop/views/components/timeline-post.vue @@ -32,7 +32,7 @@
@@ -94,7 +94,7 @@ export default Vue.extend({ return this.isRepost ? this.post.repost : this.post; }, reactionsCount(): number { - return this.p.reaction_counts ? Object.keys(this.p.reaction_counts).map(key => this.p.reaction_counts[key]).reduce((a, b) => a + b) : 0; + return this.p.reaction_counts ? Object.keys(this.p.reaction_counts).map(key => this.p.reaction_counts[key]).reduce((a, b) => a + b) : 0; }, title(): string { return dateStringify(this.p.created_at); @@ -117,12 +117,6 @@ export default Vue.extend({ if (this.p.text) { const tokens = this.p.ast; - this.$refs.text.innerHTML = this.$refs.text.innerHTML.replace('

', compile(tokens)); - - Array.from(this.$refs.text.children).forEach(e => { - if (e.tagName == 'MK-URL') riot.mount(e); - }); - // URLをプレビュー tokens .filter(t => (t.type == 'url' || t.type == 'link') && !t.silent) diff --git a/src/web/app/desktop/views/components/timeline.vue b/src/web/app/desktop/views/components/timeline.vue index ba412848fb..161eebdf72 100644 --- a/src/web/app/desktop/views/components/timeline.vue +++ b/src/web/app/desktop/views/components/timeline.vue @@ -7,7 +7,7 @@
-
+