html render rollback due to too many bugs

Author: LiamEdwardsLamarche

src/chart/graph/component/GraphEntityInspectionTable.tsx

@@ -2,7 +2,7 @@ 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';
+// import DOMPurify from 'dompurify'; 
 
 export const formatProperty = (property) => {
   const str = property?.toString() || '';
@@ -13,8 +13,11 @@ export const formatProperty = (property) => {
       </TextLink>
     );
   }
-  const cleanValue = DOMPurify.sanitize(str);
-  return <div dangerouslySetInnerHTML={{ __html: cleanValue }} />;
+  return property; 
+
+  // html render rollback
+  // const cleanValue = DOMPurify.sanitize(str);
+  // return <div dangerouslySetInnerHTML={{ __html: cleanValue }} />;
 };
 
 /**
@@ -91,7 +94,8 @@ export const GraphEntityInspectionTable = ({
                     {key}
                   </TableCell>
                   <TableCell align={'left'} style={{ color: tableTextColor }}>
-                    <ShowMoreText lines={2}>{formatProperty(entity?.properties[key])}</ShowMoreText>
+                    <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,14 +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 ?? '';
-}
+// html Render Rollback
+// 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) {
@@ -59,7 +60,7 @@ function renderAsButtonWrapper(renderer) {
         style={{ width: '100%', marginLeft: '5px', marginRight: '5px' }}
         variant='contained'
         color='primary'
-      >{`${htmlToPlainText(outputValue)}`}</Button>
+      >{outputValue}</Button>
     );
   };
 }

src/report/ReportRecordProcessing.tsx

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