Enhance the account note and make sure links open in new window

src/components/account.jsx

@@ -2,6 +2,7 @@ import './account.css';
 
 import { useEffect, useState } from 'preact/hooks';
 
+import enhanceContent from '../utils/enhance-content';
 import shortenNumber from '../utils/shorten-number';
 import store from '../utils/store';
 
@@ -122,7 +123,12 @@ export default ({ account }) => {
             <Avatar url={avatar} size="xxl" />
             <NameText account={info} showAcct external />
           </header>
-          <div class="note" dangerouslySetInnerHTML={{ __html: note }} />
+          <div
+            class="note"
+            dangerouslySetInnerHTML={{
+              __html: enhanceContent(note, { emojis }),
+            }}
+          />
           <p class="stats">
             <span>
               <b title={statusesCount}>{shortenNumber(statusesCount)}</b> Posts

src/utils/enhance-content.js

@@ -1,16 +1,24 @@
 import emojifyText from './emojify-text';
 
-export default (content, { emojis }) => {
+export default (content, opts = {}) => {
-  // 1. Emojis
+  const { emojis } = opts;
   let enhancedContent = content;
+  const dom = document.createElement('div');
+  dom.innerHTML = enhancedContent;
 
+  // 1. Emojis
   if (emojis) {
     enhancedContent = emojifyText(enhancedContent, emojis);
   }
 
-  // 2. Code blocks
+  // 2. Add target="_blank" to all links with no target="_blank"
-  const dom = document.createElement('div');
+  // E.g. `note` in `account`
-  dom.innerHTML = enhancedContent;
+  const links = Array.from(dom.querySelectorAll('a:not([target="_blank"])'));
+  links.forEach((link) => {
+    link.setAttribute('target', '_blank');
+  });
+
+  // 3. Code blocks
   // Check for <p> with markdown-like content "```"
   const blocks = Array.from(dom.querySelectorAll('p')).filter((p) =>
     /^```[^]+```$/g.test(p.innerText.trim()),
@@ -28,7 +36,7 @@ export default (content, { emojis }) => {
     pre.appendChild(code);
     block.replaceWith(pre);
   });
-  enhancedContent = dom.innerHTML;
 
+  enhancedContent = dom.innerHTML;
   return enhancedContent;
 };