From ef87bb0719579d55a692992e1843f20e57f209d6 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Mon, 21 Apr 2025 22:00:09 -0400
Subject: Add the following attributes to all markdown-generated links:

* `target="_blank"`: when Pilcrow is running in a browser, clicking a link should not replace Pilcrow with the target of the link. Pilcrow is "app-like" enough that opening links in a new tab _by default_, without user intervention, is likely more appropriate.

* `rel="noreferrer"`, which (A) stops most UAs from setting a referrer header when following those links, and (B) also implies `noopener`, preventing the link target from using `window.opener` from reaching back into Pilcrow's DOM.

I briefly experimented with DOMPurify's `RETURN_DOM_FRAGMENT` mode, which would have made the tests somewhat easier to write, but I wasn't able to find a good way to integrate the returned `DocumentFragment` objects with Svelte components, so HTML-as-strings it is. Sigh.
---
 ui/lib/markdown.test.js | 55 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 ui/lib/markdown.test.js

(limited to 'ui/lib/markdown.test.js')

diff --git a/ui/lib/markdown.test.js b/ui/lib/markdown.test.js
new file mode 100644
index 0000000..126eacd
--- /dev/null
+++ b/ui/lib/markdown.test.js
@@ -0,0 +1,55 @@
+import * as md from './markdown.js';
+import { expect, describe, it } from 'vitest';
+
+describe('render', async () => {
+  it('renders inline links', async () => {
+    const markdown = `[a link](https://example.com?foo=bar)`;
+    const html = md.render(markdown);
+    expect(html).toStrictEqual(
+      `<p><a href="https://example.com?foo=bar" rel="noreferrer" target="_blank">a link</a></p>
+`
+    );
+  });
+
+  it('renders inline links with titles', async () => {
+    const markdown = `[a link](https://example.com?foo=bar "what title")`;
+    const html = md.render(markdown);
+    expect(html).toStrictEqual(
+      `<p><a href="https://example.com?foo=bar" title="what title" rel="noreferrer" target="_blank">a link</a></p>
+`
+    );
+  });
+
+  it('renders footnote links', async () => {
+    const markdown = `
+[a link]
+
+[a link]: https://example.com?foo=bar`;
+    const html = md.render(markdown);
+    expect(html).toStrictEqual(
+      `<p><a href="https://example.com?foo=bar" rel="noreferrer" target="_blank">a link</a></p>
+`
+    );
+  });
+
+  it('renders footnote links with titles', async () => {
+    const markdown = `
+[a link]
+
+[a link]: https://example.com?foo=bar "what title"`;
+    const html = md.render(markdown);
+    expect(html).toStrictEqual(
+      `<p><a href="https://example.com?foo=bar" title="what title" rel="noreferrer" target="_blank">a link</a></p>
+`
+    );
+  });
+
+  it('renders links with embedded markup', async () => {
+    const markdown = `[a _link_](https://example.com?foo=bar)`;
+    const html = md.render(markdown);
+    expect(html).toStrictEqual(
+      `<p><a href="https://example.com?foo=bar" rel="noreferrer" target="_blank">a <em>link</em></a></p>
+`
+    );
+  });
+});
-- 
cgit v1.2.3