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@:%_+.~#?&//=]*)?)/;