@noirmd/previewer 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,219 @@
+import React from 'react';
+
+interface NRpreviewerProps {
+    /** Markdown string to render */
+    content?: string;
+    /** Raw HTML string to render (used when content is not provided) */
+    html?: string;
+    /** Inject Tailwind v4 browser CDN at runtime for directive styling. Default: false */
+    tailwindCDN?: boolean;
+    /** Additional CSS class on the wrapper element */
+    className?: string;
+    /** Inline styles on the wrapper element */
+    style?: React.CSSProperties;
+}
+/**
+ * NRpreviewer — drop-in markdown/HTML preview component.
+ *
+ * @example
+ * ```tsx
+ * import { NRpreviewer } from '@noirmd/previewer';
+ * import '@noirmd/previewer/markdown.css';
+ *
+ * <NRpreviewer content="# Hello **world**" />
+ * <NRpreviewer content=":::note Title\nContent\n:::" tailwindCDN />
+ * <NRpreviewer html="<h1>Raw HTML</h1>" />
+ * ```
+ */
+declare const NRpreviewer: React.FC<NRpreviewerProps>;
+
+interface CustomMarkdownRendererProps {
+    content: string;
+}
+/**
+ * V2 CustomMarkdownRenderer — main orchestrator.
+ *
+ * Pipeline:
+ *   content (string)
+ *     → parseMarkdown() → allElements (Token[])
+ *     → processAndRenderElements() → React tree
+ *
+ * Note: Tailwind CDN injection is NOT handled here.
+ * Use NRpreviewer (which wraps this) or call useLazyTailwindCDN yourself.
+ */
+declare const CustomMarkdownRenderer: React.FC<CustomMarkdownRendererProps>;
+
+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: React.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;
+interface RenderContext {
+    modals: Record<string, boolean>;
+    setModals: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+    articleClass: string;
+    allElements: Token[];
+    parseMarkdown: (md: string) => Token[];
+    renderElement: (element: Token, index: number, depth?: number) => React.ReactNode;
+    renderInline: (text: string) => React.ReactNode;
+    processAndRenderElements: (elements: Token[], depth?: number) => React.ReactNode[];
+}
+type DirectiveComponent = React.FC<DirectiveComponentProps>;
+interface DirectiveComponentProps {
+    /** The directive type string, e.g. 'card', 'note', 'modal' */
+    directiveType: string;
+    /** Parsed key="value" attributes from the {props} block */
+    props: Record<string, string>;
+    /** Named slots → raw content strings (to be parsed recursively) */
+    slots: Record<string, string>;
+    /** Convenience: render a named slot as parsed markdown */
+    renderSlot: (name: string) => React.ReactNode;
+    /** Full render context access */
+    context: RenderContext;
+    /** Position index in the parent element list */
+    index: string | number;
+    /** Full parsed AST */
+    allElements: Token[];
+    /** Extra flags from the orchestrator */
+    options?: Record<string, any>;
+}
+
+/**
+ * V2 Markdown Parser — line-by-line state machine.
+ */
+declare function parseMarkdown(markdown: string): Token[];
+
+/**
+ * Extract all header tokens from an AST for TOC generation.
+ */
+declare function extractHeaders(elements: Token[]): Token[];
+
+/**
+ * useDebounce — delays updating a value until after a specified delay.
+ * Useful for reducing expensive operations (like preview rendering) during rapid input.
+ */
+declare function useDebounce<T>(value: T, delay: number): T;
+
+interface IconRendererProps {
+    iconName: string;
+    extraClasses?: string;
+}
+declare const IconRenderer: React.FC<IconRendererProps>;
+interface CodeBlockProps {
+    code: string;
+    language: string;
+    title?: string;
+}
+declare const CodeBlock: React.FC<CodeBlockProps>;
+interface AdmonitionProps {
+    type: string;
+    title?: string;
+    icon?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+}
+declare const Admonition: React.FC<AdmonitionProps>;
+interface DetailsProps {
+    title: string;
+    icon?: string;
+    defaultOpen?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+}
+declare const Details: React.FC<DetailsProps>;
+interface ModalProps {
+    title: string;
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+}
+declare const Modal: React.FC<ModalProps>;
+
+declare global {
+    interface Window {
+        __twCDNRefs?: number;
+        tailwind?: {
+            config: object;
+            scan?: () => void;
+        };
+    }
+}
+/**
+ * Lazy CDN hook — only loads the Tailwind Browser CDN when `enabled` is true.
+ * Call this from the component that hosts the preview panel.
+ */
+declare function useLazyTailwindCDN(enabled: boolean): void;
+/**
+ * Trigger a Tailwind CDN re-scan (use after DOM mutations with new classes).
+ */
+declare function scanTailwindCDN(): void;
+/**
+ * Preload the Tailwind Browser CDN right after page load.
+ * Uses requestIdleCallback so it doesn't block the main thread.
+ * By the time the user opens preview, the CDN is already loaded.
+ */
+declare function preloadTailwindCDN(): void;
+
+export { Admonition, CodeBlock, CustomMarkdownRenderer, Details, type DirectiveComponent, type DirectiveComponentProps, IconRenderer, Modal, NRpreviewer, type NRpreviewerProps, type RenderContext, type Token, extractHeaders, parseMarkdown, preloadTailwindCDN, scanTailwindCDN, useDebounce, useLazyTailwindCDN };

