fix(message-rewrite): Remove emojis inside links

packages/layout/package.json

@@ -46,8 +46,8 @@
     "react-i18next": "~11.15.4"
   },
   "devDependencies": {
-    "@rocket.chat/fuselage": "workspace:~",
     "@rocket.chat/eslint-config-alt": "workspace:~",
+    "@rocket.chat/fuselage": "workspace:~",
     "@rocket.chat/prettier-config": "workspace:~",
     "@storybook/addon-essentials": "~6.4.18",
     "@storybook/addons": "~6.4.18",

packages/message-parser/src/grammar.pegjs

@@ -27,7 +27,7 @@
     strike,
     task,
     tasks,
-    unorderedList,
+    unorderedList
   } = require('./utils');
 }
 
@@ -371,11 +371,11 @@ hexByte = a:hexdigit b:hexdigit { return parseInt(a + b, 16); }
 
 domainName
   = "localhost"
-  / $(domainNameLabel ("." domainNameLabel)+)
+  / $(domainNameLabel ("." domainChar domainNameLabel)+)
 
-domainNameLabel = $(domainChar domainChar+ $("-" domainChar+)*)
+domainNameLabel = $(domainChar+ $("-" domainChar+)*)
 
-domainChar = !"/" !"|" !">" !"<" !safe !extra !EndOfLine !Space .
+domainChar = !"\\" !"/" !"|" !">" !"<" !safe !extra !EndOfLine !Space .
 
 /**
  *
@@ -546,7 +546,6 @@ inlineKatexEnd
   / & { return options.katex?.dollarSyntax; } "$"
 
 /* Emoticons */
-
 emoticon = & { return options.emoticons; } e:emoticonPattern { return e; }
 
 emoticonPattern

packages/message-parser/src/utils.ts

@@ -131,21 +131,45 @@ export const emoticon = (emoticon: string, shortCode: string): Emoji => ({
   shortCode,
 });
 
+const joinEmoji = (
+  current: Inlines,
+  previous: Inlines | undefined,
+  next: Inlines | undefined
+): Inlines => {
+  if (current.type !== 'EMOJI' || !current.value || (!previous && !next)) {
+    return current;
+  }
+
+  const hasEmojiAsNeighbor =
+    previous?.type === current.type || current.type === next?.type;
+  const hasPlainAsNeighbor =
+    (previous?.type === 'PLAIN_TEXT' && previous.value.trim() !== '') ||
+    (next?.type === 'PLAIN_TEXT' && next.value.trim() !== '');
+
+  if (current.value && (hasEmojiAsNeighbor || hasPlainAsNeighbor)) {
+    return current.value;
+  }
+
+  return current;
+};
+
 export const reducePlainTexts = (
   values: Paragraph['value']
 ): Paragraph['value'] =>
   values.reduce((result, item, index) => {
-    if (index > 0) {
-      const previous = result[result.length - 1];
-      if (item.type === 'PLAIN_TEXT' && item.type === previous.type) {
-        previous.value += item.value;
+    const next = values[index + 1];
+    const current = joinEmoji(item, values[index - 1], next);
+    const previous: Inlines = result[result.length - 1];
+
+    if (previous) {
+      if (current.type === 'PLAIN_TEXT' && current.type === previous.type) {
+        previous.value += current.value;
         return result;
       }
     }
 
-    return [...result, item];
+    return [...result, current];
   }, [] as Paragraph['value']);
-
 export const lineBreak = (): LineBreak => ({
   type: 'LINE_BREAK',
   value: undefined,

packages/message-parser/tests/any.test.ts

@@ -1,4 +1,4 @@
-import { parser } from '../src';
+import { parse } from '../src';
 import { paragraph, plain } from '../src/utils';
 
 test.each([
@@ -9,5 +9,5 @@ test.each([
     [paragraph([plain('free text with unxpected/unfinished blocks *bold_')])],
   ],
 ])('parses %p', (input, output) => {
-  expect(parser(input)).toMatchObject(output);
+  expect(parse(input)).toMatchObject(output);
 });

packages/message-parser/tests/blockquotes.test.ts

@@ -1,4 +1,4 @@
-import { parser } from '../src';
+import { parse } from '../src';
 import { paragraph, plain, quote, bold } from '../src/utils';
 
 test.each([
@@ -36,5 +36,5 @@ As Rocket Cat said:
     ],
   ],
 ])('parses %p', (input, output) => {
-  expect(parser(input)).toMatchObject(output);
+  expect(parse(input)).toMatchObject(output);
 });

packages/message-parser/tests/codeFence.test.ts

@@ -1,4 +1,4 @@
-import { parser } from '../src';
+import { parse } from '../src';
 import { paragraph, plain, codeLine, code } from '../src/utils';
 
 const multiply = <T>(a: number, element: T): Array<T> =>
@@ -79,5 +79,5 @@ code
     [code([codeLine(plain(`# code`)), codeLine(plain(`**code**`))])],
   ],
 ])('parses %p', (input, output) => {
-  expect(parser(input)).toMatchObject(output);
+  expect(parse(input)).toMatchObject(output);
 });

