@noirmd/previewer 1.0.1 → 1.1.0

package/dist/vanilla.d.cts

@@ -0,0 +1,173 @@
+/**
+ * Generic CSSProperties — framework-agnostic equivalent of React.CSSProperties.
+ * Used for inline styles on tokens (e.g. images).
+ */
+type CSSProperties = Record<string, string | number>;
+interface HeaderToken {
+    type: 'header';
+    level: number;
+    text: string;
+    id: string;
+    classes?: string;
+}
+interface ParagraphToken {
+    type: 'paragraph';
+    content: string;
+    align?: 'center' | 'right';
+    classes?: string;
+    id?: string;
+}
+interface CodeblockToken {
+    type: 'codeblock';
+    language: string;
+    content: string;
+    title?: string;
+}
+interface DirectiveToken {
+    type: 'directive';
+    directiveType: string;
+    props: Record<string, string>;
+    slots: Record<string, string>;
+    scopeId: string;
+}
+interface HtmlToken {
+    type: 'html';
+    content: string;
+    scopeId: string;
+}
+interface HtmlBlockToken {
+    type: 'html-block';
+    tag: string;
+    attrs: string;
+    children: Token[];
+}
+interface ImageToken {
+    type: 'image';
+    alt: string;
+    src: string;
+    style: CSSProperties;
+}
+interface TableToken {
+    type: 'table';
+    content: string;
+}
+interface ListToken {
+    type: 'list';
+    content: string;
+}
+interface BlockquoteToken {
+    type: 'blockquote';
+    content: string;
+    classes?: string;
+    id?: string;
+}
+interface HrToken {
+    type: 'hr';
+}
+interface TocToken {
+    type: 'toc';
+}
+type Token = HeaderToken | ParagraphToken | CodeblockToken | DirectiveToken | HtmlToken | HtmlBlockToken | ImageToken | TableToken | ListToken | BlockquoteToken | HrToken | TocToken;
+
+/**
+ * Render parsed markdown tokens into an HTMLElement.
+ *
+ * @param tokens - Array of tokens from `parseMarkdown()`
+ * @returns The root `<article class="nr-prose">` element
+ */
+declare function renderTokens(tokens: Token[]): HTMLElement;
+/**
+ * Convenience: parse markdown string and render directly.
+ */
+declare function renderMarkdownString(markdown: string): HTMLElement;
+
+/**
+ * Render inline markdown text into a DocumentFragment.
+ *
+ * Supports: bold, italic, bold-italic, strikethrough, code, highlight,
+ * spoiler, color text, underline, icons, links, raw HTML tags.
+ */
+declare function renderInline(text: string): DocumentFragment;
+
+/**
+ * Create a Material Symbols icon element.
+ */
+declare function createIcon(iconName: string, extraClasses?: string): HTMLElement;
+/**
+ * Create a syntax-highlighted code block with copy button.
+ */
+declare function createCodeBlock(code: string, language: string, title?: string): HTMLElement;
+/**
+ * Create an admonition (alert) box.
+ * Content should be appended by the caller.
+ */
+declare function createAdmonition(type: string, title?: string, icon?: string): HTMLElement;
+/**
+ * Create a native <details> collapsible section.
+ * Content should be appended to the body div.
+ */
+declare function createDetails(title: string, icon?: string, defaultOpen?: boolean): HTMLElement;
+/**
+ * Create a native <dialog> modal.
+ * Content should be appended to the body div.
+ */
+declare function createModal(title: string): HTMLDialogElement;
+/**
+ * Render a pipe-delimited markdown table into an HTML table element.
+ * Returns the outer wrapper div.
+ */
+declare function createTable(content: string, renderInline: (text: string) => DocumentFragment): HTMLElement;
+/**
+ * Render a markdown list (ordered or unordered) into HTML.
+ */
+declare function createList(content: string, renderInline: (text: string) => DocumentFragment): HTMLElement;
+interface TocHeader {
+    level: number;
+    text: string;
+    id: string;
+}
+/**
+ * Create a table of contents from an array of headers.
+ */
+declare function createTOC(headers: TocHeader[], renderInline: (text: string) => DocumentFragment): HTMLElement;
+/**
+ * Create a blockquote element.
+ */
+declare function createBlockquote(content: string, classes: string | undefined, renderInline: (text: string) => DocumentFragment): HTMLElement;
+
+interface VanillaRenderContext {
+    /** Parse markdown string into tokens */
+    parseMarkdown: (md: string) => Token[];
+    /** Render tokens into an HTMLElement */
+    renderElements: (tokens: Token[]) => HTMLElement;
+    /** Render inline text into a DocumentFragment */
+    renderInline: (text: string) => DocumentFragment;
+    /** Parse markdown string and render into an HTMLElement */
+    renderMarkdown: (md: string) => HTMLElement;
+}
+interface DirectiveProps {
+    /** The directive type string */
+    directiveType: string;
+    /** Parsed key="value" attributes */
+    props: Record<string, string>;
+    /** Named slots → raw content strings */
+    slots: Record<string, string>;
+    /** Render a named slot as parsed markdown */
+    renderSlot: (name: string) => DocumentFragment;
+    /** Render context */
+    context: VanillaRenderContext;
+    /** Position index */
+    index: number;
+    /** Full parsed AST */
+    allElements: Token[];
+    /** Extra flags */
+    options?: Record<string, any>;
+    /** Inline renderer shortcut */
+    renderInline: (text: string) => DocumentFragment;
+    /** Full markdown renderer shortcut (for complex directives like slide) */
+    renderMarkdown?: (md: string) => HTMLElement;
+}
+type DirectiveRendererFn = (props: DirectiveProps) => HTMLElement | DocumentFragment;
+declare const directiveRegistry: Record<string, DirectiveRendererFn>;
+
+export { type DirectiveProps, type DirectiveRendererFn, type VanillaRenderContext, createAdmonition, createBlockquote, createCodeBlock, createDetails, createIcon, createList, createModal, createTOC, createTable, directiveRegistry, renderInline, renderMarkdownString, renderTokens };

