From f9509f8987cab39b232fad148ec4b04147932de1 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 11 Jan 2023 16:24:13 +0000
Subject: [PATCH] fix: escape/textify the contents of inline and block code
 (#954)

---
 composables/content-parse.ts                  |  5 ++++-
 tests/__snapshots__/content-rich.test.ts.snap | 21 +++++++++++++++++++
 tests/content-rich.test.ts                    | 10 +++++++++
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/composables/content-parse.ts b/composables/content-parse.ts
index 6b00f3db..683e93d1 100644
--- a/composables/content-parse.ts
+++ b/composables/content-parse.ts
@@ -53,10 +53,13 @@ export function parseMastodonHTML(
     // Handle code blocks
     html = html
       .replace(/>(```|~~~)(\w*)([\s\S]+?)\1/g, (_1, _2, lang: string, raw: string) => {
-        const code = htmlToText(raw)
+        const code = htmlToText(raw).replace(/</g, '&lt;').replace(/>/g, '&gt;')
         const classes = lang ? ` class="language-${lang}"` : ''
         return `><pre><code${classes}>${code}</code></pre>`
       })
+      .replace(/`([^`\n]*)`/g, (_1, raw) => {
+        return raw ? `<code>${htmlToText(raw).replace(/</g, '&lt;').replace(/>/g, '&gt;')}</code>` : ''
+      })
   }
 
   // Always sanitize the raw HTML data *after* it has been modified
diff --git a/tests/__snapshots__/content-rich.test.ts.snap b/tests/__snapshots__/content-rich.test.ts.snap
index 176f7587..1dde47cf 100644
--- a/tests/__snapshots__/content-rich.test.ts.snap
+++ b/tests/__snapshots__/content-rich.test.ts.snap
@@ -40,6 +40,27 @@ exports[`content-rich > custom emoji 1`] = `
 
 exports[`content-rich > empty 1`] = `""`;
 
+exports[`content-rich > handles html within code blocks 1`] = `
+"<p>
+  HTML block code:<br />
+  <pre lang=\\"html\\">
+&lt;span class=&quot;icon--noto icon--noto--1st-place-medal&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;icon--noto icon--noto--2nd-place-medal-medal&quot;&gt;&lt;/span&gt;</pre
+  >
+</p>
+"
+`;
+
+exports[`content-rich > inline code with link 1`] = `
+"<p>
+  Inline code with link:
+  <code
+    >https://api.iconify.design/noto.css?icons=1st-place-medal,2nd-place-medal</code
+  >
+</p>
+"
+`;
+
 exports[`content-rich > link + mention 1`] = `
 "<p>
   Happy
diff --git a/tests/content-rich.test.ts b/tests/content-rich.test.ts
index 1f7b17f1..700fe4ff 100644
--- a/tests/content-rich.test.ts
+++ b/tests/content-rich.test.ts
@@ -20,6 +20,16 @@ describe('content-rich', () => {
     expect(formatted).toMatchSnapshot()
   })
 
+  it('inline code with link', async () => {
+    const { formatted } = await render('<p>Inline code with link: `<a href="https://api.iconify.design/noto.css?icons=1st-place-medal,2nd-place-medal" target="_blank" rel="nofollow noopener noreferrer" class="status-link unhandled-link" title="https://api.iconify.design/noto.css?icons=1st-place-medal,2nd-place-medal"><span class="invisible">https://</span><span class="ellipsis">api.iconify.design/noto.css?ic</span><span class="invisible">ons=1st-place-medal,2nd-place-medal</span></a>`</p>')
+    expect(formatted).toMatchSnapshot()
+  })
+
+  it('handles html within code blocks', async () => {
+    const { formatted } = await render('<p>HTML block code:<br>```html<br>&lt;span class="icon--noto icon--noto--1st-place-medal"&gt;&lt;/span&gt;<br>&lt;span class="icon--noto icon--noto--2nd-place-medal-medal"&gt;&lt;/span&gt;<br>```</p>')
+    expect(formatted).toMatchSnapshot()
+  })
+
   it('custom emoji', async () => {
     const { formatted } = await render('Daniel Roe :nuxt:', {
       nuxt: {