@typefm/react-markdown-viewer 0.1.0

package/dist/types/hooks.d.ts

@@ -0,0 +1,207 @@
+/**
+ * Hook type definitions for customizing markdown rendering.
+ *
+ * @module types/hooks
+ */
+/**
+ * Hook return type — string HTML or null to use default processor.
+ *
+ * - `string` → HTML to insert (direct, fast)
+ * - `null` → Use the default processor
+ *
+ * @example
+ * // Direct HTML string (recommended)
+ * onCodeBlock: ({ code }) => `<pre>${escapeHtml(code)}</pre>`
+ *
+ * // Use default processor
+ * onCodeBlock: () => null
+ */
+export type HookResult = string | null;
+/**
+ * Data passed to code block hook.
+ */
+export interface CodeBlockData {
+    /** Raw code content (HTML-decoded) */
+    code: string;
+    /** Language identifier (normalized, e.g., 'javascript' not 'js') */
+    language?: string;
+}
+/**
+ * Data passed to inline code hook.
+ */
+export interface InlineCodeData {
+    /** Raw code content */
+    code: string;
+}
+/**
+ * Data passed to math hook.
+ */
+export interface MathData {
+    /** TeX source (HTML-decoded) */
+    tex: string;
+    /** true for $$...$$ display blocks, false for $...$ inline */
+    displayMode: boolean;
+}
+/**
+ * Data passed to table hook.
+ */
+export interface TableData {
+    /** Raw table HTML from parser (sanitized) */
+    html: string;
+    /** Parsed header cell contents (convenience, extracted from html) */
+    headers?: string[];
+    /** Parsed row data - array of rows, each row is array of cell contents */
+    rows?: string[][];
+}
+/**
+ * Data passed to link hook.
+ */
+export interface LinkData {
+    /** href attribute value */
+    href: string;
+    /** Link text content */
+    text: string;
+    /** title attribute value (optional) */
+    title?: string;
+}
+/**
+ * Data passed to image hook.
+ */
+export interface ImageData {
+    /** Image source URL */
+    src: string;
+    /** Alt text */
+    alt: string;
+    /** Title attribute (optional) */
+    title?: string;
+}
+/**
+ * Data passed to heading hook.
+ */
+export interface HeadingData {
+    /** Heading level (1-6) */
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Text content of the heading (HTML stripped) */
+    text: string;
+    /** Generated ID for anchor links (slugified text) */
+    id: string;
+    /** Raw HTML content (may contain inline formatting) */
+    html: string;
+}
+/**
+ * Data passed to blockquote hook.
+ */
+export interface BlockquoteData {
+    /** Inner HTML content of the blockquote */
+    content: string;
+}
+/**
+ * Alert type for GitHub-style alerts.
+ */
+export type AlertType = "note" | "tip" | "important" | "warning" | "caution";
+/**
+ * Data passed to alert hook.
+ */
+export interface AlertData {
+    /** Alert type */
+    type: AlertType;
+    /** Alert title (e.g., "Note", "Warning") */
+    title: string;
+    /** Inner HTML content of the alert */
+    content: string;
+}
+/**
+ * Data passed to list hook.
+ */
+export interface ListData {
+    /** List type */
+    type: "ordered" | "unordered";
+    /** Raw HTML of the list */
+    html: string;
+    /** List items (text content, HTML stripped) */
+    items: string[];
+}
+/**
+ * Data passed to horizontal rule hook.
+ */
+export interface HorizontalRuleData {
+}
+/**
+ * Data passed to footnote reference hook.
+ */
+export interface FootnoteRefData {
+    /** Footnote identifier */
+    id: string;
+    /** Footnote number (1-based index) */
+    index: number;
+}
+/**
+ * Data passed to footnote definition hook.
+ */
+export interface FootnoteDefData {
+    /** Footnote identifier */
+    id: string;
+    /** Footnote number (1-based index) */
+    index: number;
+    /** Inner HTML content of the footnote */
+    content: string;
+}
+/**
+ * Hooks for customizing markdown rendering.
+ *
+ * Each hook receives element data and can return:
+ * - `string` → HTML to insert (fast, recommended)
+ * - `null` → Use the default processor
+ *
+ * @example
+ * const hooks: RenderHooks = {
+ *   // Custom code block
+ *   onCodeBlock: ({ code, language }) =>
+ *     `<pre data-lang="${language}"><code>${escapeHtml(code)}</code></pre>`,
+ *
+ *   // Selective override - mermaid gets custom, others use default
+ *   onCodeBlock: ({ code, language }) => {
+ *     if (language === 'mermaid') {
+ *       return `<div class="mermaid">${escapeHtml(code)}</div>`;
+ *     }
+ *     return null; // Use default for other languages
+ *   },
+ *
+ *   // Final transformation (string only)
+ *   onRender: (html) => html.replace(/TODO/g, '<mark>TODO</mark>'),
+ * };
+ */
+export interface RenderHooks {
+    /** Transform fenced code blocks (```language ... ```). */
+    onCodeBlock?: (data: CodeBlockData) => HookResult;
+    /** Transform inline code spans (`code`). */
+    onInlineCode?: (data: InlineCodeData) => HookResult;
+    /** Transform math blocks (KaTeX). */
+    onMath?: (data: MathData) => HookResult;
+    /** Transform tables. */
+    onTable?: (data: TableData) => HookResult;
+    /** Transform links. */
+    onLink?: (data: LinkData) => HookResult;
+    /** Transform images. */
+    onImage?: (data: ImageData) => HookResult;
+    /** Transform headings (h1-h6). */
+    onHeading?: (data: HeadingData) => HookResult;
+    /** Transform blockquotes. */
+    onBlockquote?: (data: BlockquoteData) => HookResult;
+    /** Transform GitHub-style alerts ([!NOTE], [!WARNING], etc.). */
+    onAlert?: (data: AlertData) => HookResult;
+    /** Transform lists (ordered and unordered). */
+    onList?: (data: ListData) => HookResult;
+    /** Transform horizontal rules. */
+    onHorizontalRule?: (data: HorizontalRuleData) => HookResult;
+    /** Transform footnote references (the [^1] in text). */
+    onFootnoteRef?: (data: FootnoteRefData) => HookResult;
+    /** Transform footnote definitions (at the bottom). */
+    onFootnoteDef?: (data: FootnoteDefData) => HookResult;
+    /**
+     * Final transformation on the complete HTML output.
+     * String-only — runs after all other processing.
+     */
+    onRender?: (html: string) => string;
+}
+//# sourceMappingURL=hooks.d.ts.map