package/dist/index.d.ts

@@ -0,0 +1,219 @@
+import React from 'react';
+
+interface NRpreviewerProps {
+    /** Markdown string to render */
+    content?: string;
+    /** Raw HTML string to render (used when content is not provided) */
+    html?: string;
+    /** Inject Tailwind v4 browser CDN at runtime for directive styling. Default: false */
+    tailwindCDN?: boolean;
+    /** Additional CSS class on the wrapper element */
+    className?: string;
+    /** Inline styles on the wrapper element */
+    style?: React.CSSProperties;
+}
+/**
+ * NRpreviewer — drop-in markdown/HTML preview component.
+ *
+ * @example
+ * ```tsx
+ * import { NRpreviewer } from '@noirmd/previewer';
+ * import '@noirmd/previewer/markdown.css';
+ *
+ * <NRpreviewer content="# Hello **world**" />
+ * <NRpreviewer content=":::note Title\nContent\n:::" tailwindCDN />
+ * <NRpreviewer html="<h1>Raw HTML</h1>" />
+ * ```
+ */
+declare const NRpreviewer: React.FC<NRpreviewerProps>;
+
+interface CustomMarkdownRendererProps {
+    content: string;
+}
+/**
+ * V2 CustomMarkdownRenderer — main orchestrator.
+ *
+ * Pipeline:
+ *   content (string)
+ *     → parseMarkdown() → allElements (Token[])
+ *     → processAndRenderElements() → React tree
+ *
+ * Note: Tailwind CDN injection is NOT handled here.
+ * Use NRpreviewer (which wraps this) or call useLazyTailwindCDN yourself.
+ */
+declare const CustomMarkdownRenderer: React.FC<CustomMarkdownRendererProps>;
+
+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: React.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;
+interface RenderContext {
+    modals: Record<string, boolean>;
+    setModals: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+    articleClass: string;
+    allElements: Token[];
+    parseMarkdown: (md: string) => Token[];
+    renderElement: (element: Token, index: number, depth?: number) => React.ReactNode;
+    renderInline: (text: string) => React.ReactNode;
+    processAndRenderElements: (elements: Token[], depth?: number) => React.ReactNode[];
+}
+type DirectiveComponent = React.FC<DirectiveComponentProps>;
+interface DirectiveComponentProps {
+    /** The directive type string, e.g. 'card', 'note', 'modal' */
+    directiveType: string;
+    /** Parsed key="value" attributes from the {props} block */
+    props: Record<string, string>;
+    /** Named slots → raw content strings (to be parsed recursively) */
+    slots: Record<string, string>;
+    /** Convenience: render a named slot as parsed markdown */
+    renderSlot: (name: string) => React.ReactNode;
+    /** Full render context access */
+    context: RenderContext;
+    /** Position index in the parent element list */
+    index: string | number;
+    /** Full parsed AST */
+    allElements: Token[];
+    /** Extra flags from the orchestrator */
+    options?: Record<string, any>;
+}
+
+/**
+ * V2 Markdown Parser — line-by-line state machine.
+ */
+declare function parseMarkdown(markdown: string): Token[];
+
+/**
+ * Extract all header tokens from an AST for TOC generation.
+ */
+declare function extractHeaders(elements: Token[]): Token[];
+
+/**
+ * useDebounce — delays updating a value until after a specified delay.
+ * Useful for reducing expensive operations (like preview rendering) during rapid input.
+ */
+declare function useDebounce<T>(value: T, delay: number): T;
+
+interface IconRendererProps {
+    iconName: string;
+    extraClasses?: string;
+}
+declare const IconRenderer: React.FC<IconRendererProps>;
+interface CodeBlockProps {
+    code: string;
+    language: string;
+    title?: string;
+}
+declare const CodeBlock: React.FC<CodeBlockProps>;
+interface AdmonitionProps {
+    type: string;
+    title?: string;
+    icon?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+}
+declare const Admonition: React.FC<AdmonitionProps>;
+interface DetailsProps {
+    title: string;
+    icon?: string;
+    defaultOpen?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+}
+declare const Details: React.FC<DetailsProps>;
+interface ModalProps {
+    title: string;
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+}
+declare const Modal: React.FC<ModalProps>;
+
+declare global {
+    interface Window {
+        __twCDNRefs?: number;
+        tailwind?: {
+            config: object;
+            scan?: () => void;
+        };
+    }
+}
+/**
+ * Lazy CDN hook — only loads the Tailwind Browser CDN when `enabled` is true.
+ * Call this from the component that hosts the preview panel.
+ */
+declare function useLazyTailwindCDN(enabled: boolean): void;
+/**
+ * Trigger a Tailwind CDN re-scan (use after DOM mutations with new classes).
+ */
+declare function scanTailwindCDN(): void;
+/**
+ * Preload the Tailwind Browser CDN right after page load.
+ * Uses requestIdleCallback so it doesn't block the main thread.
+ * By the time the user opens preview, the CDN is already loaded.
+ */
+declare function preloadTailwindCDN(): void;
+
+export { Admonition, CodeBlock, CustomMarkdownRenderer, Details, type DirectiveComponent, type DirectiveComponentProps, IconRenderer, Modal, NRpreviewer, type NRpreviewerProps, type RenderContext, type Token, extractHeaders, parseMarkdown, preloadTailwindCDN, scanTailwindCDN, useDebounce, useLazyTailwindCDN };