Feat: apply prose typography styling to markdown preview (#16752)

web/package-lock.json

@@ -124,6 +124,7 @@
         "@storybook/addon-webpack5-compiler-swc": "^4.0.1",
         "@storybook/react-webpack5": "^9.1.4",
         "@tailwindcss/container-queries": "^0.1.1",
+        "@tailwindcss/typography": "^0.5.20",
         "@testing-library/jest-dom": "^6.4.5",
         "@testing-library/react": "^15.0.7",
         "@types/dompurify": "^3.0.5",
@@ -7653,6 +7654,33 @@
         "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.20",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/typography/-/typography-0.5.20.tgz",
+      "integrity": "sha512-hwbzQuNUfcPvbegQFatVPl/MY/tcM9KLl963hQ5laJKPh81TEZ1+dNG9PirGvcaDBkp+BCshExAyKVPW91dozw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >=4.0.0 || insiders"
+      }
+    },
+    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "5.90.14",
       "resolved": "https://registry.npmmirror.com/@tanstack/query-core/-/query-core-5.90.14.tgz",

web/package.json

@@ -139,6 +139,7 @@
     "@storybook/addon-webpack5-compiler-swc": "^4.0.1",
     "@storybook/react-webpack5": "^9.1.4",
     "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/typography": "^0.5.20",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
     "@types/dompurify": "^3.0.5",
@@ -165,10 +166,10 @@
     "eslint-plugin-react-refresh": "^0.4.26",
     "eslint-plugin-storybook": "^9.1.4",
     "html-loader": "^5.1.0",
-    "lefthook": "^1.13.6",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "lefthook": "^1.13.6",
     "less": "^4.4.2",
     "postcss": "^8.5.6",
     "postcss-loader": "^8.2.0",

web/src/components/document-preview/md/index.tsx

@@ -80,9 +80,11 @@ export const Md: React.FC<MdProps> = ({ url, className }) => {
         </div>
       )}
       {!loading && (
-        <ReactMarkdown remarkPlugins={MarkdownRemarkPluginsLite}>
-          {content}
-        </ReactMarkdown>
+        <article className="prose max-w-none dark:prose-invert prose-headings:text-text-primary prose-p:text-text-primary prose-strong:text-text-primary prose-li:text-text-primary prose-blockquote:text-text-secondary prose-blockquote:border-border-secondary prose-a:text-accent-primary prose-a:no-underline hover:prose-a:underline prose-code:text-text-primary prose-code:bg-bg-elevated prose-code:rounded prose-code:px-1.5 prose-code:py-0.5 prose-code:before:content-[''] prose-code:after:content-[''] prose-pre:bg-bg-elevated prose-th:bg-bg-elevated prose-th:text-text-primary prose-td:text-text-primary prose-hr:border-border-secondary">
+          <ReactMarkdown remarkPlugins={MarkdownRemarkPluginsLite}>
+            {content}
+          </ReactMarkdown>
+        </article>
       )}
     </div>
   );

web/tailwind.config.js

@@ -243,5 +243,6 @@ module.exports = {
     require('@tailwindcss/line-clamp'),
     require('tailwind-scrollbar'),
     require('@tailwindcss/container-queries'),
+    require('@tailwindcss/typography'),
   ],
 };