From 98b95cab86acc5e3427cc2706f2efb14dfb87483 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 12 Sep 2017 21:31:59 +0700
Subject: [PATCH] Reintroduce linkify

---
 .../src/components/CommentBodyHighlighter.js  | 27 +++++++++----------
 .../coral-admin/src/components/IfHasLink.js   |  4 +--
 client/coral-admin/src/services/linkify.js    |  8 ++++++
 client/coral-admin/src/utils/index.js         |  9 +++++++
 client/coral-admin/src/utils/regexp.js        |  1 -
 package.json                                  |  1 +
 yarn.lock                                     |  4 +++
 7 files changed, 36 insertions(+), 18 deletions(-)
 create mode 100644 client/coral-admin/src/services/linkify.js
 delete mode 100644 client/coral-admin/src/utils/regexp.js

diff --git a/client/coral-admin/src/components/CommentBodyHighlighter.js b/client/coral-admin/src/components/CommentBodyHighlighter.js
index f58859648..055d24822 100644
--- a/client/coral-admin/src/components/CommentBodyHighlighter.js
+++ b/client/coral-admin/src/components/CommentBodyHighlighter.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {linkRegexp} from '../utils/regexp';
+import {matchLinks} from '../utils';
 
 const wordSeperator = /([.\s'"?!])/;
 
@@ -25,21 +25,18 @@ function markWords(body, words, keyPrefix) {
 // markLinks looks for links inside `body` and highlights them by returning
 // an array of React Elements.
 function markLinks(body) {
-  const tokens = body.split(linkRegexp);
+  const matches = matchLinks(body);
   const content = [];
-  let tmp = [];
-  tokens
-    .filter((token) => token)
-    .forEach((token, i) => {
-      if (token.match(linkRegexp)) {
-        content.push(...tmp);
-        tmp = [];
-        content.push(<mark key={i}>{token}</mark>);
-        return;
-      }
-      tmp.push(token);
-    });
-  content.push(...tmp);
+  let index = 0;
+  if (matches) {
+    matches
+      .forEach((match, i) => {
+        content.push(body.substring(index, match.index));
+        content.push(<mark key={i}>{match.text}</mark>);
+        index = match.lastIndex;
+      });
+  }
+  content.push(body.substring(index));
   return content;
 }
 
diff --git a/client/coral-admin/src/components/IfHasLink.js b/client/coral-admin/src/components/IfHasLink.js
index e6a96503d..73b335815 100644
--- a/client/coral-admin/src/components/IfHasLink.js
+++ b/client/coral-admin/src/components/IfHasLink.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import {linkRegexp} from '../utils/regexp';
+import {matchLinks} from '../utils';
 
 export default ({text, children}) => {
-  const hasLinks = text.match(linkRegexp);
+  const hasLinks = !!matchLinks(text);
 
   if (!hasLinks) {
     return null;
diff --git a/client/coral-admin/src/services/linkify.js b/client/coral-admin/src/services/linkify.js
new file mode 100644
index 000000000..c51d7261b
--- /dev/null
+++ b/client/coral-admin/src/services/linkify.js
@@ -0,0 +1,8 @@
+import LinkifyIt from 'linkify-it';
+import tlds from 'tlds';
+
+export function createLinkify() {
+  const linkify = new LinkifyIt();
+  linkify.tlds(tlds);
+  return linkify;
+}
diff --git a/client/coral-admin/src/utils/index.js b/client/coral-admin/src/utils/index.js
index db3fb132d..f78a7b631 100644
--- a/client/coral-admin/src/utils/index.js
+++ b/client/coral-admin/src/utils/index.js
@@ -1,3 +1,12 @@
+import LinkifyIt from 'linkify-it';
+import tlds from 'tlds';
+const linkify = new LinkifyIt();
+linkify.tlds(tlds);
+
+export function matchLinks(text) {
+  return linkify.match(text);
+}
+
 export const isPremod = (mod) => mod === 'PRE';
 
 export const getModPath = (type = 'all', assetId) =>
diff --git a/client/coral-admin/src/utils/regexp.js b/client/coral-admin/src/utils/regexp.js
deleted file mode 100644
index 1544824dc..000000000
--- a/client/coral-admin/src/utils/regexp.js
+++ /dev/null
@@ -1 +0,0 @@
-export const linkRegexp = /([-a-zA-Z0-9@:%_+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_+.~#?&//=]*)?)/;
diff --git a/package.json b/package.json
index 99939b46d..dc81e26a0 100644
--- a/package.json
+++ b/package.json
@@ -175,6 +175,7 @@
     "subscriptions-transport-ws": "^0.7.2",
     "timeago.js": "^2.0.3",
     "timekeeper": "^1.0.0",
+    "tlds": "^1.196.0",
     "url-loader": "^0.5.9",
     "url-search-params": "^0.9.0",
     "uuid": "^3.1.0",
diff --git a/yarn.lock b/yarn.lock
index 1fd1f5711..12a275e76 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7431,6 +7431,10 @@ title-case-minors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/title-case-minors/-/title-case-minors-1.0.0.tgz#51f17037c294747a1d1cda424b5004c86d8eb115"
 
+tlds@^1.196.0:
+  version "1.196.0"
+  resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.196.0.tgz#49d74ddbd1f9df30238b3bfef4df82862b5bbb48"
+
 tmp@^0.0.31:
   version "0.0.31"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.31.tgz#8f38ab9438e17315e5dbd8b3657e8bfb277ae4a7"