package/dist/vanilla.d.ts

@@ -0,0 +1,173 @@
+/**
+ * Generic CSSProperties — framework-agnostic equivalent of React.CSSProperties.
+ * Used for inline styles on tokens (e.g. images).
+ */
+type CSSProperties = Record<string, string | number>;
+interface HeaderToken {
+    type: 'header';
+    level: number;
+    text: string;
+    id: string;
+    classes?: string;
+}
+interface ParagraphToken {
+    type: 'paragraph';
+    content: string;
+    align?: 'center' | 'right';
+    classes?: string;
+    id?: string;
+}
+interface CodeblockToken {
+    type: 'codeblock';
+    language: string;
+    content: string;
+    title?: string;
+}
+interface DirectiveToken {
+    type: 'directive';
+    directiveType: string;
+    props: Record<string, string>;
+    slots: Record<string, string>;
+    scopeId: string;
+}
+interface HtmlToken {
+    type: 'html';
+    content: string;
+    scopeId: string;
+}
+interface HtmlBlockToken {
+    type: 'html-block';
+    tag: string;
+    attrs: string;
+    children: Token[];
+}
+interface ImageToken {
+    type: 'image';
+    alt: string;
+    src: string;
+    style: CSSProperties;
+}
+interface TableToken {
+    type: 'table';
+    content: string;
+}
+interface ListToken {
+    type: 'list';
+    content: string;
+}
+interface BlockquoteToken {
+    type: 'blockquote';
+    content: string;
+    classes?: string;
+    id?: string;
+}
+interface HrToken {
+    type: 'hr';
+}
+interface TocToken {
+    type: 'toc';
+}
+type Token = HeaderToken | ParagraphToken | CodeblockToken | DirectiveToken | HtmlToken | HtmlBlockToken | ImageToken | TableToken | ListToken | BlockquoteToken | HrToken | TocToken;
+
+/**
+ * Render parsed markdown tokens into an HTMLElement.
+ *
+ * @param tokens - Array of tokens from `parseMarkdown()`
+ * @returns The root `<article class="nr-prose">` element
+ */
+declare function renderTokens(tokens: Token[]): HTMLElement;
+/**
+ * Convenience: parse markdown string and render directly.
+ */
+declare function renderMarkdownString(markdown: string): HTMLElement;
+
+/**
+ * Render inline markdown text into a DocumentFragment.
+ *
+ * Supports: bold, italic, bold-italic, strikethrough, code, highlight,
+ * spoiler, color text, underline, icons, links, raw HTML tags.
+ */
+declare function renderInline(text: string): DocumentFragment;
+
+/**
+ * Create a Material Symbols icon element.
+ */
+declare function createIcon(iconName: string, extraClasses?: string): HTMLElement;
+/**
+ * Create a syntax-highlighted code block with copy button.
+ */
+declare function createCodeBlock(code: string, language: string, title?: string): HTMLElement;
+/**
+ * Create an admonition (alert) box.
+ * Content should be appended by the caller.
+ */
+declare function createAdmonition(type: string, title?: string, icon?: string): HTMLElement;
+/**
+ * Create a native <details> collapsible section.
+ * Content should be appended to the body div.
+ */
+declare function createDetails(title: string, icon?: string, defaultOpen?: boolean): HTMLElement;
+/**
+ * Create a native <dialog> modal.
+ * Content should be appended to the body div.
+ */
+declare function createModal(title: string): HTMLDialogElement;
+/**
+ * Render a pipe-delimited markdown table into an HTML table element.
+ * Returns the outer wrapper div.
+ */
+declare function createTable(content: string, renderInline: (text: string) => DocumentFragment): HTMLElement;
+/**
+ * Render a markdown list (ordered or unordered) into HTML.
+ */
+declare function createList(content: string, renderInline: (text: string) => DocumentFragment): HTMLElement;
+interface TocHeader {
+    level: number;
+    text: string;
+    id: string;
+}
+/**
+ * Create a table of contents from an array of headers.
+ */
+declare function createTOC(headers: TocHeader[], renderInline: (text: string) => DocumentFragment): HTMLElement;
+/**
+ * Create a blockquote element.
+ */
+declare function createBlockquote(content: string, classes: string | undefined, renderInline: (text: string) => DocumentFragment): HTMLElement;
+
+interface VanillaRenderContext {
+    /** Parse markdown string into tokens */
+    parseMarkdown: (md: string) => Token[];
+    /** Render tokens into an HTMLElement */
+    renderElements: (tokens: Token[]) => HTMLElement;
+    /** Render inline text into a DocumentFragment */
+    renderInline: (text: string) => DocumentFragment;
+    /** Parse markdown string and render into an HTMLElement */
+    renderMarkdown: (md: string) => HTMLElement;
+}
+interface DirectiveProps {
+    /** The directive type string */
+    directiveType: string;
+    /** Parsed key="value" attributes */
+    props: Record<string, string>;
+    /** Named slots → raw content strings */
+    slots: Record<string, string>;
+    /** Render a named slot as parsed markdown */
+    renderSlot: (name: string) => DocumentFragment;
+    /** Render context */
+    context: VanillaRenderContext;
+    /** Position index */
+    index: number;
+    /** Full parsed AST */
+    allElements: Token[];
+    /** Extra flags */
+    options?: Record<string, any>;
+    /** Inline renderer shortcut */
+    renderInline: (text: string) => DocumentFragment;
+    /** Full markdown renderer shortcut (for complex directives like slide) */
+    renderMarkdown?: (md: string) => HTMLElement;
+}
+type DirectiveRendererFn = (props: DirectiveProps) => HTMLElement | DocumentFragment;
+declare const directiveRegistry: Record<string, DirectiveRendererFn>;
+
+export { type DirectiveProps, type DirectiveRendererFn, type VanillaRenderContext, createAdmonition, createBlockquote, createCodeBlock, createDetails, createIcon, createList, createModal, createTOC, createTable, directiveRegistry, renderInline, renderMarkdownString, renderTokens };