@noirmd/previewer 1.2.0 → 2.0.0

package/dist/react.d.cts

@@ -5,7 +5,7 @@ interface NRpreviewerProps {
     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 */
+    /** Inject Tailwind v4 browser CDN at runtime for user-authored Tailwind classes. Default: false */
     tailwindCDN?: boolean;
     /** Additional CSS class on the wrapper element */
     className?: string;
@@ -17,8 +17,8 @@ interface NRpreviewerProps {
  *
  * @example
  * ```tsx
- * import { NRpreviewer } from '@noirmd/previewer';
- * import '@noirmd/previewer/markdown.css';
+ * import { NRpreviewer } from '@noirmd/previewer/react';
+ * import '@noirmd/previewer/vanilla/vanilla.css';
  *
  * <NRpreviewer content="# Hello **world**" />
  * <NRpreviewer content=":::note Title\nContent\n:::" tailwindCDN />
@@ -31,18 +31,27 @@ interface CustomMarkdownRendererProps {
     content: string;
 }
 /**
- * V2 CustomMarkdownRenderer — main orchestrator.
+ * CustomMarkdownRenderer — thin React wrapper around the vanilla renderer.
  *
  * Pipeline:
- *   content (string)
- *     → parseMarkdown() → allElements (Token[])
- *     → processAndRenderElements() → React tree
+ *   content (string) → renderMarkdownString() → HTMLElement → mounted
  *
- * Note: Tailwind CDN injection is NOT handled here.
- * Use NRpreviewer (which wraps this) or call useLazyTailwindCDN yourself.
+ * The vanilla engine handles all rendering, directives and events;
+ * React only owns the mount point. Note: rendering happens on the
+ * client (useEffect); the server render is an empty placeholder.
  */
 declare const CustomMarkdownRenderer: React.FC<CustomMarkdownRendererProps>;
 
+interface RawHtmlRendererProps {
+    content: string;
+    wrapperClassName?: string;
+}
+/**
+ * RawHtmlRenderer — thin React wrapper around the vanilla raw-HTML renderer.
+ * Injects <style> blocks globally and force-executes <script> tags.
+ */
+declare const RawHtmlRenderer: React.FC<RawHtmlRendererProps>;
+
 /**
  * Generic CSSProperties — framework-agnostic equivalent of React.CSSProperties.
  * Used for inline styles on tokens (e.g. images).
@@ -119,54 +128,12 @@ type Token = HeaderToken | ParagraphToken | CodeblockToken | DirectiveToken | Ht
  */
 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;
@@ -192,34 +159,38 @@ declare function scanTailwindCDN(): void;
  */
 declare function preloadTailwindCDN(): void;
 
-interface RenderContext {
-    modals: Record<string, boolean>;
-    setModals: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
-    articleClass: string;
-    allElements: Token[];
+interface VanillaRenderContext {
+    /** Parse markdown string into tokens */
     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' */
+    /** 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 from the {props} block */
+    /** Parsed key="value" attributes */
     props: Record<string, string>;
-    /** Named slots → raw content strings (to be parsed recursively) */
+    /** Named slots → raw content strings */
     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;
+    /** 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 from the orchestrator */
+    /** 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;
 
-export { Admonition, type CSSProperties, CodeBlock, CustomMarkdownRenderer, Details, type DirectiveComponent, type DirectiveComponentProps, IconRenderer, Modal, NRpreviewer, type NRpreviewerProps, type RenderContext, type Token, extractHeaders, parseMarkdown, preloadTailwindCDN, scanTailwindCDN, useDebounce, useLazyTailwindCDN };
+export { type BlockquoteToken, type CSSProperties, type CodeblockToken, CustomMarkdownRenderer, type DirectiveProps, type DirectiveRendererFn, type DirectiveToken, type HeaderToken, type HrToken, type HtmlBlockToken, type HtmlToken, type ImageToken, type ListToken, NRpreviewer, type NRpreviewerProps, type ParagraphToken, RawHtmlRenderer, type TableToken, type TocToken, type Token, type VanillaRenderContext, parseMarkdown, preloadTailwindCDN, scanTailwindCDN, useDebounce, useLazyTailwindCDN };

package/dist/react.d.ts

@@ -5,7 +5,7 @@ interface NRpreviewerProps {
     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 */
+    /** Inject Tailwind v4 browser CDN at runtime for user-authored Tailwind classes. Default: false */
     tailwindCDN?: boolean;
     /** Additional CSS class on the wrapper element */
     className?: string;
@@ -17,8 +17,8 @@ interface NRpreviewerProps {
  *
  * @example
  * ```tsx
- * import { NRpreviewer } from '@noirmd/previewer';
- * import '@noirmd/previewer/markdown.css';
+ * import { NRpreviewer } from '@noirmd/previewer/react';
+ * import '@noirmd/previewer/vanilla/vanilla.css';
  *
  * <NRpreviewer content="# Hello **world**" />
  * <NRpreviewer content=":::note Title\nContent\n:::" tailwindCDN />
@@ -31,18 +31,27 @@ interface CustomMarkdownRendererProps {
     content: string;
 }
 /**
- * V2 CustomMarkdownRenderer — main orchestrator.
+ * CustomMarkdownRenderer — thin React wrapper around the vanilla renderer.
  *
  * Pipeline:
- *   content (string)
- *     → parseMarkdown() → allElements (Token[])
- *     → processAndRenderElements() → React tree
+ *   content (string) → renderMarkdownString() → HTMLElement → mounted
  *
- * Note: Tailwind CDN injection is NOT handled here.
- * Use NRpreviewer (which wraps this) or call useLazyTailwindCDN yourself.
+ * The vanilla engine handles all rendering, directives and events;
+ * React only owns the mount point. Note: rendering happens on the
+ * client (useEffect); the server render is an empty placeholder.
  */
 declare const CustomMarkdownRenderer: React.FC<CustomMarkdownRendererProps>;
 
+interface RawHtmlRendererProps {
+    content: string;
+    wrapperClassName?: string;
+}
+/**
+ * RawHtmlRenderer — thin React wrapper around the vanilla raw-HTML renderer.
+ * Injects <style> blocks globally and force-executes <script> tags.
+ */
+declare const RawHtmlRenderer: React.FC<RawHtmlRendererProps>;
+
 /**
  * Generic CSSProperties — framework-agnostic equivalent of React.CSSProperties.
  * Used for inline styles on tokens (e.g. images).
@@ -119,54 +128,12 @@ type Token = HeaderToken | ParagraphToken | CodeblockToken | DirectiveToken | Ht
  */
 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;
@@ -192,34 +159,38 @@ declare function scanTailwindCDN(): void;
  */
 declare function preloadTailwindCDN(): void;
 
-interface RenderContext {
-    modals: Record<string, boolean>;
-    setModals: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
-    articleClass: string;
-    allElements: Token[];
+interface VanillaRenderContext {
+    /** Parse markdown string into tokens */
     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' */
+    /** 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 from the {props} block */
+    /** Parsed key="value" attributes */
     props: Record<string, string>;
-    /** Named slots → raw content strings (to be parsed recursively) */
+    /** Named slots → raw content strings */
     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;
+    /** 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 from the orchestrator */
+    /** 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;
 
-export { Admonition, type CSSProperties, CodeBlock, CustomMarkdownRenderer, Details, type DirectiveComponent, type DirectiveComponentProps, IconRenderer, Modal, NRpreviewer, type NRpreviewerProps, type RenderContext, type Token, extractHeaders, parseMarkdown, preloadTailwindCDN, scanTailwindCDN, useDebounce, useLazyTailwindCDN };
+export { type BlockquoteToken, type CSSProperties, type CodeblockToken, CustomMarkdownRenderer, type DirectiveProps, type DirectiveRendererFn, type DirectiveToken, type HeaderToken, type HrToken, type HtmlBlockToken, type HtmlToken, type ImageToken, type ListToken, NRpreviewer, type NRpreviewerProps, type ParagraphToken, RawHtmlRenderer, type TableToken, type TocToken, type Token, type VanillaRenderContext, parseMarkdown, preloadTailwindCDN, scanTailwindCDN, useDebounce, useLazyTailwindCDN };