@incremark/vue 0.2.2 → 0.2.3

package/dist/utils/cursor.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @file Cursor Utils - 光标工具函数
+ *
+ * @description
+ * 用于在 AST 节点末尾添加光标的工具函数。
+ *
+ * @author Incremark Team
+ * @license MIT
+ */
+import type { RootContent } from '@incremark/core';
+/**
+ * 在节点末尾添加光标
+ *
+ * @param node - 要添加光标的节点
+ * @param cursor - 光标字符
+ * @returns 添加了光标的新节点
+ */
+export declare function addCursorToNode(node: RootContent, cursor: string): RootContent;

package/package.json

@@ -1,31 +1,27 @@
 {
   "name": "@incremark/vue",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Incremark Vue 3 集成",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "types": "./src/index.ts",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.ts",
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./components/*": {
-      "import": "./src/components/*.vue"
-    },
     "./style.css": "@incremark/theme/styles.css"
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "dependencies": {
     "shiki": "^3.20.0",
-    "@incremark/core": "0.2.2",
-    "@incremark/devtools": "0.2.2",
-    "@incremark/shared": "0.2.2",
-    "@incremark/theme": "0.2.2"
+    "@incremark/devtools": "0.2.3",
+    "@incremark/shared": "0.2.3",
+    "@incremark/theme": "0.2.3",
+    "@incremark/core": "0.2.3"
   },
   "peerDependencies": {
     "vue": "^3.3.0",
@@ -46,6 +42,7 @@
     "esbuild-plugin-vue3": "^0.4.2",
     "tsup": "^8.0.0",
     "typescript": "^5.3.0",
+    "vue-tsc": "^2.2.12",
     "vue": "^3.4.0"
   },
   "keywords": [
@@ -63,7 +60,8 @@
   },
   "homepage": "https://www.incremark.com/",
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && npm run build:types",
+    "build:types": "vue-tsc -p tsconfig.build.json",
     "dev": "tsup --watch"
   }
 }

package/dist/index.css

@@ -1,6 +0,0 @@
-/* sfc-style:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/AutoScrollContainer.vue?type=style&index=0 */
-.auto-scroll-container[data-v-e0d180b8] {
-  overflow-y: auto;
-  height: 100%;
-}
-/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["sfc-style:/Users/yishuai/develop/ai/markdown/packages/vue/src/components/AutoScrollContainer.vue?type=style&index=0"],"sourcesContent":["\n.auto-scroll-container[data-v-e0d180b8] {\n  overflow-y: auto;\n  height: 100%;\n}\n"],"mappings":";AACA,CAAC,qBAAqB,CAAC;AACrB,cAAY;AACZ,UAAQ;AACV;","names":[]}

package/src/ThemeProvider.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-import type { DesignTokens } from '@incremark/theme'
-import { applyTheme } from '@incremark/theme'
-
-/**
- * 主题配置，可以是：
- * - 字符串：'default' | 'dark'
- * - 完整主题对象：DesignTokens
- * - 部分主题对象：Partial<DesignTokens>（会合并到默认主题）
- */
-const props = withDefaults(
-  defineProps<{
-    theme: 'default' | 'dark' | DesignTokens | Partial<DesignTokens>
-    class?: string
-  }>(),
-  {
-    class: ''
-  }
-)
-
-const containerRef = ref<HTMLElement>()
-
-watch(
-  () => props.theme,
-  (theme) => {
-    if (containerRef.value) {
-      // 应用主题到容器元素
-      applyTheme(containerRef.value, theme)
-    }
-  },
-  { immediate: true }
-)
-</script>
-
-<template>
-  <div ref="containerRef" :class="props.class" class="incremark-theme-provider">
-    <slot />
-  </div>
-</template>
-

package/src/components/AutoScrollContainer.vue

