ranui/dist/components/markdown/render.d.ts

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

import type { Token } from 'marked';
import remend from 'remend';
import { parseThemes } from './highlight';
import type { HighlightThemes } from './highlight';
export { remend };
export interface RenderOptions {
    /** Treat `$…$` as inline math (default false — ambiguous with currency). */
    inlineMath?: boolean;
    /** Split into blocks for incremental re-render (streaming). Off → one block. */
    split?: boolean;
}
export interface MarkdownBlock {
    /** The top-level tokens this block renders. */
    tokens: Token[];
    /** Concatenated token source. */
    raw: string;
    /**
     * Change key for block diffing. The block's own source, plus the document's link
     * reference definitions: the lexer resolves `[text][id]` against definitions anywhere
     * in the document, so editing one can change a block whose own source did not move.
     */
    key: string;
    /** Contains a GFM table, by token type. */
    hasTable: boolean;
    /** Ends in a fenced code block whose fence has not closed yet. */
    incompleteCode: boolean;
}
export interface MarkdownDocument {
    blocks: MarkdownBlock[];
    /** Render one of this document's blocks to a sanitized DOM fragment. */
    render(block: MarkdownBlock): DocumentFragment;
}
/** Lex `markdown` once and group its tokens into independently renderable blocks. */
export declare const parseDocument: (markdown: string, options?: RenderOptions) => MarkdownDocument;
export interface EnhanceContext {
    /** Whether the code fence in this block is still open (streaming). */
    incomplete: boolean;
    copy: boolean;
    download: boolean;
    lineNumbers: boolean;
    /** `null` → no highlighting; otherwise the theme pair to use. */
    highlight: HighlightThemes | null;
    linkTarget: string;
    theme: string;
    labels: {
        copy: string;
        download: string;
    };
    /** Copy pressed on a code block. `icon` is the button's <r-icon>, for the tick state. */
    onCopy(icon: HTMLElement | null, code: string, lang: string): void;
    /** Download pressed on a code block. */
    onDownload(code: string, lang: string): void;
}
export interface EnhanceResult {
    /**
     * Embedded renderers that bake the theme into their output, handed back so the
     * component can retheme them from a reference instead of searching the rendered DOM.
     */
    themed: HTMLElement[];
}
export declare const enhance: (root: HTMLElement, ctx: EnhanceContext) => EnhanceResult;
export { parseThemes };
export type { HighlightThemes };