diff --git a/package.json b/package.json index a6e1e5f6e..ecbb9410f 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "@tanstack/react-query-persist-client": "4.24.10", "chart.js": "3.9.1", "classnames": "2.3.2", + "dompurify": "^3.0.9", "expr-eval": "2.0.2", "final-form": "4.20.9", "final-form-set-field-data": "1.0.2", diff --git a/src/data-workspace/section-form/section-description.js b/src/data-workspace/section-form/section-description.js new file mode 100644 index 000000000..a79951d5c --- /dev/null +++ b/src/data-workspace/section-form/section-description.js @@ -0,0 +1,24 @@ +import * as DOMPurify from 'dompurify' +import PropTypes from 'prop-types' +import React from 'react' +import styles from './section.module.css' + +export const SectionDescription = ({ children }) => { + if (!children) { + return null + } + const html = DOMPurify.sanitize(children, { + ALLOWED_TAGS: ['a', 'b', 'strong', 'underline'], + }) + + return ( +
+ ) +} + +SectionDescription.propTypes = { + children: PropTypes.node.isRequired, +} diff --git a/src/data-workspace/section-form/section.js b/src/data-workspace/section-form/section.js index 74affa175..1f66021f6 100644 --- a/src/data-workspace/section-form/section.js +++ b/src/data-workspace/section-form/section.js @@ -18,6 +18,7 @@ import { } from '../category-combo-table-body-pivoted/index.js' import { getFieldId } from '../get-field-id.js' import { IndicatorsTableBody } from '../indicators-table-body/indicators-table-body.js' +import { SectionDescription } from './section-description.js' import styles from './section.module.css' export function SectionFormSection({ section, dataSetId, globalFilterText }) { @@ -77,72 +78,86 @@ export function SectionFormSection({ section, dataSetId, globalFilterText }) { ? PivotedCategoryComboTableBody : CategoryComboTableBody + const { beforeSectionText, afterSectionText } = displayOptions + return ( -