Merge pull request #7680 from nextcloud/fix-7609

format links in comments

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);
 

core/css/styles.scss

@@ -62,6 +62,11 @@ a {
 	}
 }
 
+a.external {
+	margin: 0 3px;
+	text-decoration: underline;
+}
+
 input {
 	cursor: pointer;
 	* {

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",

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",

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);