@incremark/react 0.2.5 → 0.2.6

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ParserOptions, AnimationEffect, TransformerPlugin, ParsedBlock, Root, IncrementalUpdate, IncremarkParser, SourceBlock, TransformerOptions, DisplayBlock, BlockTransformer, RootContent as RootContent$1 } from '@incremark/core';
+import { ParserOptions, AnimationEffect, TransformerPlugin, ParsedBlock, Root, IncrementalUpdate, IncremarkParser, SourceBlock, TransformerOptions, DisplayBlock, BlockTransformer } 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, PhrasingContent } from 'mdast';
@@ -298,9 +298,19 @@ interface BlockWithStableId extends ParsedBlock {
     stableId: string;
     isLastPending?: boolean;
 }
+/**
+ * 代码块配置
+ */
+interface CodeBlockConfig {
+    /** 是否从一开始就接管渲染，而不是等到 completed 状态 */
+    takeOver?: boolean;
+}
 interface IncremarkProps {
     /** 要渲染的块列表 */
     blocks?: BlockWithStableId[];
+    /** 内容是否完全显示完成（用于控制脚注等需要在内容完全显示后才出现的元素）
+     * 如果传入了 incremark，则会自动使用 incremark.isDisplayComplete，此 prop 被忽略 */
+    isDisplayComplete?: boolean;
     /** 自定义组件映射 */
     components?: Partial<Record<string, React.ComponentType<{
         node: any;
@@ -314,8 +324,12 @@ interface IncremarkProps {
     /** 自定义代码块组件映射，key 为代码语言名称（如 'echart', 'mermaid'） */
     customCodeBlocks?: Record<string, React.ComponentType<{
         codeStr: string;
-        lang?: string;
+        lang?: string | undefined;
+        completed?: boolean | undefined;
+        takeOver?: boolean | undefined;
     }>>;
+    /** 代码块配置映射，key 为代码语言名称 */
+    codeBlockConfigs?: Record<string, CodeBlockConfig>;
     /** 是否显示块状态（待处理块边框） */
     showBlockStatus?: boolean;
     /** 自定义类名 */
@@ -351,19 +365,24 @@ interface ContainerNode {
 }
 
 interface IncremarkRendererProps {
-    node: RootContent$1 | ContainerNode;
+    node: RootContent | ContainerNode;
     components?: Partial<Record<string, React.ComponentType<{
-        node: RootContent$1;
+        node: any;
     }>>>;
     customContainers?: Record<string, React.ComponentType<{
         name: string;
         options?: Record<string, any>;
-        children?: React.ReactNode;
+        children?: ReactNode;
     }>>;
     customCodeBlocks?: Record<string, React.ComponentType<{
         codeStr: string;
         lang?: string;
+        completed?: boolean;
+        takeOver?: boolean;
     }>>;
+    codeBlockConfigs?: Record<string, {
+        takeOver?: boolean;
+    }>;
     blockStatus?: 'pending' | 'stable' | 'completed';
 }
 /**

package/dist/index.js

@@ -326,12 +326,34 @@ function useIncremark(options = {}) {
   const [pendingBlocks, setPendingBlocks] = useState3([]);
   const [isLoading, setIsLoading] = useState3(false);
   const [isFinalized, setIsFinalized] = useState3(false);
+  const handleUpdate = useCallback3(
+    (update, isFinalize) => {
+      setMarkdown(parser.getBuffer());
+      if (update.completed.length > 0) {
+        setCompletedBlocks((prev) => [...prev, ...update.completed]);
+      }
+      setPendingBlocks(update.pending);
+      if (isFinalize) {
+        setIsLoading(false);
+        setIsFinalized(true);
+      } else {
+        setIsLoading(true);
+      }
+      setFootnoteReferenceOrder(update.footnoteReferenceOrder);
+    },
+    [parser, setFootnoteReferenceOrder]
+  );
   const { blocks, typewriter, transformer, isAnimationComplete } = useTypewriter({
     typewriter: options.typewriter,
     completedBlocks,
     pendingBlocks
   });
-  const isDisplayComplete = isFinalized && isAnimationComplete;
+  const isDisplayComplete = useMemo2(() => {
+    if (!options.typewriter || !typewriter.enabled) {
+      return isFinalized;
+    }
+    return isFinalized && isAnimationComplete;
+  }, [options.typewriter, typewriter.enabled, isFinalized, isAnimationComplete]);
   const ast = useMemo2(
     () => ({
       type: "root",
@@ -341,30 +363,17 @@ function useIncremark(options = {}) {
   );
   const append = useCallback3(
     (chunk) => {
-      setIsLoading(true);
       const update = parser.append(chunk);
-      setMarkdown(parser.getBuffer());
-      if (update.completed.length > 0) {
-        setCompletedBlocks((prev) => [...prev, ...update.completed]);
-      }
-      setPendingBlocks(update.pending);
-      setFootnoteReferenceOrder(update.footnoteReferenceOrder);
+      handleUpdate(update, false);
       return update;
     },
-    [parser, setFootnoteReferenceOrder]
+    [parser, handleUpdate]
   );
   const finalize = useCallback3(() => {
     const update = parser.finalize();
-    setMarkdown(parser.getBuffer());
-    if (update.completed.length > 0) {
-      setCompletedBlocks((prev) => [...prev, ...update.completed]);
-    }
-    setPendingBlocks([]);
-    setIsLoading(false);
-    setIsFinalized(true);
-    setFootnoteReferenceOrder(update.footnoteReferenceOrder);
+    handleUpdate(update, true);
     return update;
-  }, [parser, setFootnoteReferenceOrder]);
+  }, [parser, handleUpdate]);
   const abort = useCallback3(() => {
     return finalize();
   }, [finalize]);
@@ -538,9 +547,6 @@ function useBlockTransformer(sourceBlocks, options = {}) {
   };
 }
 
-// src/components/IncremarkRenderer.tsx
-import React6 from "react";
-
 // src/components/IncremarkInline.tsx
 import React3 from "react";
 import {
@@ -843,10 +849,12 @@ import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var IncremarkCode = ({
   node,
   theme = "github-dark",
+  fallbackTheme = "github-dark",
   disableHighlight = false,
   mermaidDelay = 500,
   customCodeBlocks,
-  blockStatus = "completed"
+  blockStatus = "completed",
+  codeBlockConfigs
 }) => {
   const [copied, setCopied] = useState5(false);
   const [highlightedHtml, setHighlightedHtml] = useState5("");
@@ -863,12 +871,17 @@ var IncremarkCode = ({
   const code = node.value;
   const isMermaid = language === "mermaid";
   const CustomCodeBlock = React4.useMemo(() => {
-    if (blockStatus === "pending") {
+    const component = customCodeBlocks?.[language];
+    if (!component) return null;
+    const config = codeBlockConfigs?.[language];
+    if (config?.takeOver) {
+      return component;
+    }
+    if (blockStatus !== "completed") {
       return null;
     }
-    return customCodeBlocks?.[language] || null;
-  }, [customCodeBlocks, language, blockStatus]);
-  const useCustomComponent = !!CustomCodeBlock;
+    return component;
+  }, [customCodeBlocks, language, blockStatus, codeBlockConfigs]);
   const toggleMermaidView = useCallback5(() => {
     setMermaidViewMode((prev) => prev === "preview" ? "source" : "preview");
   }, []);
@@ -949,7 +962,7 @@ var IncremarkCode = ({
       }
       const html = highlighter.codeToHtml(code, {
         lang: loadedLanguagesRef.current.has(lang) ? lang : "text",
-        theme: loadedThemesRef.current.has(theme) ? theme : "github-dark"
+        theme: loadedThemesRef.current.has(theme) ? theme : fallbackTheme
       });
       setHighlightedHtml(html);
     } catch {
@@ -957,7 +970,7 @@ var IncremarkCode = ({
     } finally {
       setIsHighlighting(false);
     }
-  }, [code, language, theme, disableHighlight, isMermaid, scheduleRenderMermaid]);
+  }, [code, language, theme, fallbackTheme, disableHighlight, isMermaid, scheduleRenderMermaid]);
   useEffect4(() => {
     highlight();
   }, [highlight]);
@@ -968,8 +981,17 @@ var IncremarkCode = ({
       }
     };
   }, []);
-  if (useCustomComponent && CustomCodeBlock) {
-    return /* @__PURE__ */ jsx6(CustomCodeBlock, { codeStr: code, lang: language });
+  if (CustomCodeBlock) {
+    const config = codeBlockConfigs?.[language];
+    return /* @__PURE__ */ jsx6(
+      CustomCodeBlock,
+      {
+        codeStr: code,
+        lang: language,
+        completed: blockStatus === "completed",
+        takeOver: config?.takeOver
+      }
+    );
   }
   if (isMermaid) {
     return /* @__PURE__ */ jsxs2("div", { className: "incremark-mermaid", children: [
@@ -1002,6 +1024,7 @@ var IncremarkCode = ({
 };
 
 // src/components/IncremarkList.tsx
+import React5 from "react";
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function getItemInlineContent(item) {
   const firstChild = item.children[0];
@@ -1041,25 +1064,16 @@ var IncremarkList = ({ node }) => {
     }
     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;
-      })
+      blockChildren.map((child, childIndex) => /* @__PURE__ */ jsx7(React5.Fragment, { children: /* @__PURE__ */ jsx7(IncremarkRenderer, { node: child }) }, childIndex))
     ] }, index);
   }) });
 };
 
 // src/components/IncremarkBlockquote.tsx
