From c280ee389c2a485ffe7bc42675099e906c2704cf Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
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`] = `
+"<h1>Fedi HTML Support Survey</h1>
+<p>Does the following formatting come through accurately for you?</p>
+<p></p>
+<ul>
+  <li>This is an indented bulleted list (not just asterisks).</li>
+  <li></li>
+  <li><em>This line is italic.</em></li>
+</ul>
+<ol>
+  <li>This list...</li>
+  <li>...is numbered and indented</li>
+</ol>
+<h1>This line is larger.</h1>
+"
+`;
+
 exports[`content-rich > handles html within code blocks 1`] = `
 "<p>
   HTML block code:<br />
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('<h1>Fedi HTML Support Survey</h1><p>Does the following formatting come through accurately for you?</p><ul><li>This is an indented bulleted list (not just asterisks).</li><li><strong>This line is bold.</strong></li><li><em>This line is italic.</em></li></ul><ol><li>This list...</li><li>...is numbered and indented</li></ol><h1>This line is larger.</h1>')
+    expect(formatted).toMatchSnapshot()
+  })
+
   it('custom emoji', async () => {
     const { formatted } = await render('Daniel Roe :nuxt:', {
       emojis: {