refactor: improve markdown rendering on notifications (#17112)

**Before:** <img width="753" alt="Screenshot 2025-03-26 at 11 11 46" src="https://github.com/user-attachments/assets/d4504de9-d007-43bf-9e0b-a8ff1b04da2c" /> **After:** ![image](https://github.com/user-attachments/assets/5a249a48-e2ec-4573-97ea-7a978fbe3c9a)
2026-09-24 15:04:27 +08:00 · 2025-03-26 11:24:54 -03:00
parent eaab4045f5
commit 9668cba0e5
5 changed files with 56 additions and 12 deletions
@@ -140,6 +140,7 @@
 		"@storybook/test": "8.4.6",
 		"@swc/core": "1.3.38",
 		"@swc/jest": "0.2.37",
+		"@tailwindcss/typography": "0.5.16",
 		"@testing-library/jest-dom": "6.6.3",
 		"@testing-library/react": "14.3.1",
 		"@testing-library/react-hooks": "8.0.1",
@@ -325,6 +325,9 @@ importers:
      '@swc/jest':
        specifier: 0.2.37
        version: 0.2.37(@swc/core@1.3.38)
+      '@tailwindcss/typography':
+        specifier: 0.5.16
+        version: 0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.3.38)(@types/node@20.17.16)(typescript@5.6.3)))
      '@testing-library/jest-dom':
        specifier: 6.6.3
        version: 6.6.3
@@ -2472,6 +2475,11 @@ packages:
    peerDependencies:
      '@swc/core': '*'

+  '@tailwindcss/typography@0.5.16':
+    resolution: {integrity: sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==, tarball: https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
+
  '@tanstack/match-sorter-utils@8.8.4':
    resolution: {integrity: sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==, tarball: https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.8.4.tgz}
    engines: {node: '>=12'}
@@ -3745,7 +3753,6 @@ packages:
  eslint@8.52.0:
    resolution: {integrity: sha512-zh/JHnaixqHZsolRB/w9/02akBk9EPrOs9JwcTP2ek7yL5bVvXuRariiaAjjoJ5DvuwQ1WAE/HsMz+w17YgBCg==, tarball: https://registry.npmjs.org/eslint/-/eslint-8.52.0.tgz}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
    hasBin: true

  espree@9.6.1:
@@ -4634,6 +4641,12 @@ packages:
  lodash-es@4.17.21:
    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==, tarball: https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz}

+  lodash.castarray@4.4.0:
+    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==, tarball: https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz}
+
+  lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==, tarball: https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz}
+
  lodash.merge@4.6.2:
    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==, tarball: https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz}

@@ -5261,6 +5274,10 @@ packages:
    peerDependencies:
      postcss: ^8.2.14

+  postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==, tarball: https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz}
+    engines: {node: '>=4'}
+
  postcss-selector-parser@6.1.2:
    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==, tarball: https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz}
    engines: {node: '>=4'}
@@ -8577,6 +8594,14 @@ snapshots:
      '@swc/counter': 0.1.3
      jsonc-parser: 3.2.0

+  '@tailwindcss/typography@0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.3.38)(@types/node@20.17.16)(typescript@5.6.3)))':
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.3.38)(@types/node@20.17.16)(typescript@5.6.3))
+
  '@tanstack/match-sorter-utils@8.8.4':
    dependencies:
      remove-accents: 0.4.2
@@ -11136,8 +11161,11 @@ snapshots:

  lodash-es@4.17.21: {}

-  lodash.merge@4.6.2:
-    optional: true
+  lodash.castarray@4.4.0: {}
+
+  lodash.isplainobject@4.0.6: {}
+
+  lodash.merge@4.6.2: {}

  lodash@4.17.21: {}

@@ -12010,6 +12038,11 @@ snapshots:
      postcss: 8.5.1
      postcss-selector-parser: 6.1.2

+  postcss-selector-parser@6.0.10:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
  postcss-selector-parser@6.1.2:
    dependencies:
      cssesc: 3.0.0
@@ -53,7 +53,14 @@ export const Markdown: Story = {
 		notification: {
 			...MockNotification,
 			read_at: null,
-			content: "Hello **world**!",
+			content:
+				"Template **Write Coder on Coder with AI** has failed to build 1/33 times over the last week.\n\n**Report:**\n\n**sweet_cannon7** failed 1 time:\n\n* [edward / coder-on-coder-claude / #34](https://dev.coder.com/@edward/coder-on-coder-claude/builds/34)\n\nWe recommend reviewing these issues to ensure future builds are successful.",
+			actions: [
+				{
+					label: "View workspaces",
+					url: "https://dev.coder.com/workspaces?filter=template%3Acoder-with-ai",
+				},
+			],
 		},
 	},
 };
@@ -1,6 +1,7 @@
 import type { InboxNotification } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { Button } from "components/Button/Button";
+import { Link } from "components/Link/Link";
 import { SquareCheckBig } from "lucide-react";
 import type { FC } from "react";
 import Markdown from "react-markdown";
@@ -28,14 +29,16 @@ export const InboxItem: FC<InboxItemProps> = ({
 			</div>

 			<div className="flex flex-col gap-3 flex-1">
-				<span
-					className={cn([
-						"text-content-secondary text-sm font-medium whitespace-break-spaces [overflow-wrap:anywhere]",
-						"[&_p]:m-0",
-					])}
+				<Markdown
+					className="text-content-secondary prose-sm font-medium [overflow-wrap:anywhere]"
+					components={{
+						a: ({ node, ...props }) => {
+							return <Link {...props} />;
+						},
+					}}
 				>
-					<Markdown>{notification.content}</Markdown>
-				</span>
+					{notification.content}
+				</Markdown>
 				<div className="flex items-center gap-1">
 					{notification.actions.map((action) => {
 						return (
@@ -75,5 +75,5 @@ module.exports = {
 			},
 		},
 	},
-	plugins: [require("tailwindcss-animate")],
+	plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
 };