packages/message-parser/tests/color.test.ts

@@ -1,4 +1,4 @@
-import { parser } from '../src';
+import { parse } from '../src';
 import { color, paragraph, plain } from '../src/utils';
 
 test.each([
@@ -26,9 +26,9 @@ test.each([
   ['color:#c7', [paragraph([plain('color:#c7')])], undefined],
   ['color:#zzz', [paragraph([plain('color:#zzz')])], undefined],
 ])('parses %p', (input, output, disabledOutput) => {
-  expect(parser(input, { colors: true })).toMatchObject(output);
+  expect(parse(input, { colors: true })).toMatchObject(output);
 
   if (disabledOutput) {
-    expect(parser(input, { colors: false })).toMatchObject(disabledOutput);
+    expect(parse(input, { colors: false })).toMatchObject(disabledOutput);
   }
 });

packages/message-parser/tests/email.test.ts

@@ -1,4 +1,4 @@
-import { parser } from '../src';
+import { parse } from '../src';
 import { link, paragraph, plain } from '../src/utils';
 
 test.each([
@@ -150,5 +150,5 @@ test.each([
   //   [paragraph([plain('My email is [email protected]')])],
   // ],
 ])('parses %p', (input, output) => {
-  expect(parser(input)).toMatchObject(output);
+  expect(parse(input)).toMatchObject(output);
 });

packages/message-parser/tests/emoji.test.ts

@@ -1,4 +1,4 @@
-import { parser } from '../src';
+import { parse } from '../src';
 import { emoji, bigEmoji, paragraph, plain, emojiUnicode } from '../src/utils';
 
 test.each([
@@ -14,12 +14,14 @@ test.each([
     [paragraph([plain('asdas '), emoji('smille'), plain(' asd')])],
   ],
   [
-    'normal emojis :smile::smile::smile:',
+    'normal emojis :smile: :smile: :smile:',
     [
       paragraph([
         plain('normal emojis '),
         emoji('smile'),
+        plain(' '),
         emoji('smile'),
+        plain(' '),
         emoji('smile'),
       ]),
     ],
@@ -43,7 +45,7 @@ test.each([
   [':smile::smile:', [bigEmoji([emoji('smile'), emoji('smile')])]],
   [':smile:', [bigEmoji([emoji('smile')])]],
 ])('parses %p', (input, output) => {
-  expect(parser(input)).toMatchObject(output);
+  expect(parse(input)).toMatchObject(output);
 });
 
 test.each([
@@ -80,5 +82,5 @@ test.each([
   ],
   ['👆🏺', [bigEmoji([emojiUnicode('👆'), emojiUnicode('🏺')])]],
 ])('parses %p', (input, output) => {
-  expect(parser(input)).toMatchObject(output);
+  expect(parse(input)).toMatchObject(output);
 });

packages/message-parser/tests/emoticons.test.ts

@@ -1,35 +1,59 @@
-import { parser } from '../src';
+import { parse } from '../src';
 import { bigEmoji, paragraph, plain, emoticon } from '../src/utils';
 
 test.each([
-  ['=) asd', [paragraph([emoticon('=)', 'slight_smile'), plain(' asd')])]],
+  // Should render normal Emojis
   [
-    `=)
-  =)
-  `,
+    `test
+     :) test`,
     [
-      bigEmoji([
-        emoticon('=)', 'slight_smile'),
-        emoticon('=)', 'slight_smile'),
+      paragraph([plain('test')]),
+      paragraph([
+        plain('     '),
+        emoticon(':)', 'slight_smile'),
+        plain(' test'),
       ]),
     ],
   ],
+  [':) asd', [paragraph([emoticon(':)', 'slight_smile'), plain(' asd')])]],
+  [':) asd', [paragraph([emoticon(':)', 'slight_smile'), plain(' asd')])]],
+  [
+    ' :) asd',
+    [paragraph([plain(' '), emoticon(':)', 'slight_smile'), plain(' asd')])],
+  ],
+  ['Hi :)', [paragraph([plain('Hi '), emoticon(':)', 'slight_smile')])]],
   [
-    'asdas =) asd',
+    'asdas :) asd',
     [
       paragraph([
         plain('asdas '),
-        emoticon('=)', 'slight_smile'),
+        emoticon(':)', 'slight_smile'),
         plain(' asd'),
       ]),
     ],
   ],
   [
-    'normal emojis :):):)',
+    ':) :) :) :)',
     [
       paragraph([
-        plain('normal emojis '),
         emoticon(':)', 'slight_smile'),
+        plain(' '),
+        emoticon(':)', 'slight_smile'),
+        plain(' '),
+        emoticon(':)', 'slight_smile'),
+        plain(' '),
+        emoticon(':)', 'slight_smile'),
+      ]),
+    ],
+  ],
+
+  // Should render BigEmojis
+  [
+    `:)
+  :)
+  `,
+    [
+      bigEmoji([
         emoticon(':)', 'slight_smile'),
         emoticon(':)', 'slight_smile'),
       ]),
@@ -45,6 +69,7 @@ test.each([
       ]),
     ],
   ],
+
   [
     ' :):):) ',
     [
@@ -55,6 +80,7 @@ test.each([
       ]),
     ],
   ],
+
   [
     '\n :):):) \n',
     [
@@ -75,8 +101,9 @@ test.each([
       ]),
     ],
   ],
+
   [
-    ':):)',
+    ':) :)',
     [
       bigEmoji([
         emoticon(':)', 'slight_smile'),
@@ -85,6 +112,20 @@ test.each([
     ],
   ],
   [':)', [bigEmoji([emoticon(':)', 'slight_smile')])]],
+  [' :)', [bigEmoji([emoticon(':)', 'slight_smile')])]],
+  [':) ', [bigEmoji([emoticon(':)', 'slight_smile')])]],
+  [' :) ', [bigEmoji([emoticon(':)', 'slight_smile')])]],
+
+  // Should not render Emojis or BigEmojis if they are not surrounded by spaces
+  ['normal emojis :):):)', [paragraph([plain('normal emojis :):):)')])]],
+  [':):):) normal emojis', [paragraph([plain(':):):) normal emojis')])]],
+  [':):):):)', [paragraph([plain(':):):):)')])]],
+  ['10:30', [paragraph([plain('10:30')])]],
+  ['he:)llo', [paragraph([plain('he:)llo')])]],
+  [':)Hi', [paragraph([plain(':)Hi')])]],
+  ['Hi:) Hi', [paragraph([plain('Hi:) Hi')])]],
+  ['Hi:)', [paragraph([plain('Hi:)')])]],
+  ['@#@#! :)@!@', [paragraph([plain('@#@#! :)@!@')])]],
 ])('parses %p', (input, output) => {
-  expect(parser(input, { emoticons: true })).toMatchObject(output);
+  expect(parse(input, { emoticons: true })).toMatchObject(output);
 });

packages/message-parser/tests/emphasis.test.ts

@@ -1,4 +1,4 @@
-import { parser } from '../src';
+import { parse } from '../src';
 import {
   italic,
   paragraph,
@@ -98,5 +98,5 @@ test.each([
   ['_hello_text', [paragraph([plain('_hello_text')])]],
   ['text_hello_', [paragraph([plain('text_hello_')])]],
 ])('parses %p', (input, output) => {
-  expect(parser(input)).toMatchObject(output);
+  expect(parse(input)).toMatchObject(output);
 });

packages/message-parser/tests/escaped.test.ts

@@ -1,4 +1,4 @@
-import { parser } from '../src';
+import { parse } from '../src';
 import { paragraph, plain, bold } from '../src/utils';
 
 test.each([
@@ -34,5 +34,5 @@ test.each([
     [paragraph([plain('ö not a character entity')])],
   ],
 ])('parses %p', (input, output) => {
-  expect(parser(input)).toMatchObject(output);
+  expect(parse(input)).toMatchObject(output);
 });

packages/message-parser/tests/heading.test.ts

@@ -1,4 +1,4 @@
-import { parser } from '../src';
+import { parse } from '../src';
 import {
   heading,
   lineBreak,
@@ -54,5 +54,5 @@ test.each([
   ['# Hello\n', [heading([plain('Hello')], 1), lineBreak()]],
   ['# # Hello\n', [heading([plain('# Hello')], 1), lineBreak()]],
 ])('parses %p', (input, output) => {
-  expect(parser(input)).toMatchObject(output);
+  expect(parse(input)).toMatchObject(output);
 });

packages/message-parser/tests/image.test.ts

@@ -1,4 +1,4 @@
-import { parser } from '../src';
+import { parse } from '../src';
 import { image, paragraph, plain } from '../src/utils';
 
 test.each([
@@ -15,5 +15,5 @@ test.each([
     [paragraph([image('https://rocket.chat/assets/img/header/logo.svg')])],
   ],
 ])('parses %p', (input, output) => {
-  expect(parser(input)).toMatchObject(output);
+  expect(parse(input)).toMatchObject(output);
 });

packages/message-parser/tests/inlineCode.test.ts

@@ -1,4 +1,4 @@
-import { parser } from '../src';
+import { parse } from '../src';
 import { inlineCode, paragraph, plain } from '../src/utils';
 
 test.each([
@@ -8,5 +8,5 @@ test.each([
   ],
   [`\`code\``, [paragraph([inlineCode(plain('code'))])]],
 ])('parses %p', (input, output) => {
-  expect(parser(input)).toMatchObject(output);
+  expect(parse(input)).toMatchObject(output);
 });