UNPKG

@humanspeak/svelte-markdown

Version:

Markdown and HTML renderer for Svelte 5 — built for rendering streaming AI agent output from Claude Code, ChatGPT, and agentic workflows. XSS-safe defaults, streaming-aware sanitization, token caching, TypeScript types, and Svelte 5 runes.

69 lines (68 loc) 3.27 kB
/** * @component Parser * * Recursive markdown token parser that transforms tokens into Svelte components. * This component is the core rendering engine of the markdown system, handling * the transformation of parsed markdown tokens into their corresponding Svelte components. * * @example * ```svelte * <Parser * tokens={parsedTokens} * renderers={customRenderers} * type="paragraph" * /> * ``` * * Features: * - Recursive token parsing * - Custom renderer support * - Snippet-based renderer overrides (snippet > component > default) * - Special handling for tables, lists, and HTML content * - Type-safe component rendering * * @typedef {Object} Props * @property {string} [type] - Token type for direct component rendering * @property {Token[] | TokensList} [tokens] - Markdown tokens to be rendered * @property {Tokens.TableCell[]} [header] - Table header cells for table rendering * @property {Tokens.TableCell[][]} [rows] - Table row cells for table rendering * @property {boolean} [ordered=false] - Whether the list is ordered (for list rendering) * @property {Renderers} renderers - Component mapping for markdown elements * @property {Record<string, any>} [snippetOverrides] - Snippet overrides for markdown renderers * @property {Record<string, any>} [htmlSnippetOverrides] - Snippet overrides for HTML tag renderers * * Implementation Notes: * - Uses recursive rendering for nested tokens * - Implements special logic for tables, lists, and HTML content * - Handles component prop spreading carefully to avoid conflicts * - Maintains type safety through TypeScript interfaces * - HTML token handling in table cells uses type assertions for better type safety * - Table cell HTML content is processed with proper token nesting and attribute preservation * - Improved HTML component rendering with proper type checking for tag properties * - Added support for nested markdown within HTML table cells (see test at lines 311-343 in SvelteMarkdown.test.ts) * - Token cleanup utilities handle complex nested structures (see lines 105-127 in token-cleanup.test.ts) * - HTML parsing maintains proper structure for both simple and complex nested elements * */ import Parser from './Parser.svelte'; import { type Renderers, type Token, type TokensList, type Tokens } from './utils/markdown-parser.js'; import { type SanitizeAttributesFn, type SanitizeUrlFn } from './utils/sanitize.js'; type AnySnippet = (..._args: any[]) => any; interface Props<T extends Renderers = Renderers> { type?: string; tokens?: Token[] | TokensList; header?: Tokens.TableCell[]; rows?: Tokens.TableCell[][]; ordered?: boolean; renderers: T; snippetOverrides?: Record<string, AnySnippet>; htmlSnippetOverrides?: Record<string, AnySnippet>; sanitizeUrl?: SanitizeUrlFn; sanitizeAttributes?: SanitizeAttributesFn; } type $$ComponentProps = Props & { [key: string]: unknown; }; declare const Parser: import("svelte").Component<$$ComponentProps, {}, "">; type Parser = ReturnType<typeof Parser>; export default Parser;