From 9b3d7569820f91425dbf20e503091caa55cd670d Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Mon, 24 Mar 2025 16:11:29 +0000 Subject: [PATCH 1/2] feat: support markdown in notifications --- .../NotificationsInbox/InboxItem.stories.tsx | 10 ++++++++++ .../notifications/NotificationsInbox/InboxItem.tsx | 11 +++++++++-- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx b/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx index a42d067d144cf..815bf6511fc6f 100644 --- a/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx +++ b/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx @@ -48,6 +48,16 @@ export const LongText: Story = { }, }; +export const Markdown: Story = { + args: { + notification: { + ...MockNotification, + read_at: null, + content: "Hello **world**!", + }, + }, +}; + export const UnreadFocus: Story = { args: { notification: { diff --git a/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx b/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx index 3a8809c38f890..e034fd5be4de7 100644 --- a/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx +++ b/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx @@ -5,6 +5,8 @@ import { SquareCheckBig } from "lucide-react"; import type { FC } from "react"; import { Link as RouterLink } from "react-router-dom"; import { relativeTime } from "utils/time"; +import Markdown from "react-markdown"; +import { cn } from "utils/cn"; type InboxItemProps = { notification: InboxNotification; @@ -26,8 +28,13 @@ export const InboxItem: FC = ({
- - {notification.content} + + {notification.content}
{notification.actions.map((action) => { From 3dbc188334e2daad08cce498c017136fc06ef547 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Mon, 24 Mar 2025 16:16:35 +0000 Subject: [PATCH 2/2] FMT --- .../modules/notifications/NotificationsInbox/InboxItem.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx b/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx index e034fd5be4de7..e097a6e296963 100644 --- a/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx +++ b/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx @@ -3,10 +3,10 @@ import { Avatar } from "components/Avatar/Avatar"; import { Button } from "components/Button/Button"; import { SquareCheckBig } from "lucide-react"; import type { FC } from "react"; -import { Link as RouterLink } from "react-router-dom"; -import { relativeTime } from "utils/time"; import Markdown from "react-markdown"; +import { Link as RouterLink } from "react-router-dom"; import { cn } from "utils/cn"; +import { relativeTime } from "utils/time"; type InboxItemProps = { notification: InboxNotification; pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy