Merge pull request #763 from sudhanshutech/noti/markdown

changes to support markdown for notifications

Author: sudhanshutech

src/custom/Markdown/index.tsx

@@ -2,6 +2,7 @@ import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import {
+  BasicAnchorMarkdown,
   StyledMarkdown,
   StyledMarkdownBlockquote,
   StyledMarkdownH1,
@@ -97,3 +98,27 @@ export const RenderMarkdownTooltip: React.FC<RenderMarkdownProps> = ({ content }
     </ReactMarkdown>
   );
 };
+
+// Markdown support for notifications markdown content
+export const BasicMarkdown: React.FC<RenderMarkdownProps> = ({ content }) => {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      components={{
+        a: ({ ...props }) => (
+          <BasicAnchorMarkdown
+            onClick={(e) => {
+              window.open(props.href, '_blank');
+              e.stopPropagation();
+            }}
+            as="a"
+          >
+            {props.children}
+          </BasicAnchorMarkdown>
+        )
+      }}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+};

src/custom/Markdown/style.tsx

@@ -10,6 +10,15 @@ export const StyledMarkdown = styled('a')(({ theme }) => ({
   cursor: 'pointer'
 }));
 
+// anchor style for notifications markdown content
+export const BasicAnchorMarkdown = styled('a')(() => ({
+  textDecoration: 'none',
+  '&:hover': {
+    textDecoration: 'underline'
+  },
+  cursor: 'pointer'
+}));
+
 export const StyledMarkdownP = styled('p')(({ theme }) => ({
   color: theme.palette.text.default,
   marginBlock: '0px',

src/custom/index.tsx

@@ -31,7 +31,7 @@ import { useWindowDimensions } from './Helpers/Dimension';
 import { useNotificationHandler } from './Helpers/Notification';
 import { ColView, updateVisibleColumns } from './Helpers/ResponsiveColumns/responsive-coulmns.tsx';
 import { LearningCard } from './LearningCard';
-import { RenderMarkdown } from './Markdown';
+import { BasicMarkdown, RenderMarkdown } from './Markdown';
 import { ModalCard } from './ModalCard';
 import PopperListener, { IPopperListener } from './PopperListener';
 import PromptComponent from './Prompt';
@@ -108,7 +108,7 @@ export {
 
 // Markdown
 export { StyledMarkdown } from './Markdown/style';
-export { RenderMarkdown };
+export { BasicMarkdown, RenderMarkdown };
 
 // Stepper
 export { CustomizedStepper, useStepper } from './Stepper';