Markdown tables not rendered #836 (#893)

Co-authored-by: Marius Conjeaud <[email protected]>

Author: mariusconjeaud

package.json

@@ -102,6 +102,7 @@
     "tailwindcss": "^3.3.2",
     "three": "^0.159.0",
     "three-spritetext": "^1.8.1",
+    "urijs": "^1.19.11",
     "use-neo4j": "^0.3.13",
     "yaml": "^2.2.1"
   },

src/chart/markdown/MarkdownChart.tsx

@@ -1,13 +1,40 @@
 import React from 'react';
 import { ChartProps } from '../Chart';
 import ReactMarkdown from 'react-markdown';
-import gfm from 'remark-gfm';
+import remarkGfm from 'remark-gfm';
+import URI from 'urijs';
 import { replaceDashboardParameters } from '../ChartUtils';
 
+// Sanitizes URIs
+const transformUri = (uri: string): string | undefined => {
+  const parsedUri = URI(uri);
+  if (parsedUri.protocol() === 'http' || parsedUri.protocol() === 'https') {
+    return parsedUri.toString(); // Convert URI object back to string
+  }
+  return undefined; // Return undefined to skip rendering of potentially unsafe URLs
+};
+
+// Define custom components for Markdown elements
+const CustomTable = ({ _, ...props }) => <table {...props} className='markdown-table' />;
+const CustomTh = ({ _, ...props }) => <th {...props} className='markdown-th' />;
+const CustomTd = ({ _, ...props }) => <td {...props} className='markdown-td' />;
+const CustomATag = ({ _, href, ...props }) => (
+  // Apply URI transformation right in the anchor element for additional security
+  <a href={href ? transformUri(href) : undefined} {...props} rel='noopener noreferrer' target='_blank' />
+);
+
 /**
  * Renders Markdown text provided by the user.
  */
 const NeoMarkdownChart = (props: ChartProps) => {
+  // Define custom components for Markdown elements
+  const components = {
+    table: CustomTable,
+    th: CustomTh,
+    td: CustomTd,
+    a: CustomATag,
+  };
+
   // Records are overridden to be a single element array with a field called 'input'.
   const { records } = props;
   const parameters = props.parameters ? props.parameters : {};
@@ -17,13 +44,18 @@ const NeoMarkdownChart = (props: ChartProps) => {
       : true;
   const markdown = records[0].input;
   const modifiedMarkdown = replaceGlobalParameters ? replaceDashboardParameters(markdown, parameters) : markdown;
-  // TODO: we should check if the gfm plugin has an impact on the standard security provided by ReactMarkdown
   return (
     <div
       className='markdown-widget'
       style={{ marginTop: '0px', marginLeft: '15px', marginRight: '15px', marginBottom: '0px' }}
     >
-      <base target='_blank' /> <ReactMarkdown remarkPLugins={[gfm]} children={modifiedMarkdown} />
+      <base target='_blank' />
+      <ReactMarkdown
+        children={modifiedMarkdown}
+        remarkPlugins={[remarkGfm]}
+        components={components}
+        transformLinkUri={transformUri}
+      />
     </div>
   );
 };

src/index.pcss

@@ -90,4 +90,22 @@
   .n-bg-dark-neutral-text-weak {
     background-color: rgb(196 200 205 / var(--tw-bg-opacity)) !important;
   }
+
+  /* Markdown table styles */
+  .markdown-table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .markdown-table th,
+  .markdown-table td {
+    border: 1px solid #ddd; /* Light gray border */
+    padding: 8px; /* Padding around text */
+    text-align: left; /* Align text to the left */
+  }
+
+  .markdown-table th {
+    background-color: #f4f4f4; /* Light gray background for header */
+    color: #333; /* Dark text color for contrast */
+  }
 }

yarn.lock

@@ -13504,6 +13504,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+urijs@^1.19.11:
+  version "1.19.11"
+  resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.19.11.tgz#204b0d6b605ae80bea54bea39280cdb7c9f923cc"
+  integrity sha512-HXgFDgDommxn5/bIv0cnQZsPhHDA90NPHD6+c/v21U5+Sx5hoP8+dP9IZXBU1gIfvdRfhG8cel9QNPeionfcCQ==
+
 url-parse@^1.5.3:
   version "1.5.10"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"