feat: support additional html elements (#1102)

This commit is contained in:
Daniel Roe 2023-01-14 10:40:53 +00:00 committed by GitHub
parent 10bf774a6b
commit c280ee389c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 46 additions and 1 deletions

View file

@ -35,6 +35,12 @@ const sanitizer = sanitize({
code: { code: {
class: filterClasses(/^language-\w+$/), class: filterClasses(/^language-\w+$/),
}, },
// other elements supported in glitch
h1: {},
ol: {},
ul: {},
li: {},
em: {},
}) })
/** /**

View file

@ -141,7 +141,24 @@ em-emoji-picker {
pre code { pre code {
--at-apply: bg-transparent px0 py0 rounded-none leading-1.6em; --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 { .code-block {
--at-apply: font-mono bg-code text-0.875em p3 mt-2 rounded overflow-auto --at-apply: font-mono bg-code text-0.875em p3 mt-2 rounded overflow-auto
leading-1.6em; leading-1.6em;

View file

@ -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`] = ` exports[`content-rich > handles html within code blocks 1`] = `
"<p> "<p>
HTML block code:<br /> HTML block code:<br />

View file

@ -42,6 +42,11 @@ describe('content-rich', () => {
expect(formatted).toMatchSnapshot() 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 () => { it('custom emoji', async () => {
const { formatted } = await render('Daniel Roe :nuxt:', { const { formatted } = await render('Daniel Roe :nuxt:', {
emojis: { emojis: {