fix(ClientOptions): resolve unparsed markdown in documentation

Corrected the markdown rendering for `ClientOptions` to properly parse bold text and links. This fixes the issue where markdown elements were not displaying as intended.

Closes #10558

apps/website/package.json

@@ -66,6 +66,8 @@
 		"react": "19.0.0-rc-f994737d14-20240522",
 		"react-aria-components": "^1.2.1",
 		"react-dom": "19.0.0-rc-f994737d14-20240522",
+		"react-markdown": "^9.0.1",
+		"rehype-raw": "^7.0.0",
 		"sharp": "^0.33.4",
 		"usehooks-ts": "^3.1.0",
 		"vaul": "^0.9.1"

apps/website/src/components/DocNode.tsx

@@ -1,13 +1,16 @@
 import Link from 'next/link';
+import React from 'react';
 import { BuiltinDocumentationLinks } from '~/util/builtinDocumentationLinks';
 import { OverlayScrollbarsComponent } from './OverlayScrollbars';
+import { ParsedText } from './ParsedText';
 import { SyntaxHighlighter } from './SyntaxHighlighter';
 
 export async function DocNode({ node, version }: { readonly node?: any; readonly version: string }) {
 	const createNode = (node: any, idx: number) => {
 		switch (node.kind) {
 			case 'PlainText':
 				return <span key={`${node.text}-${idx}`}>{node.text}</span>;
+
 			case 'LinkTag': {
 				if (node.resolvedPackage) {
 					return (
@@ -62,7 +65,6 @@ export async function DocNode({ node, version }: { readonly node?: any; readonly
 
 			case 'FencedCode': {
 				const { language, text } = node;
-
 				return (
 					<OverlayScrollbarsComponent
 						defer
@@ -72,13 +74,17 @@ export async function DocNode({ node, version }: { readonly node?: any; readonly
 						}}
 						className="my-4 rounded-md border border-neutral-300 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-900"
 					>
-						<SyntaxHighlighter className="py-4 text-sm " lang={language} code={text} />
+						<SyntaxHighlighter className="py-4 text-sm" lang={language} code={text} />
 					</OverlayScrollbarsComponent>
 				);
 			}
 
 			case 'SoftBreak':
 				return null;
+
+			case 'BoldText':
+				return <ParsedText key={`${node.text}-${idx}`} text={node.text} />;
+
 			default:
 				return null;
 		}

apps/website/src/components/ParsedText.tsx

@@ -0,0 +1,26 @@
+/* eslint-disable react/no-unstable-nested-components */
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+interface ParsedTextProps {
+	readonly text: string;
+}
+
+export const ParsedText: React.FC<ParsedTextProps> = ({ text }) => {
+	return (
+		<ReactMarkdown
+			rehypePlugins={[rehypeRaw]} // Parses raw HTML in markdown
+			components={{
+				strong: ({ children }) => <strong>{children}</strong>, // Renders bold text
+				a: ({ children, href }) => (
+					<a href={href} rel="noopener noreferrer">
+						{children}
+					</a>
+				), // Renders links
+			}}
+		>
+			{text}
+		</ReactMarkdown>
+	);
+};