@incremark/react 0.2.2 → 0.2.4

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-import { ParserOptions, AnimationEffect, TransformerPlugin, ParsedBlock, Root, IncrementalUpdate, IncremarkParser, SourceBlock, TransformerOptions, DisplayBlock, BlockTransformer, RootContent } from '@incremark/core';
+import { ParserOptions, AnimationEffect, TransformerPlugin, ParsedBlock, Root, IncrementalUpdate, IncremarkParser, SourceBlock, TransformerOptions, DisplayBlock, BlockTransformer, RootContent as RootContent$1 } from '@incremark/core';
 export { AnimationEffect, BlockTransformer, DisplayBlock, IncrementalUpdate, ParsedBlock, ParserOptions, Root, RootContent, SourceBlock, TransformerOptions, TransformerPlugin, TransformerState, allPlugins, cloneNode, codeBlockPlugin, countChars, createBlockTransformer, createPlugin, defaultPlugins, imagePlugin, mathPlugin, mermaidPlugin, sliceAst, thematicBreakPlugin } from '@incremark/core';
 import React, { ReactNode } from 'react';
-import { Definition, FootnoteDefinition, RootContent as RootContent$1 } from 'mdast';
+import { Definition, FootnoteDefinition, RootContent, PhrasingContent } from 'mdast';
 import * as _incremark_devtools from '@incremark/devtools';
 import { DevToolsOptions } from '@incremark/devtools';
 import { DesignTokens } from '@incremark/theme';