+import React6 from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var IncremarkBlockquote = ({ node }) => {
-  return /* @__PURE__ */ jsx8("blockquote", { className: "incremark-blockquote", children: node.children.map((child, index) => {
-    if (child.type === "paragraph") {
-      return /* @__PURE__ */ jsx8(IncremarkParagraph, { node: child }, index);
-    }
-    return /* @__PURE__ */ jsx8("div", { className: "unknown-child", children: child.type }, index);
-  }) });
+  return /* @__PURE__ */ jsx8("blockquote", { className: "incremark-blockquote", children: node.children.map((child, index) => /* @__PURE__ */ jsx8(React6.Fragment, { children: /* @__PURE__ */ jsx8(IncremarkRenderer, { node: child }) }, index)) });
 };
 
 // src/components/IncremarkTable.tsx
@@ -1156,17 +1170,8 @@ var IncremarkMath = ({
   return /* @__PURE__ */ jsx11("div", { className: "incremark-math-block", children: renderedHtml && !isLoading ? /* @__PURE__ */ jsx11("div", { className: "math-rendered", dangerouslySetInnerHTML: { __html: renderedHtml } }) : /* @__PURE__ */ jsx11("pre", { className: "math-source-block", children: /* @__PURE__ */ jsx11("code", { children: formula }) }) });
 };
 
-// src/components/IncremarkDefault.tsx
-import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
-var IncremarkDefault = ({ node }) => {
-  return /* @__PURE__ */ jsxs5("div", { className: "incremark-default", children: [
-    /* @__PURE__ */ jsx12("span", { className: "type-badge", children: node.type }),
-    /* @__PURE__ */ jsx12("pre", { children: JSON.stringify(node, null, 2) })
-  ] });
-};
-
 // src/components/IncremarkContainer.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function parseOptions(attributes) {
   if (!attributes) return {};
   const options = {};
@@ -1184,52 +1189,57 @@ var IncremarkContainer = ({ node, customContainers }) => {
   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__ */ jsx12(CustomContainer, { name: containerName, options, children: node.children?.map((child, index) => /* @__PURE__ */ jsx12(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)) }) });
