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

.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 = {