@incremark/vue 0.2.5 → 0.2.7

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/composables/useIncremark.ts
-import { ref as ref3, shallowRef as shallowRef2, computed as computed2, markRaw } from "vue";
+import { ref as ref3, shallowRef as shallowRef2, computed as computed2, markRaw, watch as watch2, toValue as toValue2 } from "vue";
 import {
   createIncremarkParser
 } from "@incremark/core";
@@ -51,7 +51,7 @@ function useProvideDefinations() {
 }
 
 // src/composables/useTypewriter.ts
-import { ref as ref2, shallowRef, computed, watch, onUnmounted } from "vue";
+import { ref as ref2, shallowRef, computed, watch, toValue, onUnmounted } from "vue";
 import {
   createBlockTransformer,
   defaultPlugins
@@ -86,23 +86,23 @@ function addCursorToNode(node, cursor) {
 
 // src/composables/useTypewriter.ts
 function useTypewriter(options) {
-  const { typewriter: typewriterConfig, completedBlocks, pendingBlocks } = options;
-  const typewriterEnabled = ref2(typewriterConfig?.enabled ?? !!typewriterConfig);
+  const { typewriter: typewriterInput, completedBlocks, pendingBlocks } = options;
+  const initialConfig = toValue(typewriterInput);
+  const typewriterEnabled = ref2(initialConfig?.enabled ?? !!initialConfig);
   const displayBlocksRef = shallowRef([]);
   const isTypewriterProcessing = ref2(false);
   const isTypewriterPaused = ref2(false);
-  const typewriterEffect = ref2(typewriterConfig?.effect ?? "none");
-  const typewriterCursor = ref2(typewriterConfig?.cursor ?? "|");
+  const typewriterEffect = ref2(initialConfig?.effect ?? "none");
+  const typewriterCursor = ref2(initialConfig?.cursor ?? "|");
   const isAnimationComplete = ref2(true);
   let transformer = null;
-  if (typewriterConfig) {
-    const twOptions = typewriterConfig;
+  if (initialConfig) {
     transformer = createBlockTransformer({
-      charsPerTick: twOptions.charsPerTick ?? [1, 3],
-      tickInterval: twOptions.tickInterval ?? 30,
-      effect: twOptions.effect ?? "none",
-      pauseOnHidden: twOptions.pauseOnHidden ?? true,
-      plugins: twOptions.plugins ?? defaultPlugins,
+      charsPerTick: initialConfig.charsPerTick ?? [1, 3],
+      tickInterval: initialConfig.tickInterval ?? 30,
+      effect: initialConfig.effect ?? "none",
+      pauseOnHidden: initialConfig.pauseOnHidden ?? true,
+      plugins: initialConfig.plugins ?? defaultPlugins,
       onChange: (blocks2) => {
         displayBlocksRef.value = blocks2;
         isTypewriterProcessing.value = transformer?.isProcessing() ?? false;
@@ -116,6 +116,28 @@ function useTypewriter(options) {
       }
     });
   }
+  watch(
+    () => toValue(typewriterInput),
+    (newConfig) => {
+      if (!newConfig) return;
+      if (newConfig.enabled !== void 0) {
+        typewriterEnabled.value = newConfig.enabled;
+      }
+      if (newConfig.effect !== void 0) {
+        typewriterEffect.value = newConfig.effect;
+      }
+      if (newConfig.cursor !== void 0) {
+        typewriterCursor.value = newConfig.cursor;
+      }
+      transformer?.setOptions({
+        charsPerTick: newConfig.charsPerTick,
+        tickInterval: newConfig.tickInterval,
+        effect: newConfig.effect,
+        pauseOnHidden: newConfig.pauseOnHidden
+      });
+    },
+    { deep: true }
+  );
   const sourceBlocks = computed(() => {
     return completedBlocks.value.map((block) => ({
       id: block.id,
@@ -140,17 +162,7 @@ function useTypewriter(options) {
     );
   }
   const rawBlocks = computed(() => {
-    const result = [];
-    for (const block of completedBlocks.value) {
-      result.push({ ...block, stableId: block.id });
-    }
-    for (let i = 0; i < pendingBlocks.value.length; i++) {
-      result.push({
-        ...pendingBlocks.value[i],
-        stableId: `pending-${i}`
-      });
-    }
-    return result;
+    return [...completedBlocks.value, ...pendingBlocks.value];
   });
   const blocks = computed(() => {
     if (!typewriterEnabled.value || !transformer) {
@@ -165,7 +177,6 @@ function useTypewriter(options) {
       }
       return {
         id: db.id,
-        stableId: db.id,
         status: db.isDisplayComplete ? "completed" : "pending",
         isLastPending,
         node,
@@ -224,16 +235,19 @@ function useTypewriter(options) {
 }
 
 // src/composables/useIncremark.ts
-function useIncremark(options = {}) {
+function useIncremark(optionsInput = {}) {
   const { setDefinations, setFootnoteDefinitions, setFootnoteReferenceOrder } = useProvideDefinations();
-  const parser = createIncremarkParser({
-    ...options,
-    onChange: (state) => {
-      setDefinations(state.definitions);
-      setFootnoteDefinitions(state.footnoteDefinitions);
-      options.onChange?.(state);
-    }
-  });
+  function createParser(options) {
+    return createIncremarkParser({
+      ...options,
+      onChange: (state) => {
+        setDefinations(state.definitions);
+        setFootnoteDefinitions(state.footnoteDefinitions);
+        options.onChange?.(state);
+      }
+    });
+  }
+  let parser = createParser(toValue2(optionsInput));
   const completedBlocks = shallowRef2([]);
   const pendingBlocks = shallowRef2([]);
   const isLoading = ref3(false);
@@ -241,11 +255,18 @@ function useIncremark(options = {}) {
   const isFinalized = ref3(false);
   const footnoteReferenceOrder = ref3([]);
   const { blocks, typewriter, transformer, isAnimationComplete } = useTypewriter({
-    typewriter: options.typewriter,
+    typewriter: () => toValue2(optionsInput).typewriter,
     completedBlocks,
     pendingBlocks
   });
-  const isDisplayComplete = computed2(() => isFinalized.value && isAnimationComplete.value);
+  const isDisplayComplete = computed2(() => {
+    console.log("\u8BA1\u7B97\u5C5E\u6027\u53D8\u66F4");
+    if (!toValue2(optionsInput).typewriter || !typewriter.enabled.value) {
+      console.log("isDisplayComplete", isFinalized.value);
+      return isFinalized.value;
+    }
+    return isFinalized.value && isAnimationComplete.value;
+  });
   const ast = computed2(() => ({
     type: "root",
     children: [
@@ -253,9 +274,7 @@ function useIncremark(options = {}) {
       ...pendingBlocks.value.map((b) => b.node)
     ]
   }));
-  function append(chunk) {
-    isLoading.value = true;
-    const update = parser.append(chunk);
+  function handleUpdate(update, isFinalize = false) {
     markdown.value = parser.getBuffer();
     if (update.completed.length > 0) {
       completedBlocks.value = [
@@ -264,24 +283,23 @@ function useIncremark(options = {}) {
       ];
     }
     pendingBlocks.value = update.pending.map((b) => markRaw(b));
+    if (isFinalize) {
+      isLoading.value = false;
+      isFinalized.value = true;
+    } else {
+      isLoading.value = true;
+    }
     footnoteReferenceOrder.value = update.footnoteReferenceOrder;
     setFootnoteReferenceOrder(update.footnoteReferenceOrder);
+  }
+  function append(chunk) {
+    const update = parser.append(chunk);
+    handleUpdate(update, false);
     return update;
   }
   function finalize() {
     const update = parser.finalize();
-    markdown.value = parser.getBuffer();
-    if (update.completed.length > 0) {
-      completedBlocks.value = [
-        ...completedBlocks.value,
-        ...update.completed.map((b) => markRaw(b))
-      ];
-    }
-    pendingBlocks.value = [];
-    isLoading.value = false;
-    isFinalized.value = true;
-    footnoteReferenceOrder.value = update.footnoteReferenceOrder;
-    setFootnoteReferenceOrder(update.footnoteReferenceOrder);
+    handleUpdate(update, true);
     return update;
   }
   function abort() {
@@ -297,7 +315,18 @@ function useIncremark(options = {}) {
     footnoteReferenceOrder.value = [];
     transformer?.reset();
   }
-  function render18(content) {
+  watch2(
+    () => {
+      const { typewriter: _, ...parserOptions } = toValue2(optionsInput);
+      return JSON.stringify(parserOptions);
+    },
+    () => {
+      const { typewriter: _, ...parserOptions } = toValue2(optionsInput);
+      parser = createParser(parserOptions);
+      reset();
+    }
+  );
+  function render19(content) {
     const update = parser.render(content);
     markdown.value = parser.getBuffer();
     completedBlocks.value = parser.getCompletedBlocks().map((b) => markRaw(b));
@@ -341,7 +370,7 @@ function useIncremark(options = {}) {
     /** 重置解析器和打字机 */
     reset,
     /** 一次性渲染（reset + append + finalize） */
-    render: render18,
+    render: render19,
     /** 解析器实例 */
     parser,
     /** 打字机控制 */
@@ -353,23 +382,13 @@ function useIncremark(options = {}) {
 import { computed as computed3 } from "vue";
 function useStreamRenderer(options) {
   const { completedBlocks, pendingBlocks } = options;
-  const stableCompletedBlocks = computed3(
-    () => completedBlocks.value.map((block) => ({
-      ...block,
-      stableId: block.id
-    }))
-  );
-  const stablePendingBlocks = computed3(
-    () => pendingBlocks.value.map((block, index) => ({
-      ...block,
-      stableId: `pending-${index}`
-    }))
-  );
-  const allStableBlocks = computed3(() => [...stableCompletedBlocks.value, ...stablePendingBlocks.value]);
+  const completedBlocksComputed = computed3(() => completedBlocks.value);
+  const pendingBlocksComputed = computed3(() => pendingBlocks.value);
+  const allBlocks = computed3(() => [...completedBlocksComputed.value, ...pendingBlocksComputed.value]);
   return {
-    stableCompletedBlocks,
-    stablePendingBlocks,
-    allStableBlocks
+    completedBlocks: completedBlocksComputed,
+    pendingBlocks: pendingBlocksComputed,
+    allBlocks
   };
 }
 
@@ -380,8 +399,8 @@ function useDevTools(incremark, options = {}) {
   const devtools = createDevTools(options);
   incremark.parser.setOnChange((state) => {
     const blocks = [
-      ...state.completedBlocks.map((b) => ({ ...b, stableId: b.id })),
-      ...state.pendingBlocks.map((b, i) => ({ ...b, stableId: `pending-${i}` }))
+      ...state.completedBlocks,
+      ...state.pendingBlocks
     ];
     devtools.update({
       blocks,
@@ -403,15 +422,15 @@ function useDevTools(incremark, options = {}) {
 }
 
 // src/composables/useBlockTransformer.ts
-import { ref as ref5, watch as watch2, computed as computed4, onUnmounted as onUnmounted3 } from "vue";
+import { ref as ref4, watch as watch3, computed as computed4, onUnmounted as onUnmounted3 } from "vue";
 import {
   createBlockTransformer as createBlockTransformer2
 } from "@incremark/core";
 function useBlockTransformer(sourceBlocks, options = {}) {
-  const displayBlocksRef = ref5([]);
-  const isProcessingRef = ref5(false);
-  const isPausedRef = ref5(false);
-  const effectRef = ref5(options.effect ?? "none");
+  const displayBlocksRef = ref4([]);
+  const isProcessingRef = ref4(false);
+  const isPausedRef = ref4(false);
+  const effectRef = ref4(options.effect ?? "none");
   const transformer = createBlockTransformer2({
     ...options,
     onChange: (blocks) => {
@@ -420,7 +439,7 @@ function useBlockTransformer(sourceBlocks, options = {}) {
       isPausedRef.value = transformer.isPausedState();
     }
   });
-  watch2(
+  watch3(
     sourceBlocks,
     (blocks) => {
       transformer.push(blocks);
@@ -474,7 +493,11 @@ function useDefinationsContext() {
 
 // sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/Incremark.vue?type=script
 import { defineComponent as _defineComponent15 } from "vue";
-import { computed as computed10 } from "vue";
+import { computed as computed11 } from "vue";
+
+// sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkRenderer.vue?type=script
+import { defineComponent as _defineComponent13 } from "vue";
+import { computed as computed9 } from "vue";
 
 // sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkHeading.vue?type=script
 import { defineComponent as _defineComponent4 } from "vue";
@@ -490,7 +513,7 @@ import {
 
 // sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkMath.vue?type=script
 import { defineComponent as _defineComponent } from "vue";
-import { computed as computed5, ref as ref6, watch as watch3, shallowRef as shallowRef3, onUnmounted as onUnmounted4 } from "vue";
+import { computed as computed5, ref as ref5, watch as watch4, shallowRef as shallowRef3, onUnmounted as onUnmounted4 } from "vue";
 var IncremarkMath_default = /* @__PURE__ */ _defineComponent({
   __name: "IncremarkMath",
   props: {
@@ -500,9 +523,9 @@ var IncremarkMath_default = /* @__PURE__ */ _defineComponent({
   setup(__props, { expose: __expose }) {
     __expose();
     const props = __props;
-    const renderedHtml = ref6("");
-    const renderError = ref6("");
-    const isLoading = ref6(false);
+    const renderedHtml = ref5("");
+    const renderError = ref5("");
+    const isLoading = ref5(false);
     const katexRef = shallowRef3(null);
     let renderTimer = null;
     const isInline = computed5(() => props.node.type === "inlineMath");
@@ -546,7 +569,7 @@ var IncremarkMath_default = /* @__PURE__ */ _defineComponent({
         clearTimeout(renderTimer);
       }
     });
-    watch3(formula, scheduleRender, { immediate: true });
+    watch4(formula, scheduleRender, { immediate: true });
     const __returned__ = { props, renderedHtml, renderError, isLoading, katexRef, get renderTimer() {
       return renderTimer;
     }, set renderTimer(v) {
@@ -1247,30 +1270,159 @@ var IncremarkParagraph_default2 = IncremarkParagraph_default;
 
 // sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkCode.vue?type=script
 import { defineComponent as _defineComponent6 } from "vue";
-import { computed as computed7, ref as ref7, watch as watch4, shallowRef as shallowRef4, onUnmounted as onUnmounted5 } from "vue";
+import { computed as computed7, ref as ref6, watch as watch5, onUnmounted as onUnmounted5, shallowRef as shallowRef5 } from "vue";
+
+// src/composables/useShiki.ts
+import { shallowRef as shallowRef4 } from "vue";
+var ShikiManager = class _ShikiManager {
+  static instance = null;
+  /** 存储 highlighter 实例，key 为主题名称 */
+  highlighters = /* @__PURE__ */ new Map();
+  constructor() {
+  }
+  static getInstance() {
+    if (!_ShikiManager.instance) {
+      _ShikiManager.instance = new _ShikiManager();
+    }
+    return _ShikiManager.instance;
+  }
+  /**
+   * 获取或创建 highlighter
+   * @param theme 主题名称
+   * @returns highlighter 实例
+   */
+  async getHighlighter(theme) {
+    if (this.highlighters.has(theme)) {
+      return this.highlighters.get(theme);
+    }
+    const { createHighlighter } = await import("shiki");
+    const highlighter = await createHighlighter({
+      themes: [theme],
+      langs: []
+    });
+    const info = {
+      highlighter,
+      loadedLanguages: /* @__PURE__ */ new Set(),
+      loadedThemes: /* @__PURE__ */ new Set([theme])
+    };
+    this.highlighters.set(theme, info);
+    return info;
+  }
+  /**
+   * 加载语言（按需）
+   * @param theme 主题名称
+   * @param lang 语言名称
+   */
+  async loadLanguage(theme, lang) {
+    const info = this.highlighters.get(theme);
+    if (!info || info.loadedLanguages.has(lang)) return;
+    try {
+      await info.highlighter.loadLanguage(lang);
+      info.loadedLanguages.add(lang);
+    } catch {
+    }
+  }
+  /**
+   * 加载主题（按需）
+   * @param theme 主题名称
+   */
+  async loadTheme(theme) {
+    const info = this.highlighters.get(theme);
+    if (!info || info.loadedThemes.has(theme)) return;
+    try {
+      await info.highlighter.loadTheme(theme);
+      info.loadedThemes.add(theme);
+    } catch {
+    }
+  }
+  /**
+   * 高亮代码
+   * @param theme 主题名称
+   * @param code 代码内容
+   * @param lang 语言名称
+   * @param fallbackTheme 回退主题
+   * @returns 高亮后的 HTML
+   */
+  async codeToHtml(theme, code, lang, fallbackTheme) {
+    const info = this.highlighters.get(theme);
+    if (!info) throw new Error("Highlighter not found");
+    const actualLang = info.loadedLanguages.has(lang) ? lang : "text";
+    const actualTheme = info.loadedThemes.has(theme) ? theme : fallbackTheme;
+    return info.highlighter.codeToHtml(code, {
+      lang: actualLang,
+      theme: actualTheme
+    });
+  }
+  /**
+   * 清理所有 highlighter（应用退出或需要重置时调用）
+   */
+  disposeAll() {
+    for (const [, info] of this.highlighters) {
+      if (info.highlighter?.dispose) {
+        info.highlighter.dispose();
+      }
+    }
+    this.highlighters.clear();
+  }
+};
+var shikiManager = ShikiManager.getInstance();
+function useShiki(theme) {
+  const highlighterInfo = shallowRef4(null);
+  const isHighlighting = shallowRef4(false);
+  async function getHighlighter() {
+    if (!highlighterInfo.value) {
+      highlighterInfo.value = await shikiManager.getHighlighter(theme);
+    }
+    return highlighterInfo.value;
+  }
+  async function highlight(code, lang, fallbackTheme) {
+    isHighlighting.value = true;
+    try {
+      const info = await getHighlighter();
+      if (!info.loadedLanguages.has(lang) && lang !== "text") {
+        await shikiManager.loadLanguage(theme, lang);
+      }
+      if (!info.loadedThemes.has(theme)) {
+        await shikiManager.loadTheme(theme);
+      }
+      return await shikiManager.codeToHtml(theme, code, lang, fallbackTheme);
+    } catch (e) {
+      throw e;
+    } finally {
+      isHighlighting.value = false;
+    }
+  }
+  return {
+    highlighterInfo,
+    isHighlighting,
+    highlight
+  };
+}
+
+// sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkCode.vue?type=script
 var IncremarkCode_default = /* @__PURE__ */ _defineComponent6({
   __name: "IncremarkCode",
   props: {
     node: { type: null, required: true },
     theme: { type: String, required: false, default: "github-dark" },
+    fallbackTheme: { type: String, required: false, default: "github-dark" },
     disableHighlight: { type: Boolean, required: false, default: false },
     mermaidDelay: { type: Number, required: false, default: 500 },
     customCodeBlocks: { type: Object, required: false, default: () => ({}) },
+    codeBlockConfigs: { type: Object, required: false, default: () => ({}) },
     blockStatus: { type: String, required: false, default: "completed" }
   },
   setup(__props, { expose: __expose }) {
     __expose();
     const props = __props;
-    const copied = ref7(false);
-    const highlightedHtml = ref7("");
-    const isHighlighting = ref7(false);
-    const highlightError = ref7(false);
-    const mermaidSvg = ref7("");
-    const mermaidError = ref7("");
-    const mermaidLoading = ref7(false);
-    const mermaidRef = shallowRef4(null);
+    const copied = ref6(false);
+    const highlightedHtml = ref6("");
+    const mermaidSvg = ref6("");
+    const mermaidError = ref6("");
+    const mermaidLoading = ref6(false);
+    const mermaidRef = shallowRef5(null);
     let mermaidTimer = null;
-    const mermaidViewMode = ref7("preview");
+    const mermaidViewMode = ref6("preview");
     function toggleMermaidView() {
       mermaidViewMode.value = mermaidViewMode.value === "preview" ? "source" : "preview";
     }
@@ -1278,15 +1430,18 @@ var IncremarkCode_default = /* @__PURE__ */ _defineComponent6({
     const code = computed7(() => props.node.value);
     const isMermaid = computed7(() => language.value === "mermaid");
     const CustomCodeBlock = computed7(() => {
-      if (props.blockStatus === "pending") {
+      const component = props.customCodeBlocks?.[language.value];
+      if (!component) return null;
+      const config = props.codeBlockConfigs?.[language.value];
+      if (config?.takeOver) {
+        return component;
+      }
+      if (props.blockStatus !== "completed") {
         return null;
       }
-      return props.customCodeBlocks?.[language.value] || null;
+      return component;
     });
-    const useCustomComponent = computed7(() => !!CustomCodeBlock.value);
-    const highlighterRef = shallowRef4(null);
-    const loadedLanguages = /* @__PURE__ */ new Set();
-    const loadedThemes = /* @__PURE__ */ new Set();
+    const { isHighlighting, highlight } = useShiki(props.theme);
     function scheduleRenderMermaid() {
       if (!isMermaid.value || !code.value) return;
       if (mermaidTimer) {
@@ -1307,7 +1462,8 @@ var IncremarkCode_default = /* @__PURE__ */ _defineComponent6({
           mermaidRef.value.initialize({
             startOnLoad: false,
             theme: "dark",
-            securityLevel: "loose"
+            securityLevel: "loose",
+            suppressErrorRendering: true
           });
         }
         const mermaid = mermaidRef.value;
@@ -1321,12 +1477,7 @@ var IncremarkCode_default = /* @__PURE__ */ _defineComponent6({
         mermaidLoading.value = false;
       }
     }
-    onUnmounted5(() => {
-      if (mermaidTimer) {
-        clearTimeout(mermaidTimer);
-      }
-    });
-    async function highlight() {
+    async function doHighlight() {
       if (isMermaid.value) {
         scheduleRenderMermaid();
         return;
@@ -1335,46 +1486,19 @@ var IncremarkCode_default = /* @__PURE__ */ _defineComponent6({
         highlightedHtml.value = "";
         return;
       }
-      isHighlighting.value = true;
-      highlightError.value = false;
       try {
-        if (!highlighterRef.value) {
-          const { createHighlighter } = await import("shiki");
-          highlighterRef.value = await createHighlighter({
-            themes: [props.theme],
-            langs: []
-          });
-          loadedThemes.add(props.theme);
-        }
-        const highlighter = highlighterRef.value;
-        const lang = language.value;
-        if (!loadedLanguages.has(lang) && lang !== "text") {
-          try {
-            await highlighter.loadLanguage(lang);
-            loadedLanguages.add(lang);
-          } catch {
-          }
-        }
-        if (!loadedThemes.has(props.theme)) {
-          try {
-            await highlighter.loadTheme(props.theme);
-            loadedThemes.add(props.theme);
-          } catch {
-          }
-        }
-        const html = highlighter.codeToHtml(code.value, {
-          lang: loadedLanguages.has(lang) ? lang : "text",
-          theme: loadedThemes.has(props.theme) ? props.theme : "github-dark"
-        });
+        const html = await highlight(code.value, language.value, props.fallbackTheme);
         highlightedHtml.value = html;
       } catch (e) {
-        highlightError.value = true;
         highlightedHtml.value = "";
-      } finally {
-        isHighlighting.value = false;
       }
     }
-    watch4([code, () => props.theme, isMermaid], highlight, { immediate: true });
+    watch5([code, () => props.theme, isMermaid], doHighlight, { immediate: true });
+    onUnmounted5(() => {
+      if (mermaidTimer) {
+        clearTimeout(mermaidTimer);
+      }
+    });
     async function copyCode() {
       try {
         await navigator.clipboard.writeText(code.value);
@@ -1385,11 +1509,11 @@ var IncremarkCode_default = /* @__PURE__ */ _defineComponent6({
       } catch {
       }
     }
-    const __returned__ = { props, copied, highlightedHtml, isHighlighting, highlightError, mermaidSvg, mermaidError, mermaidLoading, mermaidRef, get mermaidTimer() {
+    const __returned__ = { props, copied, highlightedHtml, mermaidSvg, mermaidError, mermaidLoading, mermaidRef, get mermaidTimer() {
       return mermaidTimer;
     }, set mermaidTimer(v) {
       mermaidTimer = v;
-    }, mermaidViewMode, toggleMermaidView, language, code, isMermaid, CustomCodeBlock, useCustomComponent, highlighterRef, loadedLanguages, loadedThemes, scheduleRenderMermaid, doRenderMermaid, highlight, copyCode };
+    }, mermaidViewMode, toggleMermaidView, language, code, isMermaid, CustomCodeBlock, isHighlighting, highlight, scheduleRenderMermaid, doRenderMermaid, doHighlight, copyCode };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -1426,11 +1550,13 @@ function render6(_ctx, _cache, $props, $setup, $data, $options) {
     null,
     [
       _createCommentVNode4(" \u81EA\u5B9A\u4E49\u4EE3\u7801\u5757\u7EC4\u4EF6 "),
-      $setup.useCustomComponent && $setup.CustomCodeBlock ? (_openBlock6(), _createBlock3(_resolveDynamicComponent3($setup.CustomCodeBlock), {
+      $setup.CustomCodeBlock ? (_openBlock6(), _createBlock3(_resolveDynamicComponent3($setup.CustomCodeBlock), {
         key: 0,
         "code-str": $setup.code,
-        lang: $setup.language
-      }, null, 8, ["code-str", "lang"])) : $setup.isMermaid ? (_openBlock6(), _createElementBlock5(
+        lang: $setup.language,
+        completed: $props.blockStatus === "completed",
+        takeOver: $props.codeBlockConfigs?.[$setup.language]?.takeOver
+      }, null, 8, ["code-str", "lang", "completed", "takeOver"])) : $setup.isMermaid ? (_openBlock6(), _createElementBlock5(
         _Fragment4,
         { key: 1 },
         [
@@ -1640,14 +1766,14 @@ var IncremarkList_default = /* @__PURE__ */ _defineComponent7({
     function hasBlockChildren(item) {
       return getItemBlockChildren(item).length > 0;
     }
-    const __returned__ = { props, tag, getItemInlineContent, getItemBlockChildren, hasBlockChildren, IncremarkInline: IncremarkInline_default };
+    const __returned__ = { props, tag, getItemInlineContent, getItemBlockChildren, hasBlockChildren, IncremarkInline: IncremarkInline_default, IncremarkRenderer: IncremarkRenderer_default };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
 
 // sfc-template:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkList.vue?type=template
-import { renderList as _renderList3, Fragment as _Fragment5, openBlock as _openBlock7, createElementBlock as _createElementBlock6, createElementVNode as _createElementVNode5, createVNode as _createVNode5, createCommentVNode as _createCommentVNode5, resolveComponent as _resolveComponent3, createBlock as _createBlock4, normalizeClass as _normalizeClass2, resolveDynamicComponent as _resolveDynamicComponent4, withCtx as _withCtx3 } from "vue";
+import { renderList as _renderList3, Fragment as _Fragment5, openBlock as _openBlock7, createElementBlock as _createElementBlock6, createElementVNode as _createElementVNode5, createVNode as _createVNode5, createCommentVNode as _createCommentVNode5, createBlock as _createBlock4, normalizeClass as _normalizeClass2, resolveDynamicComponent as _resolveDynamicComponent4, withCtx as _withCtx3 } from "vue";
 var _hoisted_18 = {
   key: 0,
   class: "task-label"
@@ -1655,9 +1781,9 @@ var _hoisted_18 = {
 var _hoisted_24 = ["checked"];
 var _hoisted_34 = { class: "task-content" };
 function render7(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_IncremarkList = _resolveComponent3("IncremarkList", true);
   return _openBlock7(), _createBlock4(_resolveDynamicComponent4($setup.tag), {
-    class: _normalizeClass2(["incremark-list", { "task-list": $props.node.children.some((item) => item.checked !== null && item.checked !== void 0) }])
+    class: _normalizeClass2(["incremark-list", { "task-list": $props.node.children.some((item) => item.checked !== null && item.checked !== void 0) }]),
+    start: $props.node.start || void 0
   }, {
     default: _withCtx3(() => [
       (_openBlock7(true), _createElementBlock6(
@@ -1690,25 +1816,15 @@ function render7(_ctx, _cache, $props, $setup, $data, $options) {
                   _createVNode5($setup["IncremarkInline"], {
                     nodes: $setup.getItemInlineContent(item)
                   }, null, 8, ["nodes"]),
-                  _createCommentVNode5(" \u9012\u5F52\u6E32\u67D3\u5D4C\u5957\u5217\u8868\u548C\u5176\u4ED6\u5757\u7EA7\u5185\u5BB9 "),
+                  _createCommentVNode5(" \u9012\u5F52\u6E32\u67D3\u6240\u6709\u5757\u7EA7\u5185\u5BB9\uFF08\u5D4C\u5957\u5217\u8868\u3001heading\u3001blockquote\u3001code\u3001table \u7B49\uFF09 "),
                   $setup.hasBlockChildren(item) ? (_openBlock7(true), _createElementBlock6(
                     _Fragment5,
                     { key: 0 },
                     _renderList3($setup.getItemBlockChildren(item), (child, childIndex) => {
-                      return _openBlock7(), _createElementBlock6(
-                        _Fragment5,
-                        { key: childIndex },
-                        [
-                          _createCommentVNode5(" \u5D4C\u5957\u5217\u8868 "),
-                          child.type === "list" ? (_openBlock7(), _createBlock4(_component_IncremarkList, {
-                            key: 0,
-                            node: child
-                          }, null, 8, ["node"])) : _createCommentVNode5("v-if", true),
-                          _createCommentVNode5(" \u5176\u4ED6\u5757\u7EA7\u5185\u5BB9\u53EF\u4EE5\u5728\u8FD9\u91CC\u6269\u5C55 ")
-                        ],
-                        64
-                        /* STABLE_FRAGMENT */
-                      );
+                      return _openBlock7(), _createBlock4($setup["IncremarkRenderer"], {
+                        key: childIndex,
+                        node: child
+                      }, null, 8, ["node"]);
                     }),
                     128
                     /* KEYED_FRAGMENT */
@@ -1728,7 +1844,7 @@ function render7(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     _: 1
     /* STABLE */
-  }, 8, ["class"]);
+  }, 8, ["class", "start"]);
 }
 
 // src/components/IncremarkList.vue
@@ -1840,43 +1956,25 @@ var IncremarkBlockquote_default = /* @__PURE__ */ _defineComponent9({
   },
   setup(__props, { expose: __expose }) {
     __expose();
-    const __returned__ = { IncremarkParagraph: IncremarkParagraph_default2 };
+    const __returned__ = { IncremarkRenderer: IncremarkRenderer_default };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
 
 // sfc-template:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkBlockquote.vue?type=template
-import { renderList as _renderList5, Fragment as _Fragment7, openBlock as _openBlock9, createElementBlock as _createElementBlock8, createBlock as _createBlock5, toDisplayString as _toDisplayString5 } from "vue";
+import { renderList as _renderList5, Fragment as _Fragment7, openBlock as _openBlock9, createElementBlock as _createElementBlock8, createBlock as _createBlock5 } from "vue";
 var _hoisted_110 = { class: "incremark-blockquote" };
-var _hoisted_26 = {
-  key: 1,
-  class: "unknown-child"
-};
 function render9(_ctx, _cache, $props, $setup, $data, $options) {
   return _openBlock9(), _createElementBlock8("blockquote", _hoisted_110, [
     (_openBlock9(true), _createElementBlock8(
       _Fragment7,
       null,
       _renderList5($props.node.children, (child, index) => {
-        return _openBlock9(), _createElementBlock8(
-          _Fragment7,
-          { key: index },
-          [
-            child.type === "paragraph" ? (_openBlock9(), _createBlock5($setup["IncremarkParagraph"], {
-              key: 0,
-              node: child
-            }, null, 8, ["node"])) : (_openBlock9(), _createElementBlock8(
-              "div",
-              _hoisted_26,
-              _toDisplayString5(child.type),
-              1
-              /* TEXT */
-            ))
-          ],
-          64
-          /* STABLE_FRAGMENT */
-        );
+        return _openBlock9(), _createBlock5($setup["IncremarkRenderer"], {
+          key: index,
+          node: child
+        }, null, 8, ["node"]);
       }),
       128
       /* KEYED_FRAGMENT */
@@ -1913,13 +2011,6 @@ IncremarkThematicBreak_default.render = render10;
 IncremarkThematicBreak_default.__file = "src/components/IncremarkThematicBreak.vue";
 var IncremarkThematicBreak_default2 = IncremarkThematicBreak_default;
 
-// sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkFootnotes.vue?type=script
-import { defineComponent as _defineComponent14 } from "vue";
-import { computed as computed9 } from "vue";
-
-// sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkRenderer.vue?type=script
-import { defineComponent as _defineComponent13 } from "vue";
-
 // sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkContainer.vue?type=script
 import { defineComponent as _defineComponent11 } from "vue";
 var IncremarkContainer_default = /* @__PURE__ */ _defineComponent11({
@@ -1954,7 +2045,7 @@ var IncremarkContainer_default = /* @__PURE__ */ _defineComponent11({
 });
 
 // sfc-template:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkContainer.vue?type=template
-import { createCommentVNode as _createCommentVNode8, renderList as _renderList6, Fragment as _Fragment8, openBlock as _openBlock11, createElementBlock as _createElementBlock10, createBlock as _createBlock6, resolveDynamicComponent as _resolveDynamicComponent5, withCtx as _withCtx4, normalizeClass as _normalizeClass3, createElementVNode as _createElementVNode7 } from "vue";
+import { createCommentVNode as _createCommentVNode7, renderList as _renderList6, Fragment as _Fragment8, openBlock as _openBlock11, createElementBlock as _createElementBlock10, createBlock as _createBlock6, resolveDynamicComponent as _resolveDynamicComponent5, withCtx as _withCtx4, normalizeClass as _normalizeClass3, createElementVNode as _createElementVNode7 } from "vue";
 var _hoisted_112 = {
   key: 0,
   class: "incremark-container-content"
@@ -1964,14 +2055,14 @@ function render11(_ctx, _cache, $props, $setup, $data, $options) {
     _Fragment8,
     null,
     [
-      _createCommentVNode8(" \u5982\u679C\u6709\u81EA\u5B9A\u4E49\u5BB9\u5668\u7EC4\u4EF6\uFF0C\u4F7F\u7528\u81EA\u5B9A\u4E49\u7EC4\u4EF6 "),
+      _createCommentVNode7(" \u5982\u679C\u6709\u81EA\u5B9A\u4E49\u5BB9\u5668\u7EC4\u4EF6\uFF0C\u4F7F\u7528\u81EA\u5B9A\u4E49\u7EC4\u4EF6 "),
       $setup.hasCustomContainer ? (_openBlock11(), _createBlock6(_resolveDynamicComponent5($setup.CustomContainer), {
         key: 0,
         name: $setup.containerName,
         options: $setup.options
       }, {
         default: _withCtx4(() => [
-          _createCommentVNode8(" \u5C06\u5BB9\u5668\u5185\u5BB9\u4F5C\u4E3A\u9ED8\u8BA4 slot \u4F20\u9012 "),
+          _createCommentVNode7(" \u5C06\u5BB9\u5668\u5185\u5BB9\u4F5C\u4E3A\u9ED8\u8BA4 slot \u4F20\u9012 "),
           $props.node.children && $props.node.children.length > 0 ? (_openBlock11(true), _createElementBlock10(
             _Fragment8,
             { key: 0 },
@@ -1983,7 +2074,7 @@ function render11(_ctx, _cache, $props, $setup, $data, $options) {
             }),
             128
             /* KEYED_FRAGMENT */
-          )) : _createCommentVNode8("v-if", true)
+          )) : _createCommentVNode7("v-if", true)
         ]),
         _: 1
         /* STABLE */
@@ -1991,7 +2082,7 @@ function render11(_ctx, _cache, $props, $setup, $data, $options) {
         _Fragment8,
         { key: 1 },
         [
-          _createCommentVNode8(" \u5982\u679C\u6CA1\u6709\u81EA\u5B9A\u4E49\u5BB9\u5668\u7EC4\u4EF6\uFF0C\u4F7F\u7528\u9ED8\u8BA4\u6E32\u67D3 "),
+          _createCommentVNode7(" \u5982\u679C\u6CA1\u6709\u81EA\u5B9A\u4E49\u5BB9\u5668\u7EC4\u4EF6\uFF0C\u4F7F\u7528\u9ED8\u8BA4\u6E32\u67D3 "),
           _createElementVNode7(
             "div",
             {
@@ -2011,7 +2102,7 @@ function render11(_ctx, _cache, $props, $setup, $data, $options) {
                   128
                   /* KEYED_FRAGMENT */
                 ))
-              ])) : _createCommentVNode8("v-if", true)
+              ])) : _createCommentVNode7("v-if", true)
             ],
             2
             /* CLASS */
@@ -2047,22 +2138,22 @@ var IncremarkDefault_default = /* @__PURE__ */ _defineComponent12({
 });
 
 // sfc-template:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkDefault.vue?type=template
-import { toDisplayString as _toDisplayString6, createElementVNode as _createElementVNode8, openBlock as _openBlock12, createElementBlock as _createElementBlock11 } from "vue";
+import { toDisplayString as _toDisplayString5, createElementVNode as _createElementVNode8, openBlock as _openBlock12, createElementBlock as _createElementBlock11 } from "vue";
 var _hoisted_113 = { class: "incremark-default" };
-var _hoisted_27 = { class: "type-badge" };
+var _hoisted_26 = { class: "type-badge" };
 function render12(_ctx, _cache, $props, $setup, $data, $options) {
   return _openBlock12(), _createElementBlock11("div", _hoisted_113, [
     _createElementVNode8(
       "span",
-      _hoisted_27,
-      _toDisplayString6($props.node.type),
+      _hoisted_26,
+      _toDisplayString5($props.node.type),
       1
       /* TEXT */
     ),
     _createElementVNode8(
       "pre",
       null,
-      _toDisplayString6(JSON.stringify($props.node, null, 2)),
+      _toDisplayString5(JSON.stringify($props.node, null, 2)),
       1
       /* TEXT */
     )
@@ -2081,12 +2172,14 @@ var IncremarkRenderer_default2 = /* @__PURE__ */ _defineComponent13({
     node: { type: null, required: true },
     customContainers: { type: Object, required: false },
     customCodeBlocks: { type: Object, required: false },
-    blockStatus: { type: String, required: false }
+    codeBlockConfigs: { type: Object, required: false },
+    blockStatus: { type: String, required: false },
+    components: { type: Object, required: false }
   },
   setup(__props, { expose: __expose }) {
     __expose();
     const props = __props;
-    const componentMap = {
+    const defaultComponentMap = {
       heading: IncremarkHeading_default2,
       paragraph: IncremarkParagraph_default2,
       code: IncremarkCode_default2,
@@ -2101,8 +2194,12 @@ var IncremarkRenderer_default2 = /* @__PURE__ */ _defineComponent13({
       leafDirective: IncremarkContainer_default2,
       textDirective: IncremarkContainer_default2
     };
+    const componentMap = computed9(() => ({
+      ...defaultComponentMap,
+      ...props.components
+    }));
     function getComponent(type) {
-      return componentMap[type] || IncremarkDefault_default2;
+      return componentMap.value[type] || IncremarkDefault_default2;
     }
     function isContainerNode(node) {
       return node.type === "containerDirective" || node.type === "leafDirective" || node.type === "textDirective";
@@ -2110,14 +2207,14 @@ var IncremarkRenderer_default2 = /* @__PURE__ */ _defineComponent13({
     function isHtmlNode2(node) {
       return node.type === "html";
     }
-    const __returned__ = { props, componentMap, getComponent, isContainerNode, isHtmlNode: isHtmlNode2, IncremarkCode: IncremarkCode_default2, IncremarkContainer: IncremarkContainer_default2 };
+    const __returned__ = { props, defaultComponentMap, componentMap, getComponent, isContainerNode, isHtmlNode: isHtmlNode2, IncremarkCode: IncremarkCode_default2, IncremarkContainer: IncremarkContainer_default2 };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
 
 // sfc-template:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkRenderer.vue?type=template
-import { createCommentVNode as _createCommentVNode9, toDisplayString as _toDisplayString7, createElementVNode as _createElementVNode9, openBlock as _openBlock13, createElementBlock as _createElementBlock12, createVNode as _createVNode7, Fragment as _Fragment9, resolveDynamicComponent as _resolveDynamicComponent6, createBlock as _createBlock7 } from "vue";
+import { createCommentVNode as _createCommentVNode8, toDisplayString as _toDisplayString6, createElementVNode as _createElementVNode9, openBlock as _openBlock13, createElementBlock as _createElementBlock12, createVNode as _createVNode7, Fragment as _Fragment9, resolveDynamicComponent as _resolveDynamicComponent6, createBlock as _createBlock7 } from "vue";
 var _hoisted_114 = {
   key: 0,
   class: "incremark-html-code"
@@ -2127,12 +2224,12 @@ function render13(_ctx, _cache, $props, $setup, $data, $options) {
     _Fragment9,
     null,
     [
-      _createCommentVNode9(" HTML \u8282\u70B9\uFF1A\u6E32\u67D3\u4E3A\u4EE3\u7801\u5757\u663E\u793A\u6E90\u4EE3\u7801 "),
+      _createCommentVNode8(" HTML \u8282\u70B9\uFF1A\u6E32\u67D3\u4E3A\u4EE3\u7801\u5757\u663E\u793A\u6E90\u4EE3\u7801 "),
       $setup.isHtmlNode($props.node) ? (_openBlock13(), _createElementBlock12("pre", _hoisted_114, [
         _createElementVNode9(
           "code",
           null,
-          _toDisplayString7($props.node.value),
+          _toDisplayString6($props.node.value),
           1
           /* TEXT */
         )
@@ -2140,7 +2237,7 @@ function render13(_ctx, _cache, $props, $setup, $data, $options) {
         _Fragment9,
         { key: 1 },
         [
-          _createCommentVNode9(" \u5BB9\u5668\u8282\u70B9\uFF1A\u4F7F\u7528\u5BB9\u5668\u7EC4\u4EF6\uFF0C\u4F20\u9012 customContainers "),
+          _createCommentVNode8(" \u5BB9\u5668\u8282\u70B9\uFF1A\u4F7F\u7528\u5BB9\u5668\u7EC4\u4EF6\uFF0C\u4F20\u9012 customContainers "),
           _createVNode7($setup["IncremarkContainer"], {
             node: $props.node,
             "custom-containers": $props.customContainers
@@ -2152,12 +2249,13 @@ function render13(_ctx, _cache, $props, $setup, $data, $options) {
         _Fragment9,
         { key: 2 },
         [
-          _createCommentVNode9(" \u4EE3\u7801\u8282\u70B9\uFF1A\u7279\u6B8A\u5904\u7406\uFF0C\u4F20\u9012 customCodeBlocks \u548C blockStatus "),
+          _createCommentVNode8(" \u4EE3\u7801\u8282\u70B9\uFF1A\u7279\u6B8A\u5904\u7406\uFF0C\u4F20\u9012 customCodeBlocks\u3001codeBlockConfigs \u548C blockStatus "),
           _createVNode7($setup["IncremarkCode"], {
             node: $props.node,
             "custom-code-blocks": $props.customCodeBlocks,
+            "code-block-configs": $props.codeBlockConfigs,
             "block-status": $props.blockStatus
-          }, null, 8, ["node", "custom-code-blocks", "block-status"])
+          }, null, 8, ["node", "custom-code-blocks", "code-block-configs", "block-status"])
         ],
         2112
         /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
@@ -2165,7 +2263,7 @@ function render13(_ctx, _cache, $props, $setup, $data, $options) {
         _Fragment9,
         { key: 3 },
         [
-          _createCommentVNode9(" \u5176\u4ED6\u8282\u70B9\uFF1A\u4F7F\u7528\u5BF9\u5E94\u7EC4\u4EF6 "),
+          _createCommentVNode8(" \u5176\u4ED6\u8282\u70B9\uFF1A\u4F7F\u7528\u5BF9\u5E94\u7EC4\u4EF6 "),
           (_openBlock13(), _createBlock7(_resolveDynamicComponent6($setup.getComponent($props.node.type)), {
             node: $props.node
           }, null, 8, ["node"]))
@@ -2185,18 +2283,20 @@ IncremarkRenderer_default2.__file = "src/components/IncremarkRenderer.vue";
 var IncremarkRenderer_default = IncremarkRenderer_default2;
 
 // sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkFootnotes.vue?type=script
+import { defineComponent as _defineComponent14 } from "vue";
+import { computed as computed10 } from "vue";
 var IncremarkFootnotes_default = /* @__PURE__ */ _defineComponent14({
   __name: "IncremarkFootnotes",
   setup(__props, { expose: __expose }) {
     __expose();
     const { footnoteDefinitions, footnoteReferenceOrder } = useDefinationsContext();
-    const orderedFootnotes = computed9(() => {
+    const orderedFootnotes = computed10(() => {
       return footnoteReferenceOrder.value.map((identifier) => ({
         identifier,
         definition: footnoteDefinitions.value[identifier]
       })).filter((item) => item.definition !== void 0);
     });
-    const hasFootnotes = computed9(() => orderedFootnotes.value.length > 0);
+    const hasFootnotes = computed10(() => orderedFootnotes.value.length > 0);
     const __returned__ = { footnoteDefinitions, footnoteReferenceOrder, orderedFootnotes, hasFootnotes, IncremarkRenderer: IncremarkRenderer_default };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
@@ -2204,12 +2304,12 @@ var IncremarkFootnotes_default = /* @__PURE__ */ _defineComponent14({
 });
 
 // sfc-template:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkFootnotes.vue?type=template
-import { createElementVNode as _createElementVNode10, renderList as _renderList7, Fragment as _Fragment10, openBlock as _openBlock14, createElementBlock as _createElementBlock13, createCommentVNode as _createCommentVNode10, toDisplayString as _toDisplayString8, createBlock as _createBlock8 } from "vue";
+import { createElementVNode as _createElementVNode10, renderList as _renderList7, Fragment as _Fragment10, openBlock as _openBlock14, createElementBlock as _createElementBlock13, createCommentVNode as _createCommentVNode9, toDisplayString as _toDisplayString7, createBlock as _createBlock8 } from "vue";
 var _hoisted_115 = {
   key: 0,
   class: "incremark-footnotes"
 };
-var _hoisted_28 = { class: "incremark-footnotes-list" };
+var _hoisted_27 = { class: "incremark-footnotes-list" };
 var _hoisted_36 = ["id"];
 var _hoisted_44 = { class: "incremark-footnote-content" };
 var _hoisted_54 = { class: "incremark-footnote-number" };
@@ -2224,7 +2324,7 @@ function render14(_ctx, _cache, $props, $setup, $data, $options) {
       -1
       /* CACHED */
     )),
-    _createElementVNode10("ol", _hoisted_28, [
+    _createElementVNode10("ol", _hoisted_27, [
       (_openBlock14(true), _createElementBlock13(
         _Fragment10,
         null,
@@ -2235,15 +2335,15 @@ function render14(_ctx, _cache, $props, $setup, $data, $options) {
             class: "incremark-footnote-item"
           }, [
             _createElementVNode10("div", _hoisted_44, [
-              _createCommentVNode10(" \u811A\u6CE8\u5E8F\u53F7 "),
+              _createCommentVNode9(" \u811A\u6CE8\u5E8F\u53F7 "),
               _createElementVNode10(
                 "span",
                 _hoisted_54,
-                _toDisplayString8(index + 1) + ".",
+                _toDisplayString7(index + 1) + ".",
                 1
                 /* TEXT */
               ),
-              _createCommentVNode10(" \u811A\u6CE8\u5185\u5BB9 "),
+              _createCommentVNode9(" \u811A\u6CE8\u5185\u5BB9 "),
               _createElementVNode10("div", _hoisted_64, [
                 (_openBlock14(true), _createElementBlock13(
                   _Fragment10,
@@ -2259,7 +2359,7 @@ function render14(_ctx, _cache, $props, $setup, $data, $options) {
                 ))
               ])
             ]),
-            _createCommentVNode10(" \u8FD4\u56DE\u94FE\u63A5 "),
+            _createCommentVNode9(" \u8FD4\u56DE\u94FE\u63A5 "),
             _createElementVNode10("a", {
               href: `#fnref-${item.identifier}`,
               class: "incremark-footnote-backref",
@@ -2271,7 +2371,7 @@ function render14(_ctx, _cache, $props, $setup, $data, $options) {
         /* KEYED_FRAGMENT */
       ))
     ])
-  ])) : _createCommentVNode10("v-if", true);
+  ])) : _createCommentVNode9("v-if", true);
 }
 
 // src/components/IncremarkFootnotes.vue
@@ -2284,9 +2384,11 @@ var Incremark_default = /* @__PURE__ */ _defineComponent15({
   __name: "Incremark",
   props: {
     blocks: { type: Array, required: false, default: () => [] },
+    isDisplayComplete: { type: Boolean, required: false, default: false },
     components: { type: Object, required: false, default: () => ({}) },
     customContainers: { type: Object, required: false, default: () => ({}) },
     customCodeBlocks: { type: Object, required: false, default: () => ({}) },
+    codeBlockConfigs: { type: Object, required: false, default: () => ({}) },
     pendingClass: { type: String, required: false, default: "incremark-pending" },
     completedClass: { type: String, required: false, default: "incremark-completed" },
     showBlockStatus: { type: Boolean, required: false, default: false },
@@ -2294,53 +2396,29 @@ var Incremark_default = /* @__PURE__ */ _defineComponent15({
   },
   setup(__props, { expose: __expose }) {
     __expose();
-    function isHtmlNode2(node) {
-      return node.type === "html";
-    }
     const props = __props;
     const {
       footnoteReferenceOrder
     } = useDefinationsContext();
-    const actualBlocks = computed10(() => props.incremark?.blocks.value || props.blocks || []);
-    const actualIsDisplayComplete = computed10(() => {
+    const actualBlocks = computed11(() => props.incremark?.blocks.value || props.blocks || []);
+    const actualIsDisplayComplete = computed11(() => {
       if (props.incremark) {
         return props.incremark.isDisplayComplete.value;
       }
-      const blocks = props.blocks || [];
-      return blocks.length > 0 && blocks.every((b) => b.status === "completed");
+      return props.isDisplayComplete;
     });
-    const defaultComponents = {
-      heading: IncremarkHeading_default2,
-      paragraph: IncremarkParagraph_default2,
-      code: IncremarkCode_default2,
-      list: IncremarkList_default2,
-      table: IncremarkTable_default2,
-      blockquote: IncremarkBlockquote_default2,
-      thematicBreak: IncremarkThematicBreak_default2,
-      math: IncremarkMath_default2,
-      inlineMath: IncremarkMath_default2,
-      htmlElement: IncremarkHtmlElement_default2
-    };
-    const mergedComponents = computed10(() => ({
-      ...defaultComponents,
-      ...props.components
-    }));
-    const __returned__ = { isHtmlNode: isHtmlNode2, props, footnoteReferenceOrder, actualBlocks, actualIsDisplayComplete, defaultComponents, mergedComponents, IncremarkFootnotes: IncremarkFootnotes_default2, IncremarkRenderer: IncremarkRenderer_default };
+    const __returned__ = { props, footnoteReferenceOrder, actualBlocks, actualIsDisplayComplete, IncremarkRenderer: IncremarkRenderer_default, IncremarkFootnotes: IncremarkFootnotes_default2 };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
 
 // sfc-template:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/Incremark.vue?type=template
-import { createCommentVNode as _createCommentVNode11, renderList as _renderList8, Fragment as _Fragment11, openBlock as _openBlock15, createElementBlock as _createElementBlock14, toDisplayString as _toDisplayString9, createElementVNode as _createElementVNode11, createVNode as _createVNode8, normalizeClass as _normalizeClass4, createBlock as _createBlock9 } from "vue";
+import { createCommentVNode as _createCommentVNode10, renderList as _renderList8, Fragment as _Fragment11, openBlock as _openBlock15, createElementBlock as _createElementBlock14, createVNode as _createVNode8, normalizeClass as _normalizeClass4, createBlock as _createBlock9 } from "vue";
 var _hoisted_116 = { class: "incremark" };
-var _hoisted_29 = {
-  key: 0,
-  class: "incremark-html-code"
-};
 function render15(_ctx, _cache, $props, $setup, $data, $options) {
   return _openBlock15(), _createElementBlock14("div", _hoisted_116, [
-    _createCommentVNode11(" \u4E3B\u8981\u5185\u5BB9\u5757 "),
+    _createCommentVNode10(" \u4E3B\u8981\u5185\u5BB9\u5757 "),
     (_openBlock15(true), _createElementBlock14(
       _Fragment11,
       null,
@@ -2352,7 +2430,7 @@ function render15(_ctx, _cache, $props, $setup, $data, $options) {
             block.node.type !== "definition" && block.node.type !== "footnoteDefinition" ? (_openBlock15(), _createElementBlock14(
               "div",
               {
-                key: block.stableId,
+                key: block.id,
                 class: _normalizeClass4([
                   "incremark-block",
                   block.status === "completed" ? $props.completedClass : $props.pendingClass,
@@ -2361,34 +2439,19 @@ function render15(_ctx, _cache, $props, $setup, $data, $options) {
                 ])
               },
               [
-                _createCommentVNode11(" HTML \u8282\u70B9\uFF1A\u6E32\u67D3\u4E3A\u4EE3\u7801\u5757\u663E\u793A\u6E90\u4EE3\u7801 "),
-                $setup.isHtmlNode(block.node) ? (_openBlock15(), _createElementBlock14("pre", _hoisted_29, [
-                  _createElementVNode11(
-                    "code",
-                    null,
-                    _toDisplayString9(block.node.value),
-                    1
-                    /* TEXT */
-                  )
-                ])) : (_openBlock15(), _createElementBlock14(
-                  _Fragment11,
-                  { key: 1 },
-                  [
-                    _createCommentVNode11(" \u5176\u4ED6\u8282\u70B9\uFF1A\u4F7F\u7528\u5BF9\u5E94\u7EC4\u4EF6\uFF0C\u4F20\u9012 customContainers \u548C customCodeBlocks "),
-                    _createVNode8($setup["IncremarkRenderer"], {
-                      node: block.node,
-                      "block-status": block.status,
-                      "custom-containers": $props.customContainers,
-                      "custom-code-blocks": $props.customCodeBlocks
-                    }, null, 8, ["node", "block-status", "custom-containers", "custom-code-blocks"])
-                  ],
-                  2112
-                  /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-                ))
+                _createCommentVNode10(" \u4F7F\u7528 IncremarkRenderer \u7EDF\u4E00\u5904\u7406\u6240\u6709\u8282\u70B9\u7C7B\u578B "),
+                _createVNode8($setup["IncremarkRenderer"], {
+                  node: block.node,
+                  "block-status": block.status,
+                  "custom-containers": $props.customContainers,
+                  "custom-code-blocks": $props.customCodeBlocks,
+                  "code-block-configs": $props.codeBlockConfigs,
+                  components: $props.components
+                }, null, 8, ["node", "block-status", "custom-containers", "custom-code-blocks", "code-block-configs", "components"])
               ],
               2
               /* CLASS */
-            )) : _createCommentVNode11("v-if", true)
+            )) : _createCommentVNode10("v-if", true)
           ],
           64
           /* STABLE_FRAGMENT */
@@ -2397,8 +2460,8 @@ function render15(_ctx, _cache, $props, $setup, $data, $options) {
       256
       /* UNKEYED_FRAGMENT */
     )),
-    _createCommentVNode11(" \u811A\u6CE8\u5217\u8868\uFF08\u4EC5\u5728\u5185\u5BB9\u5B8C\u5168\u663E\u793A\u540E\u663E\u793A\uFF09 "),
-    $setup.actualIsDisplayComplete && $setup.footnoteReferenceOrder.length > 0 ? (_openBlock15(), _createBlock9($setup["IncremarkFootnotes"], { key: 0 })) : _createCommentVNode11("v-if", true)
+    _createCommentVNode10(" \u811A\u6CE8\u5217\u8868\uFF08\u4EC5\u5728\u5185\u5BB9\u5B8C\u5168\u663E\u793A\u540E\u663E\u793A\uFF09 "),
+    $setup.actualIsDisplayComplete && $setup.footnoteReferenceOrder.length > 0 ? (_openBlock15(), _createBlock9($setup["IncremarkFootnotes"], { key: 0 })) : _createCommentVNode10("v-if", true)
   ]);
 }
 
@@ -2407,10 +2470,105 @@ Incremark_default.render = render15;
 Incremark_default.__file = "src/components/Incremark.vue";
 var Incremark_default2 = Incremark_default;
 
-// sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/AutoScrollContainer.vue?type=script
+// sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkContent.vue?type=script
 import { defineComponent as _defineComponent16 } from "vue";
-import { ref as ref8, onMounted as onMounted2, onUnmounted as onUnmounted6, nextTick } from "vue";
-var AutoScrollContainer_default = /* @__PURE__ */ _defineComponent16({
+import { computed as computed12, watch as watch6 } from "vue";
+var IncremarkContent_default = /* @__PURE__ */ _defineComponent16({
+  __name: "IncremarkContent",
+  props: {
+    stream: { type: Function, required: false },
+    content: { type: String, required: false },
+    components: { type: Object, required: false },
+    customContainers: { type: Object, required: false },
+    customCodeBlocks: { type: Object, required: false },
+    codeBlockConfigs: { type: Object, required: false },
+    isFinished: { type: Boolean, required: false },
+    incremarkOptions: { type: Object, required: false },
+    pendingClass: { type: String, required: false },
+    showBlockStatus: { type: Boolean, required: false }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const incremarkOptions = computed12(() => ({
+      gfm: true,
+      htmlTree: true,
+      containers: true,
+      math: true,
+      ...props.incremarkOptions
+    }));
+    const { blocks, append, finalize, render: render19, reset, isDisplayComplete, markdown } = useIncremark(incremarkOptions);
+    const isStreamMode = computed12(() => typeof props.stream === "function");
+    async function handleStreamInput() {
+      if (!props.stream) return;
+      try {
+        const stream = props.stream();
+        for await (const chunk of stream) {
+          append(chunk);
+        }
+        finalize();
+      } catch (error) {
+        console.error("Stream error: ", error);
+        finalize();
+      }
+    }
+    function handleContentInput(newContent, oldContent) {
+      if (!newContent) {
+        if (oldContent) {
+          reset();
+        }
+        return;
+      }
+      if (newContent?.startsWith(oldContent ?? "")) {
+        const delta = newContent.slice((oldContent || "").length);
+        append(delta);
+      } else {
+        render19(newContent);
+      }
+    }
+    watch6(() => props.content, async (newContent, oldContent) => {
+      if (isStreamMode.value) {
+        await handleStreamInput();
+        return;
+      } else {
+        handleContentInput(newContent, oldContent);
+      }
+    }, { immediate: true });
+    watch6(() => props.isFinished, (newIsFinished) => {
+      if (newIsFinished && props.content === markdown.value) {
+        finalize();
+      }
+    }, { immediate: true });
+    const __returned__ = { props, incremarkOptions, blocks, append, finalize, render: render19, reset, isDisplayComplete, markdown, isStreamMode, handleStreamInput, handleContentInput, Incremark: Incremark_default2 };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+// sfc-template:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkContent.vue?type=template
+import { openBlock as _openBlock16, createBlock as _createBlock10 } from "vue";
+function render16(_ctx, _cache, $props, $setup, $data, $options) {
+  return _openBlock16(), _createBlock10($setup["Incremark"], {
+    blocks: $setup.blocks,
+    "pending-class": $props.pendingClass,
+    "is-display-complete": $setup.isDisplayComplete,
+    "show-block-status": $props.showBlockStatus,
+    components: $props.components,
+    "custom-containers": $props.customContainers,
+    "custom-code-blocks": $props.customCodeBlocks,
+    "code-block-configs": $props.codeBlockConfigs
+  }, null, 8, ["blocks", "pending-class", "is-display-complete", "show-block-status", "components", "custom-containers", "custom-code-blocks", "code-block-configs"]);
+}
+
+// src/components/IncremarkContent.vue
+IncremarkContent_default.render = render16;
+IncremarkContent_default.__file = "src/components/IncremarkContent.vue";
+var IncremarkContent_default2 = IncremarkContent_default;
+
+// sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/AutoScrollContainer.vue?type=script
+import { defineComponent as _defineComponent17 } from "vue";
+import { ref as ref7, onMounted as onMounted2, onUnmounted as onUnmounted6, nextTick } from "vue";
+var AutoScrollContainer_default = /* @__PURE__ */ _defineComponent17({
   __name: "AutoScrollContainer",
   props: {
     enabled: { type: Boolean, required: false, default: true },
@@ -2419,8 +2577,8 @@ var AutoScrollContainer_default = /* @__PURE__ */ _defineComponent16({
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
-    const containerRef = ref8(null);
-    const isUserScrolledUp = ref8(false);
+    const containerRef = ref7(null);
+    const isUserScrolledUp = ref7(false);
     let lastScrollTop = 0;
     let lastScrollHeight = 0;
     function isNearBottom() {
@@ -2518,9 +2676,9 @@ var AutoScrollContainer_default = /* @__PURE__ */ _defineComponent16({
 });
 
 // sfc-template:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/AutoScrollContainer.vue?type=template
-import { renderSlot as _renderSlot, openBlock as _openBlock16, createElementBlock as _createElementBlock15 } from "vue";
-function render16(_ctx, _cache, $props, $setup, $data, $options) {
-  return _openBlock16(), _createElementBlock15(
+import { renderSlot as _renderSlot, openBlock as _openBlock17, createElementBlock as _createElementBlock15 } from "vue";
+function render17(_ctx, _cache, $props, $setup, $data, $options) {
+  return _openBlock17(), _createElementBlock15(
     "div",
     {
       ref: "containerRef",
@@ -2536,15 +2694,15 @@ function render16(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 // src/components/AutoScrollContainer.vue
-AutoScrollContainer_default.render = render16;
+AutoScrollContainer_default.render = render17;
 AutoScrollContainer_default.__file = "src/components/AutoScrollContainer.vue";
 var AutoScrollContainer_default2 = AutoScrollContainer_default;
 
 // sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/ThemeProvider.vue?type=script
-import { defineComponent as _defineComponent17 } from "vue";
-import { ref as ref9, watch as watch6 } from "vue";
+import { defineComponent as _defineComponent18 } from "vue";
+import { ref as ref8, watch as watch8 } from "vue";
 import { applyTheme } from "@incremark/theme";
-var ThemeProvider_default = /* @__PURE__ */ _defineComponent17({
+var ThemeProvider_default = /* @__PURE__ */ _defineComponent18({
   __name: "ThemeProvider",
   props: {
     theme: { type: null, required: true },
@@ -2553,8 +2711,8 @@ var ThemeProvider_default = /* @__PURE__ */ _defineComponent17({
   setup(__props, { expose: __expose }) {
     __expose();
     const props = __props;
-    const containerRef = ref9();
-    watch6(
+    const containerRef = ref8();
+    watch8(
       () => props.theme,
       (theme) => {
         if (containerRef.value) {
@@ -2570,9 +2728,9 @@ var ThemeProvider_default = /* @__PURE__ */ _defineComponent17({
 });
 
 // sfc-template:/Users/yishuai/develop/ai/markdown/packages/vue/src/ThemeProvider.vue?type=template
-import { renderSlot as _renderSlot2, normalizeClass as _normalizeClass5, openBlock as _openBlock17, createElementBlock as _createElementBlock16 } from "vue";
-function render17(_ctx, _cache, $props, $setup, $data, $options) {
-  return _openBlock17(), _createElementBlock16(
+import { renderSlot as _renderSlot2, normalizeClass as _normalizeClass5, openBlock as _openBlock18, createElementBlock as _createElementBlock16 } from "vue";
+function render18(_ctx, _cache, $props, $setup, $data, $options) {
+  return _openBlock18(), _createElementBlock16(
     "div",
     {
       ref: "containerRef",
@@ -2587,7 +2745,7 @@ function render17(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 // src/ThemeProvider.vue
-ThemeProvider_default.render = render17;
+ThemeProvider_default.render = render18;
 ThemeProvider_default.__file = "src/ThemeProvider.vue";
 var ThemeProvider_default2 = ThemeProvider_default;
 
@@ -2620,6 +2778,7 @@ export {
   Incremark_default2 as Incremark,
   IncremarkBlockquote_default2 as IncremarkBlockquote,
   IncremarkCode_default2 as IncremarkCode,
+  IncremarkContent_default2 as IncremarkContent,
   IncremarkDefault_default2 as IncremarkDefault,
   IncremarkFootnotes_default2 as IncremarkFootnotes,
   IncremarkHeading_default2 as IncremarkHeading,