diff --git a/.changeset/add_support_for_description_lists.md b/.changeset/add_support_for_description_lists.md new file mode 100644 index 0000000000..f13137bc14 --- /dev/null +++ b/.changeset/add_support_for_description_lists.md @@ -0,0 +1,5 @@ +--- +default: minor +--- + +# Add support for description lists diff --git a/src/app/plugins/markdown/allowedHtmlTags.ts b/src/app/plugins/markdown/allowedHtmlTags.ts index ffaf14f7ae..26ba58ad0f 100644 --- a/src/app/plugins/markdown/allowedHtmlTags.ts +++ b/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', diff --git a/src/app/plugins/react-custom-html-parser.tsx b/src/app/plugins/react-custom-html-parser.tsx index 7c67d324fa..c6025dc0b3 100644 --- a/src/app/plugins/react-custom-html-parser.tsx +++ b/src/app/plugins/react-custom-html-parser.tsx @@ -792,6 +792,28 @@ export const getReactCustomHtmlParser = ( ); } + if (name === 'dl') { + return ( +
+ {renderChildren()} +
+ ); + } + if (name === 'dt') { + return ( +
+ {renderChildren()} +
+ ); + } + if (name === 'dd') { + return ( +
+ {renderChildren()} +
+ ); + } + if (name === 'code') { if (parent && 'name' in parent && parent.name === 'pre') { const codeContent = renderChildren(); diff --git a/src/app/styles/CustomHtml.css.ts b/src/app/styles/CustomHtml.css.ts index a3a6f01b43..9972252fd7 100644 --- a/src/app/styles/CustomHtml.css.ts +++ b/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, + }, +]); diff --git a/src/app/utils/sanitize.ts b/src/app/utils/sanitize.ts index 90d25c52d6..4293195851 100644 --- a/src/app/utils/sanitize.ts +++ b/src/app/utils/sanitize.ts @@ -43,6 +43,9 @@ const permittedHtmlTags = [ 'img', 'details', 'summary', + 'dl', + 'dt', + 'dd', ] as const; const permittedTagToAttributes = {