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
)}