diff --git a/packages/core/src/lib/index.ts b/packages/core/src/lib/index.ts index e840744e..a807d6be 100644 --- 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 index 3e2d82de..0044a62e 100644 --- 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} - {preview ? {preview} : null} + {preview ? ( + + {preview} + + ) : null} {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>; }> = ({ - message, defaultIcon, formatDate, isMessageFocused, isMobile, labels, + markdownOptions, + message, openLinksInNewTab, renderActionsAsButtons, renderPin, @@ -415,9 +423,10 @@ const MessageWrapper: React.FunctionComponent<{ const renderedMessage = useMemo(() => { return ( { @@ -361,13 +362,14 @@ const Messages: React.ForwardRefExoticComponent< renderMessage(message) ) : ( { }); 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}} {typeof preview === "string" ? ( - {preview as string} + + {preview as string} + ) : ( preview )}