fix(renderText): specify linkifyjs types to look for (email and url) (#1902)

* chore(deps): upgrade linkifyjs to v4.1.0

* fix(renderText): specify linkifyjs types to look for (email and url)

Author: arnautov-anton

package.json

@@ -38,7 +38,7 @@
     "hast-util-find-and-replace": "^4.1.2",
     "i18next": "^21.6.14",
     "isomorphic-ws": "^4.0.1",
-    "linkifyjs": "^2.1.9",
+    "linkifyjs": "^4.1.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "lodash.uniqby": "^4.7.0",

src/utils.tsx

@@ -1,6 +1,6 @@
 import React, { ComponentProps, ComponentType } from 'react';
 import emojiRegex from 'emoji-regex';
-import * as linkify from 'linkifyjs';
+import { find } from 'linkifyjs';
 import { nanoid } from 'nanoid';
 import { findAndReplace, ReplaceFunction } from 'hast-util-find-and-replace';
 import ReactMarkdown, { Options, uriTransformer } from 'react-markdown';
@@ -239,52 +239,54 @@ export const renderText = <
   const codeBlocks = messageCodeBlocks(newText);
 
   // extract all valid links/emails within text and replace it with proper markup
-  uniqBy(linkify.find(newText), 'value').forEach(({ href, type, value }) => {
-    const linkIsInBlock = codeBlocks.some((block) => block?.includes(value));
-
-    // check if message is already  markdown
-    const noParsingNeeded =
-      markdownLinks &&
-      markdownLinks.filter((text) => {
-        const strippedHref = href?.replace(detectHttp, '');
-        const strippedText = text?.replace(detectHttp, '');
-
-        if (!strippedHref || !strippedText) return false;
-
-        return strippedHref.includes(strippedText) || strippedText.includes(strippedHref);
-      });
-
-    if (noParsingNeeded.length > 0 || linkIsInBlock) return;
-
-    try {
-      // special case for mentions:
-      // it could happen that a user's name matches with an e-mail format pattern.
-      // in that case, we check whether the found e-mail is actually a mention
-      // by naively checking for an existence of @ sign in front of it.
-      if (type === 'email' && mentionedUsers) {
-        const emailMatchesWithName = mentionedUsers.some((u) => u.name === value);
-        if (emailMatchesWithName) {
-          newText = newText.replace(new RegExp(escapeRegExp(value), 'g'), (match, position) => {
-            const isMention = newText.charAt(position - 1) === '@';
-            // in case of mention, we leave the match in its original form,
-            // and we let `mentionsMarkdownPlugin` to do its job
-            return isMention ? match : `[${match}](${encodeDecode(href)})`;
-          });
-
-          return;
+  uniqBy([...find(newText, 'email'), ...find(newText, 'url')], 'value').forEach(
+    ({ href, type, value }) => {
+      const linkIsInBlock = codeBlocks.some((block) => block?.includes(value));
+
+      // check if message is already  markdown
+      const noParsingNeeded =
+        markdownLinks &&
+        markdownLinks.filter((text) => {
+          const strippedHref = href?.replace(detectHttp, '');
+          const strippedText = text?.replace(detectHttp, '');
+
+          if (!strippedHref || !strippedText) return false;
+
+          return strippedHref.includes(strippedText) || strippedText.includes(strippedHref);
+        });
+
+      if (noParsingNeeded.length > 0 || linkIsInBlock) return;
+
+      try {
+        // special case for mentions:
+        // it could happen that a user's name matches with an e-mail format pattern.
+        // in that case, we check whether the found e-mail is actually a mention
+        // by naively checking for an existence of @ sign in front of it.
+        if (type === 'email' && mentionedUsers) {
+          const emailMatchesWithName = mentionedUsers.some((u) => u.name === value);
+          if (emailMatchesWithName) {
+            newText = newText.replace(new RegExp(escapeRegExp(value), 'g'), (match, position) => {
+              const isMention = newText.charAt(position - 1) === '@';
+              // in case of mention, we leave the match in its original form,
+              // and we let `mentionsMarkdownPlugin` to do its job
+              return isMention ? match : `[${match}](${encodeDecode(href)})`;
+            });
+
+            return;
+          }
         }
-      }
 
-      const displayLink = type === 'email' ? value : formatUrlForDisplay(href);
+        const displayLink = type === 'email' ? value : formatUrlForDisplay(href);
 
-      newText = newText.replace(
-        new RegExp(escapeRegExp(value), 'g'),
-        `[${displayLink}](${encodeDecode(href)})`,
-      );
-    } catch (e) {
-      void e;
-    }
-  });
+        newText = newText.replace(
+          new RegExp(escapeRegExp(value), 'g'),
+          `[${displayLink}](${encodeDecode(href)})`,
+        );
+      } catch (e) {
+        void e;
+      }
+    },
+  );
 
   const rehypePlugins = [emojiMarkdownPlugin];
 

yarn.lock

@@ -10235,6 +10235,11 @@ linkifyjs@^2.1.9:
   resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-2.1.9.tgz#af06e45a2866ff06c4766582590d098a4d584702"
   integrity sha512-74ivurkK6WHvHFozVaGtQWV38FzBwSTGNmJolEgFp7QgR2bl6ArUWlvT4GcHKbPe1z3nWYi+VUdDZk16zDOVug==
 
+linkifyjs@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.1.0.tgz#0460bfcc37d3348fa80e078d92e7bbc82588db15"
+  integrity sha512-Ffv8VoY3+ixI1b3aZ3O+jM6x17cOsgwfB1Wq7pkytbo1WlyRp6ZO0YDMqiWT/gQPY/CmtiGuKfzDIVqxh1aCTA==
+
 load-json-file@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"