Merge pull request #855 from neo4j-labs/issue/848-html-rendering

#848 Render HTML strings

Author: mariusconjeaud

package.json

@@ -65,6 +65,7 @@
     "d3-scale-chromatic": "^3.0.0",
     "dayjs": "^1.11.7",
     "dom-to-image": "^2.6.0",
+    "dompurify": "^3.1.0",
     "leaflet": "^1.7.1",
     "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",

src/chart/graph/component/GraphEntityInspectionTable.tsx

@@ -2,16 +2,19 @@ import React from 'react';
 import ShowMoreText from 'react-show-more-text';
 import { Checkbox, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
 import { TextLink } from '@neo4j-ndl/react';
+import DOMPurify from 'dompurify';
 
 export const formatProperty = (property) => {
-  if (property.startsWith('http://') || property.startsWith('https://')) {
+  const str = property?.toString() || '';
+  if (str.startsWith('http://') || str.startsWith('https://')) {
     return (
-      <TextLink externalLink href={property}>
-        {property}
+      <TextLink externalLink href={str}>
+        {str}
       </TextLink>
     );
   }
-  return property;
+  const cleanValue = DOMPurify.sanitize(str);
+  return <div dangerouslySetInnerHTML={{ __html: cleanValue }} />;
 };
 
 /**
@@ -88,7 +91,7 @@ export const GraphEntityInspectionTable = ({
                     {key}
                   </TableCell>
                   <TableCell align={'left'} style={{ color: tableTextColor }}>
-                    <ShowMoreText lines={2}>{formatProperty(entity && entity.properties[key].toString())}</ShowMoreText>
+                    <ShowMoreText lines={2}>{formatProperty(entity?.properties[key])}</ShowMoreText>
                   </TableCell>
                   {checklistEnabled ? (
                     <TableCell align={'center'}>

src/chart/table/TableChart.tsx

@@ -38,6 +38,15 @@ const fallbackRenderer = (value) => {
   return JSON.stringify(value);
 };
 
+function htmlToPlainText(html): string {
+  // Create a temporary div element to hold the sanitized HTML content
+  const tempElement = document.createElement('div');
+  // Set the HTML content directly as innerHTML of the temporary element
+  tempElement.innerHTML = html.props.dangerouslySetInnerHTML.__html;
+  // Extract plain text using textContent
+  return tempElement.textContent ?? '';
+}
+
 function renderAsButtonWrapper(renderer) {
   return function renderAsButton(value) {
     const outputValue = renderer(value, true);
@@ -50,7 +59,7 @@ function renderAsButtonWrapper(renderer) {
         style={{ width: '100%', marginLeft: '5px', marginRight: '5px' }}
         variant='contained'
         color='primary'
-      >{`${outputValue}`}</Button>
+      >{`${htmlToPlainText(outputValue)}`}</Button>
     );
   };
 }

src/report/ReportRecordProcessing.tsx

@@ -10,6 +10,7 @@ import {
   valueIsPath,
   valueIsRelationship,
 } from '../chart/ChartUtils';
+import DOMPurify from 'dompurify';
 
 /**
  * Collects all node labels and node properties in a set of Neo4j records.
@@ -266,7 +267,8 @@ function RenderString(value) {
       </TextLink>
     );
   }
-  return str;
+  const cleanValue = DOMPurify.sanitize(str);
+  return <div dangerouslySetInnerHTML={{ __html: cleanValue }} />;
 }
 
 function RenderLink(value, disabled = false) {

yarn.lock

@@ -7068,6 +7068,11 @@ dom-to-image@^2.6.0:
   resolved "https://registry.yarnpkg.com/dom-to-image/-/dom-to-image-2.6.0.tgz#8a503608088c87b1c22f9034ae032e1898955867"
   integrity sha512-Dt0QdaHmLpjURjU7Tnu3AgYSF2LuOmksSGsUcE6ItvJoCWTBEmiMXcqBdNSAm9+QbbwD7JMoVsuuKX6ZVQv1qA==
 
+dompurify@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.0.tgz#8c6b9fe986969a33aa4686bd829cbe8e14dd9445"
+  integrity sha512-yoU4rhgPKCo+p5UrWWWNKiIq+ToGqmVVhk0PmMYBK4kRsR3/qhemNFL8f6CFmBd4gMwm3F4T7HBoydP5uY07fA==
+
 dotenv@^16.3.1:
   version "16.3.1"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.3.1.tgz#369034de7d7e5b120972693352a3bf112172cc3e"