feat(add markdownoptions): add markdown options with ability to custo…

…mize rendering
trycourier · Jul 9, 2024 · 3a496d5 · 3a496d5
1 parent 4dcefdb
commit 3a496d5
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 20 deletions.
diff --git a/packages/core/src/lib/index.ts b/packages/core/src/lib/index.ts
@@ -9,3 +9,9 @@ export const getDateDiff = (date?: number) => {
   // if datediff is 0, return 1 so we can do "!datediff"
   return Math.max(dateDiff, 1);
 };
+
+export const defaultMarkdownOptions = {
+  overrides: {
+    iframe: () => null,
+  },
+};
diff --git a/packages/react-inbox/src/components/Messages2.0/Message.tsx b/packages/react-inbox/src/components/Messages2.0/Message.tsx
@@ -13,7 +13,7 @@ import {
 import { InboxProps } from "../../types";
 
 import useHover from "~/hooks/use-hover";
-import Markdown from "markdown-to-jsx";
+import Markdown, { MarkdownToJSX } from "markdown-to-jsx";
 
 import deepExtend from "deep-extend";
 import styled from "styled-components";
@@ -22,7 +22,7 @@ import MessageActions from "./actions";
 import { useOnScreen } from "~/hooks/use-on-screen";
 
 import { SlotIcon } from "./pins";
-import { IInboxMessagePreview } from "@trycourier/core";
+import { IInboxMessagePreview, defaultMarkdownOptions } from "@trycourier/core";
 
 const UnreadIndicator = styled.div<{
   read?: IInboxMessagePreview["read"];
@@ -127,13 +127,15 @@ const Message: React.FunctionComponent<{
   renderedIcon: ReactNode;
   renderActionsAsButtons?: boolean;
   renderPin?: InboxProps["renderPin"];
+  markdownOptions?: MarkdownToJSX.Options;
 }> = ({
-  message,
   areActionsHovered,
   isMessageActive,
+  markdownOptions,
+  message,
   openLinksInNewTab,
-  renderedIcon,
   renderActionsAsButtons,
+  renderedIcon,
   renderPin,
 }) => {
   const { actions, archived, messageId, pinned, preview, read, title } =
@@ -205,7 +207,11 @@ const Message: React.FunctionComponent<{
           {title}
         </Title>
         <TextElement aria-label={`message body ${preview}`}>
-          {preview ? <Markdown>{preview}</Markdown> : null}
+          {preview ? (
+            <Markdown options={markdownOptions ?? defaultMarkdownOptions}>
+              {preview}
+            </Markdown>
+          ) : null}
         </TextElement>
         {renderActionButtons
           ? actions?.slice(0, 2)?.map((action, index) => (
@@ -225,23 +231,25 @@ const Message: React.FunctionComponent<{
 };
 
 const MessageWrapper: React.FunctionComponent<{
-  message: IInboxMessagePreview;
   defaultIcon: InboxProps["defaultIcon"];
   formatDate: InboxProps["formatDate"];
   isMessageFocused: boolean;
   isMobile?: boolean;
   labels: InboxProps["labels"];
+  markdownOptions?: MarkdownToJSX.Options;
+  message: IInboxMessagePreview;
   openLinksInNewTab: InboxProps["openLinksInNewTab"];
   renderActionsAsButtons?: boolean;
   renderPin: InboxProps["renderPin"];
   setFocusedMessageId: React.Dispatch<React.SetStateAction<string>>;
 }> = ({
-  message,
   defaultIcon,
   formatDate,
   isMessageFocused,
   isMobile,
   labels,
+  markdownOptions,
+  message,
   openLinksInNewTab,
   renderActionsAsButtons,
   renderPin,
@@ -415,9 +423,10 @@ const MessageWrapper: React.FunctionComponent<{
   const renderedMessage = useMemo(() => {
     return (
       <Message
-        message={message}
         areActionsHovered={areActionsHovered}
         isMessageActive={isMessageFocused || isMessageHovered}
+        markdownOptions={markdownOptions}
+        message={message}
         openLinksInNewTab={openLinksInNewTab}
         renderActionsAsButtons={renderActionsAsButtons}
         renderedIcon={renderedIcon}

diff --git a/packages/react-inbox/src/components/Messages2.0/index.tsx b/packages/react-inbox/src/components/Messages2.0/index.tsx
@@ -195,14 +195,15 @@ const Messages: React.ForwardRefExoticComponent<
       formatDate,
       isMobile,
       labels,
+      markdownOptions,
       openLinksInNewTab,
       renderFooter,
       renderHeader,
       renderMessage,
       renderNoMessages,
       renderPin,
-      views,
       title,
+      views,
     },
     ref
   ) => {
@@ -361,13 +362,14 @@ const Messages: React.ForwardRefExoticComponent<
                   renderMessage(message)
                 ) : (
                   <Message
-                    message={message}
-                    isMobile={isMobile}
                     defaultIcon={defaultIcon}
                     formatDate={formatDate}
                     isMessageFocused={focusedMessageId === message.messageId}
+                    isMobile={isMobile}
                     key={message.messageId}
                     labels={labels}
+                    markdownOptions={markdownOptions}
+                    message={message}
                     openLinksInNewTab={openLinksInNewTab}
                     renderPin={renderPin}
                     renderActionsAsButtons={
@@ -389,13 +391,14 @@ const Messages: React.ForwardRefExoticComponent<
                   renderMessage(message)
                 ) : (
                   <Message
-                    message={message}
                     defaultIcon={defaultIcon}
                     formatDate={formatDate}
                     isMessageFocused={focusedMessageId === message.messageId}
                     isMobile={isMobile}
                     key={message.messageId}
                     labels={labels}
+                    markdownOptions={markdownOptions}
+                    message={message}
                     openLinksInNewTab={openLinksInNewTab}
                     renderActionsAsButtons={
                       brand?.inapp?.renderActionsAsButtons

diff --git a/packages/react-inbox/src/types.ts b/packages/react-inbox/src/types.ts
@@ -5,6 +5,7 @@ import { IGetInboxMessagesParams } from "@trycourier/client-graphql";
 import { IHeaderProps } from "./components/Messages2.0/types";
 import { CSSObject } from "styled-components";
 import { Brand, IInboxMessagePreview, PinDetails } from "@trycourier/core";
+import { MarkdownToJSX } from "markdown-to-jsx";
 
 export interface InboxTheme {
   brand?: Brand;
@@ -42,12 +43,13 @@ export interface InboxTheme {
 }
 
 export interface InboxProps {
-  tenantId?: string;
   brand?: Brand;
   className?: string;
   defaultIcon?: false | string;
   from?: number;
   isOpen?: boolean;
+  markdownOptions?: MarkdownToJSX.Options;
+  tenantId?: string;
   views?: Array<{
     id: string;
     label: string;

diff --git a/packages/react-toast/src/components/Body/index.tsx b/packages/react-toast/src/components/Body/index.tsx
@@ -12,12 +12,12 @@ import { getIcon } from "./helpers";
 import { useToast } from "~/hooks";
 import { useInbox } from "@trycourier/react-hooks";
 import { useCourier } from "@trycourier/react-provider";
-import Markdown from "markdown-to-jsx";
+import Markdown, { MarkdownToJSX } from "markdown-to-jsx";
 import styled from "styled-components";
 import deepExtend from "deep-extend";
 import tinycolor2 from "tinycolor2";
 import { themeDefaults } from "~/constants";
-import { IInboxMessagePreview } from "@trycourier/core";
+import { IInboxMessagePreview, defaultMarkdownOptions } from "@trycourier/core";
 
 const containerStyles = {
   height: "100%",
@@ -62,13 +62,22 @@ const NonClickableContainer = styled.div(({ theme }) => {
 });
 
 const Body: React.FunctionComponent<{
+  icon: IInboxMessagePreview["icon"] | ReactElement;
+  markdownOptions?: MarkdownToJSX.Options;
   message: IInboxMessagePreview;
-  toastProps?: ToastOptions;
   onClick?: (event: React.MouseEvent) => void;
-  icon: IInboxMessagePreview["icon"] | ReactElement;
-  title?: IInboxMessagePreview["title"] | ReactElement;
   preview?: IInboxMessagePreview["preview"] | ReactElement;
-}> = ({ message, onClick, title, preview, icon, ...props }) => {
+  title?: IInboxMessagePreview["title"] | ReactElement;
+  toastProps?: ToastOptions;
+}> = ({
+  message,
+  onClick,
+  title,
+  preview,
+  markdownOptions,
+  icon,
+  ...props
+}) => {
   const { actions, data, messageId } = message;
   const courier = useCourier();
   const [, { config }] = useToast();
@@ -200,7 +209,9 @@ const Body: React.FunctionComponent<{
           {title && <Title data-testid="message-title">{title}</Title>}
           <TextElement data-testid="message-body">
             {typeof preview === "string" ? (
-              <Markdown>{preview as string}</Markdown>
+              <Markdown options={markdownOptions ?? defaultMarkdownOptions}>
+                {preview as string}
+              </Markdown>
             ) : (
               preview
             )}