Merge pull request #1383 from nextcloud/fix-mentions-being-too-close-to-the-following-text

Fix mentions being too close to the following text

js/views/templates.js

@@ -164,14 +164,14 @@ templates['richobjectstringparser_userlocal'] = template({"1":function(container
 },"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
     var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
 
-  return "<span class=\"atwho-inserted\" contenteditable=\"false\">\n	<span class=\"mention-user avatar-name-wrapper "
+  return "<span class=\"atwho-inserted\" contenteditable=\"false\"><span class=\"mention-user avatar-name-wrapper "
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isCurrentUser : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + "\">\n		<span class=\"avatar\"\n				data-user-id=\""
+    + "\"><span class=\"avatar\" data-user-id=\""
     + alias4(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"id","hash":{},"data":data}) : helper)))
-    + "\"\n				data-user-display-name=\""
+    + "\" data-user-display-name=\""
     + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
-    + "\">\n		</span>\n		<strong>"
+    + "\"></span><strong>"
     + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
-    + "</strong>\n	</span>\n</span>\n";
+    + "</strong></span></span>\n";
 },"useData":true});
 })();

js/views/templates/richobjectstringparser_userlocal.handlebars

@@ -1,9 +1,6 @@
-<span class="atwho-inserted" contenteditable="false">
-	<span class="mention-user avatar-name-wrapper {{#if isCurrentUser}}currentUser{{/if}}">
-		<span class="avatar"
-				data-user-id="{{id}}"
-				data-user-display-name="{{name}}">
-		</span>
-		<strong>{{name}}</strong>
-	</span>
-</span>
+{{! The browser merges two consecutive spaces, so the spaces inside the mention
+    are removed to prevent a trailing space from being merged with the space
+    after the mention, and thus causing the mention to "touch" the following
+    text; "~" from Handlebars can not be used because it is not recursive, it
+    only applies to a single level }}
+<span class="atwho-inserted" contenteditable="false"><span class="mention-user avatar-name-wrapper {{#if isCurrentUser}}currentUser{{/if}}"><span class="avatar" data-user-id="{{id}}" data-user-display-name="{{name}}"></span><strong>{{name}}</strong></span></span>