Merge branch 'ian/fix-help-text-pointer-overlap' into ian/uat-change-…

…section-help-text
theopensystemslab · Nov 27, 2023 · 9a9a65e · 9a9a65e
2 parents 3b14393 + 249e94c
commit 9a9a65e
Show file tree

Hide file tree

Showing 7 changed files with 359 additions and 17 deletions.
diff --git a/editor.planx.uk/package.json b/editor.planx.uk/package.json
@@ -45,6 +45,7 @@
     "classnames": "^2.3.2",
     "core-js": "^3.31.0",
     "date-fns": "^2.30.0",
+    "dompurify": "^3.0.6",
     "dotenv": "^16.3.1",
     "formik": "^2.4.2",
     "graphql": "^16.8.1",
@@ -116,6 +117,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
+    "@types/dompurify": "^3.0.5",
     "@types/draft-js": "^0.11.12",
     "@types/jest": "^27.5.2",
     "@types/jest-axe": "^3.5.5",

diff --git a/editor.planx.uk/pnpm-lock.yaml b/editor.planx.uk/pnpm-lock.yaml
diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/QuestionHeader.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/QuestionHeader.tsx
@@ -47,6 +47,7 @@ const HelpButtonWrapper = styled(Box)(({ theme }) => ({
   width: HelpButtonMinWidth,
   top: "-4px",
   right: "-6px",
+  pointerEvents: "none",
   [theme.breakpoints.up("md")]: {
     width: "80px",
     top: 0,
@@ -72,6 +73,7 @@ export const HelpButton = styled(Button)(({ theme }) => ({
   boxShadow: "none",
   fontSize: "1.125em",
   filter: "drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.5))",
+  pointerEvents: "auto",
   [theme.breakpoints.up("lg")]: {
     minHeight: "48px",
     fontSize: "1.25em",

diff --git a/editor.planx.uk/src/ui/ReactMarkdownOrHtml.tsx b/editor.planx.uk/src/ui/ReactMarkdownOrHtml.tsx
@@ -1,5 +1,6 @@
 import Box from "@mui/material/Box";
 import { styled, Theme } from "@mui/material/styles";
+import DOMPurify from "dompurify";
 import React from "react";
 import ReactMarkdown from "react-markdown";
 import { FONT_WEIGHT_SEMI_BOLD, linkStyle } from "theme";
@@ -56,7 +57,7 @@ export default function ReactMarkdownOrHtml(props: {
     return (
       <HTMLRoot
         color={props.textColor}
-        dangerouslySetInnerHTML={{ __html: incrementHeaders }}
+        dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(incrementHeaders) }}
         id={props.id}
       />
     );

diff --git a/sharedb.planx.uk/package.json b/sharedb.planx.uk/package.json
@@ -4,9 +4,11 @@
   "private": true,
   "dependencies": {
     "@teamwork/websocket-json-stream": "^2.0.0",
+    "dompurify": "^3.0.6",
+    "jsdom": "^23.0.0",
     "jsonwebtoken": "^8.5.1",
     "pg": "^8.11.3",
-    "sharedb": "^3.3.1",
+    "sharedb": "^4.1.1",
     "ws": "^8.14.2"
   },
   "scripts": {