package/dist/types/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/types/hooks.ts"],"names":[],"mappings":"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"}

package/dist/types/hooks.js

@@ -0,0 +1,7 @@
+/**
+ * Hook type definitions for customizing markdown rendering.
+ *
+ * @module types/hooks
+ */
+export {};
+//# sourceMappingURL=hooks.js.map

package/dist/types/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../src/types/hooks.ts"],"names":[],"mappings":"AAAA;;;;GAIG"}

package/dist/useMarkdownViewer.d.ts

@@ -0,0 +1,18 @@
+import type { RenderHooks } from "./types/hooks";
+export interface UseMarkdownViewerOptions {
+    text: string;
+    isStreaming: boolean;
+    throttleMs: number;
+    onStreamingEnd?: () => void;
+    /** Hooks for customizing markdown rendering */
+    hooks?: RenderHooks;
+}
+export interface UseMarkdownViewerReturn {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    syncMorphEnabled: boolean;
+    getRenderedContent: () => string;
+    handleClick: (event: React.MouseEvent) => void;
+    reset: () => void;
+}
+export declare function useMarkdownViewer({ text, isStreaming, throttleMs, onStreamingEnd, hooks, }: UseMarkdownViewerOptions): UseMarkdownViewerReturn;
+//# sourceMappingURL=useMarkdownViewer.d.ts.map

package/dist/useMarkdownViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMarkdownViewer.d.ts","sourceRoot":"","sources":["../src/useMarkdownViewer.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAiBjD,MAAM,WAAW,wBAAwB;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,+CAA+C;IAC/C,KAAK,CAAC,EAAE,WAAW,CAAC;CACpB;AAWD,MAAM,WAAW,uBAAuB;IACvC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,gBAAgB,EAAE,OAAO,CAAC;IAC1B,kBAAkB,EAAE,MAAM,MAAM,CAAC;IACjC,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC/C,KAAK,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,wBAAgB,iBAAiB,CAAC,EACjC,IAAI,EACJ,WAAW,EACX,UAAU,EACV,cAAc,EACd,KAAK,GACL,EAAE,wBAAwB,GAAG,uBAAuB,CA6cpD"}

package/dist/useMarkdownViewer.js

