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 @@
 				

 					
{{ p.channel.title }}:

 					%fa:reply%
-					

+					
 					RP:
 				

 				

@@ -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 @@
 	

 		
 	

-
	
+