v10.5.0

Merge pull request #1906 from GetStream/develop

Author: arnautov-anton

docusaurus/docs/React/components/utility-components/channel-search.mdx

@@ -313,6 +313,8 @@ Custom UI component to display the search loading state. Rendered within the `Se
 
 Object containing filters/sort/options overrides for user / channel search.
 
+The `filters` attribute (`SearchQueryParams.userFilters.filters`) can be either `UserFilters` object describing the filter query or a function with a single argument of the search / filter (query) string. The function is then expected to derive and return the `UserFilters` from the provided query string.
+
 | Type                                    |
 |-----------------------------------------|
 | `SearchQueryParams<StreamChatGenerics>` |

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/components/ChannelSearch/hooks/useChannelSearch.ts

@@ -42,7 +42,9 @@ export type SearchQueryParams<
     sort?: ChannelSort<StreamChatGenerics>;
   };
   userFilters?: {
-    filters?: UserFilters<StreamChatGenerics>;
+    filters?:
+      | UserFilters<StreamChatGenerics>
+      | ((query: string) => UserFilters<StreamChatGenerics>);
     options?: UserOptions;
     sort?: UserSort<StreamChatGenerics>;
   };

src/components/MessageInput/hooks/useUserTrigger.ts

@@ -103,7 +103,9 @@ export const useUserTrigger = <
         {
           $or: [{ id: { $autocomplete: query } }, { name: { $autocomplete: query } }],
           id: { $ne: client.userID },
-          ...mentionQueryParams.filters,
+          ...(typeof mentionQueryParams.filters === 'function'
+            ? mentionQueryParams.filters(query)
+            : mentionQueryParams.filters),
         },
         Array.isArray(mentionQueryParams.sort)
           ? [{ id: 1 }, ...mentionQueryParams.sort]

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"