stream-chat-react-native-core 5.9.1 → 5.10.0-beta.2

package/src/components/Message/MessageSimple/utils/parseLinks.test.ts

@@ -2,55 +2,52 @@ import { parseLinksFromText } from './parseLinks';
 
 describe('parseLinksFromText', () => {
   it.each([
-    ['www.getstream.io', 'www.getstream.io'],
-    ['getstream.io', 'getstream.io'],
-    ['scrn://team-chat', 'team-chat'],
-    ['https://localhost', 'localhost'],
+    ['https://www.getstream.io', 'https://www.getstream.io'],
+    ['https://getstream.io', 'https://getstream.io'],
+    ['scrn://team-chat', undefined],
+    ['https://localhost', 'https://localhost'],
     [
       'https://localhost/with/path?and=query&multiple=params',
-      'localhost/with/path?and=query&multiple=params',
+      'https://localhost/with/path?and=query&multiple=params',
+    ],
+    [
+      'https://localhost/with/path?and=query#fragment',
+      'https://localhost/with/path?and=query#fragment',
     ],
-    ['https://localhost/with/path?and=query#fragment', 'localhost/with/path?and=query#fragment'],
-    ['reactnative.stream', 'reactnative.stream'],
+    ['reactnative.stream', undefined],
     [
       'https://zh.wikipedia.org/wiki/挪威牛油危機',
-      'zh.wikipedia.org/wiki/%E6%8C%AA%E5%A8%81%E7%89%9B%E6%B2%B9%E5%8D%B1%E6%A9%9F',
+      'https://zh.wikipedia.org/wiki/%E6%8C%AA%E5%A8%81%E7%89%9B%E6%B2%B9%E5%8D%B1%E6%A9%9F',
     ],
     [
       'https://getstream.io/chat/docs/react-native/?language=javascript',
-      'getstream.io/chat/docs/react-native/?language=javascript',
+      'https://getstream.io/chat/docs/react-native/?language=javascript',
     ],
-    ['127.0.0.1/local_(development)_server', '127.0.0.1/local_(development)_server'],
-    ['https://a.co:8999/ab.php?p=12', 'a.co:8999/ab.php?p=12'],
+    ['127.0.0.1/local_(development)_server', undefined],
+    ['https://a.co:8999/ab.php?p=12', 'https://a.co:8999/ab.php?p=12'],
     [
-      'http://help.apple.com/xcode/mac/current/#/devba7f53ad4',
-      'help.apple.com/xcode/mac/current/#/devba7f53ad4',
+      'https://help.apple.com/xcode/mac/current/#/devba7f53ad4',
+      'https://help.apple.com/xcode/mac/current/#/devba7f53ad4',
     ],
   ])('Returns the encoded value of %p as %p', (link, expected) => {
     const result = parseLinksFromText(link);
-
-    expect(result[0].encoded).toBe(expected);
+    expect(result[0]?.encodedUrl).toBe(expected);
   });
-
   it('parses fqdn', () => {
     const input = `We have put the apim bol,
-temporarily so :sj: we can later put the monitors on my grasp
-on reality right now is
-https://www.contrived-example.com:8080/sub/page.php?p1=1🇳🇴&p2=2#fragment-identifier
-:)`;
-
+  temporarily so :sj: we can later put the monitors on my grasp
+  on reality right now is
+  https://www.contrived-example.com:8080/sub/page.php?p1=1🇳🇴&p2=2#fragment-identifier
+  :)`;
     const result = parseLinksFromText(input);
-
     expect(result).toEqual([
       {
-        encoded:
-          'www.contrived-example.com:8080/sub/page.php?p1=1%F0%9F%87%B3%F0%9F%87%B4&p2=2#fragment-identifier',
+        encodedUrl:
+          'https://www.contrived-example.com:8080/sub/page.php?p1=1%F0%9F%87%B3%F0%9F%87%B4&p2=2#fragment-identifier',
         raw: 'https://www.contrived-example.com:8080/sub/page.php?p1=1🇳🇴&p2=2#fragment-identifier',
-        scheme: 'https://',
       },
     ]);
   });
-
   it.each([
     ['support+rn@getstream.io'],
     ['support.rn@getstream.io'],
@@ -58,60 +55,61 @@ https://www.contrived-example.com:8080/sub/page.php?p1=1🇳🇴&p2=2#fragment-i
     ['support_rn@getstream.io'],
   ])('Can parse the email address %p', (email) => {
     const result = parseLinksFromText(email);
-
-    expect(result[0].encoded).toBe(email);
-    expect(result[0].scheme).toBe('mailto:');
+    expect(result[0].encodedUrl).toBe('mailto:' + email);
+    expect(result[0].raw).toBe(email);
   });
-
   it("doesn't double the mailto prefix", () => {
     const input = 'mailto:support@getstream.io';
-
     const result = parseLinksFromText(input);
-
     expect(result[0]).toEqual({
-      encoded: 'support@getstream.io',
+      encodedUrl: input,
       raw: input,
-      scheme: 'mailto:',
     });
   });
-
   it('Does not falsely parse LINKs from text content', () => {
     const input = `#This string exists to test that we don't produce false positives
-
-Existing links:
-[already a parsed link](https://getstream.io/blog/react-native-how-to-build-bidirectional-infinite-scroll/)
-[even a bogus one]( should not match )
-
-## These should, however, be parsed:
-www.getstream.io
-getstream.io
-`;
+  Existing links:
+  [already a parsed link](https://getstream.io/blog/react-native-how-to-build-bidirectional-infinite-scroll/)
+  [even a bogus one]( should not match )
+  ## These should, however, be parsed:
+  www.getstream.io
+  getstream.io
+  `;
     const result = parseLinksFromText(input);
-
+    console.log({ result });
     expect(result).toHaveLength(2);
   });
-
   it('Encodes incomplete emoji unicode', () => {
     const input = 'https://getstream.io/�';
     const result = parseLinksFromText(input);
-
     expect(result[0]).toEqual({
-      encoded: 'getstream.io/%EF%BF%BD',
-      raw: 'https://getstream.io/�',
-      scheme: 'https://',
+      encodedUrl: 'https://getstream.io/%EF%BF%BD',
+      raw: input,
     });
   });
-
+  it('doest not report invalid tlds as urls', () => {
+    const input = `
+    %
+    % Not links
+    %
+    example.invalid
+    example.invalid/
+    http://.example.com
+    http://-example.com
+    hppt://example.com
+    example.coma
+    -example.coma
+        `;
+    const result = parseLinksFromText(input);
+    expect(result).toHaveLength(0);
+  });
   it('does not parse a decimal number as a URL', () => {
     const input = '123.456';
     const result = parseLinksFromText(input);
-
     expect(result).toHaveLength(0);
   });
-
   it.each([['@user'], ['@user.name']])('does not parse %p as a URL', (input) => {
     const result = parseLinksFromText(input);
-
     expect(result).toHaveLength(0);
   });
 });

