markdown support for AlertView

jainanisha90 · Apr 16, 2024 · 1e6e9c0 · 1e6e9c0
1 parent 65e8982
commit 1e6e9c0
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 11 deletions.
diff --git a/app/packages/core/src/plugins/SchemaIO/components/AlertView.tsx b/app/packages/core/src/plugins/SchemaIO/components/AlertView.tsx
@@ -1,6 +1,7 @@
 import { Alert, AlertTitle, Typography } from "@mui/material";
 import React from "react";
 import { getComponentProps } from "../utils";
+import Markdown from "./Markdown";
 
 export default function AlertView(props) {
   const { schema } = props;
@@ -12,15 +13,23 @@ export default function AlertView(props) {
       severity={severity || viewToSeverity[name] || "info"}
       {...getComponentProps(props, "container")}
     >
-      <AlertTitle {...getComponentProps(props, "label")}>{label}</AlertTitle>
+      <AlertTitle {...getComponentProps(props, "label")}>
+        <Markdown {...getComponentProps(props, "label.markdown")}>
+          {label}
+        </Markdown>
+      </AlertTitle>
       {description && (
         <Typography {...getComponentProps(props, "description")}>
-          {description}
+          <Markdown {...getComponentProps(props, "description.markdown")}>
+            {description}
+          </Markdown>
         </Typography>
       )}
       {caption && (
         <Typography variant="body2" {...getComponentProps(props, "caption")}>
-          {caption}
+          <Markdown {...getComponentProps(props, "caption.markdown")}>
+            {caption}
+          </Markdown>
         </Typography>
       )}
     </Alert>

diff --git a/app/packages/core/src/plugins/SchemaIO/components/Markdown.tsx b/app/packages/core/src/plugins/SchemaIO/components/Markdown.tsx
@@ -3,6 +3,7 @@ import {
   Box,
   Link,
   Paper,
+  SxProps,
   Table,
   TableBody,
   TableCell,
@@ -55,6 +56,8 @@ const CodeHeader = styled.div`
   background: ${({ theme }) => theme.background.level2};
 `;
 
+const defaultSx: SxProps = { color: "inherit" };
+
 const componentsMap = {
   a({ children, ...props }) {
     if (
@@ -68,7 +71,11 @@ const componentsMap = {
       };
     }
 
-    return <Link {...props}>{children}</Link>;
+    return (
+      <Link sx={defaultSx} {...props}>
+        {children}
+      </Link>
+    );
   },
   table({ children }) {
     return (
@@ -118,34 +125,36 @@ const componentsMap = {
       </InlineCode>
     );
   },
-  p: ({ children, ...props }) => <Typography>{children}</Typography>,
+  p: ({ children, ...props }) => (
+    <Typography sx={defaultSx}>{children}</Typography>
+  ),
   h1: ({ children, ...props }) => (
-    <Typography variant="h1" {...props}>
+    <Typography sx={defaultSx} variant="h1" {...props}>
       {children}
     </Typography>
   ),
   h2: ({ children, ...props }) => (
-    <Typography variant="h2" {...props}>
+    <Typography sx={defaultSx} variant="h2" {...props}>
       {children}
     </Typography>
   ),
   h3: ({ children, ...props }) => (
-    <Typography variant="h3" {...props}>
+    <Typography sx={defaultSx} variant="h3" {...props}>
       {children}
     </Typography>
   ),
   h4: ({ children, ...props }) => (
-    <Typography variant="h4" {...props}>
+    <Typography sx={defaultSx} variant="h4" {...props}>
       {children}
     </Typography>
   ),
   h5: ({ children, ...props }) => (
-    <Typography variant="h5" {...props}>
+    <Typography sx={defaultSx} variant="h5" {...props}>
       {children}
     </Typography>
   ),
   h6: ({ children, ...props }) => (
-    <Typography variant="h6" {...props}>
+    <Typography sx={defaultSx} variant="h6" {...props}>
       {children}
     </Typography>
   ),