@incremark/react 0.3.0 → 0.3.1

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ParserOptions, AnimationEffect, TransformerPlugin, ParsedBlock, Root, IncrementalUpdate, IncremarkParser, SourceBlock, TransformerOptions, DisplayBlock, BlockTransformer } from '@incremark/core';
+import { IncremarkParserOptions, 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$1, { ReactNode, ComponentType } from 'react';
 import { Definition, FootnoteDefinition, RootContent, PhrasingContent } from 'mdast';
@@ -110,7 +110,7 @@ interface TypewriterOptions {
     /** 自定义插件 */
     plugins?: TransformerPlugin[];
 }
-interface UseIncremarkOptions extends ParserOptions {
+interface UseIncremarkOptions extends IncremarkParserOptions {
     /** 打字机配置，传入即创建 transformer（可通过 enabled 控制是否启用） */
     typewriter?: TypewriterOptions;
 }
@@ -199,6 +199,8 @@ declare function useIncremark(options?: UseIncremarkOptions): {
     reset: () => void;
     /** 一次性渲染（reset + append + finalize） */
     render: (content: string) => IncrementalUpdate;
+    /** 更新解析器配置（动态更新，不需要重建实例） */
+    updateOptions: (newOptions: Partial<IncremarkParserOptions>) => void;
     /** 解析器实例 */
     parser: IncremarkParser;
     /** 打字机控制 */

package/dist/index.js

@@ -389,6 +389,19 @@ function useIncremark(options = {}) {
     },
     [parser, setFootnoteReferenceOrder]
   );
+  const updateOptions = useCallback3(
+    (newOptions) => {
+      parser.updateOptions(newOptions);
+      setCompletedBlocks([]);
+      setPendingBlocks([]);
+      setMarkdown("");
+      setIsLoading(false);
+      setIsFinalized(false);
+      setFootnoteReferenceOrder([]);
+      transformer?.reset();
+    },
+    [parser, transformer, setFootnoteReferenceOrder]
+  );
   return {
     /** 已收集的完整 Markdown 字符串 */
     markdown,
@@ -421,6 +434,8 @@ function useIncremark(options = {}) {
     reset,
     /** 一次性渲染（reset + append + finalize） */
     render,
+    /** 更新解析器配置（动态更新，不需要重建实例） */
+    updateOptions,
     /** 解析器实例 */
     parser,
     /** 打字机控制 */
@@ -575,7 +590,7 @@ function useLocale() {
 }
 
 // src/components/IncremarkInline.tsx
-import React3 from "react";
+import React4 from "react";
 import {
   hasChunks,
   getStableText,
@@ -734,8 +749,73 @@ var IncremarkHtmlElement = ({ node }) => {
   return /* @__PURE__ */ jsx3(Tag, { ...reactProps, className: `incremark-html-element incremark-${tagName} ${reactProps.className || ""}`, children: renderChildren(children) });
 };
 
+// src/components/IncremarkMath.tsx
+import { useState as useState5, useEffect as useEffect4, useRef as useRef5, useCallback as useCallback5 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var IncremarkMath = ({
+  node,
+  renderDelay = 300
+}) => {
+  const [renderedHtml, setRenderedHtml] = useState5("");
+  const [isLoading, setIsLoading] = useState5(false);
+  const katexRef = useRef5(null);
+  const renderTimerRef = useRef5(null);
+  const isInline = node.type === "inlineMath";
+  const formula = node.value;
+  const doRender = useCallback5(async () => {
+    if (!formula) return;
+    try {
+      if (!katexRef.current) {
+        const katexModule = await import("katex");
+        katexRef.current = katexModule.default;
+      }
+      const katex = katexRef.current;
+      const html = katex.renderToString(formula, {
+        displayMode: !isInline,
+        throwOnError: false,
+        strict: false
+      });
+      setRenderedHtml(html);
+    } catch {
+      setRenderedHtml("");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [formula, isInline]);
+  const scheduleRender = useCallback5(() => {
+    if (!formula) {
+      setRenderedHtml("");
+      return;
+    }
+    if (renderTimerRef.current) {
+      clearTimeout(renderTimerRef.current);
+    }
+    setIsLoading(true);
+    renderTimerRef.current = setTimeout(() => {
+      doRender();
+    }, renderDelay);
+  }, [formula, renderDelay, doRender]);
+  useEffect4(() => {
+    scheduleRender();
+  }, [scheduleRender]);
+  useEffect4(() => {
+    return () => {
+      if (renderTimerRef.current) {
+        clearTimeout(renderTimerRef.current);
+      }
+    };
+  }, []);
+  if (isInline) {
+    return /* @__PURE__ */ jsx4("span", { className: "incremark-math-inline", children: renderedHtml && !isLoading ? /* @__PURE__ */ jsx4("span", { dangerouslySetInnerHTML: { __html: renderedHtml } }) : /* @__PURE__ */ jsx4("code", { className: "math-source", children: formula }) });
+  }
+  return /* @__PURE__ */ jsx4("div", { className: "incremark-math-block", children: renderedHtml && !isLoading ? /* @__PURE__ */ jsx4("div", { className: "math-rendered", dangerouslySetInnerHTML: { __html: renderedHtml } }) : /* @__PURE__ */ jsx4("pre", { className: "math-source-block", children: /* @__PURE__ */ jsx4("code", { children: formula }) }) });
+};
+
 // src/components/IncremarkInline.tsx
-import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs } from "react/jsx-runtime";
+function isInlineMath(node) {
+  return node.type === "inlineMath";
+}
 function isHtmlElementNode(node) {
   return node.type === "htmlElement";
 }
@@ -748,22 +828,25 @@ function isLinkReference(node) {
 var IncremarkInline = ({ nodes }) => {
   if (!nodes || nodes.length === 0) return null;
   const { definitions, footnoteDefinitions } = useDefinitions();
-  return /* @__PURE__ */ jsx4(Fragment, { children: nodes.map((node, i) => {
+  return /* @__PURE__ */ jsx5(Fragment, { children: nodes.map((node, i) => {
     if (node.type === "text") {
       const textNode = node;
       if (hasChunks(node) && textNode.chunks && textNode.chunks.length > 0) {
-        return /* @__PURE__ */ jsxs(React3.Fragment, { children: [
+        return /* @__PURE__ */ jsxs(React4.Fragment, { children: [
           getStableText(textNode),
-          textNode.chunks.map((chunk) => /* @__PURE__ */ jsx4("span", { "data-chunk-key": chunk.createdAt, className: "incremark-fade-in", children: chunk.text }, chunk.createdAt))
+          textNode.chunks.map((chunk) => /* @__PURE__ */ jsx5("span", { "data-chunk-key": chunk.createdAt, className: "incremark-fade-in", children: chunk.text }, chunk.createdAt))
         ] }, i);
       }
-      return /* @__PURE__ */ jsx4(React3.Fragment, { children: node.value }, i);
+      return /* @__PURE__ */ jsx5(React4.Fragment, { children: node.value }, i);
+    }
+    if (isInlineMath(node)) {
+      return /* @__PURE__ */ jsx5(IncremarkMath, { node }, i);
     }
     if (isHtmlElementNode(node)) {
-      return /* @__PURE__ */ jsx4(IncremarkHtmlElement, { node }, i);
+      return /* @__PURE__ */ jsx5(IncremarkHtmlElement, { node }, i);
     }
     if (isHtmlNode(node)) {
-      return /* @__PURE__ */ jsx4(
+      return /* @__PURE__ */ jsx5(
         "span",
         {
           className: "incremark-inline-html",
@@ -773,20 +856,20 @@ var IncremarkInline = ({ nodes }) => {
       );
     }
     if (node.type === "strong") {
-      return /* @__PURE__ */ jsx4("strong", { children: /* @__PURE__ */ jsx4(IncremarkInline, { nodes: node.children }) }, i);
+      return /* @__PURE__ */ jsx5("strong", { children: /* @__PURE__ */ jsx5(IncremarkInline, { nodes: node.children }) }, i);
     }
     if (node.type === "emphasis") {
-      return /* @__PURE__ */ jsx4("em", { children: /* @__PURE__ */ jsx4(IncremarkInline, { nodes: node.children }) }, i);
+      return /* @__PURE__ */ jsx5("em", { children: /* @__PURE__ */ jsx5(IncremarkInline, { nodes: node.children }) }, i);
     }
     if (node.type === "inlineCode") {
-      return /* @__PURE__ */ jsx4("code", { className: "incremark-inline-code", children: node.value }, i);
+      return /* @__PURE__ */ jsx5("code", { className: "incremark-inline-code", children: node.value }, i);
     }
     if (node.type === "link") {
-      return /* @__PURE__ */ jsx4("a", { href: node.url, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx4(IncremarkInline, { nodes: node.children }) }, i);
+      return /* @__PURE__ */ jsx5("a", { href: node.url, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx5(IncremarkInline, { nodes: node.children }) }, i);
     }
     if (node.type === "image") {
       const imageNode = node;
-      return /* @__PURE__ */ jsx4(
+      return /* @__PURE__ */ jsx5(
         "img",
         {
           src: imageNode.url,
@@ -800,7 +883,7 @@ var IncremarkInline = ({ nodes }) => {
     if (isImageReference(node)) {
       const definition = definitions[node.identifier];
       if (definition) {
-        return /* @__PURE__ */ jsx4(
+        return /* @__PURE__ */ jsx5(
           "img",
           {
             src: definition.url,
@@ -822,14 +905,14 @@ var IncremarkInline = ({ nodes }) => {
     if (isLinkReference(node)) {
       const definition = definitions[node.identifier];
       if (definition) {
-        return /* @__PURE__ */ jsx4(
+        return /* @__PURE__ */ jsx5(
           "a",
           {
             href: definition.url,
             title: definition.title || void 0,
             target: "_blank",
             rel: "noopener noreferrer",
-            children: /* @__PURE__ */ jsx4(IncremarkInline, { nodes: node.children })
+            children: /* @__PURE__ */ jsx5(IncremarkInline, { nodes: node.children })
           },
           i
         );
@@ -845,47 +928,47 @@ var IncremarkInline = ({ nodes }) => {
     if (node.type === "footnoteReference") {
       const footnoteRef = node;
       const hasDefinition = footnoteDefinitions[footnoteRef.identifier];
-      return /* @__PURE__ */ jsx4("sup", { className: "incremark-footnote-ref", children: /* @__PURE__ */ jsx4("a", { href: `#fn-${footnoteRef.identifier}`, id: `fnref-${footnoteRef.identifier}`, children: hasDefinition ? `[${footnoteRef.identifier}]` : `[^${footnoteRef.identifier}]` }) }, i);
+      return /* @__PURE__ */ jsx5("sup", { className: "incremark-footnote-ref", children: /* @__PURE__ */ jsx5("a", { href: `#fn-${footnoteRef.identifier}`, id: `fnref-${footnoteRef.identifier}`, children: hasDefinition ? `[${footnoteRef.identifier}]` : `[^${footnoteRef.identifier}]` }) }, i);
     }
     if (node.type === "break") {
-      return /* @__PURE__ */ jsx4("br", {}, i);
+      return /* @__PURE__ */ jsx5("br", {}, i);
     }
     if (node.type === "delete") {
-      return /* @__PURE__ */ jsx4("del", { children: /* @__PURE__ */ jsx4(IncremarkInline, { nodes: node.children }) }, i);
+      return /* @__PURE__ */ jsx5("del", { children: /* @__PURE__ */ jsx5(IncremarkInline, { nodes: node.children }) }, i);
     }
-    return /* @__PURE__ */ jsx4("span", { children: node.value || "" }, i);
+    return /* @__PURE__ */ jsx5("span", { children: node.value || "" }, i);
   }) });
 };
 
 // src/components/IncremarkHeading.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var IncremarkHeading = ({ node }) => {
   const Tag = `h${node.depth}`;
-  return /* @__PURE__ */ jsx5(Tag, { className: `incremark-heading h${node.depth}`, children: /* @__PURE__ */ jsx5(IncremarkInline, { nodes: node.children }) });
+  return /* @__PURE__ */ jsx6(Tag, { className: `incremark-heading h${node.depth}`, children: /* @__PURE__ */ jsx6(IncremarkInline, { nodes: node.children }) });
 };
 
 // src/components/IncremarkParagraph.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var IncremarkParagraph = ({ node }) => {
-  return /* @__PURE__ */ jsx6("p", { className: "incremark-paragraph", children: /* @__PURE__ */ jsx6(IncremarkInline, { nodes: node.children }) });
+  return /* @__PURE__ */ jsx7("p", { className: "incremark-paragraph", children: /* @__PURE__ */ jsx7(IncremarkInline, { nodes: node.children }) });
 };
 
 // src/components/IncremarkCode.tsx
-import React7 from "react";
+import React8 from "react";
 
 // src/components/IncremarkCodeMermaid.tsx
-import { useState as useState5, useEffect as useEffect4, useRef as useRef5, useCallback as useCallback5 } from "react";
+import { useState as useState6, useEffect as useEffect5, useRef as useRef6, useCallback as useCallback6 } from "react";
 import { GravityMermaid, LucideCode, LucideEye, LucideCopy, LucideCopyCheck } from "@incremark/icons";
 import { isClipboardAvailable } from "@incremark/shared";
 
 // src/components/SvgIcon.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var SvgIcon = ({
   svg,
   sizeClass,
   className
 }) => {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "span",
     {
       className: `incremark-icon ${sizeClass || ""} ${className || ""}`.trim(),
@@ -896,24 +979,24 @@ var SvgIcon = ({
 };
 
 // src/components/IncremarkCodeMermaid.tsx
-import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
 var IncremarkCodeMermaid = ({
   node,
   mermaidDelay = 500
 }) => {
-  const [copied, setCopied] = useState5(false);
+  const [copied, setCopied] = useState6(false);
   const { t } = useLocale();
-  const [mermaidSvg, setMermaidSvg] = useState5("");
-  const [mermaidLoading, setMermaidLoading] = useState5(false);
-  const [mermaidViewMode, setMermaidViewMode] = useState5("preview");
-  const mermaidRef = useRef5(null);
-  const mermaidTimerRef = useRef5(null);
-  const copyTimeoutRef = useRef5(null);
+  const [mermaidSvg, setMermaidSvg] = useState6("");
+  const [mermaidLoading, setMermaidLoading] = useState6(false);
+  const [mermaidViewMode, setMermaidViewMode] = useState6("preview");
+  const mermaidRef = useRef6(null);
+  const mermaidTimerRef = useRef6(null);
+  const copyTimeoutRef = useRef6(null);
   const code = node.value;
-  const toggleMermaidView = useCallback5(() => {
+  const toggleMermaidView = useCallback6(() => {
     setMermaidViewMode((prev) => prev === "preview" ? "source" : "preview");
   }, []);
-  const copyCode = useCallback5(async () => {
+  const copyCode = useCallback6(async () => {
     if (!isClipboardAvailable()) return;
     try {
       await navigator.clipboard.writeText(code);
@@ -925,7 +1008,7 @@ var IncremarkCodeMermaid = ({
     } catch {
     }
   }, [code]);
-  const doRenderMermaid = useCallback5(async () => {
+  const doRenderMermaid = useCallback6(async () => {
     if (!code) return;
     try {
       if (!mermaidRef.current) {
@@ -948,7 +1031,7 @@ var IncremarkCodeMermaid = ({
       setMermaidLoading(false);
     }
   }, [code]);
-  const scheduleRenderMermaid = useCallback5(() => {
+  const scheduleRenderMermaid = useCallback6(() => {
     if (!code) return;
     if (mermaidTimerRef.current) {
       clearTimeout(mermaidTimerRef.current);
@@ -958,10 +1041,10 @@ var IncremarkCodeMermaid = ({
       doRenderMermaid();
     }, mermaidDelay);
   }, [code, mermaidDelay, doRenderMermaid]);
-  useEffect4(() => {
+  useEffect5(() => {
     scheduleRenderMermaid();
   }, [scheduleRenderMermaid]);
-  useEffect4(() => {
+  useEffect5(() => {
     return () => {
       if (mermaidTimerRef.current) {
         clearTimeout(mermaidTimerRef.current);
@@ -974,11 +1057,11 @@ var IncremarkCodeMermaid = ({
   return /* @__PURE__ */ jsxs2("div", { className: "incremark-mermaid", children: [
     /* @__PURE__ */ jsxs2("div", { className: "mermaid-header", children: [
       /* @__PURE__ */ jsxs2("span", { className: "language", children: [
-        /* @__PURE__ */ jsx8(SvgIcon, { svg: GravityMermaid, className: "language-icon" }),
+        /* @__PURE__ */ jsx9(SvgIcon, { svg: GravityMermaid, className: "language-icon" }),
         "MERMAID"
       ] }),
       /* @__PURE__ */ jsxs2("div", { className: "mermaid-actions", children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "button",
           {
             className: "code-btn",
@@ -987,10 +1070,10 @@ var IncremarkCodeMermaid = ({
             disabled: !mermaidSvg,
             "aria-label": mermaidViewMode === "preview" ? t("mermaid.viewSource") : t("mermaid.preview"),
             title: mermaidViewMode === "preview" ? "View Source" : "Preview",
-            children: /* @__PURE__ */ jsx8(SvgIcon, { svg: mermaidViewMode === "preview" ? LucideCode : LucideEye })
+            children: /* @__PURE__ */ jsx9(SvgIcon, { svg: mermaidViewMode === "preview" ? LucideCode : LucideEye })
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "button",
           {
             className: "code-btn",
@@ -998,22 +1081,22 @@ var IncremarkCodeMermaid = ({
             type: "button",
             "aria-label": copied ? t("mermaid.copied") : t("mermaid.copy"),
             title: copied ? "Copied!" : "Copy",
-            children: /* @__PURE__ */ jsx8(SvgIcon, { svg: copied ? LucideCopyCheck : LucideCopy })
+            children: /* @__PURE__ */ jsx9(SvgIcon, { svg: copied ? LucideCopyCheck : LucideCopy })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx8("div", { className: "mermaid-content", children: mermaidLoading && !mermaidSvg ? /* @__PURE__ */ jsx8("div", { className: "mermaid-loading", children: /* @__PURE__ */ jsx8("pre", { className: "mermaid-source-code", children: code }) }) : mermaidViewMode === "source" ? /* @__PURE__ */ jsx8("pre", { className: "mermaid-source-code", children: code }) : mermaidSvg ? /* @__PURE__ */ jsx8("div", { className: "mermaid-svg", dangerouslySetInnerHTML: { __html: mermaidSvg } }) : /* @__PURE__ */ jsx8("pre", { className: "mermaid-source-code", children: code }) })
+    /* @__PURE__ */ jsx9("div", { className: "mermaid-content", children: mermaidLoading && !mermaidSvg ? /* @__PURE__ */ jsx9("div", { className: "mermaid-loading", children: /* @__PURE__ */ jsx9("pre", { className: "mermaid-source-code", children: code }) }) : mermaidViewMode === "source" ? /* @__PURE__ */ jsx9("pre", { className: "mermaid-source-code", children: code }) : mermaidSvg ? /* @__PURE__ */ jsx9("div", { className: "mermaid-svg", dangerouslySetInnerHTML: { __html: mermaidSvg } }) : /* @__PURE__ */ jsx9("pre", { className: "mermaid-source-code", children: code }) })
   ] });
 };
 
 // src/components/IncremarkCodeDefault.tsx
-import { useState as useState6, useEffect as useEffect5, useCallback as useCallback6, useRef as useRef6 } from "react";
+import { useState as useState7, useEffect as useEffect6, useCallback as useCallback7, useRef as useRef7 } from "react";
 import { LucideCopy as LucideCopy2, LucideCopyCheck as LucideCopyCheck2 } from "@incremark/icons";
 import { isClipboardAvailable as isClipboardAvailable2 } from "@incremark/shared";
 
 // src/hooks/useShiki.ts
-import React5 from "react";
+import React6 from "react";
 var ShikiManager = class _ShikiManager {
   static instance = null;
   /** 存储 highlighter 实例，key 为主题名称 */
@@ -1113,15 +1196,15 @@ function getShikiManager() {
   return shikiManagerInstance;
 }
 function useShiki(theme) {
-  const [isHighlighting, setIsHighlighting] = React5.useState(false);
-  const highlighterInfoRef = React5.useRef(null);
-  const getHighlighter = React5.useCallback(async () => {
+  const [isHighlighting, setIsHighlighting] = React6.useState(false);
+  const highlighterInfoRef = React6.useRef(null);
+  const getHighlighter = React6.useCallback(async () => {
     if (!highlighterInfoRef.current) {
       highlighterInfoRef.current = await getShikiManager().getHighlighter(theme);
     }
     return highlighterInfoRef.current;
   }, [theme]);
-  const highlight = React5.useCallback(async (code, lang, fallbackTheme) => {
+  const highlight = React6.useCallback(async (code, lang, fallbackTheme) => {
     setIsHighlighting(true);
     try {
       const info = await getHighlighter();
@@ -1146,21 +1229,21 @@ function useShiki(theme) {
 }
 
 // src/components/IncremarkCodeDefault.tsx
-import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var IncremarkCodeDefault = ({
   node,
   theme = "github-dark",
   fallbackTheme = "github-dark",
   disableHighlight = false
 }) => {
-  const [copied, setCopied] = useState6(false);
-  const [highlightedHtml, setHighlightedHtml] = useState6("");
+  const [copied, setCopied] = useState7(false);
+  const [highlightedHtml, setHighlightedHtml] = useState7("");
   const language = node.lang || "text";
   const code = node.value;
   const { t } = useLocale();
   const { isHighlighting, highlight } = useShiki(theme);
-  const copyTimeoutRef = useRef6(null);
-  const copyCode = useCallback6(async () => {
+  const copyTimeoutRef = useRef7(null);
+  const copyCode = useCallback7(async () => {
     if (!isClipboardAvailable2()) return;
     try {
       await navigator.clipboard.writeText(code);
@@ -1172,14 +1255,14 @@ var IncremarkCodeDefault = ({
     } catch {
     }
   }, [code]);
-  useEffect5(() => {
+  useEffect6(() => {
     return () => {
       if (copyTimeoutRef.current) {
         clearTimeout(copyTimeoutRef.current);
       }
     };
   }, []);
-  const doHighlight = useCallback6(async () => {
+  const doHighlight = useCallback7(async () => {
     if (!code || disableHighlight) {
       setHighlightedHtml("");
       return;
@@ -1191,13 +1274,13 @@ var IncremarkCodeDefault = ({
       setHighlightedHtml("");
     }
   }, [code, language, fallbackTheme, disableHighlight, highlight]);
-  useEffect5(() => {
+  useEffect6(() => {
     doHighlight();
   }, [doHighlight]);
   return /* @__PURE__ */ jsxs3("div", { className: "incremark-code", children: [
     /* @__PURE__ */ jsxs3("div", { className: "code-header", children: [
-      /* @__PURE__ */ jsx9("span", { className: "language", children: language }),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10("span", { className: "language", children: language }),
+      /* @__PURE__ */ jsx10(
         "button",
         {
           className: "code-btn",
@@ -1205,16 +1288,16 @@ var IncremarkCodeDefault = ({
           type: "button",
           "aria-label": copied ? t("code.copied") : t("code.copy"),
           title: copied ? "Copied!" : "Copy",
-          children: /* @__PURE__ */ jsx9(SvgIcon, { svg: copied ? LucideCopyCheck2 : LucideCopy2 })
+          children: /* @__PURE__ */ jsx10(SvgIcon, { svg: copied ? LucideCopyCheck2 : LucideCopy2 })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx9("div", { className: "code-content", children: isHighlighting && !highlightedHtml ? /* @__PURE__ */ jsx9("div", { className: "code-loading", children: /* @__PURE__ */ jsx9("pre", { children: /* @__PURE__ */ jsx9("code", { children: code }) }) }) : highlightedHtml ? /* @__PURE__ */ jsx9("div", { className: "shiki-wrapper", dangerouslySetInnerHTML: { __html: highlightedHtml } }) : /* @__PURE__ */ jsx9("pre", { className: "code-fallback", children: /* @__PURE__ */ jsx9("code", { children: code }) }) })
+    /* @__PURE__ */ jsx10("div", { className: "code-content", children: isHighlighting && !highlightedHtml ? /* @__PURE__ */ jsx10("div", { className: "code-loading", children: /* @__PURE__ */ jsx10("pre", { children: /* @__PURE__ */ jsx10("code", { children: code }) }) }) : highlightedHtml ? /* @__PURE__ */ jsx10("div", { className: "shiki-wrapper", dangerouslySetInnerHTML: { __html: highlightedHtml } }) : /* @__PURE__ */ jsx10("pre", { className: "code-fallback", children: /* @__PURE__ */ jsx10("code", { children: code }) }) })
   ] });
 };
 
 // src/components/IncremarkCode.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var IncremarkCode = ({
   node,
   theme = "github-dark",
@@ -1229,7 +1312,7 @@ var IncremarkCode = ({
   const language = node.lang || "text";
   const code = node.value;
   const isMermaid = language === "mermaid";
-  const CustomCodeBlock = React7.useMemo(() => {
+  const CustomCodeBlock = React8.useMemo(() => {
     const component = customCodeBlocks?.[language];
     if (!component) return null;
     const config = codeBlockConfigs?.[language];
@@ -1243,7 +1326,7 @@ var IncremarkCode = ({
   }, [customCodeBlocks, language, blockStatus, codeBlockConfigs]);
   if (CustomCodeBlock) {
     const config = codeBlockConfigs?.[language];
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       CustomCodeBlock,
       {
         codeStr: code,
@@ -1254,7 +1337,7 @@ var IncremarkCode = ({
     );
   }
   if (isMermaid) {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       IncremarkCodeMermaid,
       {
         node,
@@ -1262,7 +1345,7 @@ var IncremarkCode = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     DefaultCodeComponent,
     {
       node,
@@ -1274,8 +1357,8 @@ var IncremarkCode = ({
 };
 
 // src/components/IncremarkList.tsx
-import React8 from "react";
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import React9 from "react";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 function getItemInlineContent(item) {
   const firstChild = item.children[0];
   if (firstChild?.type === "paragraph") {
@@ -1294,13 +1377,13 @@ function getItemBlockChildren(item) {
 var IncremarkList = ({ node }) => {
   const Tag = node.ordered ? "ol" : "ul";
   const isTaskList = node.children?.some((item) => item.checked !== null && item.checked !== void 0);
-  return /* @__PURE__ */ jsx11(Tag, { className: `incremark-list ${isTaskList ? "task-list" : ""}`, start: node.start || void 0, children: node.children?.map((item, index) => {
+  return /* @__PURE__ */ jsx12(Tag, { className: `incremark-list ${isTaskList ? "task-list" : ""}`, start: node.start || void 0, children: node.children?.map((item, index) => {
     const isTaskItem = item.checked !== null && item.checked !== void 0;
     const inlineContent = getItemInlineContent(item);
     const blockChildren = getItemBlockChildren(item);
     if (isTaskItem) {
-      return /* @__PURE__ */ jsx11("li", { className: "incremark-list-item task-item", children: /* @__PURE__ */ jsxs4("label", { className: "task-label", children: [
-        /* @__PURE__ */ jsx11(
+      return /* @__PURE__ */ jsx12("li", { className: "incremark-list-item task-item", children: /* @__PURE__ */ jsxs4("label", { className: "task-label", children: [
+        /* @__PURE__ */ jsx12(
           "input",
           {
             type: "checkbox",
@@ -1309,43 +1392,43 @@ var IncremarkList = ({ node }) => {
             className: "checkbox"
           }
         ),
-        /* @__PURE__ */ jsx11("span", { className: "task-content", children: /* @__PURE__ */ jsx11(IncremarkInline, { nodes: inlineContent }) })
+        /* @__PURE__ */ jsx12("span", { className: "task-content", children: /* @__PURE__ */ jsx12(IncremarkInline, { nodes: inlineContent }) })
       ] }) }, index);
     }
     return /* @__PURE__ */ jsxs4("li", { className: "incremark-list-item", children: [
-      /* @__PURE__ */ jsx11(IncremarkInline, { nodes: inlineContent }),
-      blockChildren.map((child, childIndex) => /* @__PURE__ */ jsx11(React8.Fragment, { children: /* @__PURE__ */ jsx11(IncremarkRenderer, { node: child }) }, childIndex))
+      /* @__PURE__ */ jsx12(IncremarkInline, { nodes: inlineContent }),
+      blockChildren.map((child, childIndex) => /* @__PURE__ */ jsx12(React9.Fragment, { children: /* @__PURE__ */ jsx12(IncremarkRenderer, { node: child }) }, childIndex))
     ] }, index);
   }) });
 };
 
 // src/components/IncremarkBlockquote.tsx
-import React9 from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import React10 from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var IncremarkBlockquote = ({ node }) => {
-  return /* @__PURE__ */ jsx12("blockquote", { className: "incremark-blockquote", children: node.children.map((child, index) => /* @__PURE__ */ jsx12(React9.Fragment, { children: /* @__PURE__ */ jsx12(IncremarkRenderer, { node: child }) }, index)) });
+  return /* @__PURE__ */ jsx13("blockquote", { className: "incremark-blockquote", children: node.children.map((child, index) => /* @__PURE__ */ jsx13(React10.Fragment, { children: /* @__PURE__ */ jsx13(IncremarkRenderer, { node: child }) }, index)) });
 };
 
 // src/components/IncremarkTable.tsx
-import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
 function getCellContent(cell) {
   return cell.children;
 }
 var IncremarkTable = ({ node }) => {
-  return /* @__PURE__ */ jsx13("div", { className: "incremark-table-wrapper", children: /* @__PURE__ */ jsxs5("table", { className: "incremark-table", children: [
-    /* @__PURE__ */ jsx13("thead", { children: node.children?.[0] && /* @__PURE__ */ jsx13("tr", { children: node.children[0].children.map((cell, cellIndex) => /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14("div", { className: "incremark-table-wrapper", children: /* @__PURE__ */ jsxs5("table", { className: "incremark-table", children: [
+    /* @__PURE__ */ jsx14("thead", { children: node.children?.[0] && /* @__PURE__ */ jsx14("tr", { children: node.children[0].children.map((cell, cellIndex) => /* @__PURE__ */ jsx14(
       "th",
       {
         className: `incremark-table-align-${node.align?.[cellIndex] || "left"}`,
-        children: /* @__PURE__ */ jsx13(IncremarkInline, { nodes: getCellContent(cell) })
+        children: /* @__PURE__ */ jsx14(IncremarkInline, { nodes: getCellContent(cell) })
       },
       cellIndex
     )) }) }),
-    /* @__PURE__ */ jsx13("tbody", { children: node.children?.slice(1).map((row, rowIndex) => /* @__PURE__ */ jsx13("tr", { children: row.children.map((cell, cellIndex) => /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14("tbody", { children: node.children?.slice(1).map((row, rowIndex) => /* @__PURE__ */ jsx14("tr", { children: row.children.map((cell, cellIndex) => /* @__PURE__ */ jsx14(
       "td",
       {
         className: `incremark-table-align-${node.align?.[cellIndex] || "left"}`,
-        children: /* @__PURE__ */ jsx13(IncremarkInline, { nodes: getCellContent(cell) })
+        children: /* @__PURE__ */ jsx14(IncremarkInline, { nodes: getCellContent(cell) })
       },
       cellIndex
     )) }, rowIndex)) })
@@ -1353,71 +1436,9 @@ var IncremarkTable = ({ node }) => {
 };
 
 // src/components/IncremarkThematicBreak.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
-var IncremarkThematicBreak = () => {
-  return /* @__PURE__ */ jsx14("hr", { className: "incremark-hr" });
-};
-
-// src/components/IncremarkMath.tsx
-import { useState as useState7, useEffect as useEffect6, useRef as useRef7, useCallback as useCallback7 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-var IncremarkMath = ({
-  node,
-  renderDelay = 300
-}) => {
-  const [renderedHtml, setRenderedHtml] = useState7("");
-  const [isLoading, setIsLoading] = useState7(false);
-  const katexRef = useRef7(null);
-  const renderTimerRef = useRef7(null);
-  const isInline = node.type === "inlineMath";
-  const formula = node.value;
-  const doRender = useCallback7(async () => {
-    if (!formula) return;
-    try {
-      if (!katexRef.current) {
-        const katexModule = await import("katex");
-        katexRef.current = katexModule.default;
-      }
-      const katex = katexRef.current;
-      const html = katex.renderToString(formula, {
-        displayMode: !isInline,
-        throwOnError: false,
-        strict: false
-      });
-      setRenderedHtml(html);
-    } catch {
-      setRenderedHtml("");
-    } finally {
-      setIsLoading(false);
-    }
-  }, [formula, isInline]);
-  const scheduleRender = useCallback7(() => {
-    if (!formula) {
-      setRenderedHtml("");
-      return;
-    }
-    if (renderTimerRef.current) {
-      clearTimeout(renderTimerRef.current);
-    }
-    setIsLoading(true);
-    renderTimerRef.current = setTimeout(() => {
-      doRender();
-    }, renderDelay);
-  }, [formula, renderDelay, doRender]);
-  useEffect6(() => {
-    scheduleRender();
-  }, [scheduleRender]);
-  useEffect6(() => {
-    return () => {
-      if (renderTimerRef.current) {
-        clearTimeout(renderTimerRef.current);
-      }
-    };
-  }, []);
-  if (isInline) {
-    return /* @__PURE__ */ jsx15("span", { className: "incremark-math-inline", children: renderedHtml && !isLoading ? /* @__PURE__ */ jsx15("span", { dangerouslySetInnerHTML: { __html: renderedHtml } }) : /* @__PURE__ */ jsx15("code", { className: "math-source", children: formula }) });
-  }
-  return /* @__PURE__ */ jsx15("div", { className: "incremark-math-block", children: renderedHtml && !isLoading ? /* @__PURE__ */ jsx15("div", { className: "math-rendered", dangerouslySetInnerHTML: { __html: renderedHtml } }) : /* @__PURE__ */ jsx15("pre", { className: "math-source-block", children: /* @__PURE__ */ jsx15("code", { children: formula }) }) });
+var IncremarkThematicBreak = () => {
+  return /* @__PURE__ */ jsx15("hr", { className: "incremark-hr" });
 };
 
 // src/components/IncremarkContainer.tsx
@@ -1680,12 +1701,30 @@ var IncremarkContent = (props) => {
     math: true,
     ...incremarkOptions
   });
-  const { blocks, append, finalize, render, reset, isDisplayComplete, markdown, typewriter, _definitionsContextValue } = useIncremark(initialOptionsRef.current);
+  const { blocks, append, finalize, render, reset, updateOptions, isDisplayComplete, markdown, typewriter, _definitionsContextValue } = useIncremark(initialOptionsRef.current);
+  const prevOptionsRef = useRef8(incremarkOptions);
   useEffect7(() => {
-    if (incremarkOptions?.typewriter) {
-      typewriter.setOptions(incremarkOptions.typewriter);
+    const prev = prevOptionsRef.current;
+    const current = incremarkOptions;
+    if (prev === current) return;
+    prevOptionsRef.current = current;
+    const prevMath = typeof prev?.math === "object" ? JSON.stringify(prev.math) : String(prev?.math ?? true);
+    const currentMath = typeof current?.math === "object" ? JSON.stringify(current.math) : String(current?.math ?? true);
+    const prevAstBuilder = prev?.astBuilder?.name ?? "default";
+    const currentAstBuilder = current?.astBuilder?.name ?? "default";
+    if (prevMath !== currentMath || prev?.gfm !== current?.gfm || prev?.htmlTree !== current?.htmlTree || prev?.containers !== current?.containers || prevAstBuilder !== currentAstBuilder) {
+      updateOptions({
+        gfm: current?.gfm ?? true,
+        math: current?.math ?? true,
+        htmlTree: current?.htmlTree ?? true,
+        containers: current?.containers ?? true,
+        astBuilder: current?.astBuilder
+      });
+    }
+    if (current?.typewriter) {
+      typewriter.setOptions(current.typewriter);
     }
-  }, [incremarkOptions?.typewriter, typewriter]);
+  }, [incremarkOptions, updateOptions, typewriter]);
   const isStreamMode = useMemo4(() => typeof stream === "function", [stream]);
   const prevContentRef = useRef8(void 0);
   const isStreamingRef = useRef8(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incremark/react",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "license": "MIT",
   "description": "High-performance streaming markdown renderer for React ecosystem.",
   "type": "module",
@@ -21,14 +21,14 @@
     "mermaid": "^10.0.0 || ^11.0.0",
     "katex": "^0.16.0",
     "react": ">=18.0.0",
-    "@incremark/core": "0.3.0"
+    "@incremark/core": "0.3.1"
   },
   "dependencies": {
     "shiki": "^3.20.0",
-    "@incremark/devtools": "0.3.0",
-    "@incremark/icons": "0.3.0",
-    "@incremark/shared": "0.3.0",
-    "@incremark/theme": "0.3.0"
+    "@incremark/devtools": "0.3.1",
+    "@incremark/shared": "0.3.1",
+    "@incremark/theme": "0.3.1",
+    "@incremark/icons": "0.3.1"
   },
   "devDependencies": {
     "@types/mdast": "^4.0.0",