markstream-react 0.0.45 → 0.0.47

package/dist/types/components/MermaidBlockNode/height.d.ts

@@ -0,0 +1,6 @@
+export declare const MERMAID_PREVIEW_MIN_HEIGHT = 360;
+export declare const MERMAID_PREVIEW_MAX_HEIGHT = 500;
+export declare function parsePositiveNumber(value: unknown): number;
+export declare function getMermaidDiagramKind(code: string): string;
+export declare function estimateMermaidPreviewHeight(code: string): number;
+export declare function clampMermaidPreviewHeight(height: number, minHeight?: number, maxHeight?: number | null): number;

package/dist/types/customComponents.d.ts

@@ -1,5 +1,9 @@
 import { ComponentType } from 'react';
-export type CustomComponentMap = Record<string, ComponentType<any>>;
+export type CustomComponentDisplayMode = 'inline' | 'block';
+export type MarkstreamCustomComponent<P = any> = ComponentType<P> & {
+    markstreamDisplay?: CustomComponentDisplayMode;
+};
+export type CustomComponentMap = Record<string, MarkstreamCustomComponent<any>>;
 export declare function subscribeCustomComponents(listener: () => void): () => void;
 export declare function getCustomComponentsRevision(): number;
 export declare function setCustomComponents(id: string, mapping: CustomComponentMap): void;
@@ -7,3 +11,7 @@ export declare function setCustomComponents(mapping: CustomComponentMap): void;
 export declare function getCustomNodeComponents(customId?: string): CustomComponentMap;
 export declare function removeCustomComponents(id: string): void;
 export declare function clearGlobalCustomComponents(): void;
+export declare function getCustomComponentDisplay(component: ComponentType<any> | null | undefined): CustomComponentDisplayMode | undefined;
+export declare function withMarkstreamComponentDisplay<T extends ComponentType<any>>(component: T, display: CustomComponentDisplayMode): T & {
+    markstreamDisplay: CustomComponentDisplayMode;
+};

package/dist/types/index.d.ts

@@ -41,7 +41,6 @@ export { FallbackComponent } from './components/NodeRenderer/FallbackComponent';
 export { ParagraphNode } from './components/ParagraphNode/ParagraphNode';
 export { PreCodeNode } from './components/PreCodeNode/PreCodeNode';
 export { ReferenceNode } from './components/ReferenceNode/ReferenceNode';
-export { SoftBreakNode } from './components/SoftBreakNode/SoftBreakNode';
 export { StrikethroughNode } from './components/StrikethroughNode/StrikethroughNode';
 export { StrongNode } from './components/StrongNode/StrongNode';
 export { SubscriptNode } from './components/SubscriptNode/SubscriptNode';
@@ -52,10 +51,11 @@ export { ThematicBreakNode } from './components/ThematicBreakNode/ThematicBreakN
 export { Tooltip } from './components/Tooltip/Tooltip';
 export type { TooltipPlacement, TooltipProps } from './components/Tooltip/Tooltip';
 export { VmrContainerNode } from './components/VmrContainerNode/VmrContainerNode';
-export { clearGlobalCustomComponents, getCustomNodeComponents, removeCustomComponents, setCustomComponents, } from './customComponents';
+export { clearGlobalCustomComponents, getCustomComponentDisplay, getCustomNodeComponents, removeCustomComponents, setCustomComponents, withMarkstreamComponentDisplay, } from './customComponents';
+export type { CustomComponentDisplayMode, MarkstreamCustomComponent, } from './customComponents';
 export * from './i18n/useSafeI18n';
 export * from './renderers/renderNode';
-export type { NodeRendererProps } from './types';
+export type { NodeRendererCodeBlockProps, NodeRendererProps } from './types';
 export type { CodeBlockDiffAppearance, CodeBlockDiffHideUnchangedRegions, CodeBlockDiffHideUnchangedRegionsOptions, CodeBlockDiffHunkActionContext, CodeBlockDiffHunkActionKind, CodeBlockDiffHunkSide, CodeBlockDiffLineStyle, CodeBlockDiffUnchangedRegionStyle, CodeBlockMonacoLanguage, CodeBlockMonacoOptions, CodeBlockMonacoTheme, CodeBlockMonacoThemeObject, CodeBlockNodeProps, D2BlockNodeProps, ImageNodeProps, InfographicBlockNodeProps, LinkNodeProps, MathBlockNodeProps, MathInlineNodeProps, MermaidBlockEvent, MermaidBlockNodeProps, PreCodeNodeProps, } from './types/component-props';
 export type { NodeComponentProps } from './types/node-component';
 export * from './utils/languageIcon';

