From c280ee389c2a485ffe7bc42675099e906c2704cf Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Sat, 14 Jan 2023 10:40:53 +0000 Subject: [PATCH] feat: support additional html elements (#1102) --- composables/content-parse.ts | 6 ++++++ styles/global.css | 19 ++++++++++++++++++- tests/__snapshots__/content-rich.test.ts.snap | 17 +++++++++++++++++ tests/content-rich.test.ts | 5 +++++ 4 files changed, 46 insertions(+), 1 deletion(-) diff --git a/composables/content-parse.ts b/composables/content-parse.ts index d7c7e2e0..6ab6954a 100644 --- a/composables/content-parse.ts +++ b/composables/content-parse.ts @@ -35,6 +35,12 @@ const sanitizer = sanitize({ code: { class: filterClasses(/^language-\w+$/), }, + // other elements supported in glitch + h1: {}, + ol: {}, + ul: {}, + li: {}, + em: {}, }) /** diff --git a/styles/global.css b/styles/global.css index 605943d2..986ab486 100644 --- a/styles/global.css +++ b/styles/global.css @@ -141,7 +141,24 @@ em-emoji-picker { pre code { --at-apply: bg-transparent px0 py0 rounded-none leading-1.6em; } - + ol { + --at-apply: list-decimal my-3 pl-6 ml-2; + } + ul { + --at-apply: list-disc my-3 pl-6 ml-2; + } + li { + --at-apply: mt-1 mb-1; + &:empty { + --at-apply: hidden; + } + } + 'ol > li' { + --at-apply: pl-2; + } + 'ul > li' { + --at-apply: pl-2; + } .code-block { --at-apply: font-mono bg-code text-0.875em p3 mt-2 rounded overflow-auto leading-1.6em; diff --git a/tests/__snapshots__/content-rich.test.ts.snap b/tests/__snapshots__/content-rich.test.ts.snap index f48d4942..97725153 100644 --- a/tests/__snapshots__/content-rich.test.ts.snap +++ b/tests/__snapshots__/content-rich.test.ts.snap @@ -55,6 +55,23 @@ exports[`content-rich > group mention > html 1`] = ` " `; +exports[`content-rich > handles formatting from servers 1`] = ` +"

Fedi HTML Support Survey

+

Does the following formatting come through accurately for you?

+

+ +
    +
  1. This list...
  2. +
  3. ...is numbered and indented
  4. +
+

This line is larger.

+" +`; + exports[`content-rich > handles html within code blocks 1`] = ` "

HTML block code:
diff --git a/tests/content-rich.test.ts b/tests/content-rich.test.ts index f8e5b197..97d2b8f0 100644 --- a/tests/content-rich.test.ts +++ b/tests/content-rich.test.ts @@ -42,6 +42,11 @@ describe('content-rich', () => { expect(formatted).toMatchSnapshot() }) + it('handles formatting from servers', async () => { + const { formatted } = await render('

Fedi HTML Support Survey

Does the following formatting come through accurately for you?

  1. This list...
  2. ...is numbered and indented

This line is larger.

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