markdown

1"use client";
2 
3import { Streamdown, type Components } from "streamdown";
4import { createCodePlugin } from "@streamdown/code";
5import { cn } from "./utils/cn";
6 
7function fixNumberedListBreaks(text: string): string {
8  return text.replace(/^(\d+)\.\s*\n+\s*\n*/gm, "$1. ");
9}
10 
11const CODE_FENCE_LANGS = new Set([
12  "bash",
13  "diff",
14  "html",
15  "js",
16  "json",
17  "jsx",
18  "md",
19  "markdown",
20  "sh",
21  "shell",
22  "text",
23  "ts",
24  "tsx",
25  "yml",
26  "yaml",
27]);
28 
29function normalizeCodeFenceLanguages(text: string): string {
30  return text.replace(/```([^\n]*)/g, (_match, langRaw) => {
31    const lang = String(langRaw || "")
32      .trim()
33      .toLowerCase();
34    if (!lang) return "```";
35    const normalized = lang.split(/\s+/)[0];
36    return CODE_FENCE_LANGS.has(normalized) ? `\`\`\`${normalized}` : "```text";
37  });
38}
39 
40export type MarkdownProps = {
41  content: string;
42  className?: string;
43  textContrast?: "normal" | "high";
44};
45 
46const code = createCodePlugin({
47  themes: ["github-light", "github-dark"],
48});
49 
50export function Markdown({ content, className }: MarkdownProps) {
51  const safeContent = normalizeCodeFenceLanguages(
52    fixNumberedListBreaks(content),
53  );
54  const components: Components = {
55    h1: ({ children, ...props }) => (
56      <h1 className="an-md-h1 text-base font-semibold mt-3 mb-1.5" {...props}>
57        {children}
58      </h1>
59    ),
60    h2: ({ children, ...props }) => (
61      <h2 className="an-md-h2 text-base font-semibold mt-3 mb-1.5" {...props}>
62        {children}
63      </h2>
64    ),
65    h3: ({ children, ...props }) => (
66      <h3 className="an-md-h3 text-sm font-semibold mt-2 mb-1" {...props}>
67        {children}
68      </h3>
69    ),
70    h4: ({ children, ...props }) => (
71      <h4 className="an-md-h4 text-sm font-medium mt-2 mb-1" {...props}>
72        {children}
73      </h4>
74    ),
75    p: ({ children, ...props }) => (
76      <p
77        className="an-md-p text-sm leading-relaxed text-an-foreground/80"
78        {...props}
79      >
80        {children}
81      </p>
82    ),
83    ul: ({ children, ...props }) => (
84      <ul
85        className="an-md-ul list-disc list-outside space-y-0.5 text-sm mb-2 pl-4 text-an-foreground/80"
86        {...props}
87      >
88        {children}
89      </ul>
90    ),
91    ol: ({ children, ...props }) => (
92      <ol
93        className="an-md-ol list-decimal list-outside space-y-0.5 text-sm mb-2 pl-5 text-an-foreground/80"
94        {...props}
95      >
96        {children}
97      </ol>
98    ),
99    li: ({ children, ...props }) => (
100// … truncated