fix(emoji-text-wrapper): DLT-2176 invalid regular expression error (#544

)
dialpad · Oct 30, 2024 · 1ea0986 · 1ea0986
1 parent 967d3e5
commit 1ea0986
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 29 deletions.
diff --git a/packages/dialtone-vue2/common/emoji/index.js b/packages/dialtone-vue2/common/emoji/index.js
@@ -196,12 +196,3 @@ export function filterValidShortCodes (shortcodes) {
   const filtered = shortcodes ? shortcodes.filter(code => shortcodeToEmojiData(code)) : [];
   return new Set(filtered);
 }
-
-// Finds every emoji in slot text
-// removes duplicates
-// @returns {string[]}
-export function findEmojis (textContent) {
-  const matches = [...textContent.matchAll(emojiRegex)];
-  const emojis = matches.length ? matches.map(match => match[0]) : [];
-  return new Set(emojis);
-}
diff --git a/packages/dialtone-vue2/components/emoji_text_wrapper/emoji_text_wrapper.stories.js b/packages/dialtone-vue2/components/emoji_text_wrapper/emoji_text_wrapper.stories.js
@@ -56,7 +56,7 @@ export const Default = {
 
   args: {
     default:
-      'Some text with :invalid-emoji: :smile: :cry: and 😄, and custom emojis :octocat: :shipit:',
+      'Some text with :invalid-emoji: :smile: :cry: *️⃣ and 😄, and custom emojis :octocat: :shipit:',
   },
 };
 

diff --git a/packages/dialtone-vue2/components/emoji_text_wrapper/emoji_text_wrapper.vue b/packages/dialtone-vue2/components/emoji_text_wrapper/emoji_text_wrapper.vue
@@ -1,7 +1,8 @@
 <script>
 import { DtEmoji } from '../emoji';
-import { findEmojis, findShortCodes } from '@/common/emoji';
+import { findShortCodes } from '@/common/emoji';
 import { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';
+import { emojiPattern } from 'regex-combined-emojis';
 
 /**
  * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.
@@ -57,7 +58,10 @@ export default {
       return items
         .filter(item => item.trim() !== '')
         .map((item) => {
-          if (replaceList.includes(item)) {
+          // Reset the regexp index to 0 to start from the beginning
+          // Otherwise, it will start from the last index
+          regexp.lastIndex = 0;
+          if (replaceList.includes(item) || regexp.test(item)) {
             return this.$createElement(DtEmoji, {
               props: { code: item, size: this.size },
             });
@@ -93,9 +97,7 @@ export default {
      */
     searchCodes (textContent) {
       const shortcodes = findShortCodes(textContent);
-      const emojis = findEmojis(textContent);
-
-      const replaceList = [...shortcodes, ...emojis];
+      const replaceList = [...shortcodes, emojiPattern];
       return this.replaceDtEmojis(replaceList, textContent);
     },
   },

diff --git a/packages/dialtone-vue3/common/emoji/index.js b/packages/dialtone-vue3/common/emoji/index.js
@@ -196,12 +196,3 @@ export function filterValidShortCodes (shortcodes) {
   const filtered = shortcodes ? shortcodes.filter(code => shortcodeToEmojiData(code)) : [];
   return new Set(filtered);
 }
-
-// Finds every emoji in slot text
-// removes duplicates
-// @returns {string[]}
-export function findEmojis (textContent) {
-  const matches = [...textContent.matchAll(emojiRegex)];
-  const emojis = matches.length ? matches.map(match => match[0]) : [];
-  return new Set(emojis);
-}
diff --git a/packages/dialtone-vue3/components/emoji_text_wrapper/emoji_text_wrapper.stories.js b/packages/dialtone-vue3/components/emoji_text_wrapper/emoji_text_wrapper.stories.js
@@ -68,7 +68,7 @@ export const Default = {
 
   args: {
     default:
-      'Some text with :invalid-emoji: :smile: :cry: and 😄, and custom emojis :octocat: :shipit:',
+      'Some text with :invalid-emoji: :smile: :cry: *️⃣ and 😄, and custom emojis :octocat: :shipit:',
   },
 };
 

diff --git a/packages/dialtone-vue3/components/emoji_text_wrapper/emoji_text_wrapper.vue b/packages/dialtone-vue3/components/emoji_text_wrapper/emoji_text_wrapper.vue
@@ -1,8 +1,9 @@
 <script>
 import { DtEmoji } from '../emoji';
-import { findEmojis, findShortCodes } from '@/common/emoji';
+import { findShortCodes } from '@/common/emoji';
 import { h } from 'vue';
 import { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';
+import { emojiPattern } from 'regex-combined-emojis';
 
 /**
  * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.
@@ -58,7 +59,10 @@ export default {
       return items
         .filter(item => item.trim() !== '')
         .map((item) => {
-          if (replaceList.includes(item)) {
+          // Reset the regexp index to 0 to start from the beginning
+          // Otherwise, it will start from the last index
+          regexp.lastIndex = 0;
+          if (replaceList.includes(item) || regexp.test(item)) {
             return h(DtEmoji, { code: item, size: this.size });
           }
           return h('span', { class: 'd-emoji-text-wrapper__text' }, item);
@@ -91,9 +95,8 @@ export default {
      */
     searchCodes (textContent) {
       const shortcodes = findShortCodes(textContent);
-      const emojis = findEmojis(textContent);
 
-      const replaceList = [...shortcodes, ...emojis];
+      const replaceList = [...shortcodes, emojiPattern];
       if (replaceList.length === 0) return textContent;
       return this.replaceDtEmojis(replaceList, textContent);
     },
-Original file line number
+Diff line change
@@ Expand Up / @@ -56,7 +56,7 @@ export const Default = { @@
       args: {
         default:
-          'Some text with :invalid-emoji: :smile: :cry: and 😄, and custom emojis :octocat: :shipit:',
+          'Some text with :invalid-emoji: :smile: :cry: *️⃣ and 😄, and custom emojis :octocat: :shipit:',
       },
     };
@@ Expand Down @@