+  return /* @__PURE__ */ jsx12("div", { className: `incremark-container incremark-container-${containerName}`, children: node.children && node.children.length > 0 && /* @__PURE__ */ jsx12("div", { className: "incremark-container-content", children: node.children.map((child, index) => /* @__PURE__ */ jsx12(IncremarkRenderer, { node: child }, index)) }) });
 };
 
-// src/components/IncremarkRenderer.tsx
-import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
-var DefaultHeading = ({ node }) => {
-  return /* @__PURE__ */ jsx14(IncremarkHeading, { node });
+// src/components/IncremarkDefault.tsx
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+var IncremarkDefault = ({ node }) => {
+  return /* @__PURE__ */ jsxs5("div", { className: "incremark-default", children: [
+    /* @__PURE__ */ jsx13("span", { className: "type-badge", children: node.type }),
+    /* @__PURE__ */ jsx13("pre", { children: JSON.stringify(node, null, 2) })
+  ] });
 };
-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 });
+
+// src/components/IncremarkRenderer.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
 var defaultComponents = {
-  heading: DefaultHeading,
-  paragraph: DefaultParagraph,
-  code: DefaultCode,
-  list: DefaultList,
-  blockquote: DefaultBlockquote,
-  table: DefaultTable,
-  thematicBreak: DefaultThematicBreak,
-  math: DefaultMath,
-  inlineMath: DefaultMath,
-  htmlElement: DefaultHtmlElement,
-  default: DefaultDefault
+  heading: IncremarkHeading,
+  paragraph: IncremarkParagraph,
+  list: IncremarkList,
+  blockquote: IncremarkBlockquote,
+  table: IncremarkTable,
+  thematicBreak: IncremarkThematicBreak,
+  math: IncremarkMath,
+  inlineMath: IncremarkMath,
+  htmlElement: IncremarkHtmlElement,
+  containerDirective: IncremarkContainer,
+  leafDirective: IncremarkContainer,
+  textDirective: IncremarkContainer
 };
 function isContainerNode(node) {
   return node.type === "containerDirective" || node.type === "leafDirective" || node.type === "textDirective";
 }
