From 22cafc34fada5d8f30e863c4a1daf85e372ed275 Mon Sep 17 00:00:00 2001 From: Danny Koppenhagen Date: Wed, 10 Nov 2021 19:59:56 +0100 Subject: [PATCH] feat: anitize descriptions on help page allow to customize description content by sanitizing it's content closes #102 --- package.json | 2 + src/components/PageHelp/PageHelp.tsx | 34 +++++++++++++---- yarn.lock | 56 +++++++++++++++++++++++++++- 3 files changed, 83 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 90c4720..319182b 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "react-icons": "^4.2.0", "react-router-dom": "^5.3.0", "react-scripts": "4.0.3", + "sanitize-html": "^2.5.2", "sass": "^1.42.1", "typescript": "4.3.5", "walk": "^2.3.15" @@ -52,6 +53,7 @@ "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", + "@types/sanitize-html": "^2.5.0", "husky": "^7.0.2", "lint-staged": "^11.1.2", "prettier": "^2.4.1" diff --git a/src/components/PageHelp/PageHelp.tsx b/src/components/PageHelp/PageHelp.tsx index e381cb7..2a0313d 100644 --- a/src/components/PageHelp/PageHelp.tsx +++ b/src/components/PageHelp/PageHelp.tsx @@ -1,4 +1,5 @@ import React from "react"; +import sanitizeHtml from 'sanitize-html'; import HeroHeadline from "../HeroHeadline/HeroHeadline"; import Fadeable from "../Fadeable/Fadeable"; import SetTitle from "../SetTitle"; @@ -10,6 +11,13 @@ interface Props { onLeave: () => void; } +const sanitize = (dirty: string, options: sanitizeHtml.IOptions = {}) => ({ + __html: sanitizeHtml( + dirty, + options + ) +}); + const PageHelp: React.FC = ({ leaving, onLeave }) => { const { pageHelp } = useMessages(); @@ -22,19 +30,29 @@ const PageHelp: React.FC = ({ leaving, onLeave }) => { {title}
{paragraphs.map(({ headline, values }) => ( - -

{headline}

- {values.map((element, index) => ( -

{element}

- ))} - + +

{headline}

+ {values.map((element, index) => { + const content = sanitizeHtml(element, { + allowedTags: ['b', 'i', 'em', 'strong', 'a', 'ul', 'ol', 'li'], + allowedAttributes: { + 'a': ['href', 'target'] + }, + }); + console.log(content); + return ( +

+ ) + }) + } + ))}

{quadrantsPreDescription ?? "The quadrants are:"}

    {quadrants.map(({ name, description }) => (
  • - {name}: {description} + {name}:
    • ))}
@@ -43,7 +61,7 @@ const PageHelp: React.FC = ({ leaving, onLeave }) => {
    {rings.map(({ name, description }) => (
  • - {name}: {description} + {name}:
    • ))}
diff --git a/yarn.lock b/yarn.lock index 20c2197..ffd81da 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1947,6 +1947,13 @@ dependencies: "@types/node" "*" +"@types/sanitize-html@^2.5.0": + version "2.5.0" + resolved "https://registry.yarnpkg.com/@types/sanitize-html/-/sanitize-html-2.5.0.tgz#bfef58fbcf2674b20ffcc23c3506faa68c3a13e3" + integrity sha512-PeFIEZsO9m1+ACJlXUaimgrR+5DEDiIXhz7Hso307jmq5Yz0lb5kDp8LiTr5dMMMliC/jNNx/qds7Zoxa4zexw== + dependencies: + htmlparser2 "^6.0.0" + "@types/scheduler@*": version "0.16.1" resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275" @@ -5727,7 +5734,7 @@ html-webpack-plugin@4.5.0: tapable "^1.1.3" util.promisify "1.0.0" -htmlparser2@^6.1.0: +htmlparser2@^6.0.0, htmlparser2@^6.1.0: version "6.1.0" resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7" integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A== @@ -6271,6 +6278,11 @@ is-plain-object@^2.0.3, is-plain-object@^2.0.4: dependencies: isobject "^3.0.1" +is-plain-object@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344" + integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q== + is-potential-custom-element-name@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5" @@ -7009,6 +7021,11 @@ kleur@^3.0.3: resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e" integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w== +klona@^2.0.3: + version "2.0.5" + resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc" + integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ== + klona@^2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0" @@ -7619,6 +7636,11 @@ nanoid@^3.1.23: resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81" integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw== +nanoid@^3.1.30: + version "3.1.30" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362" + integrity sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ== + nanomatch@^1.2.9: version "1.2.13" resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119" @@ -8139,6 +8161,11 @@ parse-json@^5.0.0: json-parse-even-better-errors "^2.3.0" lines-and-columns "^1.1.6" +parse-srcset@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/parse-srcset/-/parse-srcset-1.0.2.tgz#f2bd221f6cc970a938d88556abc589caaaa2bde1" + integrity sha1-8r0iH2zJcKk42IVWq8WJyqqiveE= + parse5@6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b" @@ -8247,6 +8274,11 @@ performance-now@^2.1.0: resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns= +picocolors@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" + integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== + picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3: version "2.3.0" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972" @@ -9007,6 +9039,15 @@ postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, po source-map "^0.6.1" supports-color "^6.1.0" +postcss@^8.0.2: + version "8.3.11" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.11.tgz#c3beca7ea811cd5e1c4a3ec6d2e7599ef1f8f858" + integrity sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA== + dependencies: + nanoid "^3.1.30" + picocolors "^1.0.0" + source-map-js "^0.6.2" + postcss@^8.1.0: version "8.3.5" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.5.tgz#982216b113412bc20a86289e91eb994952a5b709" @@ -9924,6 +9965,19 @@ sane@^4.0.3: minimist "^1.1.1" walker "~1.0.5" +sanitize-html@^2.5.2: + version "2.5.2" + resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-2.5.2.tgz#fd7892340e7fc9afd5722200929258808c578784" + integrity sha512-sJ1rO2YixFIqs2kIcEUb6PTrCjvz8DMq1XqWWuy0kjgjrn58GNLK1DKSIRybFZDO1WNgsEgD+WiEzTEYS8xEug== + dependencies: + deepmerge "^4.2.2" + escape-string-regexp "^4.0.0" + htmlparser2 "^6.0.0" + is-plain-object "^5.0.0" + klona "^2.0.3" + parse-srcset "^1.0.2" + postcss "^8.0.2" + sanitize.css@^10.0.0: version "10.0.0" resolved "https://registry.yarnpkg.com/sanitize.css/-/sanitize.css-10.0.0.tgz#b5cb2547e96d8629a60947544665243b1dc3657a"