@@ -1,164 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
-
-const props = withDefaults(defineProps<{
-  /** 是否启用自动滚动 */
-  enabled?: boolean
-  /** 触发自动滚动的底部阈值（像素） */
-  threshold?: number
-  /** 滚动行为 */
-  behavior?: ScrollBehavior
-}>(), {
-  enabled: true,
-  threshold: 50,
-  behavior: 'instant'
-})
-
-const containerRef = ref<HTMLDivElement | null>(null)
-const isUserScrolledUp = ref(false)
-
-// 记录上一次滚动位置，用于判断滚动方向
-let lastScrollTop = 0
-let lastScrollHeight = 0
-
-/**
- * 检查是否在底部附近
- */
-function isNearBottom(): boolean {
-  const container = containerRef.value
-  if (!container) return true
-  
-  const { scrollTop, scrollHeight, clientHeight } = container
-  return scrollHeight - scrollTop - clientHeight <= props.threshold
-}
-
-/**
- * 滚动到底部
- */
-function scrollToBottom(force = false): void {
-  const container = containerRef.value
-  if (!container) return
-  
-  // 如果用户手动向上滚动了，且不是强制滚动，则不自动滚动
-  if (isUserScrolledUp.value && !force) return
-  
-  container.scrollTo({
-    top: container.scrollHeight,
-    behavior: props.behavior
-  })
-}
-
-/**
- * 检查是否有滚动条
- */
-function hasScrollbar(): boolean {
-  const container = containerRef.value
-  if (!container) return false
-  return container.scrollHeight > container.clientHeight
-}
-
-/**
- * 处理滚动事件
- */
-function handleScroll(): void {
-  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 {
-    // 判断是否是用户主动向上滚动
-    // 条件：scrollTop 减少（向上滚动）且 scrollHeight 没有变化（不是因为内容增加）
-    const isScrollingUp = scrollTop < lastScrollTop
-    const isContentUnchanged = scrollHeight === lastScrollHeight
-    
-    if (isScrollingUp && isContentUnchanged) {
-      // 用户主动向上滚动，暂停自动滚动
-      isUserScrolledUp.value = true
-    }
-  }
-  
-  // 更新记录
-  lastScrollTop = scrollTop
-  lastScrollHeight = scrollHeight
-}
-
-// 监听 slot 内容变化（使用 MutationObserver）
-let observer: MutationObserver | null = null
-
-onMounted(() => {
-  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
-      }
-      
-      // 更新 scrollHeight 记录（内容变化后）
-      lastScrollHeight = containerRef.value.scrollHeight
-      
-      // 自动滚动
-      if (props.enabled && !isUserScrolledUp.value) {
-        scrollToBottom()
-      }
-    })
-  })
-  
-  observer.observe(containerRef.value, {
-    childList: true,
-    subtree: true,
-    characterData: true
-  })
-})
-
-onUnmounted(() => {
-  observer?.disconnect()
-})
-
-// 暴露方法给父组件
-defineExpose({
-  /** 强制滚动到底部 */
-  scrollToBottom: () => scrollToBottom(true),
-  /** 是否用户手动向上滚动了 */
-  isUserScrolledUp: () => isUserScrolledUp.value,
-  /** 容器元素引用 */
-  container: containerRef
-})
-</script>
-
-<template>
-  <div
-    ref="containerRef"
-    class="auto-scroll-container"
-    @scroll="handleScroll"
-  >
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-.auto-scroll-container {
-  overflow-y: auto;
-  height: 100%;
-}
-</style>

package/src/components/Incremark.vue