+function isHtmlNode2(node) {
+  return node.type === "html";
+}
+function getComponent(type, userComponents) {
+  return userComponents[type] || defaultComponents[type] || IncremarkDefault;
+}
 var IncremarkRenderer = ({
   node,
   components = {},
   customContainers,
   customCodeBlocks,
+  codeBlockConfigs,
   blockStatus
 }) => {
   if (node.type === "footnoteDefinition") {
     return null;
   }
-  if (node.type === "html") {
+  if (isHtmlNode2(node)) {
     return /* @__PURE__ */ jsx14("pre", { className: "incremark-html-code", children: /* @__PURE__ */ jsx14("code", { children: node.value }) });
   }
   if (isContainerNode(node)) {
@@ -1247,21 +1257,21 @@ var IncremarkRenderer = ({
       {
         node,
         customCodeBlocks,
+        codeBlockConfigs,
         blockStatus
       }
     );
   }
-  const mergedComponents = { ...defaultComponents, ...components };
-  const Component = mergedComponents[node.type] || DefaultDefault;
+  const Component = getComponent(node.type, components);
   return /* @__PURE__ */ jsx14(Component, { node });
 };
 
 // src/components/IncremarkFootnotes.tsx
-import React7 from "react";
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import React8 from "react";
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 var IncremarkFootnotes = () => {
   const { footnoteDefinitions, footnoteReferenceOrder } = useDefinitions();
-  const orderedFootnotes = React7.useMemo(() => {
+  const orderedFootnotes = React8.useMemo(() => {
     return footnoteReferenceOrder.map((identifier) => ({
       identifier,
       definition: footnoteDefinitions[identifier]
@@ -1270,16 +1280,16 @@ var IncremarkFootnotes = () => {
   if (orderedFootnotes.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs7("section", { className: "incremark-footnotes", children: [
+  return /* @__PURE__ */ jsxs6("section", { className: "incremark-footnotes", children: [
     /* @__PURE__ */ jsx15("hr", { className: "incremark-footnotes-divider" }),
-    /* @__PURE__ */ jsx15("ol", { className: "incremark-footnotes-list", children: orderedFootnotes.map((item, index) => /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsx15("ol", { className: "incremark-footnotes-list", children: orderedFootnotes.map((item, index) => /* @__PURE__ */ jsxs6(
       "li",
       {
         id: `fn-${item.identifier}`,
         className: "incremark-footnote-item",
         children: [
-          /* @__PURE__ */ jsxs7("div", { className: "incremark-footnote-content", children: [
-            /* @__PURE__ */ jsxs7("span", { className: "incremark-footnote-number", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "incremark-footnote-content", children: [
+            /* @__PURE__ */ jsxs6("span", { className: "incremark-footnote-number", children: [
               index + 1,
               "."
             ] }),
@@ -1308,10 +1318,11 @@ var IncremarkContainerProvider = ({ children, definitions }) => {
 };
 
 // src/components/Incremark.tsx
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
 var Incremark = (props) => {
   const {
     blocks: propsBlocks,
+    isDisplayComplete: propsIsDisplayComplete = false,
     components,
     customContainers,
     customCodeBlocks,
@@ -1335,7 +1346,7 @@ var Incremark = (props) => {
     ) });
   }
   const blocks = propsBlocks || [];
-  const isDisplayComplete = blocks.length > 0 && blocks.every((b) => b.status === "completed");
+  const isDisplayComplete = propsIsDisplayComplete;
   return /* @__PURE__ */ jsx17(
     IncremarkInternal,
     {
@@ -1354,11 +1365,12 @@ var IncremarkInternal = ({
   components,
   customContainers,
   customCodeBlocks,
+  codeBlockConfigs,
   showBlockStatus,
   className,
   isDisplayComplete
 }) => {
-  return /* @__PURE__ */ jsxs8("div", { className: `incremark ${className}`, children: [
+  return /* @__PURE__ */ jsxs7("div", { className: `incremark ${className}`, children: [
     blocks.map((block) => {
       if (block.node.type === "definition" || block.node.type === "footnoteDefinition") {
         return null;
@@ -1377,6 +1389,7 @@ var IncremarkInternal = ({
           components,
           customContainers,
           customCodeBlocks,
+          codeBlockConfigs,
           blockStatus: block.status
         }
       ) }, block.stableId);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incremark/react",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "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.5"
+    "@incremark/core": "0.2.6"
   },
   "dependencies": {
     "shiki": "^3.20.0",
-    "@incremark/theme": "0.2.5",
-    "@incremark/shared": "0.2.5",
-    "@incremark/devtools": "0.2.5"
+    "@incremark/shared": "0.2.6",
+    "@incremark/theme": "0.2.6",
+    "@incremark/devtools": "0.2.6"
   },
   "devDependencies": {
     "@types/mdast": "^4.0.0",