@noirmd/previewer 1.2.0 → 2.0.0

package/dist/vue.d.cts

@@ -1,6 +1,18 @@
 import * as vue from 'vue';
-import { PropType, VNode, Ref, Component } from 'vue';
+import { PropType, Ref } from 'vue';
 
+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 user-authored Tailwind classes. Default: false */
+    tailwindCDN?: boolean;
+    /** Additional CSS class on the wrapper element */
+    className?: string;
+    /** Inline styles on the wrapper element */
+    style?: Record<string, string>;
+}
 declare const NRpreviewer: vue.DefineComponent<vue.ExtractPropTypes<{
     content: {
         type: StringConstructor;
@@ -58,7 +70,7 @@ declare const CustomMarkdownRenderer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: StringConstructor;
         required: true;
     };
-}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     content: {
@@ -67,6 +79,30 @@ declare const CustomMarkdownRenderer: vue.DefineComponent<vue.ExtractPropTypes<{
     };
 }>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
+declare const RawHtmlRenderer: vue.DefineComponent<vue.ExtractPropTypes<{
+    content: {
+        type: StringConstructor;
+        required: true;
+    };
+    wrapperClassName: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    content: {
+        type: StringConstructor;
+        required: true;
+    };
+    wrapperClassName: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    wrapperClassName: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
 /**
  * Generic CSSProperties — framework-agnostic equivalent of React.CSSProperties.
  * Used for inline styles on tokens (e.g. images).
@@ -143,197 +179,6 @@ 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[];
-
-declare const IconRenderer: vue.DefineComponent<vue.ExtractPropTypes<{
-    iconName: {
-        type: StringConstructor;
-        required: true;
-    };
-    extraClasses: {
-        type: StringConstructor;
-        default: string;
-    };
-}>, () => VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    iconName: {
-        type: StringConstructor;
-        required: true;
-    };
-    extraClasses: {
-        type: StringConstructor;
-        default: string;
-    };
-}>> & Readonly<{}>, {
-    extraClasses: string;
-}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-declare const CodeBlock: vue.DefineComponent<vue.ExtractPropTypes<{
-    code: {
-        type: StringConstructor;
-        required: true;
-    };
-    language: {
-        type: StringConstructor;
-        default: string;
-    };
-    title: {
-        type: StringConstructor;
-        default: undefined;
-    };
-}>, () => VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    code: {
-        type: StringConstructor;
-        required: true;
-    };
-    language: {
-        type: StringConstructor;
-        default: string;
-    };
-    title: {
-        type: StringConstructor;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    title: string;
-    language: string;
-}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-declare const Admonition: vue.DefineComponent<vue.ExtractPropTypes<{
-    type: {
-        type: StringConstructor;
-        default: string;
-    };
-    title: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    icon: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    class: {
-        type: StringConstructor;
-        default: string;
-    };
-    style: {
-        type: PropType<CSSProperties>;
-        default: undefined;
-    };
-}>, () => VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    type: {
-        type: StringConstructor;
-        default: string;
-    };
-    title: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    icon: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    class: {
-        type: StringConstructor;
-        default: string;
-    };
-    style: {
-        type: PropType<CSSProperties>;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    class: string;
-    style: CSSProperties;
-    title: string;
-    type: string;
-    icon: string;
-}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-declare const Details: vue.DefineComponent<vue.ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-        required: true;
-    };
-    icon: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    defaultOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    class: {
-        type: StringConstructor;
-        default: string;
-    };
-    style: {
-        type: PropType<CSSProperties>;
-        default: undefined;
-    };
-}>, () => VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-        required: true;
-    };
-    icon: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    defaultOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    class: {
-        type: StringConstructor;
-        default: string;
-    };
-    style: {
-        type: PropType<CSSProperties>;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    class: string;
-    style: CSSProperties;
-    icon: string;
-    defaultOpen: boolean;
-}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-declare const Modal: vue.DefineComponent<vue.ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-        required: true;
-    };
-    isOpen: {
-        type: BooleanConstructor;
-        required: true;
-    };
-    onClose: {
-        type: PropType<() => void>;
-        required: true;
-    };
-}>, () => VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-        required: true;
-    };
-    isOpen: {
-        type: BooleanConstructor;
-        required: true;
-    };
-    onClose: {
-        type: PropType<() => void>;
-        required: true;
-    };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-
 declare global {
     interface Window {
         __twCDNRefs?: number;
@@ -356,34 +201,38 @@ declare function scanTailwindCDN(): void;
  */
 declare function preloadTailwindCDN(): void;
 
-interface RenderContext {
-    modals: Ref<Record<string, boolean>>;
-    setModals: (value: Record<string, boolean> | ((prev: Record<string, boolean>) => Record<string, boolean>)) => void;
-    articleClass: string;
-    allElements: Token[];
+interface VanillaRenderContext {
+    /** Parse markdown string into tokens */
     parseMarkdown: (md: string) => Token[];
-    renderElement: (element: Token, index: number, depth?: number) => any;
-    renderInline: (text: string) => any[];
-    processAndRenderElements: (elements: Token[], depth?: number) => any[];
+    /** 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;
 }
-type DirectiveComponent = Component;
-interface DirectiveComponentProps {
-    /** The directive type string, e.g. 'card', 'note', 'modal' */
+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) => any[];
-    /** 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 RenderContext, type Token, extractHeaders, parseMarkdown, preloadTailwindCDN, scanTailwindCDN, 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, useLazyTailwindCDN };

package/dist/vue.d.ts

@@ -1,6 +1,18 @@
 import * as vue from 'vue';
-import { PropType, VNode, Ref, Component } from 'vue';
+import { PropType, Ref } from 'vue';
 
+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 user-authored Tailwind classes. Default: false */
+    tailwindCDN?: boolean;
+    /** Additional CSS class on the wrapper element */
+    className?: string;
+    /** Inline styles on the wrapper element */
+    style?: Record<string, string>;
+}
 declare const NRpreviewer: vue.DefineComponent<vue.ExtractPropTypes<{
     content: {
         type: StringConstructor;
@@ -58,7 +70,7 @@ declare const CustomMarkdownRenderer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: StringConstructor;
         required: true;
     };
-}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     content: {
@@ -67,6 +79,30 @@ declare const CustomMarkdownRenderer: vue.DefineComponent<vue.ExtractPropTypes<{
     };
 }>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
+declare const RawHtmlRenderer: vue.DefineComponent<vue.ExtractPropTypes<{
+    content: {
+        type: StringConstructor;
+        required: true;
+    };
+    wrapperClassName: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    content: {
+        type: StringConstructor;
+        required: true;
+    };
+    wrapperClassName: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    wrapperClassName: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
 /**
  * Generic CSSProperties — framework-agnostic equivalent of React.CSSProperties.
  * Used for inline styles on tokens (e.g. images).
@@ -143,197 +179,6 @@ 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[];
-
-declare const IconRenderer: vue.DefineComponent<vue.ExtractPropTypes<{
-    iconName: {
-        type: StringConstructor;
-        required: true;
-    };
-    extraClasses: {
-        type: StringConstructor;
-        default: string;
-    };
-}>, () => VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    iconName: {
-        type: StringConstructor;
-        required: true;
-    };
-    extraClasses: {
-        type: StringConstructor;
-        default: string;
-    };
-}>> & Readonly<{}>, {
-    extraClasses: string;
-}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-declare const CodeBlock: vue.DefineComponent<vue.ExtractPropTypes<{
-    code: {
-        type: StringConstructor;
-        required: true;
-    };
-    language: {
-        type: StringConstructor;
-        default: string;
-    };
-    title: {
-        type: StringConstructor;
-        default: undefined;
-    };
-}>, () => VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    code: {
-        type: StringConstructor;
-        required: true;
-    };
-    language: {
-        type: StringConstructor;
-        default: string;
-    };
-    title: {
-        type: StringConstructor;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    title: string;
-    language: string;
-}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-declare const Admonition: vue.DefineComponent<vue.ExtractPropTypes<{
-    type: {
-        type: StringConstructor;
-        default: string;
-    };
-    title: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    icon: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    class: {
-        type: StringConstructor;
-        default: string;
-    };
-    style: {
-        type: PropType<CSSProperties>;
-        default: undefined;
-    };
-}>, () => VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    type: {
-        type: StringConstructor;
-        default: string;
-    };
-    title: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    icon: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    class: {
-        type: StringConstructor;
-        default: string;
-    };
-    style: {
-        type: PropType<CSSProperties>;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    class: string;
-    style: CSSProperties;
-    title: string;
-    type: string;
-    icon: string;
-}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-declare const Details: vue.DefineComponent<vue.ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-        required: true;
-    };
-    icon: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    defaultOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    class: {
-        type: StringConstructor;
-        default: string;
-    };
-    style: {
-        type: PropType<CSSProperties>;
-        default: undefined;
-    };
-}>, () => VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-        required: true;
-    };
-    icon: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    defaultOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    class: {
-        type: StringConstructor;
-        default: string;
-    };
-    style: {
-        type: PropType<CSSProperties>;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    class: string;
-    style: CSSProperties;
-    icon: string;
-    defaultOpen: boolean;
-}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-declare const Modal: vue.DefineComponent<vue.ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-        required: true;
-    };
-    isOpen: {
-        type: BooleanConstructor;
-        required: true;
-    };
-    onClose: {
-        type: PropType<() => void>;
-        required: true;
-    };
-}>, () => VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-        required: true;
-    };
-    isOpen: {
-        type: BooleanConstructor;
-        required: true;
-    };
-    onClose: {
-        type: PropType<() => void>;
-        required: true;
-    };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-
 declare global {
     interface Window {
         __twCDNRefs?: number;
@@ -356,34 +201,38 @@ declare function scanTailwindCDN(): void;
  */
 declare function preloadTailwindCDN(): void;
 
-interface RenderContext {
-    modals: Ref<Record<string, boolean>>;
-    setModals: (value: Record<string, boolean> | ((prev: Record<string, boolean>) => Record<string, boolean>)) => void;
-    articleClass: string;
-    allElements: Token[];
+interface VanillaRenderContext {
+    /** Parse markdown string into tokens */
     parseMarkdown: (md: string) => Token[];
-    renderElement: (element: Token, index: number, depth?: number) => any;
-    renderInline: (text: string) => any[];
-    processAndRenderElements: (elements: Token[], depth?: number) => any[];
+    /** 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;
 }
-type DirectiveComponent = Component;
-interface DirectiveComponentProps {
-    /** The directive type string, e.g. 'card', 'note', 'modal' */
+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) => any[];
-    /** 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 RenderContext, type Token, extractHeaders, parseMarkdown, preloadTailwindCDN, scanTailwindCDN, 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, useLazyTailwindCDN };