diff --git a/components/party/PartyFooter/index.tsx b/components/party/PartyFooter/index.tsx index 8abcee11..89b0661c 100644 --- a/components/party/PartyFooter/index.tsx +++ b/components/party/PartyFooter/index.tsx @@ -2,12 +2,8 @@ import React, { useEffect, useState } from 'react' import { useRouter } from 'next/router' import { useSnapshot } from 'valtio' import { useTranslation } from 'next-i18next' -import classNames from 'classnames' import clonedeep from 'lodash.clonedeep' - -import Linkify from 'react-linkify' -import LiteYouTubeEmbed from 'react-lite-youtube-embed' -import reactStringReplace from 'react-string-replace' +import DOMPurify from 'dompurify' import Button from '~components/common/Button' import SegmentedControl from '~components/common/SegmentedControl' @@ -55,15 +51,14 @@ const PartyFooter = (props: Props) => { // State: Data const [remixes, setRemixes] = useState([]) - const [embeddedDescription, setEmbeddedDescription] = - useState() + const [sanitizedDescription, setSanitizedDescription] = useState('') useEffect(() => { if (partySnapshot.description) { const purified = DOMPurify.sanitize(partySnapshot.description) setSanitizedDescription(purified) } else { - setEmbeddedDescription('') + setSanitizedDescription('') } }, [partySnapshot.description]) @@ -211,14 +206,17 @@ const PartyFooter = (props: Props) => { ) const descriptionSection = ( -
+ <> {partySnapshot && partySnapshot.description && partySnapshot.description.length > 0 && ( - {embeddedDescription} +
)} {(!partySnapshot || !partySnapshot.description) && ( -
+

{t('footer.description.empty')}

{props.editable && ( { /> )} -
+
)} -
+ ) const remixesSection = ( diff --git a/package-lock.json b/package-lock.json index c561a55d..1051bb8f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "cmdk": "^0.2.0", "cookies-next": "^2.1.1", "date-fns": "^2.29.3", + "dompurify": "^3.0.4", "fast-deep-equal": "^3.1.3", "fix-date": "^1.1.6", "i18next": "^21.6.13", @@ -65,6 +66,7 @@ "@storybook/nextjs": "latest", "@storybook/react": "latest", "@storybook/testing-library": "latest", + "@types/dompurify": "^3.0.2", "@types/lodash.clonedeep": "^4.5.6", "@types/lodash.debounce": "^4.0.6", "@types/node": "17.0.11", @@ -7041,6 +7043,15 @@ "integrity": "sha512-w5jZ0ee+HaPOaX25X2/2oGR/7rgAQSYII7X7pp0m9KgBfMP7uKfMfTvcpl5Dj+eDBbpxKGiqE+flqDr6XTd2RA==", "dev": true }, + "node_modules/@types/dompurify": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.2.tgz", + "integrity": "sha512-YBL4ziFebbbfQfH5mlC+QTJsvh0oJUrWbmxKMyEdL7emlHJqGR2Qb34TEFKj+VCayBvjKy3xczMFNhugThUsfQ==", + "dev": true, + "dependencies": { + "@types/trusted-types": "*" + } + }, "node_modules/@types/ejs": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/@types/ejs/-/ejs-3.1.2.tgz", @@ -7389,6 +7400,12 @@ "@types/node": "*" } }, + "node_modules/@types/trusted-types": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz", + "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==", + "dev": true + }, "node_modules/@types/unist": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz", @@ -10577,6 +10594,11 @@ "url": "https://github.com/fb55/domhandler?sponsor=1" } }, + "node_modules/dompurify": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.4.tgz", + "integrity": "sha512-ae0mA+Qiqp6C29pqZX3fQgK+F91+F7wobM/v8DRzDqJdZJELXiFUx4PP4pK/mzUS0xkiSEx3Ncd9gr69jg3YsQ==" + }, "node_modules/domutils": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", diff --git a/package.json b/package.json index e791144c..4746c99d 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "cmdk": "^0.2.0", "cookies-next": "^2.1.1", "date-fns": "^2.29.3", + "dompurify": "^3.0.4", "fast-deep-equal": "^3.1.3", "fix-date": "^1.1.6", "i18next": "^21.6.13", @@ -72,6 +73,7 @@ "@storybook/nextjs": "latest", "@storybook/react": "latest", "@storybook/testing-library": "latest", + "@types/dompurify": "^3.0.2", "@types/lodash.clonedeep": "^4.5.6", "@types/lodash.debounce": "^4.0.6", "@types/node": "17.0.11",