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, '>') const classes = lang ? ` class="language-${lang}"` : '' return `>
${code}
` }) + .replace(/`([^`\n]*)`/g, (_1, raw) => { + return raw ? `${htmlToText(raw).replace(//g, '>')}` : '' + }) } // 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`] = ` +"

+ HTML block code:
+

+<span class="icon--noto icon--noto--1st-place-medal"></span>
+<span class="icon--noto icon--noto--2nd-place-medal-medal"></span>
+

+" +`; + +exports[`content-rich > inline code with link 1`] = ` +"

+ Inline code with link: + https://api.iconify.design/noto.css?icons=1st-place-medal,2nd-place-medal +

+" +`; + exports[`content-rich > link + mention 1`] = ` "

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('

Inline code with link: `api.iconify.design/noto.css?ic`

') + expect(formatted).toMatchSnapshot() + }) + + it('handles html within code blocks', async () => { + const { formatted } = await render('

HTML block code:
```html
<span class="icon--noto icon--noto--1st-place-medal"></span>
<span class="icon--noto icon--noto--2nd-place-medal-medal"></span>
```

') + expect(formatted).toMatchSnapshot() + }) + it('custom emoji', async () => { const { formatted } = await render('Daniel Roe :nuxt:', { nuxt: {