package/dist/types/next.d.ts

@@ -109,8 +109,17 @@ export declare const HighlightNode: {
 export declare const HtmlBlockNode: {
     (props: import('./types/node-component').NodeComponentProps<{
         type: "html_block";
-        content?: string;
-    }>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+        content: string;
+        raw?: string;
+        tag?: string;
+        attrs?: [string, string | null][] | null;
+        children?: any[];
+        loading?: boolean;
+    }> & {
+        customComponents?: Record<string, React.ComponentType<any>>;
+        htmlPolicy?: import('stream-markdown-parser').HtmlPolicy;
+        placeholder?: React.ReactNode;
+    }): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     displayName: string;
 };
 export declare const HtmlInlineNode: {
@@ -289,7 +298,7 @@ export type { MarkdownCodeBlockNodeProps } from './components/MarkdownCodeBlockN
 export type { TooltipPlacement, TooltipProps } from './components/Tooltip/Tooltip';
 export * from './i18n/useSafeI18n';
 export * from './renderers/renderNode';
-export type { NodeRendererProps } from './types';
+export type { NodeRendererCodeBlockProps, NodeRendererProps } from './types';
 export * from './types/component-props';
 export type { NodeComponentProps } from './types/node-component';
 export * from './utils/languageIcon';

package/dist/types/server-renderer/html.d.ts

@@ -1,2 +1 @@
-import { ComponentType, ReactNode } from 'react';
-export declare function parseHtmlToReactNodes(content: string, customComponents: Record<string, ComponentType<any>>): ReactNode[] | null;
+export { parseHtmlToReactNodes } from '../utils/htmlToReact';

package/dist/types/server-renderer/index.d.ts

@@ -108,9 +108,6 @@ export declare function SuperscriptNode(props: NodeComponentProps<{
 export declare function HardBreakNode(_props: NodeComponentProps<{
     type: 'hardbreak';
 }>): import("react/jsx-runtime").JSX.Element;
-export declare function SoftBreakNode(_props: NodeComponentProps<{
-    type: 'softbreak';
-}>): string;
 export declare function ThematicBreakNode(_props?: NodeComponentProps<{
     type: 'thematic_break';
 }>): import("react/jsx-runtime").JSX.Element;
@@ -147,6 +144,9 @@ export declare function ReferenceNode(props: NodeComponentProps<{
 export declare function HtmlBlockNode(props: NodeComponentProps<{
     type: 'html_block';
     content?: string;
+    tag?: string;
+    attrs?: [string, string | null][] | null;
+    children?: ParsedNode[];
 }>): import("react/jsx-runtime").JSX.Element;
 export declare function HtmlInlineNode(props: NodeComponentProps<{
     type: 'html_inline';

package/dist/types/server.d.ts

@@ -3,7 +3,8 @@ export type { LinkNodeStyleProps } from './components/LinkNode/LinkNode';
 export type { ListItemNodeProps } from './components/ListItemNode/ListItemNode';
 export type { MarkdownCodeBlockNodeProps } from './components/MarkdownCodeBlockNode/MarkdownCodeBlockNode';
 export type { TooltipPlacement, TooltipProps } from './components/Tooltip/Tooltip';
-export { clearGlobalCustomComponents, getCustomNodeComponents, removeCustomComponents, setCustomComponents, } from './customComponents';
+export { clearGlobalCustomComponents, getCustomComponentDisplay, getCustomNodeComponents, removeCustomComponents, setCustomComponents, withMarkstreamComponentDisplay, } from './customComponents';
+export type { CustomComponentDisplayMode, MarkstreamCustomComponent } from './customComponents';
 export { AdmonitionNode } from './server-renderer';
 export { BlockquoteNode } from './server-renderer';
 export { CheckboxNode } from './server-renderer';
@@ -49,6 +50,6 @@ export { ThematicBreakNode } from './server-renderer';
 export { Tooltip } from './server-renderer';
 export { VmrContainerNode } from './server-renderer';
 export { renderNode } from './server-renderer';
-export type { NodeRendererProps } from './types';
+export type { NodeRendererCodeBlockProps, NodeRendererProps } from './types';
 export * from './types/component-props';
 export type { NodeComponentProps } from './types/node-component';

package/dist/types/types/component-props.d.ts

@@ -41,6 +41,7 @@ export interface CodeBlockMonacoOptions {
     themes?: CodeBlockMonacoTheme[];
     languages?: CodeBlockMonacoLanguage[];
     renderSideBySide?: boolean;
+    useInlineViewWhenSpaceIsLimited?: boolean;
     enableSplitViewResizing?: boolean;
     ignoreTrimWhitespace?: boolean;
     maxComputationTime?: number;
@@ -95,11 +96,8 @@ export interface ImageNodeProps {
         loading?: boolean;
     };
     fallbackSrc?: string;
-    showCaption?: boolean;
     lazy?: boolean;
-    svgMinHeight?: string;
     usePlaceholder?: boolean;
-    inline?: boolean;
 }
 export interface LinkNodeProps {
     node: {
@@ -132,6 +130,7 @@ export interface PreCodeNodeProps {
 export interface MermaidBlockNodeProps {
     node: CodeBlockNode;
     maxHeight?: string | null;
+    estimatedPreviewHeightPx?: number;
     loading?: boolean;
     isDark?: boolean;
     workerTimeoutMs?: number;
@@ -197,6 +196,7 @@ export interface MathInlineNodeProps {
 export interface InfographicBlockNodeProps {
     node: CodeBlockNode;
     maxHeight?: string | null;
+    estimatedPreviewHeightPx?: number;
     loading?: boolean;
     isDark?: boolean;
     showHeader?: boolean;

package/dist/types/types.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
-import { BaseNode, MarkdownIt, ParsedNode, ParseOptions } from 'stream-markdown-parser';
-import { CodeBlockMonacoOptions, CodeBlockMonacoTheme, D2BlockNodeProps, InfographicBlockNodeProps, MermaidBlockNodeProps } from './types/component-props';
+import { BaseNode, HtmlPolicy, MarkdownIt, ParsedNode, ParseOptions } from 'stream-markdown-parser';
+import { CodeBlockMonacoOptions, CodeBlockMonacoTheme, CodeBlockNodeProps, D2BlockNodeProps, InfographicBlockNodeProps, MermaidBlockNodeProps } from './types/component-props';
+export type NodeRendererCodeBlockProps = Partial<Omit<CodeBlockNodeProps, 'node'>> & Record<string, unknown>;
 export interface NodeRendererProps {
     content?: string;
     nodes?: readonly BaseNode[] | null;
@@ -18,6 +19,7 @@ export interface NodeRendererProps {
      * Forwarded to `getMarkdown()` and merged into parseOptions.
      */
     customHtmlTags?: readonly string[];
+    htmlPolicy?: HtmlPolicy;
     viewportPriority?: boolean;
     codeBlockStream?: boolean;
     codeBlockDarkTheme?: CodeBlockMonacoTheme;
@@ -26,7 +28,7 @@ export interface NodeRendererProps {
     renderCodeBlocksAsPre?: boolean;
     codeBlockMinWidth?: string | number;
     codeBlockMaxWidth?: string | number;
-    codeBlockProps?: Record<string, any>;
+    codeBlockProps?: NodeRendererCodeBlockProps;
     mermaidProps?: Partial<Omit<MermaidBlockNodeProps, 'node' | 'loading' | 'isDark'>>;
     d2Props?: Partial<Omit<D2BlockNodeProps, 'node' | 'loading' | 'isDark'>>;
     infographicProps?: Partial<Omit<InfographicBlockNodeProps, 'node' | 'loading' | 'isDark'>>;
@@ -59,12 +61,13 @@ export interface RenderContext {
     textStreamState?: Map<string, string>;
     streamRenderVersion?: number;
     customComponents?: Record<string, React.ComponentType<any>>;
-    codeBlockProps?: Record<string, any>;
+    customHtmlTags?: readonly string[];
+    htmlPolicy?: HtmlPolicy;
+    codeBlockProps?: NodeRendererCodeBlockProps;
     mermaidProps?: Partial<Omit<MermaidBlockNodeProps, 'node' | 'loading' | 'isDark'>>;
     d2Props?: Partial<Omit<D2BlockNodeProps, 'node' | 'loading' | 'isDark'>>;
     infographicProps?: Partial<Omit<InfographicBlockNodeProps, 'node' | 'loading' | 'isDark'>>;
     showTooltips?: boolean;
-    inlineImages?: boolean;
     codeBlockStream?: boolean;
     renderCodeBlocksAsPre?: boolean;
     codeBlockThemes?: {

package/dist/types/utils/customHtmlTag.d.ts

@@ -0,0 +1,16 @@
+import { ParsedNode } from 'stream-markdown-parser';
+import { CustomComponentDisplayMode, CustomComponentMap, MarkstreamCustomComponent } from '../customComponents';
+export interface ResolvedCustomHtmlTag {
+    tag: string;
+    isWhitelisted: boolean;
+    component: MarkstreamCustomComponent<any> | null;
+    display: CustomComponentDisplayMode | undefined;
+}
+export declare function resolveCustomHtmlTag(node: Pick<ParsedNode, 'type'> & {
+    tag?: string | null;
+    content?: unknown;
+}, customComponents: CustomComponentMap, customHtmlTags?: readonly string[]): ResolvedCustomHtmlTag | null;
+export declare function isParagraphBreakingCustomHtmlNode(node: Pick<ParsedNode, 'type'> & {
+    tag?: string | null;
+    content?: unknown;
+}, customComponents: CustomComponentMap, customHtmlTags?: readonly string[]): boolean;

package/dist/types/utils/htmlToReact.d.ts

@@ -0,0 +1,9 @@
+import { ComponentType, ReactNode } from 'react';
+import { HtmlPolicy, sanitizeHtmlAttrs as sanitizeHtmlAttrsBase, tokenizeHtml as tokenizeHtmlBase } from 'stream-markdown-parser';
+export type { HtmlToken } from 'stream-markdown-parser';
+export declare function normalizeDomAttrs(attrs: Record<string, string>): Record<string, any>;
+export declare const tokenizeHtml: typeof tokenizeHtmlBase;
+export declare const sanitizeHtmlAttrs: typeof sanitizeHtmlAttrsBase;
+export declare function isCustomHtmlComponent(tagName: string, customComponents: Record<string, ComponentType<any>>): boolean;
+export declare function hasCustomHtmlComponents(content: string, customComponents: Record<string, ComponentType<any>>): boolean;
+export declare function parseHtmlToReactNodes(content: string, customComponents: Record<string, ComponentType<any>>, htmlPolicy?: HtmlPolicy): ReactNode[] | null;

package/dist/types/utils/normalizeKaTeXRenderInput.d.ts

@@ -0,0 +1 @@
+export declare function normalizeKaTeXRenderInput(content: string): string;

package/dist/workers/mermaidParser.worker.js

@@ -1 +1 @@
-import t from"mermaid";async function a(a,r){var n;const e=function(t,a){const r=`%%{init: {"theme": "${"dark"===a?"dark":"default"}"}}%%\n`;return t.trimStart().startsWith("%%{")?t:r+t}(a,r),i=t;if("function"==typeof i.parse)return await(null==(n=i.parse)?void 0:n.call(i,e)),!0;throw new Error("mermaid.parse not available in worker")}t.initialize({startOnLoad:!1,securityLevel:"loose"}),self.onmessage=async t=>{var r;const n=t.data,e=t=>self.postMessage(t),i=n.id;try{if("canParse"===n.action)return void e({id:i,ok:!0,result:await a(n.payload.code,n.payload.theme)});if("findPrefix"===n.action)return void e({id:i,ok:!0,result:await async function(t,r){const n=t.split("\n"),e=function(t){const a=/^(?:graph|flowchart|flowchart\s+tb|flowchart\s+lr|sequenceDiagram|gantt|classDiagram|stateDiagram(?:-v2)?|erDiagram|journey|pie|quadrantChart|timeline|xychart(?:-beta)?)\b/;for(let r=0;r<t.length;r++){const n=t[r].trim();if(n&&!n.startsWith("%%")&&a.test(n))return r}return-1}(n);if(-1===e)return null;const i=n.slice(0,e+1);await a(i.join("\n"),r);let o=e+1,s=n.length,l=e+1,c=0;for(;o<=s&&c<12;){const t=Math.floor((o+s)/2),d=[...i,...n.slice(e+1,t)].join("\n");c++;try{await a(d,r),l=t,o=t+1}catch{s=t-1}}return[...i,...n.slice(e+1,l)].join("\n")}(n.payload.code,n.payload.theme)});e({id:i,ok:!1,error:"Unknown action"})}catch(o){e({id:i,ok:!1,error:null!=(r=null==o?void 0:o.message)?r:String(o)})}};
+import t from"mermaid";async function a(a,r){var n;const e=function(t,a){const r=`%%{init: {"theme": "${"dark"===a?"dark":"default"}"}}%%\n`;return t.trimStart().startsWith("%%{")?t:r+t}(a,r),i=t;if("function"==typeof i.parse)return await(null==(n=i.parse)?void 0:n.call(i,e)),!0;throw new Error("mermaid.parse not available in worker")}t.initialize({startOnLoad:!1,securityLevel:"strict",flowchart:{htmlLabels:!1}}),self.onmessage=async t=>{var r;const n=t.data,e=t=>self.postMessage(t),i=n.id;try{if("canParse"===n.action)return void e({id:i,ok:!0,result:await a(n.payload.code,n.payload.theme)});if("findPrefix"===n.action)return void e({id:i,ok:!0,result:await async function(t,r){const n=t.split("\n"),e=function(t){const a=/^(?:graph|flowchart|flowchart\s+tb|flowchart\s+lr|sequenceDiagram|gantt|classDiagram|stateDiagram(?:-v2)?|erDiagram|journey|pie|quadrantChart|timeline|xychart(?:-beta)?)\b/;for(let r=0;r<t.length;r++){const n=t[r].trim();if(n&&!n.startsWith("%%")&&a.test(n))return r}return-1}(n);if(-1===e)return null;const i=n.slice(0,e+1);await a(i.join("\n"),r);let o=e+1,s=n.length,l=e+1,c=0;for(;o<=s&&c<12;){const t=Math.floor((o+s)/2),d=[...i,...n.slice(e+1,t)].join("\n");c++;try{await a(d,r),l=t,o=t+1}catch{s=t-1}}return[...i,...n.slice(e+1,l)].join("\n")}(n.payload.code,n.payload.theme)});e({id:i,ok:!1,error:"Unknown action"})}catch(o){e({id:i,ok:!1,error:null!=(r=null==o?void 0:o.message)?r:String(o)})}};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "markstream-react",
   "type": "module",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "description": "React Markdown renderer optimized for large documents with progressive Mermaid rendering, streaming diff code blocks, and fast real-time preview. Built on stream-markdown AST for consistent rendering across frameworks. Perfect for documentation sites, AI chat interfaces, and content management systems.",
   "author": "Simon He",
   "license": "MIT",
@@ -91,7 +91,7 @@
     "react": ">=18",
     "react-dom": ">=18",
     "stream-markdown": ">=0.0.15",
-    "stream-monaco": ">=0.0.38"
+    "stream-monaco": ">=0.0.40"
   },
   "peerDependenciesMeta": {
     "@antv/infographic": {
@@ -116,7 +116,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
     "clsx": "^2.1.1",
-    "stream-markdown-parser": "0.0.90"
+    "stream-markdown-parser": "0.0.92"
   },
   "devDependencies": {
     "@types/react": "^18.3.28",