turn plain URLs in text into external links

src/helpers.js

@@ -0,0 +1,31 @@
+// from marked https://github.com/markedjs/marked/blob/master/src/helpers.ts
+
+const other = {
+  escapeTest: /[&<>"']/,
+  escapeReplace: /[&<>"']/g,
+  escapeTestNoEncode: /[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/,
+  escapeReplaceNoEncode: /[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/g,
+}
+
+export function escape(html, encode) {
+  if (encode) {
+    if (other.escapeTest.test(html)) {
+      return html.replace(other.escapeReplace, getEscapeReplacement)
+    }
+  } else {
+    if (other.escapeTestNoEncode.test(html)) {
+      return html.replace(other.escapeReplaceNoEncode, getEscapeReplacement)
+    }
+  }
+
+  return html
+}
+
+export function cleanUrl(href) {
+  try {
+    href = encodeURI(href).replace(other.percentDecode, '%')
+  } catch {
+    return null
+  }
+  return href
+}

src/markdown.js

@@ -7,6 +7,7 @@
 
 import { marked } from 'marked'
 import DOMPurify from 'isomorphic-dompurify'
+import { escape, cleanUrl } from './helpers.js'
 
 let dataLine = 0
 
@@ -19,6 +20,21 @@ renderer.heading = ({ tokens, depth }) => {
   return '<h3>' + text + '</h3>'
 }
 
+renderer.link = ({ href, title, tokens }) => {
+  const text = renderer.parser.parseInline(tokens)
+  const cleanHref = cleanUrl(href)
+  if (cleanHref === null) {
+    return text
+  }
+  href = cleanHref
+  let out = `<a class="external" target="_blank" href="${href}"`
+  if (title) {
+    out += ` title="${escape(title)}"`
+  }
+  out += ` rel="noopener">${text} <img src="/images/external-link-ltr-icon.png"></a>`
+  return out
+}
+
 // modify listitem renderer, so we can know which checkbox has been clicked
 renderer.listitem = item => {
   let text = renderer.parser.parse(item.tokens, !!item.loose)
@@ -49,7 +65,7 @@ const markedOptions = {
 
 const expand = text => {
   dataLine = 0
-  return DOMPurify.sanitize(marked.parse(text, markedOptions))
+  return DOMPurify.sanitize(marked.parse(text, markedOptions), { ADD_ATTR: ['target'] })
 }
 
 const emit = ($item, item) => {