Merge branch 'main' of https://github.com/tienifr/expensify-common in…

…to fix/38001
Expensify · Mar 26, 2024 · 6dfc6bd · 6dfc6bd
2 parents 33e646d + 4e020cf
commit 6dfc6bd
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 29 deletions.
diff --git a/__tests__/ExpensiMark-HTML-test.js b/__tests__/ExpensiMark-HTML-test.js
@@ -304,15 +304,29 @@ test('Test markdown replacement for emojis with emails', () => {
     + '[😄[email protected]]([email protected]) '
     + '[😄 [email protected] ]([email protected]) '
     const result = 'Do not replace the emoji with link '
-    + '[😄](<a href="mailto:[email protected]">[email protected]</a>) '
-    + '[😄]( <a href="mailto:[email protected]">[email protected]</a>) '
-    + '[😄] <a href="mailto:[email protected]">[email protected]</a> '
-    + '[😄]((<a href="mailto:[email protected]">[email protected]</a>)) '
-    + '[😄<a href="mailto:[email protected]">[email protected]</a>](<a href="mailto:[email protected]">[email protected]</a>) '
-    + '[😄 <a href="mailto:[email protected]">[email protected]</a> ](<a href="mailto:[email protected]">[email protected]</a>) '
+    + '[<emoji>😄</emoji>](<a href="mailto:[email protected]">[email protected]</a>) '
+    + '[<emoji>😄</emoji>]( <a href="mailto:[email protected]">[email protected]</a>) '
+    + '[<emoji>😄</emoji>] <a href="mailto:[email protected]">[email protected]</a> '
+    + '[<emoji>😄</emoji>]((<a href="mailto:[email protected]">[email protected]</a>)) '
+    + '[<emoji>😄</emoji><a href="mailto:[email protected]">[email protected]</a>](<a href="mailto:[email protected]">[email protected]</a>) '
+    + '[<emoji>😄</emoji> <a href="mailto:[email protected]">[email protected]</a> ](<a href="mailto:[email protected]">[email protected]</a>) '
     expect(parser.replace(testString)).toBe(result);
 });
 
+test('Test markdown replacement for composite emoji', () => {
+    const testString = 'Replace composite emoji with only one emoji tag '
+    + '😶‍🌫️ '
+    + '🧑‍🔧 '
+    + '👨‍🏫 '
+    + '👨🏾‍❤️‍👨🏽 '
+    const result = 'Replace composite emoji with only one emoji tag '
+    + '<emoji>😶‍🌫️</emoji> '
+    + '<emoji>🧑‍🔧</emoji> '
+    + '<emoji>👨‍🏫</emoji> '
+    + '<emoji>👨🏾‍❤️‍👨🏽</emoji> '
+    expect(parser.replace(testString)).toBe(result);
+})
+
 
 // Markdown style links replaced successfully
 test('Test markdown style links', () => {
@@ -1123,7 +1137,7 @@ test('Test for link with no content', () => {
 
 test('Test for link with emoji', () => {
     const testString = '[😀](www.link.com)';
-    const resultString = '[😀](<a href="https://www.link.com" target="_blank" rel="noreferrer noopener">www.link.com</a>)';
+    const resultString = '[<emoji>😀</emoji>](<a href="https://www.link.com" target="_blank" rel="noreferrer noopener">www.link.com</a>)';;
     expect(parser.replace(testString)).toBe(resultString);
 });
 test('Test quotes markdown replacement with heading inside', () => {

diff --git a/lib/CONST.d.ts b/lib/CONST.d.ts
@@ -289,6 +289,12 @@ export declare const CONST: {
          * Regex matching an text containing an Emoji
          */
         readonly EMOJIS: RegExp;
+        /**
+         * Regex matching an text containing an Emoji that can be a single emoji or made up by some different emojis
+         *
+         * @type RegExp
+         */
+        readonly EMOJI_RULE: RegExp;
     };
     readonly REPORT: {
         /**

diff --git a/lib/CONST.jsx b/lib/CONST.jsx
@@ -357,6 +357,12 @@ export const CONST = {
          * @type RegExp
          */
         EMOJIS: /[\p{Extended_Pictographic}\u200d\u{1f1e6}-\u{1f1ff}\u{1f3fb}-\u{1f3ff}\u{e0020}-\u{e007f}\u20E3\uFE0F]|[#*0-9]\uFE0F?\u20E3/gu,
+        /**
+         * Regex matching an text containing an Emoji that can be a single emoji or made up by some different emojis
+         *
+         * @type RegExp
+         */
+        EMOJI_RULE: /[\p{Extended_Pictographic}](\u200D[\p{Extended_Pictographic}]|[\u{1F3FB}-\u{1F3FF}]|[\u{E0020}-\u{E007F}]|\uFE0F|\u20E3)*|[\u{1F1E6}-\u{1F1FF}]{2}|[#*0-9]\uFE0F?\u20E3/gu,
     },
 
     REPORT: {

diff --git a/lib/ExpensiMark.js b/lib/ExpensiMark.js
@@ -18,8 +18,15 @@ export default class ExpensiMark {
          * @type {Object[]}
          */
         this.rules = [
+            // Apply the emoji first avoid applying any other formatting rules inside of it
+            {
+                name: 'emoji',
+                regex: CONST.REG_EXP.EMOJI_RULE,
+                replacement: match => `<emoji>${match}</emoji>`
+            },
+
             /**
-             * Apply the code-fence first so that we avoid replacing anything inside of it that we're not supposed to
+             * Apply the code-fence to avoid replacing anything inside of it that we're not supposed to
              * (aka any rule with the '(?![^<]*<\/pre>)' avoidance in it
              */
             {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "underscore": "1.13.6"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-env": "^7.24.0",
     "babel-jest": "^29.0.0",
     "babelify": "10.0.0",
     "eslint-config-expensify": "^2.0.16",