Merge pull request #569 from Tucchhaa/add_linkifyjs

Use linkifyjs for better url extraction lgic
cofacts · Apr 14, 2024 · b8d64a7 · b8d64a7
2 parents 098ec82 + 9f2dd8c
commit b8d64a7
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 17 deletions.
diff --git a/lib/__tests__/__snapshots__/text.tsx.snap b/lib/__tests__/__snapshots__/text.tsx.snap
@@ -9,7 +9,6 @@ Array [
     >
       http://google.com
     </a>,
-    "",
   ],
   <span>
     Please go to 
@@ -18,7 +17,6 @@ Array [
     >
       http://google.com
     </a>
-    
   </span>,
 ]
 `;
@@ -27,13 +25,11 @@ exports[`text linkify attach link on nested elements containing links 1`] = `
 <span>
   Please go to 
   <span>
-    
     <a
       href="http://google.com"
     >
       http://google.com
     </a>
-    
   </span>
    lalala
 </span>
@@ -47,7 +43,6 @@ exports[`text linkify attach link on simple elements containing links 1`] = `
   >
     http://google.com
   </a>
-  
 </span>
 `;
 
@@ -59,7 +54,6 @@ Array [
   >
     http://google.com
   </a>,
-  "",
 ]
 `;
 
@@ -71,7 +65,6 @@ Array [
   >
     http://www.rumtoast.com/5444/line群組行動條碼邀請-一定要關掉，不然駭客會入侵
   </a>,
-  "",
 ]
 `;
 
@@ -90,7 +83,58 @@ Array [
       駭客會入侵
     </React.Fragment>
   </a>,
-  "",
+]
+`;
+
+exports[`text linkify parses half-width brackets correctly 1`] = `
+Array [
+  <a
+    href="http://foo.com/blah_(a)_(b)"
+    target="_blank"
+  >
+    http://foo.com/blah_(a)_(b)
+  </a>,
+  " (",
+  <a
+    href="http://foo.com/blah_(a)_(b)"
+    target="_blank"
+  >
+    http://foo.com/blah_(a)_(b)
+  </a>,
+  ") ",
+  <a
+    href="http://foo.com/blah_(a)_(b)"
+    target="_blank"
+  >
+    http://foo.com/blah_(a)_(b)
+  </a>,
+  ")",
+]
+`;
+
+exports[`text linkify parses full-width brackets correctly 1`] = `
+Array [
+  <a
+    href="http://foo.com/blah_（a）_（b）"
+    target="_blank"
+  >
+    http://foo.com/blah_（a）_（b）
+  </a>,
+  " （",
+  <a
+    href="http://foo.com/blah_(a)_(b)"
+    target="_blank"
+  >
+    http://foo.com/blah_(a)_(b)
+  </a>,
+  "） ",
+  <a
+    href="http://foo.com/blah_(a)_(b)"
+    target="_blank"
+  >
+    http://foo.com/blah_(a)_(b)
+  </a>,
+  "）",
 ]
 `;
 
@@ -103,7 +147,6 @@ Array [
   >
     http://google.com
   </a>,
-  "",
 ]
 `;
 

diff --git a/lib/__tests__/text.tsx b/lib/__tests__/text.tsx
@@ -73,6 +73,28 @@ describe('text', () => {
         })
       ).toMatchSnapshot();
     });
+
+    it('parses half-width brackets correctly', () => {
+      expect(
+        linkify(
+          'http://foo.com/blah_(a)_(b) (http://foo.com/blah_(a)_(b)) http://foo.com/blah_(a)_(b))',
+          {
+            props: { target: '_blank' },
+          }
+        )
+      ).toMatchSnapshot();
+    });
+
+    it('parses full-width brackets correctly', () => {
+      expect(
+        linkify(
+          'http://foo.com/blah_（a）_（b） （http://foo.com/blah_(a)_(b)） http://foo.com/blah_(a)_(b)）',
+          {
+            props: { target: '_blank' },
+          }
+        )
+      ).toMatchSnapshot();
+    });
   });
 
   describe('nl2br', () => {

diff --git a/lib/text.tsx b/lib/text.tsx
@@ -2,6 +2,7 @@ import React, { CSSProperties } from 'react';
 import { gql } from 'graphql-tag';
 import { withStyles, WithStyles, createStyles } from '@material-ui/core/styles';
 import { HighlightFieldsFragment } from 'typegen/graphql';
+import { tokenize } from 'linkifyjs';
 
 const BREAK = { $$BREAK: true } as const;
 
@@ -105,12 +106,10 @@ function shortenUrl(s: string, maxLength: number) {
 
 function flatternPureStrings(tokens: React.ReactChild[]) {
   return tokens.every(token => typeof token === 'string')
-    ? tokens.join()
+    ? tokens.join('')
     : tokens;
 }
 
-const urlRegExp = /(https?:\/\/\S+)/;
-
 /**
  * Wrap <a> around hyperlinks inside a react element or string.
  *
@@ -127,13 +126,13 @@ export function linkify(
   return traverseForStrings(elem, str => {
     if (!str) return str;
 
-    const tokenized = str.split(urlRegExp).map((s, i) =>
-      s.match(urlRegExp) ? (
-        <a key={`link${i}`} href={s} {...props}>
-          {shortenUrl(s, maxLength)}
+    const tokenized = tokenize(str).map((token, i) =>
+      token.isLink ? (
+        <a key={`link${i}`} href={token.v} {...props}>
+          {shortenUrl(token.v, maxLength)}
         </a>
       ) : (
-        s
+        token.toString()
       )
     );
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
     "isomorphic-unfetch": "^3.0.0",
     "js-cookie": "^3.0.1",
     "json-url": "^2.6.0",
+    "linkifyjs": "^4.1.3",
     "lodash": "^4.17.19",
     "marked": "^4.1.1",
     "next": "^9.3.2",