Add support for payload markdown render

package.json

@@ -30,9 +30,12 @@
     "chart.js": "^4.3.0",
     "chroma-js": "^2.4.2",
     "force-graph": "^1.43.5",
+    "highlight.js": "^11.11.1",
     "jose": "^5.2.3",
     "jsonc-parser": "^3.2.0",
     "lodash": "^4.17.21",
+    "marked": "^15.0.6",
+    "marked-highlight": "^2.2.1",
     "monaco-editor": "^0.44.0",
     "mui-chips-input": "^2.0.1",
     "notistack": "^3.0.1",
@@ -47,6 +50,7 @@
     "react-resizable-panels": "^0.0.51",
     "react-router-dom": "^6.8.1",
     "react-simple-code-editor": "^0.13.1",
+    "sanitize-html": "^2.14.0",
     "unist-util-visit": "^5.0.0",
     "vite": "^4.3.3",
     "vite-plugin-svgr": "^2.4.0",
@@ -82,6 +86,7 @@
     ]
   },
   "devDependencies": {
+    "@types/sanitize-html": "^2.13.0",
     "eslint": "^8.46.0",
     "eslint-config-google": "^0.14.0",
     "eslint-config-prettier": "^8.9.0",

src/components/Common/MarkdownViewer.jsx

@@ -0,0 +1,50 @@
+import { useTheme } from '@mui/material';
+import { Box } from '@mui/system';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/github.css';
+import { Marked } from 'marked';
+import { markedHighlight } from 'marked-highlight';
+import PropTypes from 'prop-types';
+import React, { useMemo } from 'react';
+import sanitizeHtml from 'sanitize-html';
+import '../../lib/github-markdown.css';
+
+const marked = new Marked(
+  markedHighlight({
+    emptyLangClass: 'hljs',
+    langPrefix: 'hljs language-',
+    highlight(code, lang) {
+      const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+      return hljs.highlight(code, { language }).value;
+    },
+  })
+);
+
+export default function MarkdownViewer({ children }) {
+  const theme = useTheme();
+  const html = useMemo(() => {
+    const unSanitized = marked.parse(children);
+    const sanitized = sanitizeHtml(unSanitized, {
+      allowedAttributes: {
+        a: ['href'],
+        code: ['class'],
+        span: ['class'],
+      },
+      allowedTags: [...sanitizeHtml.defaults.allowedTags, 'details', 'summary'],
+    });
+    return sanitized;
+  }, []);
+  return (
+    <Box
+      className="markdown-body"
+      data-theme={theme.palette.mode}
+      width="100%"
+      dangerouslySetInnerHTML={{ __html: html }}
+      sx={{ background: '#0000' }}
+    />
+  );
+}
+
+MarkdownViewer.propTypes = {
+  children: PropTypes.string,
+};

src/components/Points/DataGridList.jsx

@@ -4,6 +4,7 @@ import { JsonViewer } from '@textea/json-viewer';
 import { useTheme } from '@mui/material/styles';
 import { Divider, Grid, IconButton, Typography } from '@mui/material';
 import FilterAltIcon from '@mui/icons-material/FilterAlt';
+import MarkdownViewer from '../Common/MarkdownViewer';
 
 /**
  * A list of key-value pairs, where the value is either a string or an object.
@@ -61,8 +62,12 @@ export const DataGridList = function ({ data = {}, specialCases = {}, onConditio
                 />
               )}
 
+              {typeof data[key] === 'string' && !specialKeys.includes(key) && (
+                <MarkdownViewer>{data[key]}</MarkdownViewer>
+              )}
+
               {/* other types of values */}
-              {typeof data[key] !== 'object' && !specialKeys.includes(key) && (
+              {typeof data[key] !== 'object' && typeof data[key] !== 'string' && !specialKeys.includes(key) && (
                 <span>
                   {'\t'} {data[key].toString()}
                 </span>