feat: support additional html elements (#1102)

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: {},
 })
 
 /**

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;

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 />

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