Reintroduce linkify

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;
 }
 

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;

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;
+}

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) =>

client/coral-admin/src/utils/regexp.js

@@ -1 +0,0 @@
-export const linkRegexp = /([-a-zA-Z0-9@:%_+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_+.~#?&//=]*)?)/;

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",

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"