@effect-tui/react 0.1.3 → 0.1.5

package/src/components/Markdown.tsx

@@ -0,0 +1,380 @@
+import { Colors, type ColorValue } from "@effect-tui/core"
+import { CodeBlock } from "../codeblock.js"
+import type { BundledLanguage, BundledTheme } from "shiki"
+
+export interface MarkdownTheme {
+	/** Header colors by level (h1, h2, h3+) */
+	h1?: ColorValue
+	h2?: ColorValue
+	h3?: ColorValue
+	/** Bold text color */
+	bold?: ColorValue
+	/** Italic text color */
+	italic?: ColorValue
+	/** Inline code color */
+	code?: ColorValue
+	/** Inline code background */
+	codeBg?: ColorValue
+	/** Link text color */
+	link?: ColorValue
+	/** Link URL color */
+	linkUrl?: ColorValue
+	/** Blockquote text color */
+	quote?: ColorValue
+	/** Blockquote border color */
+	quoteBorder?: ColorValue
+	/** List bullet/number color */
+	listMarker?: ColorValue
+	/** Normal text color */
+	text?: ColorValue
+}
+
+const defaultTheme: Required<MarkdownTheme> = {
+	h1: Colors.brightCyan,
+	h2: Colors.cyan,
+	h3: Colors.brightBlue,
+	bold: Colors.brightWhite,
+	italic: Colors.brightYellow,
+	code: Colors.brightGreen,
+	codeBg: Colors.gray(2),
+	link: Colors.brightBlue,
+	linkUrl: Colors.gray(10),
+	quote: Colors.gray(14),
+	quoteBorder: Colors.gray(8),
+	listMarker: Colors.gray(12),
+	text: Colors.gray(18),
+}
+
+export interface MarkdownProps {
+	/** Markdown content to render */
+	content: string
+	/** Custom theme overrides */
+	theme?: MarkdownTheme
+	/** Code block theme for syntax highlighting */
+	codeTheme?: BundledTheme
+	/** Maximum width for text wrapping (default: no wrap) */
+	maxWidth?: number
+}
+
+// Parsed markdown elements
+type MdElement =
+	| { type: "h1" | "h2" | "h3"; text: string }
+	| { type: "paragraph"; spans: MdSpan[] }
+	| { type: "code"; language: string; code: string }
+	| { type: "blockquote"; spans: MdSpan[] }
+	| { type: "ul"; items: MdSpan[][] }
+	| { type: "ol"; items: MdSpan[][]; start: number }
+	| { type: "hr" }
+	| { type: "blank" }
+
+type MdSpan =
+	| { type: "text"; text: string }
+	| { type: "bold"; text: string }
+	| { type: "italic"; text: string }
+	| { type: "code"; text: string }
+	| { type: "link"; text: string; url: string }
+
+/**
+ * Parse inline markdown formatting (bold, italic, code, links)
+ */
+function parseInline(text: string): MdSpan[] {
+	const spans: MdSpan[] = []
+	let remaining = text
+
+	while (remaining.length > 0) {
+		// Bold: **text** or __text__
+		let match = remaining.match(/^\*\*(.+?)\*\*|^__(.+?)__/)
+		if (match) {
+			spans.push({ type: "bold", text: match[1] || match[2] })
+			remaining = remaining.slice(match[0].length)
+			continue
+		}
+
+		// Italic: *text* or _text_ (but not inside words for _)
+		match = remaining.match(/^\*([^*]+?)\*|^_([^_]+?)_/)
+		if (match) {
+			spans.push({ type: "italic", text: match[1] || match[2] })
+			remaining = remaining.slice(match[0].length)
+			continue
+		}
+
+		// Inline code: `code`
+		match = remaining.match(/^`([^`]+?)`/)
+		if (match) {
+			spans.push({ type: "code", text: match[1] })
+			remaining = remaining.slice(match[0].length)
+			continue
+		}
+
+		// Link: [text](url)
+		match = remaining.match(/^\[([^\]]+)\]\(([^)]+)\)/)
+		if (match) {
+			spans.push({ type: "link", text: match[1], url: match[2] })
+			remaining = remaining.slice(match[0].length)
+			continue
+		}
+
+		// Plain text until next special character
+		match = remaining.match(/^[^*_`\[]+/)
+		if (match) {
+			spans.push({ type: "text", text: match[0] })
+			remaining = remaining.slice(match[0].length)
+			continue
+		}
+
+		// Single special character that didn't match a pattern
+		spans.push({ type: "text", text: remaining[0] })
+		remaining = remaining.slice(1)
+	}
+
+	return spans
+}
+
+/**
+ * Parse markdown content into elements
+ */
+function parseMarkdown(content: string): MdElement[] {
+	const lines = content.split("\n")
+	const elements: MdElement[] = []
+	let i = 0
+
+	while (i < lines.length) {
+		const line = lines[i]
+
+		// Blank line
+		if (line.trim() === "") {
+			elements.push({ type: "blank" })
+			i++
+			continue
+		}
+
+		// Horizontal rule
+		if (/^[-*_]{3,}\s*$/.test(line)) {
+			elements.push({ type: "hr" })
+			i++
+			continue
+		}
+
+		// Headers
+		const headerMatch = line.match(/^(#{1,6})\s+(.+)$/)
+		if (headerMatch) {
+			const level = Math.min(headerMatch[1].length, 3)
+			const type = level === 1 ? "h1" : level === 2 ? "h2" : "h3"
+			elements.push({ type, text: headerMatch[2] })
+			i++
+			continue
+		}
+
+		// Fenced code block
+		const codeMatch = line.match(/^```(\w*)/)
+		if (codeMatch) {
+			const language = codeMatch[1] || "text"
+			const codeLines: string[] = []
+			i++
+			while (i < lines.length && !lines[i].startsWith("```")) {
+				codeLines.push(lines[i])
+				i++
+			}
+			elements.push({ type: "code", language, code: codeLines.join("\n") })
+			i++ // skip closing ```
+			continue
+		}
+
+		// Blockquote
+		if (line.startsWith(">")) {
+			const quoteText = line.replace(/^>\s?/, "")
+			elements.push({ type: "blockquote", spans: parseInline(quoteText) })
+			i++
+			continue
+		}
+
+		// Unordered list
+		const ulMatch = line.match(/^[-*+]\s+(.+)$/)
+		if (ulMatch) {
+			const items: MdSpan[][] = []
+			while (i < lines.length) {
+				const itemMatch = lines[i].match(/^[-*+]\s+(.+)$/)
+				if (!itemMatch) break
+				items.push(parseInline(itemMatch[1]))
+				i++
+			}
+			elements.push({ type: "ul", items })
+			continue
+		}
+
+		// Ordered list
+		const olMatch = line.match(/^(\d+)\.\s+(.+)$/)
+		if (olMatch) {
+			const start = parseInt(olMatch[1], 10)
+			const items: MdSpan[][] = []
+			while (i < lines.length) {
+				const itemMatch = lines[i].match(/^\d+\.\s+(.+)$/)
+				if (!itemMatch) break
+				items.push(parseInline(itemMatch[1]))
+				i++
+			}
+			elements.push({ type: "ol", items, start })
+			continue
+		}
+
+		// Regular paragraph
+		elements.push({ type: "paragraph", spans: parseInline(line) })
+		i++
+	}
+
+	return elements
+}
+
+/**
+ * Render inline spans as text elements
+ */
+function renderSpans(spans: MdSpan[], theme: Required<MarkdownTheme>) {
+	return spans.map((span, i) => {
+		switch (span.type) {
+			case "text":
+				return (
+					<text key={i} fg={theme.text}>
+						{span.text}
+					</text>
+				)
+			case "bold":
+				return (
+					<text key={i} fg={theme.bold} bold>
+						{span.text}
+					</text>
+				)
+			case "italic":
+				return (
+					<text key={i} fg={theme.italic} italic>
+						{span.text}
+					</text>
+				)
+			case "code":
+				return (
+					<text key={i} fg={theme.code} bg={theme.codeBg}>
+						{span.text}
+					</text>
+				)
+			case "link":
+				return (
+					<hstack key={i}>
+						<text fg={theme.link}>{span.text}</text>
+						<text fg={theme.linkUrl}>{" ("}</text>
+						<text fg={theme.linkUrl}>{span.url}</text>
+						<text fg={theme.linkUrl}>{")"}</text>
+					</hstack>
+				)
+		}
+	})
+}
+
+/**
+ * A markdown renderer component for terminal UIs.
+ *
+ * Supports:
+ * - Headers (# ## ###)
+ * - Bold (**text**) and italic (*text*)
+ * - Inline code (`code`) and fenced code blocks
+ * - Links [text](url)
+ * - Blockquotes (> text)
+ * - Unordered lists (- item)
+ * - Ordered lists (1. item)
+ * - Horizontal rules (---)
+ *
+ * @example
+ * ```tsx
+ * <Markdown content={`
+ * # Hello World
+ *
+ * This is **bold** and *italic* text.
+ *
+ * \`\`\`typescript
+ * const x = 42
+ * \`\`\`
+ * `} />
+ * ```
+ */
+export function Markdown({ content, theme: themeOverrides, codeTheme = "nord" }: MarkdownProps) {
+	const theme = { ...defaultTheme, ...themeOverrides }
+	const elements = parseMarkdown(content)
+
+	return (
+		<vstack>
+			{elements.map((el, i) => {
+				switch (el.type) {
+					case "h1":
+						return (
+							<text key={i} fg={theme.h1} bold>
+								{"# "}
+								{el.text}
+							</text>
+						)
+					case "h2":
+						return (
+							<text key={i} fg={theme.h2} bold>
+								{"## "}
+								{el.text}
+							</text>
+						)
+					case "h3":
+						return (
+							<text key={i} fg={theme.h3} bold>
+								{"### "}
+								{el.text}
+							</text>
+						)
+					case "paragraph":
+						return <hstack key={i}>{renderSpans(el.spans, theme)}</hstack>
+					case "code":
+						return (
+							<CodeBlock
+								key={i}
+								code={el.code}
+								language={el.language as BundledLanguage}
+								theme={codeTheme}
+								lineNumbers={false}
+								padding={1}
+							/>
+						)
+					case "blockquote":
+						return (
+							<hstack key={i}>
+								<text fg={theme.quoteBorder}>{"│ "}</text>
+								{renderSpans(el.spans, theme)}
+							</hstack>
+						)
+					case "ul":
+						return (
+							<vstack key={i}>
+								{el.items.map((item, j) => (
+									<hstack key={j}>
+										<text fg={theme.listMarker}>{"  • "}</text>
+										{renderSpans(item, theme)}
+									</hstack>
+								))}
+							</vstack>
+						)
+					case "ol":
+						return (
+							<vstack key={i}>
+								{el.items.map((item, j) => (
+									<hstack key={j}>
+										<text fg={theme.listMarker}>{`  ${el.start + j}. `}</text>
+										{renderSpans(item, theme)}
+									</hstack>
+								))}
+							</vstack>
+						)
+					case "hr":
+						return (
+							<text key={i} fg={theme.quoteBorder}>
+								{"────────────────────────────────"}
+							</text>
+						)
+					case "blank":
+						return <text key={i}> </text>
+				}
+			})}
+		</vstack>
+	)
+}