@@ -298,6 +298,17 @@ interface IncremarkProps {
     components?: Partial<Record<string, React.ComponentType<{
         node: any;
     }>>>;
+    /** 自定义容器组件映射，key 为容器名称（如 'warning', 'info'） */
+    customContainers?: Record<string, React.ComponentType<{
+        name: string;
+        options?: Record<string, any>;
+        children?: React.ReactNode;
+    }>>;
+    /** 自定义代码块组件映射，key 为代码语言名称（如 'echart', 'mermaid'） */
+    customCodeBlocks?: Record<string, React.ComponentType<{
+        codeStr: string;
+        lang?: string;
+    }>>;
     /** 是否显示块状态（待处理块边框） */
     showBlockStatus?: boolean;
     /** 自定义类名 */
@@ -321,11 +332,32 @@ interface IncremarkProps {
  */
 declare const Incremark: React.FC<IncremarkProps>;
 
+/**
+ * 容器节点类型定义
+ * 根据 directive 解析后的结构
+ */
+interface ContainerNode {
+    type: 'containerDirective' | 'leafDirective' | 'textDirective';
+    name: string;
+    attributes?: Record<string, string>;
+    children?: RootContent[];
+}
+
 interface IncremarkRendererProps {
-    node: RootContent;
+    node: RootContent$1 | ContainerNode;
     components?: Partial<Record<string, React.ComponentType<{
-        node: RootContent;
+        node: RootContent$1;
     }>>>;
+    customContainers?: Record<string, React.ComponentType<{
+        name: string;
+        options?: Record<string, any>;
+        children?: React.ReactNode;
+    }>>;
+    customCodeBlocks?: Record<string, React.ComponentType<{
+        codeStr: string;
+        lang?: string;
+    }>>;
+    blockStatus?: 'pending' | 'stable' | 'completed';
 }
 /**
  * 渲染单个 AST 节点
@@ -374,6 +406,26 @@ interface AutoScrollContainerRef {
  */
 declare const AutoScrollContainer: React.ForwardRefExoticComponent<AutoScrollContainerProps & React.RefAttributes<AutoScrollContainerRef>>;
 
+interface IncremarkInlineProps {
+    nodes: PhrasingContent[];
+}
+/**
+ * IncremarkInline 组件
+ *
+ * 渲染行内内容（文本、加粗、斜体、链接、图片等）
+ *
+ * 支持特性：
+ * - 文本节点（含 chunks 动画）
+ * - 加粗、斜体、删除线
+ * - 行内代码
+ * - 链接（link）和引用式链接（linkReference）
+ * - 图片（image）和引用式图片（imageReference）
+ * - HTML 元素
+ *
+ * 注意：此组件与 Vue 版本保持完全一致的逻辑和结构
+ */
+declare const IncremarkInline: React.FC<IncremarkInlineProps>;
+
 /**
  * HtmlElementNode 类型定义（与 @incremark/core 中的定义一致）
  */
@@ -381,7 +433,7 @@ interface HtmlElementNode {
     type: 'htmlElement';
     tagName: string;
     attrs: Record<string, string>;
-    children: RootContent$1[];
+    children: RootContent[];
     data?: {
         rawHtml?: string;
         parsed?: boolean;
@@ -489,4 +541,4 @@ interface ThemeProviderProps {
  */
 declare const ThemeProvider: React.FC<ThemeProviderProps>;
 
-export { AutoScrollContainer, type AutoScrollContainerProps, type AutoScrollContainerRef, type DefinitionsContextValue, DefinitionsProvider, type DefinitionsProviderProps, type HtmlElementNode, Incremark, IncremarkContainerProvider, type IncremarkContainerProviderProps, IncremarkFootnotes, IncremarkHtmlElement, type IncremarkHtmlElementProps, type IncremarkProps, IncremarkRenderer, type IncremarkRendererProps, ThemeProvider, type ThemeProviderProps, type TypewriterControls, type TypewriterOptions, type UseBlockTransformerOptions, type UseBlockTransformerReturn, type UseDevToolsOptions, type UseIncremarkOptions, type UseIncremarkReturn, useBlockTransformer, useDefinitions, useDevTools, useIncremark };
+export { AutoScrollContainer, type AutoScrollContainerProps, type AutoScrollContainerRef, type DefinitionsContextValue, DefinitionsProvider, type DefinitionsProviderProps, type HtmlElementNode, Incremark, IncremarkContainerProvider, type IncremarkContainerProviderProps, IncremarkFootnotes, IncremarkHtmlElement, type IncremarkHtmlElementProps, IncremarkInline, type IncremarkInlineProps, type IncremarkProps, IncremarkRenderer, type IncremarkRendererProps, ThemeProvider, type ThemeProviderProps, type TypewriterControls, type TypewriterOptions, type UseBlockTransformerOptions, type UseBlockTransformerReturn, type UseDevToolsOptions, type UseIncremarkOptions, type UseIncremarkReturn, useBlockTransformer, useDefinitions, useDevTools, useIncremark };

package/dist/index.js

@@ -822,13 +822,15 @@ var IncremarkParagraph = ({ node }) => {
 };
 
 // src/components/IncremarkCode.tsx
-import { useState as useState5, useEffect as useEffect4, useRef as useRef5, useCallback as useCallback5 } from "react";
+import React4, { useState as useState5, useEffect as useEffect4, useRef as useRef5, useCallback as useCallback5 } from "react";
 import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var IncremarkCode = ({
   node,
   theme = "github-dark",
   disableHighlight = false,
-  mermaidDelay = 500
+  mermaidDelay = 500,
+  customCodeBlocks,
+  blockStatus = "completed"
 }) => {
   const [copied, setCopied] = useState5(false);
   const [highlightedHtml, setHighlightedHtml] = useState5("");
@@ -844,6 +846,13 @@ var IncremarkCode = ({
   const language = node.lang || "text";
   const code = node.value;
   const isMermaid = language === "mermaid";
+  const CustomCodeBlock = React4.useMemo(() => {
+    if (blockStatus === "pending") {
+      return null;
+    }
+    return customCodeBlocks?.[language] || null;
+  }, [customCodeBlocks, language, blockStatus]);
+  const useCustomComponent = !!CustomCodeBlock;
   const toggleMermaidView = useCallback5(() => {
     setMermaidViewMode((prev) => prev === "preview" ? "source" : "preview");
   }, []);
@@ -943,6 +952,9 @@ var IncremarkCode = ({
       }
     };
   }, []);
+  if (useCustomComponent && CustomCodeBlock) {
+    return /* @__PURE__ */ jsx6(CustomCodeBlock, { codeStr: code, lang: language });
+  }
   if (isMermaid) {
     return /* @__PURE__ */ jsxs2("div", { className: "incremark-mermaid", children: [
       /* @__PURE__ */ jsxs2("div", { className: "mermaid-header", children: [
@@ -975,19 +987,28 @@ var IncremarkCode = ({
 
 // src/components/IncremarkList.tsx
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-function getItemContent(item) {
+function getItemInlineContent(item) {
   const firstChild = item.children[0];
   if (firstChild?.type === "paragraph") {
     return firstChild.children;
   }
   return [];
 }
+function getItemBlockChildren(item) {
+  return item.children.filter((child, index) => {
+    if (index === 0 && child.type === "paragraph") {
+      return false;
+    }
+    return true;
+  });
+}
 var IncremarkList = ({ node }) => {
   const Tag = node.ordered ? "ol" : "ul";
   const isTaskList = node.children?.some((item) => item.checked !== null && item.checked !== void 0);
   return /* @__PURE__ */ jsx7(Tag, { className: `incremark-list ${isTaskList ? "task-list" : ""}`, children: node.children?.map((item, index) => {
     const isTaskItem = item.checked !== null && item.checked !== void 0;
-    const content = getItemContent(item);
+    const inlineContent = getItemInlineContent(item);
+    const blockChildren = getItemBlockChildren(item);
     if (isTaskItem) {
       return /* @__PURE__ */ jsx7("li", { className: "incremark-list-item task-item", children: /* @__PURE__ */ jsxs3("label", { className: "task-label", children: [
         /* @__PURE__ */ jsx7(
@@ -999,10 +1020,18 @@ var IncremarkList = ({ node }) => {
             className: "checkbox"
           }
         ),
-        /* @__PURE__ */ jsx7("span", { className: "task-content", children: /* @__PURE__ */ jsx7(IncremarkInline, { nodes: content }) })
+        /* @__PURE__ */ jsx7("span", { className: "task-content", children: /* @__PURE__ */ jsx7(IncremarkInline, { nodes: inlineContent }) })
       ] }) }, index);
     }
-    return /* @__PURE__ */ jsx7("li", { className: "incremark-list-item", children: /* @__PURE__ */ jsx7(IncremarkInline, { nodes: content }) }, index);
+    return /* @__PURE__ */ jsxs3("li", { className: "incremark-list-item", children: [
+      /* @__PURE__ */ jsx7(IncremarkInline, { nodes: inlineContent }),
+      blockChildren.map((child, childIndex) => {
+        if (child.type === "list") {
+          return /* @__PURE__ */ jsx7(IncremarkList, { node: child }, childIndex);
+        }
+        return null;
+      })
+    ] }, index);
   }) });
 };
 
@@ -1120,20 +1149,44 @@ var IncremarkDefault = ({ node }) => {
   ] });
 };
 
+// src/components/IncremarkContainer.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function parseOptions(attributes) {
+  if (!attributes) return {};
+  const options = {};
+  for (const [key, value] of Object.entries(attributes)) {
+    try {
+      options[key] = JSON.parse(value);
+    } catch {
+      options[key] = value;
+    }
+  }
+  return options;
+}
+var IncremarkContainer = ({ node, customContainers }) => {
+  const containerName = node.name;
+  const options = parseOptions(node.attributes);
+  const CustomContainer = customContainers?.[containerName];
+  if (CustomContainer) {
+    return /* @__PURE__ */ jsx13(CustomContainer, { name: containerName, options, children: node.children?.map((child, index) => /* @__PURE__ */ jsx13(IncremarkRenderer, { node: child }, index)) });
+  }
+  return /* @__PURE__ */ jsx13("div", { className: `incremark-container incremark-container-${containerName}`, children: node.children && node.children.length > 0 && /* @__PURE__ */ jsx13("div", { className: "incremark-container-content", children: node.children.map((child, index) => /* @__PURE__ */ jsx13(IncremarkRenderer, { node: child }, index)) }) });
+};
+
 // src/components/IncremarkRenderer.tsx
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 var DefaultHeading = ({ node }) => {
-  return /* @__PURE__ */ jsx13(IncremarkHeading, { node });
+  return /* @__PURE__ */ jsx14(IncremarkHeading, { node });
 };
-var DefaultParagraph = ({ node }) => /* @__PURE__ */ jsx13(IncremarkParagraph, { node });
-var DefaultCode = ({ node }) => /* @__PURE__ */ jsx13(IncremarkCode, { node });
-var DefaultList = ({ node }) => /* @__PURE__ */ jsx13(IncremarkList, { node });
-var DefaultBlockquote = ({ node }) => /* @__PURE__ */ jsx13(IncremarkBlockquote, { node });
-var DefaultTable = ({ node }) => /* @__PURE__ */ jsx13(IncremarkTable, { node });
-var DefaultThematicBreak = () => /* @__PURE__ */ jsx13(IncremarkThematicBreak, {});
-var DefaultMath = ({ node }) => /* @__PURE__ */ jsx13(IncremarkMath, { node });
-var DefaultHtmlElement = ({ node }) => /* @__PURE__ */ jsx13(IncremarkHtmlElement, { node });
-var DefaultDefault = ({ node }) => /* @__PURE__ */ jsx13(IncremarkDefault, { node });
+var DefaultParagraph = ({ node }) => /* @__PURE__ */ jsx14(IncremarkParagraph, { node });
+var DefaultCode = ({ node }) => /* @__PURE__ */ jsx14(IncremarkCode, { node });
+var DefaultList = ({ node }) => /* @__PURE__ */ jsx14(IncremarkList, { node });
+var DefaultBlockquote = ({ node }) => /* @__PURE__ */ jsx14(IncremarkBlockquote, { node });
+var DefaultTable = ({ node }) => /* @__PURE__ */ jsx14(IncremarkTable, { node });
+var DefaultThematicBreak = () => /* @__PURE__ */ jsx14(IncremarkThematicBreak, {});
+var DefaultMath = ({ node }) => /* @__PURE__ */ jsx14(IncremarkMath, { node });
+var DefaultHtmlElement = ({ node }) => /* @__PURE__ */ jsx14(IncremarkHtmlElement, { node });
+var DefaultDefault = ({ node }) => /* @__PURE__ */ jsx14(IncremarkDefault, { node });
 var defaultComponents = {
   heading: DefaultHeading,
   paragraph: DefaultParagraph,
@@ -1147,21 +1200,49 @@ var defaultComponents = {
   htmlElement: DefaultHtmlElement,
   default: DefaultDefault
 };
-var IncremarkRenderer = ({ node, components = {} }) => {
+function isContainerNode(node) {
+  return node.type === "containerDirective" || node.type === "leafDirective" || node.type === "textDirective";
+}
+var IncremarkRenderer = ({
+  node,
+  components = {},
+  customContainers,
+  customCodeBlocks,
+  blockStatus
+}) => {
   if (node.type === "footnoteDefinition") {
     return null;
   }
   if (node.type === "html") {
-    return /* @__PURE__ */ jsx13("pre", { className: "incremark-html-code", children: /* @__PURE__ */ jsx13("code", { children: node.value }) });
+    return /* @__PURE__ */ jsx14("pre", { className: "incremark-html-code", children: /* @__PURE__ */ jsx14("code", { children: node.value }) });
+  }
+  if (isContainerNode(node)) {
+    return /* @__PURE__ */ jsx14(
+      IncremarkContainer,
+      {
+        node,
+        customContainers
+      }
+    );
+  }
+  if (node.type === "code") {
+    return /* @__PURE__ */ jsx14(
+      IncremarkCode,
+      {
+        node,
+        customCodeBlocks,
+        blockStatus
+      }
+    );
   }
   const mergedComponents = { ...defaultComponents, ...components };
   const Component = mergedComponents[node.type] || DefaultDefault;
-  return /* @__PURE__ */ jsx13(Component, { node });
+  return /* @__PURE__ */ jsx14(Component, { node });
 };
 
 // src/components/IncremarkFootnotes.tsx
 import React7 from "react";
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var IncremarkFootnotes = () => {
   const { footnoteDefinitions, footnoteReferenceOrder } = useDefinitions();
   const orderedFootnotes = React7.useMemo(() => {
@@ -1174,8 +1255,8 @@ var IncremarkFootnotes = () => {
     return null;
   }
   return /* @__PURE__ */ jsxs7("section", { className: "incremark-footnotes", children: [
-    /* @__PURE__ */ jsx14("hr", { className: "incremark-footnotes-divider" }),
-    /* @__PURE__ */ jsx14("ol", { className: "incremark-footnotes-list", children: orderedFootnotes.map((item, index) => /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsx15("hr", { className: "incremark-footnotes-divider" }),
+    /* @__PURE__ */ jsx15("ol", { className: "incremark-footnotes-list", children: orderedFootnotes.map((item, index) => /* @__PURE__ */ jsxs7(
       "li",
       {
         id: `fn-${item.identifier}`,
@@ -1186,9 +1267,9 @@ var IncremarkFootnotes = () => {
               index + 1,
               "."
             ] }),
-            /* @__PURE__ */ jsx14("div", { className: "incremark-footnote-body", children: item.definition.children.map((child, childIndex) => /* @__PURE__ */ jsx14(IncremarkRenderer, { node: child }, childIndex)) })
+            /* @__PURE__ */ jsx15("div", { className: "incremark-footnote-body", children: item.definition.children.map((child, childIndex) => /* @__PURE__ */ jsx15(IncremarkRenderer, { node: child }, childIndex)) })
           ] }),
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx15(
             "a",
             {
               href: `#fnref-${item.identifier}`,
@@ -1205,28 +1286,32 @@ var IncremarkFootnotes = () => {
 };
 
 // src/components/IncremarkContainerProvider.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var IncremarkContainerProvider = ({ children, definitions }) => {
-  return /* @__PURE__ */ jsx15(DefinitionsContext.Provider, { value: definitions, children });
+  return /* @__PURE__ */ jsx16(DefinitionsContext.Provider, { value: definitions, children });
 };
 
 // src/components/Incremark.tsx
-import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 var Incremark = (props) => {
   const {
     blocks: propsBlocks,
     components,
+    customContainers,
+    customCodeBlocks,
     showBlockStatus = true,
     className = "",
     incremark
   } = props;
   if (incremark) {
     const { blocks: blocks2, isFinalized: isFinalized2, _definitionsContextValue } = incremark;
-    return /* @__PURE__ */ jsx16(IncremarkContainerProvider, { definitions: _definitionsContextValue, children: /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx17(IncremarkContainerProvider, { definitions: _definitionsContextValue, children: /* @__PURE__ */ jsx17(
       IncremarkInternal,
       {
         blocks: blocks2,
         components,
+        customContainers,
+        customCodeBlocks,
         showBlockStatus,
         className,
         isFinalized: isFinalized2
@@ -1235,11 +1320,13 @@ var Incremark = (props) => {
   }
   const blocks = propsBlocks || [];
   const isFinalized = blocks.length > 0 && blocks.every((b) => b.status === "completed");
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     IncremarkInternal,
     {
       blocks,
       components,
+      customContainers,
+      customCodeBlocks,
       showBlockStatus,
       className,
       isFinalized
@@ -1249,6 +1336,8 @@ var Incremark = (props) => {
 var IncremarkInternal = ({
   blocks,
   components,
+  customContainers,
+  customCodeBlocks,
   showBlockStatus,
   className,
   isFinalized
@@ -1265,9 +1354,18 @@ var IncremarkInternal = ({
         showBlockStatus && "incremark-show-status",
         block.isLastPending && "incremark-last-pending"
       ].filter(Boolean).join(" ");
-      return /* @__PURE__ */ jsx16("div", { className: classes, children: /* @__PURE__ */ jsx16(IncremarkRenderer, { node: block.node, components }) }, block.stableId);
+      return /* @__PURE__ */ jsx17("div", { className: classes, children: /* @__PURE__ */ jsx17(
+        IncremarkRenderer,
+        {
+          node: block.node,
+          components,
+          customContainers,
+          customCodeBlocks,
+          blockStatus: block.status
+        }
+      ) }, block.stableId);
     }),
-    isFinalized && /* @__PURE__ */ jsx16(IncremarkFootnotes, {})
+    isFinalized && /* @__PURE__ */ jsx17(IncremarkFootnotes, {})
   ] });
 };
 
@@ -1280,7 +1378,7 @@ import {
   forwardRef,
   useImperativeHandle
 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var AutoScrollContainer = forwardRef(
   ({
     children,
@@ -1378,11 +1476,11 @@ var AutoScrollContainer = forwardRef(
       }),
       [scrollToBottom, isUserScrolledUp]
     );
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx18(
       "div",
       {
         ref: containerRef,
-        className,
+        className: `auto-scroll-container ${className || ""}`.trim(),
         style: {
           overflowY: "auto",
           height: "100%",
@@ -1399,7 +1497,7 @@ AutoScrollContainer.displayName = "AutoScrollContainer";
 // src/ThemeProvider.tsx
 import { useEffect as useEffect7, useRef as useRef8 } from "react";
 import { applyTheme } from "@incremark/theme";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var ThemeProvider = ({
   theme,
   children,
@@ -1411,7 +1509,7 @@ var ThemeProvider = ({
       applyTheme(containerRef.current, theme);
     }
   }, [theme]);
-  return /* @__PURE__ */ jsx18("div", { ref: containerRef, className, children });
+  return /* @__PURE__ */ jsx19("div", { ref: containerRef, className: `incremark-theme-provider ${className}`.trim(), children });
 };
 
 // src/index.ts
@@ -1445,6 +1543,7 @@ export {
   IncremarkContainerProvider,
   IncremarkFootnotes,
   IncremarkHtmlElement,
+  IncremarkInline,
   IncremarkRenderer,
   ThemeProvider,
   allPlugins,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incremark/react",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "license": "MIT",
   "description": "Incremark React integration - Incremental Markdown parser for AI streaming",
   "type": "module",
@@ -21,13 +21,13 @@
     "mermaid": "^10.0.0 || ^11.0.0",
     "katex": "^0.16.0",
     "react": ">=18.0.0",
-    "@incremark/core": "0.2.2"
+    "@incremark/core": "0.2.4"
   },
   "dependencies": {
     "shiki": "^3.20.0",
-    "@incremark/devtools": "0.2.2",
-    "@incremark/shared": "0.2.2",
-    "@incremark/theme": "0.2.2"
+    "@incremark/theme": "0.2.4",
+    "@incremark/shared": "0.2.4",
+    "@incremark/devtools": "0.2.4"
   },
   "devDependencies": {
     "@types/mdast": "^4.0.0",