@@ -0,0 +1,403 @@
+import { useRef, useState, useCallback, useEffect, } from "react";
+import { CURSOR_MARKER, CURSOR_HTML, renderMarkdown, preloadKaTeX, isKaTeXReady, onLanguageLoaded, offLanguageLoaded, getNotificationGeneration, } from "./lib/parser";
+import { cacheManager } from "./lib/cache-manager";
+import { morphContentSync, morphContentOptimized, getMorphStats, resetMorphCache, } from "./lib/morph";
+import { createCursorController, } from "./lib/cursor-controller";
+import { isWasmReady, initMarkdownViewer, onWasmReady, } from "./lib/wasm-init";
+export function useMarkdownViewer({ text, isStreaming, throttleMs, onStreamingEnd, hooks, }) {
+    // Refs for DOM and mutable state (avoid re-renders)
+    const containerRef = useRef(null);
+    const cursorControllerRef = useRef(null);
+    // Store callback in ref to avoid effect re-runs
+    const onStreamingEndRef = useRef(onStreamingEnd);
+    onStreamingEndRef.current = onStreamingEnd;
+    // Store hooks in ref to avoid re-renders when hooks object changes
+    const hooksRef = useRef(hooks);
+    hooksRef.current = hooks;
+    // Throttling state (mutable refs to avoid re-renders)
+    const throttledTextRef = useRef("");
+    const lastThrottleTimeRef = useRef(0);
+    const rafScheduledRef = useRef(false);
+    const rafIdRef = useRef(null);
+    const copyTimeoutIdsRef = useRef(new Set());
+    // Adaptive throttling state
+    const adaptiveThrottleMsRef = useRef(0);
+    const lastMorphDurationRef = useRef(0);
+    // Streaming state
+    const hasStreamedRef = useRef(false);
+    const wasStreamingRef = useRef(false);
+    const streamingStatsRef = useRef({
+        morphCount: 0,
+        morphTotalMs: 0,
+        morphMinMs: Infinity,
+        morphMaxMs: 0,
+        throttleMaxMs: 0,
+        startTime: 0,
+    });
+    // Memoization cache
+    const lastSourceRef = useRef("");
+    const lastStrategyRef = useRef(false);
+    const lastStreamingRef = useRef(false);
+    const lastResultRef = useRef("");
+    const lastLoggedContentLengthRef = useRef(0);
+    // Force update trigger (for KaTeX loading / WASM ready)
+    const [updateCounter, setUpdateCounter] = useState(0);
+    // WASM readiness state
+    const [wasmReady, setWasmReady] = useState(isWasmReady());
+    // Computed: use sync morph strategy when streaming or has streamed
+    const syncMorphEnabled = isStreaming || hasStreamedRef.current;
+    // Get effective throttle (adaptive)
+    const getEffectiveThrottleMs = useCallback(() => {
+        return adaptiveThrottleMsRef.current || throttleMs;
+    }, [throttleMs]);
+    // Track last logged throttle to avoid spam
+    const lastLoggedThrottleRef = useRef(0);
+    const morphCountRef = useRef(0);
+    // Adjust adaptive throttle based on morph performance
+    const adjustAdaptiveThrottle = useCallback(() => {
+        const morphTime = lastMorphDurationRef.current;
+        const targetMorphBudget = 0.25;
+        const idealThrottle = morphTime / targetMorphBudget;
+        const smoothingFactor = 0.3;
+        const currentThrottle = adaptiveThrottleMsRef.current || throttleMs;
+        const newThrottle = currentThrottle + (idealThrottle - currentThrottle) * smoothingFactor;
+        const minThrottle = throttleMs;
+        const maxThrottle = Math.max(throttleMs * 4, 200);
+        const clampedThrottle = Math.max(minThrottle, Math.min(maxThrottle, newThrottle));
+        adaptiveThrottleMsRef.current = clampedThrottle;
+        if (process.env.NODE_ENV !== "production") {
+            morphCountRef.current++;
+            const rounded = Math.round(clampedThrottle);
+            const shouldLog = morphCountRef.current % 10 === 0 ||
+                Math.abs(rounded - lastLoggedThrottleRef.current) >= 3;
+            if (shouldLog && morphTime >= 1) {
+                lastLoggedThrottleRef.current = rounded;
+                const direction = rounded > throttleMs
+                    ? "📈"
+                    : rounded < throttleMs
+                        ? "📉"
+                        : "➡️";
+                const status = rounded === throttleMs ? "(at minimum)" : "";
+                console.log(`${direction} Throttle: ${rounded}ms ${status} | morph: ${morphTime.toFixed(1)}ms | ideal: ${idealThrottle.toFixed(0)}ms`);
+            }
+        }
+    }, [throttleMs]);
+    // Track morph stats
+    const trackMorphStats = useCallback(() => {
+        const morphTime = lastMorphDurationRef.current;
+        if (morphTime < 2)
+            return;
+        const stats = streamingStatsRef.current;
+        stats.morphCount++;
+        stats.morphTotalMs += morphTime;
+        stats.morphMinMs = Math.min(stats.morphMinMs, morphTime);
+        stats.morphMaxMs = Math.max(stats.morphMaxMs, morphTime);
+        stats.throttleMaxMs = Math.max(stats.throttleMaxMs, adaptiveThrottleMsRef.current);
+    }, []);
+    // Reset streaming stats
+    const resetStreamingStats = useCallback(() => {
+        streamingStatsRef.current = {
+            morphCount: 0,
+            morphTotalMs: 0,
+            morphMinMs: Infinity,
+            morphMaxMs: 0,
+            throttleMaxMs: 0,
+            startTime: performance.now(),
+        };
+    }, []);
+    // Track text length in ref for logging
+    const textLengthRef = useRef(0);
+    textLengthRef.current = text.length;
+    // Log streaming stats (dev only)
+    const logStreamingStats = useCallback(() => {
+        if (process.env.NODE_ENV === "production")
+            return;
+        const stats = streamingStatsRef.current;
+        if (stats.morphCount === 0)
+            return;
+        const duration = performance.now() - stats.startTime;
+        const avgMorph = stats.morphTotalMs / stats.morphCount;
+        console.log(`📊 Streaming complete:\n` +
+            `   Duration: ${(duration / 1000).toFixed(2)}s\n` +
+            `   Morphs: ${stats.morphCount} (avg ${avgMorph.toFixed(1)}ms, min ${stats.morphMinMs.toFixed(1)}ms, max ${stats.morphMaxMs.toFixed(1)}ms)\n` +
+            `   Throttle: base ${throttleMs}ms → max ${stats.throttleMaxMs.toFixed(1)}ms\n` +
+            `   Content: ${(textLengthRef.current / 1024).toFixed(1)}KB`);
+    }, [throttleMs]);
+    // Render markdown with memoization
+    const getRenderedContent = useCallback(() => {
+        // Guard: WASM must be ready
+        if (!wasmReady)
+            return "";
+        const baseText = isStreaming ? throttledTextRef.current : text;
+        const source = isStreaming ? baseText + CURSOR_MARKER : baseText;
+        if (!source)
+            return "";
+        if (baseText === lastSourceRef.current &&
+            syncMorphEnabled === lastStrategyRef.current &&
+            isStreaming === lastStreamingRef.current) {
+            return lastResultRef.current;
+        }
+        lastSourceRef.current = baseText;
+        lastStrategyRef.current = syncMorphEnabled;
+        lastStreamingRef.current = isStreaming;
+        let html = renderMarkdown(source, syncMorphEnabled, undefined, hooksRef.current);
+        // Streaming guard: ensure cursor is visible when streaming
+        if (isStreaming) {
+            const cursorIndex = html.indexOf(CURSOR_HTML);
+            if (cursorIndex === -1) {
+                html += CURSOR_HTML;
+            }
+            else {
+                const beforeCursor = html.slice(0, cursorIndex);
+                const lastOpenBracket = beforeCursor.lastIndexOf("<");
+                const lastCloseBracket = beforeCursor.lastIndexOf(">");
+                if (lastOpenBracket > lastCloseBracket) {
+                    html = html.replace(CURSOR_HTML, "");
+                    if (html.includes("<code")) {
+                        html = html.replace(/(<code[^>]*>)/, "$1" + CURSOR_HTML);
+                    }
+                    else {
+                        html += CURSOR_HTML;
+                    }
+                }
+            }
+        }
+        lastResultRef.current = html;
+        return lastResultRef.current;
+    }, [text, isStreaming, syncMorphEnabled, wasmReady]);
+    // Ensure KaTeX is loaded
+    const ensureKaTeXLoaded = useCallback(() => {
+        if (isKaTeXReady())
+            return;
+        preloadKaTeX().then(() => {
+            lastSourceRef.current = "";
+            lastResultRef.current = "";
+            cacheManager.renderCacheSync.clear();
+            cacheManager.renderCacheAsync.clear();
+            setUpdateCounter((n) => n + 1);
+        });
+    }, []);
+    // Apply DOM morphing
+    const applyMorph = useCallback(() => {
+        const container = containerRef.current;
+        if (!container || !syncMorphEnabled)
+            return;
+        const content = getRenderedContent();
+        if (isStreaming) {
+            const startTime = performance.now();
+            morphContentOptimized(container, content);
+            lastMorphDurationRef.current = performance.now() - startTime;
+            adjustAdaptiveThrottle();
+            trackMorphStats();
+            if (process.env.NODE_ENV !== "production") {
+                const stats = getMorphStats(container);
+                const contentLength = throttledTextRef.current.length;
+                if ((stats.added > 0 || stats.removed > 0) &&
+                    contentLength !== lastLoggedContentLengthRef.current) {
+                    lastLoggedContentLengthRef.current = contentLength;
+                    const parts = [];
+                    if (stats.added > 0)
+                        parts.push(`+${stats.added} added`);
+                    if (stats.removed > 0)
+                        parts.push(`-${stats.removed} removed`);
+                    console.log(`🔄 Morph: ${parts.join(", ")} (${stats.skipped} unchanged)`);
+                }
+            }
+            if (!cursorControllerRef.current) {
+                cursorControllerRef.current = createCursorController();
+            }
+            cursorControllerRef.current.update(container);
+        }
+        else {
+            morphContentSync(container, content);
+        }
+    }, [
+        isStreaming,
+        syncMorphEnabled,
+        getRenderedContent,
+        adjustAdaptiveThrottle,
+        trackMorphStats,
+    ]);
+    // Update throttled text
+    const updateThrottledText = useCallback(() => {
+        if (!isStreaming) {
+            throttledTextRef.current = text;
+            rafScheduledRef.current = false;
+            if (rafIdRef.current !== null) {
+                cancelAnimationFrame(rafIdRef.current);
+                rafIdRef.current = null;
+            }
+            return;
+        }
+        const now = Date.now();
+        const effectiveThrottle = getEffectiveThrottleMs();
+        if (now - lastThrottleTimeRef.current >= effectiveThrottle) {
+            throttledTextRef.current = text;
+            lastThrottleTimeRef.current = now;
+            applyMorph();
+        }
+        else if (!rafScheduledRef.current) {
+            rafScheduledRef.current = true;
+            rafIdRef.current = requestAnimationFrame(() => {
+                if (rafScheduledRef.current && isStreaming) {
+                    throttledTextRef.current = text;
+                    lastThrottleTimeRef.current = Date.now();
+                    applyMorph();
+                }
+                rafScheduledRef.current = false;
+                rafIdRef.current = null;
+            });
+        }
+    }, [text, isStreaming, getEffectiveThrottleMs, applyMorph]);
+    // Handle copy button clicks
+    const handleClick = useCallback((event) => {
+        const target = event.target;
+        const copyBtn = target.closest(".copy-btn");
+        if (!copyBtn)
+            return;
+        const wrapper = copyBtn.closest(".code-block-wrapper");
+        const codeElement = wrapper?.querySelector("pre code");
+        if (!codeElement)
+            return;
+        const code = codeElement.textContent ?? "";
+        navigator.clipboard
+            .writeText(code)
+            .then(() => {
+            copyBtn.classList.add("copied");
+            const timeoutId = window.setTimeout(() => {
+                copyBtn.classList.remove("copied");
+                copyTimeoutIdsRef.current.delete(timeoutId);
+            }, 2000);
+            copyTimeoutIdsRef.current.add(timeoutId);
+        })
+            .catch((err) => {
+            console.error("Failed to copy code:", err);
+        });
+    }, []);
+    // Reset component state
+    const reset = useCallback(() => {
+        hasStreamedRef.current = false;
+        throttledTextRef.current = "";
+        lastSourceRef.current = "";
+        lastStrategyRef.current = false;
+        lastStreamingRef.current = false;
+        lastResultRef.current = "";
+        adaptiveThrottleMsRef.current = 0;
+        lastMorphDurationRef.current = 0;
+        lastLoggedContentLengthRef.current = 0;
+        lastLoggedThrottleRef.current = 0;
+        morphCountRef.current = 0;
+        resetStreamingStats();
+        resetMorphCache(containerRef.current ?? undefined);
+        cursorControllerRef.current?.reset();
+    }, [resetStreamingStats]);
+    // Effect: Initialize WASM if not ready
+    useEffect(() => {
+        if (wasmReady)
+            return;
+        initMarkdownViewer();
+        return onWasmReady(() => setWasmReady(true));
+    }, [wasmReady]);
+    // Effect: Handle streaming state changes
+    useEffect(() => {
+        if (isStreaming && !wasStreamingRef.current) {
+            hasStreamedRef.current = true;
+            resetStreamingStats();
+            containerRef.current?.focus();
+        }
+        else if (!isStreaming && wasStreamingRef.current) {
+            logStreamingStats();
+            onStreamingEndRef.current?.();
+        }
+        wasStreamingRef.current = isStreaming;
+    }, [isStreaming, resetStreamingStats, logStreamingStats]);
+    // Effect: Ensure KaTeX is loaded when text changes.
+    // Also handles the case where KaTeX loaded between render and effect
+    // (Vite dev mode resolves dynamic imports before useEffect runs).
+    const katexWasReady = useRef(isKaTeXReady());
+    useEffect(() => {
+        if (!text)
+            return;
+        if (!isKaTeXReady()) {
+            ensureKaTeXLoaded();
+        }
+        else if (!katexWasReady.current) {
+            // KaTeX loaded between render and effect — trigger re-render
+            katexWasReady.current = true;
+            lastSourceRef.current = "";
+            lastResultRef.current = "";
+            cacheManager.renderCacheSync.clear();
+            cacheManager.renderCacheAsync.clear();
+            setUpdateCounter((n) => n + 1);
+        }
+    }, [text, ensureKaTeXLoaded]);
+    // Stable ref for applyMorph to avoid re-subscribing language listener
+    const applyMorphRef = useRef(applyMorph);
+    applyMorphRef.current = applyMorph;
+    // Stable ref for syncMorphEnabled to avoid re-subscribing language listener
+    const syncMorphEnabledRef = useRef(syncMorphEnabled);
+    syncMorphEnabledRef.current = syncMorphEnabled;
+    // Capture notification generation before render so the effect can detect
+    // if languages loaded between render and effect mount (race condition
+    // in Vite dev mode where dynamic imports resolve before useEffect runs).
+    const preRenderGeneration = useRef(getNotificationGeneration());
+    preRenderGeneration.current = getNotificationGeneration();
+    // Effect: Re-highlight when dynamically loaded languages become available
+    useEffect(() => {
+        const triggerUpdate = () => {
+            lastSourceRef.current = "";
+            lastResultRef.current = "";
+            cacheManager.renderCacheSync.clear();
+            cacheManager.renderCacheAsync.clear();
+            cacheManager.highlightCache.clear();
+            if (syncMorphEnabledRef.current) {
+                applyMorphRef.current();
+            }
+            else {
+                setUpdateCounter((n) => n + 1);
+            }
+        };
+        const handleLanguageLoaded = (_language) => {
+            triggerUpdate();
+        };
+        onLanguageLoaded(handleLanguageLoaded);
+        // Detect missed notifications: if languages loaded between render
+        // and this effect (useEffect runs after paint), trigger update now.
+        if (getNotificationGeneration() !== preRenderGeneration.current) {
+            triggerUpdate();
+        }
+        return () => offLanguageLoaded(handleLanguageLoaded);
+    }, []);
+    // Effect: Update throttled text when text or streaming state changes
+    useEffect(() => {
+        updateThrottledText();
+    }, [text, isStreaming, updateThrottledText]);
+    // Effect: Apply morph after render for sync strategy
+    useEffect(() => {
+        if (syncMorphEnabled && !isStreaming) {
+            applyMorph();
+        }
+    }, [syncMorphEnabled, isStreaming, applyMorph, updateCounter]);
+    // Effect: Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (rafIdRef.current !== null) {
+                cancelAnimationFrame(rafIdRef.current);
+                rafIdRef.current = null;
+            }
+            for (const timeoutId of copyTimeoutIdsRef.current) {
+                clearTimeout(timeoutId);
+            }
+            copyTimeoutIdsRef.current.clear();
+            cursorControllerRef.current?.destroy();
+        };
+    }, []);
+    return {
+        containerRef,
+        syncMorphEnabled,
+        getRenderedContent,
+        handleClick,
+        reset,
+    };
+}
+//# sourceMappingURL=useMarkdownViewer.js.map