format links in comments

Signed-off-by: Arthur Schiwon <blizzz@arthur-schiwon.de>

5 files changed, 73 insertions, 3 deletions

diff --git a/apps/comments/js/commentstabview.js b/apps/comments/js/commentstabview.js
index bd89c8bbb49..0ad49163508 100644
--- a/apps/comments/js/commentstabview.js
+++ b/apps/comments/js/commentstabview.js
@@ -422,7 +422,7 @@
 		 * Convert a message to be displayed in HTML,
 		 * converts newlines to <br> tags.
 		 */
-		_formatMessage: function(message, mentions) {
+		_formatMessage: function(message, mentions, editMode) {
 			message = escapeHTML(message).replace(/\n/g, '<br/>');
 
 			for(var i in mentions) {
@@ -445,6 +445,9 @@
 					}
 				);
 			}
+			if(editMode !== true) {
+				message = OCP.Comments.plainToRich(message);
+			}
 			return message;
 		},
 
@@ -495,7 +498,7 @@
 
 			var $message = $formRow.find('.message');
 			$message
-				.html(this._formatMessage(commentToEdit.get('message'), commentToEdit.get('mentions')))
+				.html(this._formatMessage(commentToEdit.get('message'), commentToEdit.get('mentions'), true))
 				.find('.avatar')
 				.each(function () { $(this).avatar(); });
 			var editionMode = true;
@@ -620,13 +623,14 @@
 				$inserted.html('@' + $this.find('.avatar').data('username'));
 			});
 
+			$comment.html(OCP.Comments.richToPlain($comment.html()));
+
 			var oldHtml;
 			var html = $comment.html();
 			do {
 				// replace works one by one
 				oldHtml = html;
 				html = oldHtml.replace("<br>", "\n");	// preserve line breaks
-				console.warn(html)
 			} while(oldHtml !== html);
 			$comment.html(html);
 
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 1b76e3c68de..6a3b20c492d 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -62,6 +62,10 @@ a {
 	}
 }
 
+a.external {
+	text-decoration: underline;
+}
+
 input {
 	cursor: pointer;
 	* {
diff --git a/core/js/core.json b/core/js/core.json
index 15e406bf2d2..6cf6a2489ed 100644
--- a/core/js/core.json
+++ b/core/js/core.json
@@ -45,6 +45,7 @@
 		"eventsource.js",
 		"config.js",
 		"public/appconfig.js",
+		"public/comments.js",
 		"multiselect.js",
 		"oc-requesttoken.js",
 		"setupchecks.js",
diff --git a/core/js/merged-template-prepend.json b/core/js/merged-template-prepend.json
index 0de1da0bf62..f4ef511bc78 100644
--- a/core/js/merged-template-prepend.json
+++ b/core/js/merged-template-prepend.json
@@ -6,6 +6,7 @@
   "octemplate.js",
   "eventsource.js",
   "public/appconfig.js",
+  "public/comments.js",
   "config.js",
   "oc-requesttoken.js",
   "apps.js",
diff --git a/core/js/public/comments.js b/core/js/public/comments.js
new file mode 100644
index 00000000000..6de7ff7d38a
--- /dev/null
+++ b/core/js/public/comments.js
@@ -0,0 +1,60 @@
+/**
+ * @copyright (c) 2017 Arthur Schiwon <blizzz@arthur-schiwon.de>
+ *
+ * @author Arthur Schiwon <blizzz@arthur-schiwon.de>
+ *
+ * This file is licensed under the Affero General Public License version 3 or
+ * later. See the COPYING file.
+ */
+
+(function(OCP) {
+	"use strict";
+
+	OCP.Comments = {
+
+		/*
+		 * Detects links:
+		 * Either the http(s) protocol is given or two strings, basically limited to ascii with the last
+		 * 	word being at least one digit long,
+		 * followed by at least another character
+		 *
+		 * The downside: anything not ascii is excluded. Not sure how common it is in areas using different
+		 * alphabets… the upside: fake domains with similar looking characters won't be formatted as links
+		 */
+		urlRegex: /(\b(https?:\/\/|([-A-Z0-9+_])*\.([-A-Z])+)[-A-Z0-9+&@#\/%?=~_|!:,.;()]*[-A-Z0-9+&@#\/%=~_|()])/ig,
+		protocolRegex: /^https:\/\//,
+
+		plainToRich: function(content) {
+			content = this.formatLinksRich(content);
+			return content;
+		},
+
+		richToPlain: function(content) {
+			content = this.formatLinksPlain(content);
+			return content;
+		},
+
+		formatLinksRich: function(content) {
+			var self = this;
+			return content.replace(this.urlRegex, function(url) {
+				var hasProtocol = (url.indexOf('https://') !== -1) || (url.indexOf('http://') !== -1);
+				if(!hasProtocol) {
+					url = 'https://' + url;
+				}
+
+				var linkText = url.replace(self.protocolRegex, '');
+				return '<a class="external" href="' + url + '">' + linkText + '</a>';
+			});
+		},
+
+		formatLinksPlain: function(content) {
+			var $content = $('<div></div>').html(content);
+			$content.find('a').each(function () {
+				var $this = $(this);
+				$this.html($this.attr('href'));
+			});
+			return $content.html();
+		}
+
+	};
+})(OCP);