package/src/components/Message/MessageSimple/utils/parseLinks.ts

@@ -1,40 +1,8 @@
-/**
- * 📣 Note: Do not use named capture groups, as
- *          it is not yet available in Hermes.
- *
- * These helpers indend to make it easier to skim read
- * the patterns below, but note that some are optional,
- * specified in the patterns these are added to.
- * */
-const emailUserName = '[\\w+\\.~$_-]+';
-const schema = `(\\w{2,15}:\\/\\/)`;
-// something.tld OR 123.123.123.123
-const domain = `((?:\\w+\\.[a-zA-Z]+)+(?:[^:\\/\\s]+)|(?:\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}))`;
-const port = `(:[0-9]{1,5})`;
-const path = `((?:\\/)?[^?\\s]+)`;
-const queryString = `(\\?[^#\\s]+)`;
-const fragment = `(#[\\w_-]+)`;
-
-/**
- * Match any email address, with and without `mailto:`
- */
-const emailPattern = `(mailto:)?((?:${emailUserName})@(?:${domain}))`;
-
-/**
- * Match any string starting with something that seems like it's a schema.
- * */
-const schemePrefixedLinkPattern = `${schema}(\\S+)`;
+import Linkify from 'linkify-it';
 
-/**
- * Match as much as possible of a fqdn, at least with a domain name formed as
- * something.tld
- */
-const fqdnLinkPattern = `${schema}?${domain}${port}?${path}?${queryString}?${fragment}?`;
-
-interface Link {
-  encoded: string;
+interface LinkInfo {
+  encodedUrl: string;
   raw: string;
-  scheme: string;
 }
 
 /**
@@ -49,57 +17,19 @@ const removeMarkdownLinksFromText = (input: string) => input.replace(/\[[\w\s]+\
  * */
 const removeUserNamesFromText = (input: string) => input.replace(/^@\w+\.?\w/, '');
 
-export const parseLinksFromText = (input: string): Link[] => {
-  let matches;
-
+export const parseLinksFromText = (input: string): LinkInfo[] => {
   const strippedInput = [removeMarkdownLinksFromText, removeUserNamesFromText].reduce(
     (acc, fn) => fn(acc),
     input,
   );
 
-  const results: Link[] = [];
-
-  const emailRegExp = new RegExp(emailPattern, 'gi');
-  while ((matches = emailRegExp.exec(input)) !== null) {
-    const [raw, scheme = 'mailto:', displayValue] = matches;
-    results.push({ encoded: encodeURI(displayValue), raw, scheme });
-  }
-
-  /**
-   * The two link patterns are checked with an "or" (`|`)
-   * to avoid overlapping matches being duplicated in the output.
-   * */
-  const linkRegex = new RegExp(`${fqdnLinkPattern}|${schemePrefixedLinkPattern}`, 'gi');
-  while ((matches = linkRegex.exec(strippedInput)) !== null) {
-    const [
-      raw,
-      fqdnScheme = '',
-      fqdnDomainName = '',
-      fqdnPort = '',
-      fqdnPath = '',
-      fqdnQueryStraing = '',
-      fqdnFragment = '',
-      schemePrefixedScheme = '',
-      schemePrefixedPath = '',
-    ] = matches;
-
-    if (schemePrefixedScheme !== '') {
-      results.push({
-        encoded: encodeURI(schemePrefixedPath),
-        raw,
-        scheme: schemePrefixedScheme,
-      });
-      continue;
-    }
+  const linkify = Linkify();
+  const matches = linkify.match(strippedInput) ?? [];
 
-    results.push({
-      encoded: encodeURI(
-        [fqdnDomainName, fqdnPort, fqdnPath, fqdnQueryStraing, fqdnFragment].join(''),
-      ),
-      raw,
-      scheme: fqdnScheme,
-    });
-  }
+  const result: LinkInfo[] = matches.map((match) => {
+    const { raw, url } = match;
+    return { encodedUrl: encodeURI(url), raw };
+  });
 
-  return results;
+  return result;
 };

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -109,15 +109,15 @@ export const renderText = <
   if (!text) return null;
 
   let newText = text.trim();
-  const urls = parseLinksFromText(newText);
+  const linkInfos = parseLinksFromText(newText);
 
-  for (const urlInfo of urls) {
-    const displayLink = truncate(urlInfo.encoded, {
+  for (const linkInfo of linkInfos) {
+    const displayLink = truncate(linkInfo.raw, {
       length: 200,
       omission: '...',
     });
-    const markdown = `[${displayLink}](${urlInfo.scheme}${urlInfo.encoded})`;
-    newText = newText.replace(urlInfo.raw, markdown);
+    const markdown = `[${displayLink}](${linkInfo.encodedUrl})`;
+    newText = newText.replace(linkInfo.raw, markdown);
   }
 
   newText = newText.replace(/[<&"'>]/g, '\\$&');

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.9.1"
+  "version": "5.10.0-beta.2"
 }