Use linkifyjs to add hyperlinks.

Closes #2770
Closes #2634

package.json

@@ -18,6 +18,8 @@
         "dompurify": "3.0.5",
         "hotkeys-js": "3.12.0",
         "javascript-time-ago": "2.5.9",
+        "linkify-html": "4.1.1",
+        "linkifyjs": "4.1.1",
         "mux.js": "6.3.0",
         "qrcode": "^1.5.3",
         "shaka-player": "4.3.8",

pnpm-lock.yaml

@@ -29,6 +29,12 @@ dependencies:
   javascript-time-ago:
     specifier: 2.5.9
     version: 2.5.9
+  linkify-html:
+    specifier: 4.1.1
+    version: 4.1.1(linkifyjs@4.1.1)
+  linkifyjs:
+    specifier: 4.1.1
+    version: 4.1.1
   mux.js:
     specifier: 6.3.0
     version: 6.3.0
@@ -3801,6 +3807,18 @@ packages:
       lightningcss-win32-x64-msvc: 1.21.5
     dev: true
 
+  /linkify-html@4.1.1(linkifyjs@4.1.1):
+    resolution: {integrity: sha512-7RcF7gIhEOGBBvs7orCJ2tevaz7iF0ZLZSRPWNNBOnW/uGjOOQYB+ztSeHF6dchMC2dM9H8zZlt6Z959bjteaw==}
+    peerDependencies:
+      linkifyjs: ^4.0.0
+    dependencies:
+      linkifyjs: 4.1.1
+    dev: false
+
+  /linkifyjs@4.1.1:
+    resolution: {integrity: sha512-zFN/CTVmbcVef+WaDXT63dNzzkfRBKT1j464NJQkV7iSgJU0sLBus9W0HBwnXK13/hf168pbrx/V/bjEHOXNHA==}
+    dev: false
+
   /local-pkg@0.4.3:
     resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
     engines: {node: '>=14'}

src/utils/HtmlUtils.js

@@ -4,22 +4,10 @@ export const purifyHTML = html => {
     return DOMPurify.sanitize(html);
 };
 
-export const urlify = string => {
+import linkifyHtml from "linkify-html";
-    if (!string) return "";
-    const urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
-    const emailRegex = /([\w-\\.]+@(?:[\w-]+\.)+[\w-]{2,4})/g;
-    return string
-        .replace(urlRegex, url => {
-            if (url.endsWith("</a>") || url.endsWith("<a")) return url;
-            return `<a href="${url}" target="_blank">${url}</a>`;
-        })
-        .replace(emailRegex, email => {
-            return `<a href="mailto:${email}">${email}</a>`;
-        });
-};
 
 export const rewriteDescription = text => {
-    return urlify(text)
+    return linkifyHtml(text)
         .replaceAll(/(?:http(?:s)?:\/\/)?(?:www\.)?youtube\.com(\/[/a-zA-Z0-9_?=&-]*)/gm, "$1")
         .replaceAll(/(?:http(?:s)?:\/\/)?(?:www\.)?youtu\.be\/(?:watch\?v=)?([/a-zA-Z0-9_?=&-]*)/gm, "/watch?v=$1")
         .replaceAll("\n", "<br>");