@incremark/vue 0.0.4 → 0.0.5

package/dist/index.js

@@ -65,7 +65,7 @@ function useIncremark(options = {}) {
     markdown.value = "";
     isLoading.value = false;
   }
-  function render13(content) {
+  function render14(content) {
     const update = parser.render(content);
     markdown.value = parser.getBuffer();
     completedBlocks.value = parser.getCompletedBlocks().map((b) => markRaw(b));
@@ -95,7 +95,7 @@ function useIncremark(options = {}) {
     /** 重置解析器 */
     reset,
     /** 一次性渲染（reset + append + finalize） */
-    render: render13,
+    render: render14,
     /** 解析器实例 */
     parser
   };
@@ -154,20 +154,80 @@ function useDevTools(incremark, options = {}) {
   return devtools;
 }
 
+// src/composables/useBlockTransformer.ts
+import { ref as ref3, watch, computed as computed3, onUnmounted as onUnmounted2 } from "vue";
+import {
+  createBlockTransformer
+} from "@incremark/core";
+function useBlockTransformer(sourceBlocks, options = {}) {
+  const displayBlocksRef = ref3([]);
+  const isProcessingRef = ref3(false);
+  const isPausedRef = ref3(false);
+  const effectRef = ref3(options.effect ?? "none");
+  const transformer = createBlockTransformer({
+    ...options,
+    onChange: (blocks) => {
+      displayBlocksRef.value = blocks;
+      isProcessingRef.value = transformer.isProcessing();
+      isPausedRef.value = transformer.isPausedState();
+    }
+  });
+  watch(
+    sourceBlocks,
+    (blocks) => {
+      transformer.push(blocks);
+      const currentDisplaying = displayBlocksRef.value.find((b) => !b.isDisplayComplete);
+      if (currentDisplaying) {
+        const updated = blocks.find((b) => b.id === currentDisplaying.id);
+        if (updated) {
+          transformer.update(updated);
+        }
+      }
+    },
+    { immediate: true, deep: true }
+  );
+  onUnmounted2(() => {
+    transformer.destroy();
+  });
+  return {
+    displayBlocks: computed3(() => displayBlocksRef.value),
+    isProcessing: computed3(() => isProcessingRef.value),
+    isPaused: computed3(() => isPausedRef.value),
+    effect: computed3(() => effectRef.value),
+    skip: () => transformer.skip(),
+    reset: () => transformer.reset(),
+    pause: () => {
+      transformer.pause();
+      isPausedRef.value = true;
+    },
+    resume: () => {
+      transformer.resume();
+      isPausedRef.value = false;
+    },
+    setOptions: (opts) => {
+      transformer.setOptions(opts);
+      if (opts.effect !== void 0) {
+        effectRef.value = opts.effect;
+      }
+    },
+    transformer
+  };
+}
+
 // sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/Incremark.vue?type=script
 import { defineComponent as _defineComponent11 } from "vue";
-import { computed as computed7 } from "vue";
+import { computed as computed8 } from "vue";
 
 // sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkHeading.vue?type=script
 import { defineComponent as _defineComponent3 } from "vue";
-import { computed as computed4 } from "vue";
+import { computed as computed5 } from "vue";
 
 // sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkInline.vue?type=script
 import { defineComponent as _defineComponent2 } from "vue";
 
 // sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkMath.vue?type=script
 import { defineComponent as _defineComponent } from "vue";
-import { computed as computed3, ref as ref3, watch, shallowRef as shallowRef2, onUnmounted as onUnmounted2 } from "vue";
+import { computed as computed4, ref as ref4, watch as watch2, shallowRef as shallowRef2, onUnmounted as onUnmounted3 } from "vue";
 var IncremarkMath_default = /* @__PURE__ */ _defineComponent({
   __name: "IncremarkMath",
   props: {
@@ -177,13 +237,13 @@ var IncremarkMath_default = /* @__PURE__ */ _defineComponent({
   setup(__props, { expose: __expose }) {
     __expose();
     const props = __props;
-    const renderedHtml = ref3("");
-    const renderError = ref3("");
-    const isLoading = ref3(false);
+    const renderedHtml = ref4("");
+    const renderError = ref4("");
+    const isLoading = ref4(false);
     const katexRef = shallowRef2(null);
     let renderTimer = null;
-    const isInline = computed3(() => props.node.type === "inlineMath");
-    const formula = computed3(() => props.node.value);
+    const isInline = computed4(() => props.node.type === "inlineMath");
+    const formula = computed4(() => props.node.value);
     function scheduleRender() {
       if (!formula.value) {
         renderedHtml.value = "";
@@ -218,12 +278,12 @@ var IncremarkMath_default = /* @__PURE__ */ _defineComponent({
         isLoading.value = false;
       }
     }
-    onUnmounted2(() => {
+    onUnmounted3(() => {
       if (renderTimer) {
         clearTimeout(renderTimer);
       }
     });
-    watch(formula, scheduleRender, { immediate: true });
+    watch2(formula, scheduleRender, { immediate: true });
     const __returned__ = { props, renderedHtml, renderError, isLoading, katexRef, get renderTimer() {
       return renderTimer;
     }, set renderTimer(v) {
@@ -340,6 +400,7 @@ import { renderList as _renderList, Fragment as _Fragment2, openBlock as _openBl
 var _hoisted_12 = { class: "incremark-inline-code" };
 var _hoisted_22 = ["href"];
 var _hoisted_32 = ["src", "alt"];
+var _hoisted_42 = ["innerHTML"];
 function render2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_IncremarkInline = _resolveComponent("IncremarkInline", true);
   return _openBlock2(true), _createElementBlock2(
@@ -473,6 +534,17 @@ function render2(_ctx, _cache, $props, $setup, $data, $options) {
             ],
             2112
             /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+          )) : node.type === "html" ? (_openBlock2(), _createElementBlock2(
+            _Fragment2,
+            { key: 9 },
+            [
+              _createCommentVNode2(" \u539F\u59CB HTML\uFF08\u7528\u4E8E fade-mask \u7B49\u7279\u6B8A\u5143\u7D20\uFF09 "),
+              _createElementVNode2("span", {
+                innerHTML: node.value
+              }, null, 8, _hoisted_42)
+            ],
+            2112
+            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
           )) : _createCommentVNode2("v-if", true)
         ],
         64
@@ -498,7 +570,7 @@ var IncremarkHeading_default = /* @__PURE__ */ _defineComponent3({
   setup(__props, { expose: __expose }) {
     __expose();
     const props = __props;
-    const tag = computed4(() => `h${props.node.depth}`);
+    const tag = computed5(() => `h${props.node.depth}`);
     const __returned__ = { props, tag, IncremarkInline: IncremarkInline_default2 };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
@@ -559,7 +631,7 @@ var IncremarkParagraph_default2 = IncremarkParagraph_default;
 
 // sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkCode.vue?type=script
 import { defineComponent as _defineComponent5 } from "vue";
-import { computed as computed5, ref as ref4, watch as watch2, shallowRef as shallowRef3, onUnmounted as onUnmounted3 } from "vue";
+import { computed as computed6, ref as ref5, watch as watch3, shallowRef as shallowRef3, onUnmounted as onUnmounted4 } from "vue";
 var IncremarkCode_default = /* @__PURE__ */ _defineComponent5({
   __name: "IncremarkCode",
   props: {
@@ -571,22 +643,22 @@ var IncremarkCode_default = /* @__PURE__ */ _defineComponent5({
   setup(__props, { expose: __expose }) {
     __expose();
     const props = __props;
-    const copied = ref4(false);
-    const highlightedHtml = ref4("");
-    const isHighlighting = ref4(false);
-    const highlightError = ref4(false);
-    const mermaidSvg = ref4("");
-    const mermaidError = ref4("");
-    const mermaidLoading = ref4(false);
+    const copied = ref5(false);
+    const highlightedHtml = ref5("");
+    const isHighlighting = ref5(false);
+    const highlightError = ref5(false);
+    const mermaidSvg = ref5("");
+    const mermaidError = ref5("");
+    const mermaidLoading = ref5(false);
     const mermaidRef = shallowRef3(null);
     let mermaidTimer = null;
-    const mermaidViewMode = ref4("preview");
+    const mermaidViewMode = ref5("preview");
     function toggleMermaidView() {
       mermaidViewMode.value = mermaidViewMode.value === "preview" ? "source" : "preview";
     }
-    const language = computed5(() => props.node.lang || "text");
-    const code = computed5(() => props.node.value);
-    const isMermaid = computed5(() => language.value === "mermaid");
+    const language = computed6(() => props.node.lang || "text");
+    const code = computed6(() => props.node.value);
+    const isMermaid = computed6(() => language.value === "mermaid");
     const highlighterRef = shallowRef3(null);
     const loadedLanguages = /* @__PURE__ */ new Set();
     const loadedThemes = /* @__PURE__ */ new Set();
@@ -624,7 +696,7 @@ var IncremarkCode_default = /* @__PURE__ */ _defineComponent5({
         mermaidLoading.value = false;
       }
     }
-    onUnmounted3(() => {
+    onUnmounted4(() => {
       if (mermaidTimer) {
         clearTimeout(mermaidTimer);
       }
@@ -677,7 +749,7 @@ var IncremarkCode_default = /* @__PURE__ */ _defineComponent5({
         isHighlighting.value = false;
       }
     }
-    watch2([code, () => props.theme, isMermaid], highlight, { immediate: true });
+    watch3([code, () => props.theme, isMermaid], highlight, { immediate: true });
     async function copyCode() {
       try {
         await navigator.clipboard.writeText(code.value);
@@ -706,7 +778,7 @@ var _hoisted_14 = {
 };
 var _hoisted_23 = { class: "mermaid-header" };
 var _hoisted_33 = { class: "mermaid-actions" };
-var _hoisted_42 = ["disabled"];
+var _hoisted_43 = ["disabled"];
 var _hoisted_52 = { class: "mermaid-content" };
 var _hoisted_62 = {
   key: 0,
@@ -747,7 +819,7 @@ function render5(_ctx, _cache, $props, $setup, $data, $options) {
               onClick: $setup.toggleMermaidView,
               type: "button",
               disabled: !$setup.mermaidSvg
-            }, _toDisplayString3($setup.mermaidViewMode === "preview" ? "\u6E90\u7801" : "\u9884\u89C8"), 9, _hoisted_42),
+            }, _toDisplayString3($setup.mermaidViewMode === "preview" ? "\u6E90\u7801" : "\u9884\u89C8"), 9, _hoisted_43),
             _createElementVNode3(
               "button",
               {
@@ -903,7 +975,7 @@ var IncremarkCode_default2 = IncremarkCode_default;
 
 // sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/IncremarkList.vue?type=script
 import { defineComponent as _defineComponent6 } from "vue";
-import { computed as computed6 } from "vue";
+import { computed as computed7 } from "vue";
 var IncremarkList_default = /* @__PURE__ */ _defineComponent6({
   __name: "IncremarkList",
   props: {
@@ -912,7 +984,7 @@ var IncremarkList_default = /* @__PURE__ */ _defineComponent6({
   setup(__props, { expose: __expose }) {
     __expose();
     const props = __props;
-    const tag = computed6(() => props.node.ordered ? "ol" : "ul");
+    const tag = computed7(() => props.node.ordered ? "ol" : "ul");
     function getItemContent(item) {
       const firstChild = item.children[0];
       if (firstChild?.type === "paragraph") {
@@ -1234,7 +1306,7 @@ var Incremark_default = /* @__PURE__ */ _defineComponent11({
       math: IncremarkMath_default2,
       inlineMath: IncremarkMath_default2
     };
-    const mergedComponents = computed7(() => ({
+    const mergedComponents = computed8(() => ({
       ...defaultComponents,
       ...props.components
     }));
@@ -1265,7 +1337,8 @@ function render11(_ctx, _cache, $props, $setup, $data, $options) {
                 class: _normalizeClass2([
                   "incremark-block",
                   block.status === "completed" ? $props.completedClass : $props.pendingClass,
-                  { "incremark-show-status": $props.showBlockStatus }
+                  { "incremark-show-status": $props.showBlockStatus },
+                  { "incremark-last-pending": block.isLastPending }
                 ])
               },
               [
@@ -1332,7 +1405,160 @@ function render12(_ctx, _cache, $props, $setup, $data, $options) {
 IncremarkRenderer_default.render = render12;
 IncremarkRenderer_default.__file = "src/components/IncremarkRenderer.vue";
 var IncremarkRenderer_default2 = IncremarkRenderer_default;
+
+// sfc-script:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/AutoScrollContainer.vue?type=script
+import { defineComponent as _defineComponent13 } from "vue";
+import { ref as ref6, onMounted as onMounted2, onUnmounted as onUnmounted5, nextTick } from "vue";
+var AutoScrollContainer_default = /* @__PURE__ */ _defineComponent13({
+  __name: "AutoScrollContainer",
+  props: {
+    enabled: { type: Boolean, required: false, default: true },
+    threshold: { type: Number, required: false, default: 50 },
+    behavior: { type: null, required: false, default: "instant" }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const containerRef = ref6(null);
+    const isUserScrolledUp = ref6(false);
+    let lastScrollTop = 0;
+    let lastScrollHeight = 0;
+    function isNearBottom() {
+      const container = containerRef.value;
+      if (!container) return true;
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      return scrollHeight - scrollTop - clientHeight <= props.threshold;
+    }
+    function scrollToBottom(force = false) {
+      const container = containerRef.value;
+      if (!container) return;
+      if (isUserScrolledUp.value && !force) return;
+      container.scrollTo({
+        top: container.scrollHeight,
+        behavior: props.behavior
+      });
+    }
+    function hasScrollbar() {
+      const container = containerRef.value;
+      if (!container) return false;
+      return container.scrollHeight > container.clientHeight;
+    }
+    function handleScroll() {
+      const container = containerRef.value;
+      if (!container) return;
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      if (scrollHeight <= clientHeight) {
+        isUserScrolledUp.value = false;
+        lastScrollTop = 0;
+        lastScrollHeight = scrollHeight;
+        return;
+      }
+      if (isNearBottom()) {
+        isUserScrolledUp.value = false;
+      } else {
+        const isScrollingUp = scrollTop < lastScrollTop;
+        const isContentUnchanged = scrollHeight === lastScrollHeight;
+        if (isScrollingUp && isContentUnchanged) {
+          isUserScrolledUp.value = true;
+        }
+      }
+      lastScrollTop = scrollTop;
+      lastScrollHeight = scrollHeight;
+    }
+    let observer = null;
+    onMounted2(() => {
+      if (!containerRef.value) return;
+      lastScrollTop = containerRef.value.scrollTop;
+      lastScrollHeight = containerRef.value.scrollHeight;
+      observer = new MutationObserver(() => {
+        nextTick(() => {
+          if (!containerRef.value) return;
+          if (!hasScrollbar()) {
+            isUserScrolledUp.value = false;
+          }
+          lastScrollHeight = containerRef.value.scrollHeight;
+          if (props.enabled && !isUserScrolledUp.value) {
+            scrollToBottom();
+          }
+        });
+      });
+      observer.observe(containerRef.value, {
+        childList: true,
+        subtree: true,
+        characterData: true
+      });
+    });
+    onUnmounted5(() => {
+      observer?.disconnect();
+    });
+    __expose({
+      /** 强制滚动到底部 */
+      scrollToBottom: () => scrollToBottom(true),
+      /** 是否用户手动向上滚动了 */
+      isUserScrolledUp: () => isUserScrolledUp.value,
+      /** 容器元素引用 */
+      container: containerRef
+    });
+    const __returned__ = { props, containerRef, isUserScrolledUp, get lastScrollTop() {
+      return lastScrollTop;
+    }, set lastScrollTop(v) {
+      lastScrollTop = v;
+    }, get lastScrollHeight() {
+      return lastScrollHeight;
+    }, set lastScrollHeight(v) {
+      lastScrollHeight = v;
+    }, isNearBottom, scrollToBottom, hasScrollbar, handleScroll, get observer() {
+      return observer;
+    }, set observer(v) {
+      observer = v;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+// sfc-template:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/AutoScrollContainer.vue?type=template
+import { renderSlot as _renderSlot, openBlock as _openBlock13, createElementBlock as _createElementBlock11 } from "vue";
+function render13(_ctx, _cache, $props, $setup, $data, $options) {
+  return _openBlock13(), _createElementBlock11(
+    "div",
+    {
+      ref: "containerRef",
+      class: "auto-scroll-container",
+      onScroll: $setup.handleScroll
+    },
+    [
+      _renderSlot(_ctx.$slots, "default", {}, void 0, true)
+    ],
+    544
+    /* NEED_HYDRATION, NEED_PATCH */
+  );
+}
+
+// src/components/AutoScrollContainer.vue
+AutoScrollContainer_default.render = render13;
+AutoScrollContainer_default.__file = "src/components/AutoScrollContainer.vue";
+AutoScrollContainer_default.__scopeId = "data-v-e0d180b8";
+var AutoScrollContainer_default2 = AutoScrollContainer_default;
+
+// src/index.ts
+import {
+  BlockTransformer as BlockTransformer2,
+  createBlockTransformer as createBlockTransformer2,
+  countChars,
+  sliceAst,
+  cloneNode,
+  codeBlockPlugin,
+  mermaidPlugin,
+  imagePlugin,
+  mathPlugin,
+  thematicBreakPlugin,
+  defaultPlugins,
+  allPlugins,
+  createPlugin
+} from "@incremark/core";
 export {
+  AutoScrollContainer_default2 as AutoScrollContainer,
+  BlockTransformer2 as BlockTransformer,
   Incremark_default2 as Incremark,
   IncremarkBlockquote_default2 as IncremarkBlockquote,
   IncremarkCode_default2 as IncremarkCode,
@@ -1345,6 +1571,19 @@ export {
   IncremarkRenderer_default2 as IncremarkRenderer,
   IncremarkTable_default2 as IncremarkTable,
   IncremarkThematicBreak_default2 as IncremarkThematicBreak,
+  allPlugins,
+  cloneNode,
+  codeBlockPlugin,
+  countChars,
+  createBlockTransformer2 as createBlockTransformer,
+  createPlugin,
+  defaultPlugins,
+  imagePlugin,
+  mathPlugin,
+  mermaidPlugin,
+  sliceAst,
+  thematicBreakPlugin,
+  useBlockTransformer,
   useDevTools,
   useIncremark,
   useStreamRenderer