#277

8 files changed, 76 insertions, 13 deletions

diff --git a/src/common/text/elements/link.js b/src/common/text/elements/link.js
new file mode 100644
index 0000000000..03315bb2c0
--- /dev/null
+++ b/src/common/text/elements/link.js
@@ -0,0 +1,19 @@
+/**
+ * Link
+ */
+
+module.exports = text => {
+	const match = text.match(/^\??\[(.+?)\]\((https?:\/\/[\w\/:%#@\$&\?!\(\)\[\]~\.=\+\-]+)\)/);
+	if (!match) return null;
+	const silent = text[0] == '?';
+	const link = match[0];
+	const title = match[1];
+	const url = match[2];
+	return {
+		type: 'link',
+		content: link,
+		title: title,
+		url: url,
+		silent: silent
+	};
+};
diff --git a/src/common/text/elements/url.js b/src/common/text/elements/url.js
index f350b707ac..1003aff9c3 100644
--- a/src/common/text/elements/url.js
+++ b/src/common/text/elements/url.js
@@ -3,11 +3,12 @@
  */
 
 module.exports = text => {
-	const match = text.match(/^https?:\/\/[\w\/:%#@\$&\?!\(\)\[\]~\.=\+\-]+/); 
+	const match = text.match(/^https?:\/\/[\w\/:%#@\$&\?!\(\)\[\]~\.=\+\-]+/);
 	if (!match) return null;
-	const link = match[0];
+	const url = match[0];
 	return {
-		type: 'link',
-		content: link
+		type: 'url',
+		content: url,
+		url: url
 	};
 };
diff --git a/src/common/text/index.js b/src/common/text/index.js
index 4424169033..ab1342230c 100644
--- a/src/common/text/index.js
+++ b/src/common/text/index.js
@@ -5,6 +5,7 @@
 const elements = [
 	require('./elements/bold'),
 	require('./elements/url'),
+	require('./elements/link'),
 	require('./elements/mention'),
 	require('./elements/hashtag'),
 	require('./elements/code'),
diff --git a/src/web/app/common/scripts/text-compiler.js b/src/web/app/common/scripts/text-compiler.js
index 2edffbb766..d4570ca923 100644
--- a/src/web/app/common/scripts/text-compiler.js
+++ b/src/web/app/common/scripts/text-compiler.js
@@ -21,8 +21,10 @@ module.exports = (tokens, shouldBreak) => {
 					.replace(/(\r\n|\n|\r)/g, shouldBreak ? '<br>' : ' ');
 			case 'bold':
 				return '<strong>' + escape(token.bold) + '</strong>';
-			case 'link':
+			case 'url':
 				return '<mk-url href="' + escape(token.content) + '" target="_blank"></mk-url>';
+			case 'link':
+				return '<a class="link" href="' + escape(token.url) + '" target="_blank">' + escape(token.title) + '</a>';
 			case 'mention':
 				return '<a href="' + CONFIG.url + '/' + escape(token.username) + '" target="_blank" data-user-preview="' + token.content + '" ' + (me && me.username == token.username ? 'data-is-me' : '') + '>' + token.content + '</a>';
 			case 'hashtag': // TODO
diff --git a/src/web/app/desktop/tags/post-detail.tag b/src/web/app/desktop/tags/post-detail.tag
index 69379317fc..ca2d59f2e2 100644
--- a/src/web/app/desktop/tags/post-detail.tag
+++ b/src/web/app/desktop/tags/post-detail.tag
@@ -233,6 +233,16 @@
 							font-size 1.5em
 							color #717171
 
+							.link
+								&:after
+									content "\f14c"
+									display inline-block
+									padding-left 2px
+									font-family FontAwesome
+									font-size .9em
+									font-weight 400
+									font-style normal
+
 							> mk-url-preview
 								margin-top 8px
 
@@ -367,10 +377,10 @@
 
 					// URLをプレビュー
 					tokens
-					.filter(t => t.type == 'link')
+					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
 					.map(t => {
 						riot.mount(this.refs.text.appendChild(document.createElement('mk-url-preview')), {
-							url: t.content
+							url: t.url
 						});
 					});
 				}
diff --git a/src/web/app/desktop/tags/timeline-post.tag b/src/web/app/desktop/tags/timeline-post.tag
index 9a1dede2da..8929a8dd5a 100644
--- a/src/web/app/desktop/tags/timeline-post.tag
+++ b/src/web/app/desktop/tags/timeline-post.tag
@@ -229,6 +229,16 @@
 							mk-url-preview
 								margin-top 8px
 
+							.link
+								&:after
+									content "\f14c"
+									display inline-block
+									padding-left 2px
+									font-family FontAwesome
+									font-size .9em
+									font-weight 400
+									font-style normal
+
 							> .reply
 								margin-right 8px
 								color #717171
@@ -344,10 +354,10 @@
 
 				// URLをプレビュー
 				tokens
-				.filter(t => t.type == 'link')
+				.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
 				.map(t => {
 					riot.mount(this.refs.text.appendChild(document.createElement('mk-url-preview')), {
-						url: t.content
+						url: t.url
 					});
 				});
 			}
diff --git a/src/web/app/mobile/tags/post-detail.tag b/src/web/app/mobile/tags/post-detail.tag
index b32fe6173d..f6f6bb62db 100644
--- a/src/web/app/mobile/tags/post-detail.tag
+++ b/src/web/app/mobile/tags/post-detail.tag
@@ -230,6 +230,16 @@
 							@media (min-width 500px)
 								font-size 24px
 
+							.link
+								&:after
+									content "\f14c"
+									display inline-block
+									padding-left 2px
+									font-family FontAwesome
+									font-size .9em
+									font-weight 400
+									font-style normal
+
 							> mk-url-preview
 								margin-top 8px
 
@@ -368,10 +378,10 @@
 
 					// URLをプレビュー
 					tokens
-					.filter(t => t.type == 'link')
+					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
 					.map(t => {
 						riot.mount(this.refs.text.appendChild(document.createElement('mk-url-preview')), {
-							url: t.content
+							url: t.url
 						});
 					});
 				}
diff --git a/src/web/app/mobile/tags/timeline-post.tag b/src/web/app/mobile/tags/timeline-post.tag
index 9da25b7b2f..f706dc7de6 100644
--- a/src/web/app/mobile/tags/timeline-post.tag
+++ b/src/web/app/mobile/tags/timeline-post.tag
@@ -209,6 +209,16 @@
 							> .dummy
 								display none
 
+							.link
+								&:after
+									content "\f14c"
+									display inline-block
+									padding-left 2px
+									font-family FontAwesome
+									font-size .9em
+									font-weight 400
+									font-style normal
+
 							mk-url-preview
 								margin-top 8px
 
@@ -318,10 +328,10 @@
 
 				// URLをプレビュー
 				tokens
-				.filter(t => t.type == 'link')
+				.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
 				.map(t => {
 					riot.mount(this.refs.text.appendChild(document.createElement('mk-url-preview')), {
-						url: t.content
+						url: t.url
 					});
 				});
 			}