fix at mention rendering when multiple at mentions pattern are typed …

…without space in between (mattermost#1700)

tests/utils/formatting_at_mentions.test.jsx

@@ -42,6 +42,21 @@ describe('TextFormatting.AtMentions', function() {
  '$MM_ATMENTION0$',
  'should capture trailing punctuation as part of mention'
  );
+ assert.equal(
+ TextFormatting.autolinkAtMentions('@foo.com @bar.com', new Map()),
+ '$MM_ATMENTION0$ $MM_ATMENTION1$',
+ 'should capture two at mentions with space in between'
+ );
+ assert.equal(
+ TextFormatting.autolinkAtMentions('@[email protected]', new Map()),
+ '$MM_ATMENTION0$$MM_ATMENTION1$',
+ 'should capture two at mentions without space in between'
+ );
+ assert.equal(
+ TextFormatting.autolinkAtMentions('@[email protected]@baz.com', new Map()),
+ '$MM_ATMENTION0$$MM_ATMENTION1$$MM_ATMENTION2$',
+ 'should capture multiple at mentions without space in between'
+ );
  });
 
  it('Not at mentions', function() {
@@ -82,5 +97,45 @@ describe('TextFormatting.AtMentions', function() {
  TextFormatting.formatText('@ALL', {atMentions: true, mentionKeys: [{key: '@all'}]}).trim(),
  '<p><span class=\'mention--highlight\'><span data-mention="ALL">@ALL</span></span></p>',
  );
+ assert.equal(
+ TextFormatting.formatText('@foo.com', {atMentions: true, mentionKeys: [{key: '@foo.com'}]}).trim(),
+ '<p><span class=\'mention--highlight\'><span data-mention="foo.com">@foo.com</span></span></p>',
+ );
+ assert.equal(
+ TextFormatting.formatText('@foo.com @bar.com', {atMentions: true, mentionKeys: [{key: '@foo.com'}, {key: '@bar.com'}]}).trim(),
+ '<p><span class=\'mention--highlight\'><span data-mention="foo.com">@foo.com</span></span> <span class=\'mention--highlight\'><span data-mention="bar.com">@bar.com</span></span></p>',
+ );
+ assert.equal(
+ TextFormatting.formatText('@[email protected]', {atMentions: true, mentionKeys: [{key: '@foo.com'}, {key: '@bar.com'}]}).trim(),
+ '<p><span class=\'mention--highlight\'><span data-mention="foo.com">@foo.com</span></span><span class=\'mention--highlight\'><span data-mention="bar.com">@bar.com</span></span></p>',
+ );
+ });
+
+ it('Mix highlight at mentions', function() {
+ assert.equal(
+ TextFormatting.formatText('@foo.com @bar.com', {atMentions: true, mentionKeys: [{key: '@foo.com'}]}).trim(),
+ '<p><span class=\'mention--highlight\'><span data-mention="foo.com">@foo.com</span></span> <span data-mention="bar.com">@bar.com</span></p>',
+ 'should highlight first at mention, with space in between'
+ );
+ assert.equal(
+ TextFormatting.formatText('@foo.com @bar.com', {atMentions: true, mentionKeys: [{key: '@bar.com'}]}).trim(),
+ '<p><span data-mention="foo.com">@foo.com</span> <span class=\'mention--highlight\'><span data-mention="bar.com">@bar.com</span></span></p>',
+ 'should highlight second at mention, with space in between'
+ );
+ assert.equal(
+ TextFormatting.formatText('@[email protected]', {atMentions: true, mentionKeys: [{key: '@foo.com'}]}).trim(),
+ '<p><span class=\'mention--highlight\'><span data-mention="foo.com">@foo.com</span></span><span data-mention="bar.com">@bar.com</span></p>',
+ 'should highlight first at mention, without space in between'
+ );
+ assert.equal(
+ TextFormatting.formatText('@[email protected]', {atMentions: true, mentionKeys: [{key: '@bar.com'}]}).trim(),
+ '<p><span data-mention="foo.com">@foo.com</span><span class=\'mention--highlight\'><span data-mention="bar.com">@bar.com</span></span></p>',
+ 'should highlight second at mention, without space in between'
+ );
+ assert.equal(
+ TextFormatting.formatText('@[email protected]', {atMentions: true, mentionKeys: [{key: '@user'}]}).trim(),
+ '<p><span data-mention="foo.com">@foo.com</span><span data-mention="bar.com">@bar.com</span></p>',
+ 'should not highlight any at mention'
+ );
  });
 });

utils/text_formatting.jsx

@@ -16,6 +16,8 @@ import * as Markdown from './markdown';
 const removeMarkdown = new RemoveMarkdown();
 const punctuation = XRegExp.cache('[^\\pL\\d]');
 
+const AT_MENTION_PATTERN = /\B@([a-z0-9.\-_]*)/gi;
+
 // pattern to detect the existence of a Chinese, Japanese, or Korean character in a string
 // http:https://stackoverflow.com/questions/15033196/using-javascript-to-check-whether-a-string-contains-japanese-characters-includi
 const cjkPattern = /[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00-\u9faf\u3400-\u4dbf\uac00-\ud7a3]/;
@@ -180,7 +182,12 @@ export function autolinkAtMentions(text, tokens) {
  }
 
  let output = text;
- output = output.replace(/\B@([a-z0-9.\-_]*)/gi, replaceAtMentionWithToken);
+
+ let match = output.match(AT_MENTION_PATTERN);
+ while (match && match.length > 0) {
+ output = output.replace(AT_MENTION_PATTERN, replaceAtMentionWithToken);
+ match = output.match(AT_MENTION_PATTERN);
+ }
 
  return output;
 }