@@ -1,131 +0,0 @@
-<script setup lang="ts">
-import { computed, type Component } from 'vue'
-import type { ParsedBlock, RootContent } from '@incremark/core'
-import type { HTML } from 'mdast'
-import { useDefinationsContext } from '../composables/useDefinationsContext'
-import type { UseIncremarkReturn } from '../composables/useIncremark'
-import IncremarkHeading from './IncremarkHeading.vue'
-import IncremarkParagraph from './IncremarkParagraph.vue'
-import IncremarkCode from './IncremarkCode.vue'
-import IncremarkList from './IncremarkList.vue'
-import IncremarkTable from './IncremarkTable.vue'
-import IncremarkBlockquote from './IncremarkBlockquote.vue'
-import IncremarkThematicBreak from './IncremarkThematicBreak.vue'
-import IncremarkMath from './IncremarkMath.vue'
-import IncremarkHtmlElement from './IncremarkHtmlElement.vue'
-import IncremarkDefault from './IncremarkDefault.vue'
-import IncremarkFootnotes from './IncremarkFootnotes.vue'
-
-// 组件映射类型
-export type ComponentMap = Partial<Record<string, Component>>
-
-/**
- * 检查是否是 html 节点
- */
-function isHtmlNode(node: RootContent): node is HTML {
-  return node.type === 'html'
-}
-
-// 带稳定 ID 的块类型
-export interface BlockWithStableId extends ParsedBlock {
-  stableId: string
-  isLastPending?: boolean // 是否是最后一个 pending 块
-}
-
-const props = withDefaults(
-  defineProps<{
-    /** 要渲染的块列表（来自 useIncremark 的 blocks） */
-    blocks?: BlockWithStableId[]
-    /** 自定义组件映射，key 为节点类型 */
-    components?: ComponentMap
-    /** 待处理块的样式类名 */
-    pendingClass?: string
-    /** 已完成块的样式类名 */
-    completedClass?: string
-    /** 是否显示块状态边框 */
-    showBlockStatus?: boolean
-    /** 可选：useIncremark 返回的对象（用于自动注入数据） */
-    incremark?: UseIncremarkReturn
-  }>(),
-  {
-    blocks: () => [],
-    components: () => ({}),
-    pendingClass: 'incremark-pending',
-    completedClass: 'incremark-completed',
-    showBlockStatus: false
-  }
-)
-
-// 从 context 获取 footnoteReferenceOrder（如果有的话）
-let footnoteReferenceOrder
-try {
-  const context = useDefinationsContext()
-  footnoteReferenceOrder = context.footnoteReferenceOrder
-} catch {
-  // 如果没有 context，使用空数组
-  footnoteReferenceOrder = computed(() => [])
-}
-
-// 计算实际使用的 blocks 和 isFinalized
-const actualBlocks = computed<BlockWithStableId[]>(() => props.incremark?.blocks.value || props.blocks || [])
-const actualIsFinalized = computed(() => {
-  if (props.incremark) {
-    return props.incremark.isFinalized.value
-  }
-  // 如果手动传入 blocks，自动判断是否所有 block 都是 completed
-  const blocks = props.blocks || []
-  return blocks.length > 0 && blocks.every(b => b.status === 'completed')
-})
-
-// 默认组件映射
-const defaultComponents: Record<string, Component> = {
-  heading: IncremarkHeading,
-  paragraph: IncremarkParagraph,
-  code: IncremarkCode,
-  list: IncremarkList,
-  table: IncremarkTable,
-  blockquote: IncremarkBlockquote,
-  thematicBreak: IncremarkThematicBreak,
-  math: IncremarkMath,
-  inlineMath: IncremarkMath,
-  htmlElement: IncremarkHtmlElement
-}
-
-// 合并用户组件和默认组件
-const mergedComponents = computed(() => ({
-  ...defaultComponents,
-  ...props.components
-}))
-
-function getComponent(type: string): Component {
-  return mergedComponents.value[type] || props.components?.default || IncremarkDefault
-}
-</script>
-
-<template>
-  <div class="incremark">
-    <!-- 主要内容块 -->
-    <template v-for="block in actualBlocks">
-      <div
-        v-if="block.node.type !== 'definition' && block.node.type !== 'footnoteDefinition'"
-        :key="block.stableId"
-        :class="[
-          'incremark-block',
-          block.status === 'completed' ? completedClass : pendingClass,
-          { 'incremark-show-status': showBlockStatus },
-          { 'incremark-last-pending': block.isLastPending }
-        ]"
-      >
-        <!-- HTML 节点：渲染为代码块显示源代码 -->
-        <pre v-if="isHtmlNode(block.node)" class="incremark-html-code"><code>{{ (block.node as HTML).value }}</code></pre>
-        <!-- 其他节点：使用对应组件 -->
-        <component v-else :is="getComponent(block.node.type)" :node="block.node" />
-      </div>
-    </template>
-
-    <!-- 脚注列表（仅在 finalize 后显示） -->
-    <IncremarkFootnotes
-      v-if="actualIsFinalized && (footnoteReferenceOrder as any).value?.length > 0"
-    />
-  </div>
-</template>

