From 282567fcedf34d2b7043f90cd5b7ce18d4753720 Mon Sep 17 00:00:00 2001 From: Arthur Schiwon Date: Tue, 2 Jan 2018 11:20:15 +0100 Subject: [PATCH 1/2] format links in comments Signed-off-by: Arthur Schiwon --- apps/comments/js/commentstabview.js | 10 +++-- core/css/styles.scss | 4 ++ core/js/core.json | 1 + core/js/merged-template-prepend.json | 1 + core/js/public/comments.js | 60 ++++++++++++++++++++++++++++ 5 files changed, 73 insertions(+), 3 deletions(-) create mode 100644 core/js/public/comments.js diff --git a/apps/comments/js/commentstabview.js b/apps/comments/js/commentstabview.js index bd89c8bbb4..0ad4916350 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
tags. */ - _formatMessage: function(message, mentions) { + _formatMessage: function(message, mentions, editMode) { message = escapeHTML(message).replace(/\n/g, '
'); 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("
", "\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 1b76e3c68d..6a3b20c492 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 15e406bf2d..6cf6a2489e 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 0de1da0bf6..f4ef511bc7 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 0000000000..6de7ff7d38 --- /dev/null +++ b/core/js/public/comments.js @@ -0,0 +1,60 @@ +/** + * @copyright (c) 2017 Arthur Schiwon + * + * @author Arthur Schiwon + * + * 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 '' + linkText + ''; + }); + }, + + formatLinksPlain: function(content) { + var $content = $('
').html(content); + $content.find('a').each(function () { + var $this = $(this); + $this.html($this.attr('href')); + }); + return $content.html(); + } + + }; +})(OCP); From b4a473869ec26f35bd679f34306ccf0d1cbb702d Mon Sep 17 00:00:00 2001 From: Morris Jobke Date: Wed, 3 Jan 2018 14:09:10 +0100 Subject: [PATCH 2/2] Add margin around inline links Signed-off-by: Morris Jobke --- core/css/styles.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/core/css/styles.scss b/core/css/styles.scss index 6a3b20c492..c479d6df88 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -63,6 +63,7 @@ a { } a.external { + margin: 0 3px; text-decoration: underline; }