@noirmd/previewer 1.2.0 → 2.0.0

package/dist/index.d.cts

@@ -122,7 +122,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;
@@ -134,8 +134,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 />
@@ -148,22 +148,26 @@ 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;
+}
 /**
- * Extract all header tokens from an AST for TOC generation.
+ * RawHtmlRenderer — thin React wrapper around the vanilla raw-HTML renderer.
+ * Injects <style> blocks globally and force-executes <script> tags.
  */
-declare function extractHeaders(elements: Token[]): Token[];
+declare const RawHtmlRenderer: React.FC<RawHtmlRendererProps>;
 
 /**
  * useDebounce — delays updating a value until after a specified delay.
@@ -171,43 +175,6 @@ declare function extractHeaders(elements: Token[]): Token[];
  */
 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;
@@ -233,34 +200,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 BlockquoteToken, type CSSProperties, CodeBlock, type CodeblockToken, CustomMarkdownRenderer, Details, type DirectiveComponent, type DirectiveComponentProps, type DirectiveToken, type HeaderToken, type HrToken, type HtmlBlockToken, type HtmlToken, IconRenderer, type ImageToken, type ListToken, Modal, NRpreviewer, type NRpreviewerProps, type ParagraphToken, type RenderContext, type TableToken, type TocToken, type Token, extractAttributes, extractHeaders, generateId, generateScopeId, parseCssString, parseHtmlAttrs, parseMarkdown, parseProps, preloadTailwindCDN, resetScopeCounter, scanTailwindCDN, scrollToId, 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, extractAttributes, generateId, generateScopeId, parseCssString, parseHtmlAttrs, parseMarkdown, parseProps, preloadTailwindCDN, resetScopeCounter, scanTailwindCDN, scrollToId, useDebounce, useLazyTailwindCDN };

package/dist/index.d.ts

@@ -122,7 +122,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;
@@ -134,8 +134,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 />
@@ -148,22 +148,26 @@ 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;
+}
 /**
- * Extract all header tokens from an AST for TOC generation.
+ * RawHtmlRenderer — thin React wrapper around the vanilla raw-HTML renderer.
+ * Injects <style> blocks globally and force-executes <script> tags.
  */
-declare function extractHeaders(elements: Token[]): Token[];
+declare const RawHtmlRenderer: React.FC<RawHtmlRendererProps>;
 
 /**
  * useDebounce — delays updating a value until after a specified delay.
@@ -171,43 +175,6 @@ declare function extractHeaders(elements: Token[]): Token[];
  */
 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;
@@ -233,34 +200,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 BlockquoteToken, type CSSProperties, CodeBlock, type CodeblockToken, CustomMarkdownRenderer, Details, type DirectiveComponent, type DirectiveComponentProps, type DirectiveToken, type HeaderToken, type HrToken, type HtmlBlockToken, type HtmlToken, IconRenderer, type ImageToken, type ListToken, Modal, NRpreviewer, type NRpreviewerProps, type ParagraphToken, type RenderContext, type TableToken, type TocToken, type Token, extractAttributes, extractHeaders, generateId, generateScopeId, parseCssString, parseHtmlAttrs, parseMarkdown, parseProps, preloadTailwindCDN, resetScopeCounter, scanTailwindCDN, scrollToId, 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, extractAttributes, generateId, generateScopeId, parseCssString, parseHtmlAttrs, parseMarkdown, parseProps, preloadTailwindCDN, resetScopeCounter, scanTailwindCDN, scrollToId, useDebounce, useLazyTailwindCDN };