package/src/components/IncremarkBlockquote.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { Blockquote } from 'mdast'
-import IncremarkParagraph from './IncremarkParagraph.vue'
-
-defineProps<{
-  node: Blockquote
-}>()
-</script>
-
-<template>
-  <blockquote class="incremark-blockquote">
-    <template v-for="(child, index) in node.children" :key="index">
-      <IncremarkParagraph v-if="child.type === 'paragraph'" :node="child" />
-      <div v-else class="unknown-child">{{ child.type }}</div>
-    </template>
-  </blockquote>
-</template>
-

package/src/components/IncremarkCode.vue

@@ -1,236 +0,0 @@
-<script setup lang="ts">
-import type { Code } from 'mdast'
-import { computed, ref, watch, shallowRef, onUnmounted } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    node: Code
-    /** Shiki 主题，默认 github-dark */
-    theme?: string
-    /** 是否禁用代码高亮 */
-    disableHighlight?: boolean
-    /** Mermaid 渲染延迟（毫秒），用于流式输入时防抖 */
-    mermaidDelay?: number
-  }>(),
-  {
-    theme: 'github-dark',
-    disableHighlight: false,
-    mermaidDelay: 500
-  }
-)
-
-const copied = ref(false)
-const highlightedHtml = ref('')
-const isHighlighting = ref(false)
-const highlightError = ref(false)
-
-// Mermaid 支持
-const mermaidSvg = ref('')
-const mermaidError = ref('')
-const mermaidLoading = ref(false)
-const mermaidRef = shallowRef<any>(null)
-let mermaidTimer: ReturnType<typeof setTimeout> | null = null
-// 视图模式：'preview' | 'source'
-const mermaidViewMode = ref<'preview' | 'source'>('preview')
-
-function toggleMermaidView() {
-  mermaidViewMode.value = mermaidViewMode.value === 'preview' ? 'source' : 'preview'
-}
-
-const language = computed(() => props.node.lang || 'text')
-const code = computed(() => props.node.value)
-const isMermaid = computed(() => language.value === 'mermaid')
-
-// 缓存 highlighter
-const highlighterRef = shallowRef<any>(null)
-const loadedLanguages = new Set<string>()
-const loadedThemes = new Set<string>()
-
-// Mermaid 渲染（带防抖动）
-function scheduleRenderMermaid() {
-  if (!isMermaid.value || !code.value) return
-
-  // 清除之前的定时器
-  if (mermaidTimer) {
-    clearTimeout(mermaidTimer)
-  }
-
-  // 显示加载状态
-  mermaidLoading.value = true
-
-  // 防抖动延迟渲染
-  mermaidTimer = setTimeout(() => {
-    doRenderMermaid()
-  }, props.mermaidDelay)
-}
-
-async function doRenderMermaid() {
-  if (!code.value) return
-
-  mermaidError.value = ''
-
-  try {
-    // 动态导入 mermaid
-    if (!mermaidRef.value) {
-      // @ts-ignore - mermaid 是可选依赖
-      const mermaidModule = await import('mermaid')
-      mermaidRef.value = mermaidModule.default
-      mermaidRef.value.initialize({
-        startOnLoad: false,
-        theme: 'dark',
-        securityLevel: 'loose'
-      })
-    }
-
-    const mermaid = mermaidRef.value
-    const id = `mermaid-${Date.now()}-${Math.random().toString(36).slice(2)}`
-
-    const { svg } = await mermaid.render(id, code.value)
-    mermaidSvg.value = svg
-  } catch (e: any) {
-    // 不显示错误，可能是代码还不完整
-    mermaidError.value = ''
-    mermaidSvg.value = ''
-  } finally {
-    mermaidLoading.value = false
-  }
-}
-
-onUnmounted(() => {
-  if (mermaidTimer) {
-    clearTimeout(mermaidTimer)
-  }
-})
-
-// 动态加载 shiki 并高亮
-async function highlight() {
-  if (isMermaid.value) {
-    scheduleRenderMermaid()
-    return
-  }
-
-  if (!code.value || props.disableHighlight) {
-    highlightedHtml.value = ''
-    return
-  }
-
-  isHighlighting.value = true
-  highlightError.value = false
-
-  try {
-    // 动态导入 shiki
-    if (!highlighterRef.value) {
-      const { createHighlighter } = await import('shiki')
-      highlighterRef.value = await createHighlighter({
-        themes: [props.theme as any],
-        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'
-    })
-    highlightedHtml.value = html
-  } catch (e) {
-    // Shiki 不可用或加载失败
-    highlightError.value = true
-    highlightedHtml.value = ''
-  } finally {
-    isHighlighting.value = false
-  }
-}
-
-// 监听代码变化，重新高亮/渲染
-watch([code, () => props.theme, isMermaid], highlight, { immediate: true })
-
-async function copyCode() {
-  try {
-    await navigator.clipboard.writeText(code.value)
-    copied.value = true
-    setTimeout(() => {
-      copied.value = false
-    }, 2000)
-  } catch {
-    // 复制失败静默处理
-  }
-}
-</script>
-
-<template>
-  <!-- Mermaid 图表 -->
-  <div v-if="isMermaid" class="incremark-mermaid">
-    <div class="mermaid-header">
-      <span class="language">MERMAID</span>
-      <div class="mermaid-actions">
-        <button 
-          class="code-btn" 
-          @click="toggleMermaidView" 
-          type="button"
-          :disabled="!mermaidSvg"
-        >
-          {{ mermaidViewMode === 'preview' ? '源码' : '预览' }}
-        </button>
-        <button class="code-btn" @click="copyCode" type="button">
-          {{ copied ? '✓ 已复制' : '复制' }}
-        </button>
-      </div>
-    </div>
-    <div class="mermaid-content">
-      <!-- 加载中 -->
-      <div v-if="mermaidLoading && !mermaidSvg" class="mermaid-loading">
-        <pre class="mermaid-source-code">{{ code }}</pre>
-      </div>
-      <!-- 源码模式 -->
-      <pre v-else-if="mermaidViewMode === 'source'" class="mermaid-source-code">{{ code }}</pre>
-      <!-- 预览模式 -->
-      <div v-else-if="mermaidSvg" v-html="mermaidSvg" class="mermaid-svg" />
-      <!-- 无法渲染时显示源码 -->
-      <pre v-else class="mermaid-source-code">{{ code }}</pre>
-    </div>
-  </div>
-
-  <!-- 普通代码块 -->
-  <div v-else class="incremark-code">
-    <div class="code-header">
-      <span class="language">{{ language }}</span>
-      <button class="code-btn" @click="copyCode" type="button">
-        {{ copied ? '✓ 已复制' : '复制' }}
-      </button>
-    </div>
-    <div class="code-content">
-      <!-- 正在加载高亮 -->
-      <div v-if="isHighlighting && !highlightedHtml" class="code-loading">
-        <pre><code>{{ code }}</code></pre>
-      </div>
-      <!-- 高亮后的代码 -->
-      <div v-else-if="highlightedHtml" v-html="highlightedHtml" class="shiki-wrapper" />
-      <!-- 回退：无高亮 -->
-      <pre v-else class="code-fallback"><code>{{ code }}</code></pre>
-    </div>
-  </div>
-</template>

package/src/components/IncremarkDefault.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { RootContent } from 'mdast'
-
-defineProps<{
-  node: RootContent
-}>()
-</script>
-
-<template>
-  <div class="incremark-default">
-    <span class="type-badge">{{ node.type }}</span>
-    <pre>{{ JSON.stringify(node, null, 2) }}</pre>
-  </div>
-</template>
-