fix: escape/textify the contents of inline and block code (#954)

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

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

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: {