From f1691c06bfc5502a50edbddce18a2209aa10e51c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= <danxuliu@gmail.com>
Date: Wed, 6 Dec 2017 03:32:31 +0100
Subject: [PATCH] Format rich messages in chat frontend
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The RichObjectStringParser was copied from the Notifications app and
adapted to be used in the chat (support for file references was removed,
"-" is taken into account too in parameter IDs, only local users are
taken into account, and if the display name of a mention is empty the
user ID is used instead).

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
---
 css/comments.scss            |  4 ++
 js/models/chatmessage.js     |  3 +-
 js/richobjectstringparser.js | 76 ++++++++++++++++++++++++++++++++++++
 js/views/chatview.js         |  2 +
 templates/index-public.php   |  1 +
 templates/index.php          |  1 +
 6 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 js/richobjectstringparser.js

diff --git a/css/comments.scss b/css/comments.scss
index ebe9ddf17d..08f7142124 100644
--- a/css/comments.scss
+++ b/css/comments.scss
@@ -247,3 +247,7 @@
 #commentsTabView .comment.showDate .authorRow {
 	display: block;
 }
+
+#commentsTabView .comment .mention-user {
+	font-weight: bold;
+}
diff --git a/js/models/chatmessage.js b/js/models/chatmessage.js
index 0410724835..dd27de33cf 100644
--- a/js/models/chatmessage.js
+++ b/js/models/chatmessage.js
@@ -48,7 +48,8 @@
 			actorId: '',
 			actorDisplayName: '',
 			timestamp: 0,
-			message: ''
+			message: '',
+			messageParameters: []
 		},
 
 		url: function() {
diff --git a/js/richobjectstringparser.js b/js/richobjectstringparser.js
new file mode 100644
index 0000000000..5416548fd6
--- /dev/null
+++ b/js/richobjectstringparser.js
@@ -0,0 +1,76 @@
+/* global OCA, Handlebars */
+
+/**
+ * @copyright (c) 2016 Joas Schilling <coding@schilljs.com>
+ *
+ * @author Joas Schilling <coding@schilljs.com>
+ *
+ * This file is licensed under the Affero General Public License version 3 or
+ * later. See the COPYING file.
+ */
+
+(function(OCA, Handlebars) {
+
+	OCA.SpreedMe.RichObjectStringParser = {
+
+		_userLocalTemplate: '<span class="mention-user">@{{id}}</span>',
+
+		_unknownTemplate: '<strong>{{name}}</strong>',
+		_unknownLinkTemplate: '<a href="{{link}}">{{name}}</a>',
+
+		/**
+		 * @param {string} subject
+		 * @param {Object} parameters
+		 * @returns {string}
+		 */
+		parseMessage: function(subject, parameters) {
+			var self = this,
+				regex = /\{([a-z0-9-]+)\}/gi,
+				matches = subject.match(regex);
+
+			_.each(matches, function(parameter) {
+				parameter = parameter.substring(1, parameter.length - 1);
+				var parsed = self.parseParameter(parameters[parameter]);
+
+				subject = subject.replace('{' + parameter + '}', parsed);
+			});
+
+			return subject;
+		},
+
+		/**
+		 * @param {Object} parameter
+		 * @param {string} parameter.type
+		 * @param {string} parameter.id
+		 * @param {string} parameter.name
+		 * @param {string} parameter.link
+		 */
+		parseParameter: function(parameter) {
+			switch (parameter.type) {
+				case 'user':
+					if (!this.userLocalTemplate) {
+						this.userLocalTemplate = Handlebars.compile(this._userLocalTemplate);
+					}
+					if (!parameter.name) {
+						parameter.name = parameter.id;
+					}
+					return this.userLocalTemplate(parameter);
+
+				default:
+					if (!_.isUndefined(parameter.link)) {
+						if (!this.unknownLinkTemplate) {
+							this.unknownLinkTemplate = Handlebars.compile(this._unknownLinkTemplate);
+						}
+						return this.unknownLinkTemplate(parameter);
+					}
+
+					if (!this.unknownTemplate) {
+						this.unknownTemplate = Handlebars.compile(this._unknownTemplate);
+					}
+					return this.unknownTemplate(parameter);
+			}
+		}
+
+	};
+
+})(OCA, Handlebars);
diff --git a/js/views/chatview.js b/js/views/chatview.js
index 03e62b08d6..6fc9448baa 100644
--- a/js/views/chatview.js
+++ b/js/views/chatview.js
@@ -206,6 +206,8 @@
 
 			var formattedMessage = escapeHTML(commentModel.get('message')).replace(/\n/g, '<br/>');
 			formattedMessage = OCP.Comments.plainToRich(formattedMessage);
+			formattedMessage = OCA.SpreedMe.RichObjectStringParser.parseMessage(
+				formattedMessage, commentModel.get('messageParameters'));
 
 			var data = _.extend({}, commentModel.attributes, {
 				actorDisplayName: actorDisplayName,
diff --git a/templates/index-public.php b/templates/index-public.php
index c2306d487a..db83642a2b 100644
--- a/templates/index-public.php
+++ b/templates/index-public.php
@@ -25,6 +25,7 @@ script(
 		'views/roomlistview',
 		'views/sidebarview',
 		'views/tabview',
+		'richobjectstringparser',
 		'simplewebrtc',
 		'webrtc',
 		'signaling',
diff --git a/templates/index.php b/templates/index.php
index 9c614ccd3f..2a3fb86079 100644
--- a/templates/index.php
+++ b/templates/index.php
@@ -28,6 +28,7 @@ script(
 		'views/roomlistview',
 		'views/sidebarview',
 		'views/tabview',
+		'richobjectstringparser',
 		'simplewebrtc',
 		'webrtc',
 		'signaling',