pd-markdown 2.0.3 → 2.0.4-0

package/packages/web/dist/index.mjs

@@ -1,694 +1,16 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createParser } from 'pd-markdown/parser';
-import { createContext, useContext, useRef, useState, useEffect, useMemo, useCallback } from 'react';
-
-/**
- * Context for passing configuration down the component tree
- */
-const MarkdownContext = createContext({
-    components: {},
-});
-/**
- * Hook to access markdown context
- */
-function useMarkdownContext() {
-    return useContext(MarkdownContext);
-}
-
-const Heading = ({ node, children }) => {
-    const Tag = `h${node.depth}`;
-    const id = node.data && 'id' in node.data ? node.data.id : undefined;
-    return jsx(Tag, { id: id, children: children });
-};
-
-const Paragraph = ({ children }) => {
-    return jsx("p", { children: children });
-};
-
-const List = ({ node, children }) => {
-    const Tag = node.ordered ? 'ol' : 'ul';
-    const start = node.ordered && node.start != null && node.start !== 1 ? node.start : undefined;
-    return jsx(Tag, { start: start, children: children });
-};
-const ListItem = ({ node, children }) => {
-    // Handle task list items
-    if (typeof node.checked === 'boolean') {
-        return (jsxs("li", { className: "task-list-item", children: [jsx("input", { type: "checkbox", checked: node.checked, readOnly: true }), jsx("span", { children: children })] }));
-    }
-    return jsx("li", { children: children });
-};
-
-const Table = ({ children }) => {
-    return (jsx("table", { children: children }));
-};
-const TableRow = ({ children, isHeader }) => {
-    if (isHeader) {
-        return (jsx("thead", { children: jsx("tr", { children: children }) }));
-    }
-    return jsx("tr", { children: children });
-};
-const TableCell = ({ node, children }) => {
-    const isHeader = node.data?.isHeader;
-    const align = node.data?.align;
-    const Tag = isHeader ? 'th' : 'td';
-    const style = align ? { textAlign: align } : undefined;
-    return jsx(Tag, { style: style, children: children });
-};
-
-const Code = ({ node }) => {
-    const className = node.lang ? `language-${node.lang}` : undefined;
-    return (jsx("pre", { children: jsx("code", { className: className, children: node.value }) }));
-};
-const InlineCodeComponent = ({ node }) => {
-    return jsx("code", { children: node.value });
-};
-
-const Link = ({ node, children }) => {
-    // Basic security: prevent javascript: URLs
-    const href = node.url?.startsWith('javascript:') ? '#' : node.url;
-    return (jsx("a", { href: href, title: node.title || undefined, children: children }));
-};
-
-const Image = ({ node }) => {
-    return jsx("img", { src: node.url, alt: node.alt || '', title: node.title || undefined });
-};
-
-const Blockquote = ({ children }) => {
-    return jsx("blockquote", { children: children });
-};
-
-/**
- * Default component map
- */
-const defaultComponents = {
-    heading: Heading,
-    paragraph: Paragraph,
-    list: List,
-    listItem: ListItem,
-    table: Table,
-    tableRow: TableRow,
-    tableCell: TableCell,
-    code: Code,
-    inlineCode: InlineCodeComponent,
-    link: Link,
-    image: Image,
-    blockquote: Blockquote,
-};
-
-/**
- * Recursive node renderer that renders AST nodes to React elements
- */
-const NodeRenderer = ({ node }) => {
-    const { components } = useMarkdownContext();
-    // Get the component for this node type
-    const getComponent = (type) => {
-        return components[type] || defaultComponents[type];
-    };
-    // Render children nodes
-    const renderChildren = (children) => {
-        return children.map((child, index) => (jsx(NodeRenderer, { node: child }, index)));
-    };
-    // Render phrasing content (inline elements)
-    const renderPhrasingContent = (children) => {
-        return children.map((child, index) => {
-            switch (child.type) {
-                case 'text':
-                    return child.value;
-                case 'strong':
-                    return jsx("strong", { children: renderPhrasingContent(child.children) }, index);
-                case 'emphasis':
-                    return jsx("em", { children: renderPhrasingContent(child.children) }, index);
-                case 'delete':
-                    return jsx("del", { children: renderPhrasingContent(child.children) }, index);
-                case 'inlineCode': {
-                    const InlineCode = getComponent('inlineCode');
-                    return InlineCode ? jsx(InlineCode, { node: child }, index) : jsx("code", { children: child.value }, index);
-                }
-                case 'link': {
-                    const Link = getComponent('link');
-                    return Link ? (jsx(Link, { node: child, children: renderPhrasingContent(child.children) }, index)) : (jsx("a", { href: child.url, children: renderPhrasingContent(child.children) }, index));
-                }
-                case 'image': {
-                    const Image = getComponent('image');
-                    return Image ? jsx(Image, { node: child }, index) : jsx("img", { src: child.url, alt: child.alt || '' }, index);
-                }
-                case 'break':
-                    return jsx("br", {}, index);
-                case 'html':
-                    // For safety, render HTML as text in React
-                    return child.value;
-                default:
-                    // For unknown inline types, try to render as text if possible
-                    if ('value' in child && typeof child.value === 'string') {
-                        return child.value;
-                    }
-                    if ('children' in child) {
-                        return renderPhrasingContent(child.children);
-                    }
-                    return null;
-            }
-        });
-    };
-    // Handle different node types
-    switch (node.type) {
-        case 'root':
-            return jsx(Fragment, { children: renderChildren(node.children) });
-        case 'heading': {
-            const Heading = getComponent('heading');
-            return Heading ? (jsx(Heading, { node: node, children: renderPhrasingContent(node.children) })) : null;
-        }
-        case 'paragraph': {
-            const Paragraph = getComponent('paragraph');
-            return Paragraph ? (jsx(Paragraph, { node: node, children: renderPhrasingContent(node.children) })) : null;
-        }
-        case 'list': {
-            const List = getComponent('list');
-            return List ? (jsx(List, { node: node, children: renderChildren(node.children) })) : null;
-        }
-        case 'listItem': {
-            const ListItem = getComponent('listItem');
-            const children = node.children.map((child, index) => {
-                // Unwrap single paragraph in list item
-                if (child.type === 'paragraph' && node.children.length === 1) {
-                    return renderPhrasingContent(child.children);
-                }
-                return jsx(NodeRenderer, { node: child }, index);
-            });
-            return ListItem ? jsx(ListItem, { node: node, children: children }) : null;
-        }
-        case 'table': {
-            const Table = getComponent('table');
-            const TableRow = getComponent('tableRow');
-            if (!Table || !TableRow)
-                return null;
-            const [headerRow, ...bodyRows] = node.children;
-            return (jsxs(Table, { node: node, children: [headerRow && (jsx(TableRow, { node: headerRow, isHeader: true, children: headerRow.children.map((cell, index) => (jsx(NodeRenderer, { node: cell }, index))) })), bodyRows.length > 0 && (jsx("tbody", { children: bodyRows.map((row, rowIndex) => (jsx(TableRow, { node: row, children: row.children.map((cell, cellIndex) => (jsx(NodeRenderer, { node: cell }, cellIndex))) }, rowIndex))) }))] }));
-        }
-        case 'tableCell': {
-            const TableCell = getComponent('tableCell');
-            return TableCell ? (jsx(TableCell, { node: node, children: renderPhrasingContent(node.children) })) : null;
-        }
-        case 'code': {
-            const Code = getComponent('code');
-            return Code ? jsx(Code, { node: node }) : null;
-        }
-        case 'blockquote': {
-            const Blockquote = getComponent('blockquote');
-            return Blockquote ? (jsx(Blockquote, { node: node, children: renderChildren(node.children) })) : null;
-        }
-        case 'thematicBreak':
-            return jsx("hr", {});
-        case 'html':
-            // For safety, don't render raw HTML by default
-            return null;
-        case 'yaml':
-            // Frontmatter shouldn't be rendered
-            return null;
-        default: {
-            // Try to find a custom component for unknown types
-            const CustomComponent = getComponent(node.type);
-            if (CustomComponent) {
-                const children = 'children' in node
-                    ? renderChildren(node.children)
-                    : undefined;
-                return jsx(CustomComponent, { node: node, children: children });
-            }
-            // Fallback: try to render children if available
-            if ('children' in node) {
-                return jsx(Fragment, { children: renderChildren(node.children) });
-            }
-            return null;
-        }
-    }
-};
-
-// Singleton parser for client-side use
-let defaultParser = null;
-function getParser$2(options) {
-    if (options) {
-        return createParser(options);
-    }
-    if (!defaultParser) {
-        defaultParser = createParser();
-    }
-    return defaultParser;
-}
-/**
- * Main markdown renderer component
- *
- * Supports both client-side and server-side rendering:
- * - Pass `source` for automatic parsing
- * - Pass `ast` for pre-parsed content (SSR optimization)
- */
-const MarkdownRenderer = ({ source, ast, components = {}, className, style, parserOptions, }) => {
-    // Use provided AST or parse source
-    let tree;
-    if (ast) {
-        tree = ast;
-    }
-    else if (source) {
-        const parser = getParser$2(parserOptions);
-        tree = parser.parse(source);
-    }
-    else {
-        // No content provided
-        return null;
-    }
-    return (jsx(MarkdownContext.Provider, { value: { components }, children: jsx("div", { className: className, style: style, children: jsx(NodeRenderer, { node: tree }) }) }));
-};
-
-// ─── Styles ───────────────────────────────────────────────────────────
-const cursorKeyframes = `
-@keyframes pd-md-cursor-blink {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0; }
-}
-
-@keyframes pd-md-fade-in {
-  from { opacity: 0; transform: translateY(4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-`;
-const cursorStyle = {
-    display: 'inline-block',
-    width: '2px',
-    height: '1.1em',
-    backgroundColor: 'currentColor',
-    marginLeft: '2px',
-    verticalAlign: 'text-bottom',
-    animation: 'pd-md-cursor-blink 1s step-end infinite',
-};
-// ─── Internal Parsed AST Hook ─────────────────────────────────────────
-function useParsedAst(source, options) {
-    const parserRef = useRef(null);
-    const optionsRef = useRef(options);
-    if (!parserRef.current ||
-        JSON.stringify(optionsRef.current) !== JSON.stringify(options)) {
-        parserRef.current = createParser(options);
-        optionsRef.current = options;
-    }
-    return useMemo(() => {
-        try {
-            return parserRef.current.parse(source);
-        }
-        catch {
-            return { type: 'root', children: [] };
-        }
-    }, [source]);
-}
-// ─── Cursor Component ─────────────────────────────────────────────────
-const StreamCursor = ({ customElement }) => {
-    if (customElement) {
-        return jsx(Fragment, { children: customElement });
-    }
-    return jsx("span", { style: cursorStyle, "aria-hidden": "true", "data-streaming-cursor": true });
-};
-// ─── Main Component ──────────────────────────────────────────────────
-/**
- * StreamMarkdownRenderer — A streaming-aware markdown renderer.
- *
- * This component is designed for rendering AI-generated streaming markdown.
- * It shows a blinking cursor at the end while content is being streamed,
- * and optionally animates new content blocks as they appear.
- *
- * Usage patterns:
- *
- * 1. **With `useStreamMarkdown` hook** (recommended):
- *    ```tsx
- *    const stream = useStreamMarkdown()
- *    // ... consume stream
- *    <StreamMarkdownRenderer
- *      source={stream.source}
- *      ast={stream.ast}
- *      isStreaming={stream.isStreaming}
- *    />
- *    ```
- *
- * 2. **Standalone** (pass source, let it parse internally):
- *    ```tsx
- *    <StreamMarkdownRenderer
- *      source={accumulatedText}
- *      isStreaming={isLoading}
- *    />
- *    ```
- */
-const StreamMarkdownRenderer = ({ source, isStreaming = false, ast: externalAst, components = {}, className, style, parserOptions, showCursor = true, cursorElement, animationClassName, enableAnimation = true, }) => {
-    // Use external AST if provided, otherwise parse internally
-    const internalAst = useParsedAst(externalAst ? '' : source, parserOptions);
-    const ast = externalAst || internalAst;
-    // Track previous child count for animation
-    const prevChildCountRef = useRef(0);
-    const [animatingIndices, setAnimatingIndices] = useState(new Set());
-    // Detect new blocks for animation
-    useEffect(() => {
-        const currentCount = ast.children.length;
-        const prevCount = prevChildCountRef.current;
-        if (enableAnimation &&
-            isStreaming &&
-            currentCount > prevCount &&
-            prevCount > 0) {
-            const newIndices = new Set();
-            for (let i = prevCount; i < currentCount; i++) {
-                newIndices.add(i);
-            }
-            setAnimatingIndices(newIndices);
-            // Clear animation flags after animation completes
-            const timer = setTimeout(() => {
-                setAnimatingIndices(new Set());
-            }, 300);
-            prevChildCountRef.current = currentCount;
-            return () => clearTimeout(timer);
-        }
-        prevChildCountRef.current = currentCount;
-    }, [ast.children.length, enableAnimation, isStreaming]);
-    // Auto-scroll ref
-    const containerRef = useRef(null);
-    // Inject keyframe styles
-    useEffect(() => {
-        const styleId = 'pd-md-stream-styles';
-        if (!document.getElementById(styleId)) {
-            const styleEl = document.createElement('style');
-            styleEl.id = styleId;
-            styleEl.textContent = cursorKeyframes;
-            document.head.appendChild(styleEl);
-        }
-    }, []);
-    if (!source && !externalAst) {
-        return null;
-    }
-    const wrapperStyle = {
-        ...style,
-        position: 'relative',
-    };
-    return (jsx(MarkdownContext.Provider, { value: { components }, children: jsxs("div", { ref: containerRef, className: className, style: wrapperStyle, children: [ast.children.map((child, index) => {
-                    const isNewBlock = animatingIndices.has(index);
-                    const isLastBlock = index === ast.children.length - 1;
-                    const blockStyle = enableAnimation && isNewBlock
-                        ? {
-                            animation: 'pd-md-fade-in 0.3s ease-out forwards',
-                        }
-                        : {};
-                    const blockClassName = isNewBlock
-                        ? animationClassName || undefined
-                        : undefined;
-                    return (jsxs("div", { style: blockStyle, className: blockClassName, "data-stream-block": isLastBlock && isStreaming ? 'active' : undefined, children: [jsx(NodeRenderer, { node: child }), showCursor && isStreaming && isLastBlock && (jsx(StreamCursor, { customElement: cursorElement }))] }, index));
-                }), showCursor && isStreaming && ast.children.length === 0 && (jsx(StreamCursor, { customElement: cursorElement }))] }) }));
-};
-
-// Cached parser instance
-let cachedParser$1 = null;
-function getParser$1(options) {
-    if (options) {
-        return createParser(options);
-    }
-    if (!cachedParser$1) {
-        cachedParser$1 = createParser();
-    }
-    return cachedParser$1;
-}
-/**
- * Hook for parsing markdown on the client side
- *
- * @param source - Markdown source string
- * @param options - Parser options
- * @returns Parsed AST
- */
-function useMarkdown(source, options) {
-    const ast = useMemo(() => {
-        const parser = getParser$1(options);
-        return parser.parse(source);
-    }, [source, options]);
-    return ast;
-}
-
-// Singleton parser cache
-let cachedParser = null;
-let cachedParserOptions;
-function getParser(options) {
-    if (options !== cachedParserOptions ||
-        (options && JSON.stringify(options) !== JSON.stringify(cachedParserOptions))) {
-        cachedParser = createParser(options);
-        cachedParserOptions = options;
-    }
-    if (!cachedParser) {
-        cachedParser = createParser(options);
-        cachedParserOptions = options;
-    }
-    return cachedParser;
-}
-const EMPTY_AST = { type: 'root', children: [] };
-/**
- * Hook for streaming markdown rendering.
- *
- * Provides a simple API to progressively append markdown text,
- * automatically re-parsing into an AST that can be rendered
- * by the MarkdownRenderer.
- *
- * Supports multiple consumption methods:
- * - Manual `append()` + `done()` calls
- * - `consume(readableStream)` for ReadableStream<string>
- * - `consumeIterator(asyncIterable)` for async iterators
- * - `consumeResponse(response)` for SSE/fetch responses
- */
-function useStreamMarkdown(options = {}) {
-    const { parserOptions, onStart, onChunk, onDone, onError, parseDebounceMs = 50, } = options;
-    const [state, setState] = useState({
-        source: '',
-        ast: EMPTY_AST,
-        isStreaming: false,
-        isDone: false,
-        error: null,
-    });
-    const sourceRef = useRef('');
-    const isStreamingRef = useRef(false);
-    const parseTimerRef = useRef(null);
-    const abortControllerRef = useRef(null);
-    // Parse the current source and update AST
-    const parseSource = useCallback((source) => {
-        try {
-            const parser = getParser(parserOptions);
-            const ast = parser.parse(source);
-            setState((prev) => ({ ...prev, source, ast }));
-        }
-        catch {
-            // If parsing fails (e.g., incomplete markdown), keep previous AST
-            setState((prev) => ({ ...prev, source }));
-        }
-    }, [parserOptions]);
-    // Debounced parse
-    const debouncedParse = useCallback((source) => {
-        if (parseTimerRef.current) {
-            clearTimeout(parseTimerRef.current);
-        }
-        parseTimerRef.current = setTimeout(() => {
-            parseSource(source);
-        }, parseDebounceMs);
-    }, [parseSource, parseDebounceMs]);
-    // Append a chunk
-    const append = useCallback((chunk) => {
-        if (!isStreamingRef.current) {
-            isStreamingRef.current = true;
-            setState((prev) => ({
-                ...prev,
-                isStreaming: true,
-                isDone: false,
-                error: null,
-            }));
-            onStart?.();
-        }
-        sourceRef.current += chunk;
-        const currentSource = sourceRef.current;
-        onChunk?.(chunk, currentSource);
-        debouncedParse(currentSource);
-    }, [debouncedParse, onStart, onChunk]);
-    // Signal completion
-    const done = useCallback(() => {
-        if (parseTimerRef.current) {
-            clearTimeout(parseTimerRef.current);
-        }
-        // Final parse with complete source
-        const finalSource = sourceRef.current;
-        parseSource(finalSource);
-        isStreamingRef.current = false;
-        setState((prev) => ({
-            ...prev,
-            isStreaming: false,
-            isDone: true,
-        }));
-        onDone?.(finalSource);
-    }, [parseSource, onDone]);
-    // Reset state
-    const reset = useCallback(() => {
-        if (parseTimerRef.current) {
-            clearTimeout(parseTimerRef.current);
-        }
-        if (abortControllerRef.current) {
-            abortControllerRef.current.abort();
-        }
-        sourceRef.current = '';
-        isStreamingRef.current = false;
-        setState({
-            source: '',
-            ast: EMPTY_AST,
-            isStreaming: false,
-            isDone: false,
-            error: null,
-        });
-    }, []);
-    // Consume a ReadableStream<string>
-    const consume = useCallback(async (stream) => {
-        reset();
-        const reader = stream.getReader();
-        const controller = new AbortController();
-        abortControllerRef.current = controller;
-        try {
-            while (true) {
-                if (controller.signal.aborted)
-                    break;
-                const { done: readerDone, value } = await reader.read();
-                if (readerDone)
-                    break;
-                if (value)
-                    append(value);
-            }
-            if (!controller.signal.aborted)
-                done();
-        }
-        catch (err) {
-            const error = err instanceof Error ? err : new Error(String(err));
-            setState((prev) => ({ ...prev, error, isStreaming: false }));
-            onError?.(error);
-        }
-        finally {
-            reader.releaseLock();
-        }
-    }, [reset, append, done, onError]);
-    // Consume an async iterator
-    const consumeIterator = useCallback(async (iterator) => {
-        reset();
-        const controller = new AbortController();
-        abortControllerRef.current = controller;
-        try {
-            for await (const chunk of iterator) {
-                if (controller.signal.aborted)
-                    break;
-                append(chunk);
-            }
-            if (!controller.signal.aborted)
-                done();
-        }
-        catch (err) {
-            const error = err instanceof Error ? err : new Error(String(err));
-            setState((prev) => ({ ...prev, error, isStreaming: false }));
-            onError?.(error);
-        }
-    }, [reset, append, done, onError]);
-    // Consume a fetch Response (SSE format)
-    const consumeResponse = useCallback(async (response, opts) => {
-        if (!response.body) {
-            throw new Error('Response has no body');
-        }
-        if (!response.ok) {
-            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-        }
-        reset();
-        const controller = new AbortController();
-        abortControllerRef.current = controller;
-        const reader = response.body.getReader();
-        const decoder = new TextDecoder();
-        const extractContent = opts?.extractContent ??
-            ((data) => {
-                // Default: try to extract from SSE "data: ..." lines
-                // or OpenAI-style streaming content
-                try {
-                    const parsed = JSON.parse(data);
-                    // OpenAI format
-                    if (parsed.choices?.[0]?.delta?.content !== undefined) {
-                        return parsed.choices[0].delta.content;
-                    }
-                    // Generic content field
-                    if (typeof parsed.content === 'string') {
-                        return parsed.content;
-                    }
-                    if (typeof parsed.text === 'string') {
-                        return parsed.text;
-                    }
-                }
-                catch {
-                    // Not JSON, return as-is
-                }
-                return data;
-            });
-        try {
-            let buffer = '';
-            while (true) {
-                if (controller.signal.aborted)
-                    break;
-                const { done: readerDone, value } = await reader.read();
-                if (readerDone)
-                    break;
-                buffer += decoder.decode(value, { stream: true });
-                const lines = buffer.split('\n');
-                buffer = lines.pop() || ''; // Keep incomplete line in buffer
-                for (const line of lines) {
-                    const trimmed = line.trim();
-                    if (!trimmed)
-                        continue;
-                    if (trimmed === 'data: [DONE]')
-                        continue;
-                    let data = trimmed;
-                    if (trimmed.startsWith('data: ')) {
-                        data = trimmed.slice(6);
-                    }
-                    const content = extractContent(data);
-                    if (content !== null && content !== '') {
-                        append(content);
-                    }
-                }
-            }
-            // Process remaining buffer
-            if (buffer.trim()) {
-                const data = buffer.trim().startsWith('data: ')
-                    ? buffer.trim().slice(6)
-                    : buffer.trim();
-                const content = extractContent(data);
-                if (content !== null && content !== '') {
-                    append(content);
-                }
-            }
-            if (!controller.signal.aborted)
-                done();
-        }
-        catch (err) {
-            const error = err instanceof Error ? err : new Error(String(err));
-            setState((prev) => ({ ...prev, error, isStreaming: false }));
-            onError?.(error);
-        }
-        finally {
-            reader.releaseLock();
-        }
-    }, [reset, append, done, onError]);
-    // Cleanup on unmount
-    useEffect(() => {
-        return () => {
-            if (parseTimerRef.current) {
-                clearTimeout(parseTimerRef.current);
-            }
-            if (abortControllerRef.current) {
-                abortControllerRef.current.abort();
-            }
-        };
-    }, []);
-    return {
-        ...state,
-        append,
-        done,
-        reset,
-        consume,
-        consumeIterator,
-        consumeResponse,
-    };
-}
-
-export { Blockquote, Code, Heading, Image, InlineCodeComponent, Link, List, ListItem, MarkdownContext, MarkdownRenderer, NodeRenderer, Paragraph, StreamMarkdownRenderer, Table, TableCell, TableRow, defaultComponents, useMarkdown, useMarkdownContext, useStreamMarkdown };
+export { Blockquote } from './components/defaults/Blockquote.mjs';
+export { Code, InlineCodeComponent } from './components/defaults/Code.mjs';
+export { Heading } from './components/defaults/Heading.mjs';
+export { Image } from './components/defaults/Image.mjs';
+export { Link } from './components/defaults/Link.mjs';
+export { List, ListItem } from './components/defaults/List.mjs';
+export { MarkdownContext, useMarkdownContext } from './components/context.mjs';
+export { MarkdownRenderer } from './components/MarkdownRenderer.mjs';
+export { NodeRenderer } from './components/NodeRenderer.mjs';
+export { Paragraph } from './components/defaults/Paragraph.mjs';
+export { StreamMarkdownRenderer } from './components/StreamMarkdownRenderer.mjs';
+export { Table, TableCell, TableRow } from './components/defaults/Table.mjs';
+export { defaultComponents } from './components/defaults/index.mjs';
+export { useMarkdown } from './hooks/useMarkdown.mjs';
+export { useStreamMarkdown } from './hooks/useStreamMarkdown.mjs';
 //# sourceMappingURL=index.mjs.map