Add support for description lists (<dl>, <dt> and <dd>) (#2098)

<!-- Please read
https://github.com/SableClient/Sable/blob/dev/CONTRIBUTING.md before
submitting your pull request -->

### Description

<!-- Please include a summary of the change. Please also include
relevant motivation and context. List any dependencies that are required
for this change. -->

This PR adds support for `<dl>`, `<dt>`, and `<dd>` HTML tags in
messages.

<img width="417" height="208" alt="Rendered message containing a
description list."
src="https://github.com/user-attachments/assets/da6cfeb9-00a3-44ac-989d-37014f640fb7"
/>

As with the tables PR, this PR does not add support for editing the
description list.

> [!Warning]
> 
> The Matrix spec seems to recommend not supporting description lists:
https://spec.matrix.org/v1.19/client-server-api/#mroommessage-msgtypes
>
> I don't see any risk or harm in implementing them anyway, as they have
no way of being a vector for cyberattacks. (Should a MSC be submitted to
add them?)

Fixes #2050.

#### Type of change

- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update

### Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings

### AI disclosure:

- [x] Created without the usage of AI
- [ ] Partially AI assisted (clarify which code was AI assisted and
briefly explain what it does).
- [ ] Fully AI generated (explain what all the generated code does in
moderate detail).

<!--
Write any explanation required here, but do not generate the explanation
using AI!! You MUST prove you understand what the code in this PR does.
You MUST explain what modifications you have made in order to ensure
that the result is compatible with THE LICENSE
By deleting this section or comment, in code or in body, the PR should
be rejected and closed.
-->

Author: eleboucher

.changeset/add_support_for_description_lists.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+# Add support for description lists

src/app/plugins/markdown/allowedHtmlTags.ts

@@ -5,9 +5,12 @@ export const MARKDOWN_ALLOWED_HTML_TAGS = new Set([
   'blockquote',
   'br',
   'code',
+  'dd',
   'del',
   'details',
   'div',
+  'dl',
+  'dt',
   'em',
   'h1',
   'h2',

src/app/plugins/react-custom-html-parser.tsx

@@ -792,6 +792,28 @@ export const getReactCustomHtmlParser = (
           );
         }
 
+        if (name === 'dl') {
+          return (
+            <dl {...props} className={css.DescriptionList}>
+              {renderChildren()}
+            </dl>
+          );
+        }
+        if (name === 'dt') {
+          return (
+            <dt {...props} className={css.DescriptionTerm}>
+              {renderChildren()}
+            </dt>
+          );
+        }
+        if (name === 'dd') {
+          return (
+            <dd {...props} className={css.DescriptionDetails}>
+              {renderChildren()}
+            </dd>
+          );
+        }
+
         if (name === 'code') {
           if (parent && 'name' in parent && parent.name === 'pre') {
             const codeContent = renderChildren();

src/app/styles/CustomHtml.css.ts

@@ -338,3 +338,25 @@ export const Td = style([
     minWidth: toRem(100),
   },
 ]);
+
+export const DescriptionList = style([
+  DefaultReset,
+  {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+]);
+
+export const DescriptionTerm = style([
+  DefaultReset,
+  {
+    fontWeight: 'bolder',
+  },
+]);
+
+export const DescriptionDetails = style([
+  DefaultReset,
+  {
+    marginInlineStart: config.space.S700,
+  },
+]);

src/app/utils/sanitize.ts

@@ -43,6 +43,9 @@ const permittedHtmlTags = [
   'img',
   'details',
   'summary',
+  'dl',
+  'dt',
+  'dd',
 ] as const;
 
 const permittedTagToAttributes = {