Adding support for links!

plugins/talk-plugin-rich-text/package.json

@@ -8,6 +8,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "dompurify": "^1.0.3",
-    "jsdom": "^11.6.2"
+    "jsdom": "^11.6.2",
+    "linkifyjs": "^2.1.5"
   }
 }

plugins/talk-plugin-rich-text/server/config.js

@@ -1,4 +1,16 @@
 const config = {
+  // Highlight Links
+  highlightLinks: true,
+
+  // Linkify Settings
+  linkify: {
+    className: 'talk-plugin-rich-text-link',
+    tagName: 'a',
+    target: {
+      url: '_blank',
+    },
+  },
+
   // Super strict rules to make sure users only submit the tags they are allowed
   dompurify: { ALLOWED_TAGS: ['b', 'i', 'blockquote'] },
 

plugins/talk-plugin-rich-text/server/hooks.js

@@ -1,31 +1,40 @@
 const { merge, get } = require('lodash');
 const DOMPurify = require('./DOMPurify');
+const linkify = require('linkifyjs/html');
+const config = require('./config');
+
+const inputCleanup = ({ htmlBody }) => {
+  // htmlBody needs to be present in the request
+  if (!htmlBody) {
+    throw new Error('htmlBody not present in the request');
+  }
+
+  // Let's sanitize the body
+  let cleanInput = DOMPurify.sanitize(htmlBody);
+
+  // Highlighting links
+  if (config.highlightLinks) {
+    cleanInput = linkify(cleanInput, config.linkify);
+  }
+
+  return cleanInput;
+};
 
 module.exports = {
   RootMutation: {
     createComment: {
       async pre(_, { input }, _context, _info) {
-        // Let's sanitize the body
-        const dirtyInput = input.htmlBody;
-
-        const cleanInput = DOMPurify.sanitize(dirtyInput);
-
         // Adding the clean body to the comment.metadata field
         input.metadata = merge(get(input, 'metadata'), {
-          htmlBody: cleanInput,
+          htmlBody: inputCleanup(input),
         });
       },
     },
     editComment: {
       async pre(_, { edit }, _context, _info) {
-        // Let's sanitize the body
-        const dirtyInput = edit.htmlBody;
-
-        const cleanInput = DOMPurify.sanitize(dirtyInput);
-
-        // Adding the clean body to the comment.metadata field
+        // Adding the clean body to the coment.metadata field
         edit.metadata = merge(get(edit, 'metadata'), {
-          htmlBody: cleanInput,
+          htmlBody: inputCleanup(edit),
         });
       },
     },