@incremark/vue 0.2.2 → 0.2.4

package/src/components/IncremarkFootnotes.vue

@@ -1,78 +0,0 @@
-<!--
-/**
- * 脚注列表组件
- *
- * 在文档底部渲染所有脚注定义，按引用出现的顺序排列
- *
- * @component IncremarkFootnotes
- *
- * @remarks
- * 样式定义在 @incremark/theme 中的 footnotes.less
- * footnoteReferenceOrder 自动从 context 获取，无需手动传递
- */
--->
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { FootnoteDefinition, RootContent } from 'mdast'
-import { useDefinationsContext } from '../composables/useDefinationsContext'
-import IncremarkRenderer from './IncremarkRenderer.vue'
-
-const { definations, footnoteDefinitions, footnoteReferenceOrder } = useDefinationsContext()
-
-/**
- * 按引用顺序排列的脚注列表
- * 只显示已有定义的脚注
- */
-const orderedFootnotes = computed<Array<{ identifier: string; definition: FootnoteDefinition }>>(() => {
-  return footnoteReferenceOrder.value
-    .map(identifier => ({
-      identifier,
-      definition: footnoteDefinitions.value[identifier]
-    }))
-    .filter(item => item.definition !== undefined)
-})
-
-/**
- * 是否有脚注需要显示
- */
-const hasFootnotes = computed(() => orderedFootnotes.value.length > 0)
-</script>
-
-<template>
-  <section v-if="hasFootnotes" class="incremark-footnotes">
-    <hr class="incremark-footnotes-divider" />
-    <ol class="incremark-footnotes-list">
-      <li
-        v-for="(item, index) in orderedFootnotes"
-        :key="item.identifier"
-        :id="`fn-${item.identifier}`"
-        class="incremark-footnote-item"
-      >
-        <div class="incremark-footnote-content">
-          <!-- 脚注序号 -->
-          <span class="incremark-footnote-number">{{ index + 1 }}.</span>
-          
-          <!-- 脚注内容 -->
-          <div class="incremark-footnote-body">
-            <IncremarkRenderer
-              v-for="(child, childIndex) in item.definition.children"
-              :key="childIndex"
-              :node="(child as RootContent)"
-            />
-          </div>
-        </div>
-        
-        <!-- 返回链接 -->
-        <a 
-          :href="`#fnref-${item.identifier}`" 
-          class="incremark-footnote-backref"
-          aria-label="返回引用位置"
-        >
-          ↩
-        </a>
-      </li>
-    </ol>
-  </section>
-</template>
-
-

package/src/components/IncremarkHeading.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { Heading } from 'mdast'
-import { computed } from 'vue'
-import IncremarkInline from './IncremarkInline.vue'
-
-const props = defineProps<{
-  node: Heading
-}>()
-
-const tag = computed(() => `h${props.node.depth}`)
-</script>
-
-<template>
-  <component :is="tag" :class="`incremark-heading h${node.depth}`">
-    <IncremarkInline :nodes="node.children" />
-  </component>
-</template>

package/src/components/IncremarkHtmlElement.vue

@@ -1,127 +0,0 @@
-<script setup lang="ts">
-import type { RootContent, PhrasingContent } from 'mdast'
-import IncremarkInline from './IncremarkInline.vue'
-
-/**
- * HtmlElementNode 类型定义（与 @incremark/core 中的定义一致）
- */
-interface HtmlElementNode {
-  type: 'htmlElement'
-  tagName: string
-  attrs: Record<string, string>
-  children: RootContent[]
-  data?: {
-    rawHtml?: string
-    parsed?: boolean
-    originalType?: string
-  }
-}
-
-defineProps<{
-  node: HtmlElementNode
-}>()
-
-/**
- * 判断是否是行内元素
- */
-function isInlineElement(tagName: string): boolean {
-  const inlineElements = [
-    'a', 'abbr', 'acronym', 'b', 'bdo', 'big', 'br', 'button', 'cite', 
-    'code', 'dfn', 'em', 'i', 'img', 'input', 'kbd', 'label', 'map', 
-    'object', 'output', 'q', 'samp', 'script', 'select', 'small', 
-    'span', 'strong', 'sub', 'sup', 'textarea', 'time', 'tt', 'var'
-  ]
-  return inlineElements.includes(tagName.toLowerCase())
-}
-
-/**
- * 判断是否是自闭合元素
- */
-function isVoidElement(tagName: string): boolean {
-  const voidElements = [
-    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 
-    'link', 'meta', 'param', 'source', 'track', 'wbr'
-  ]
-  return voidElements.includes(tagName.toLowerCase())
-}
-
-/**
- * 判断子节点是否都是行内内容
- */
-function hasOnlyInlineChildren(children: RootContent[]): boolean {
-  if (!children || children.length === 0) return true
-  
-  return children.every(child => {
-    const type = child.type
-    // 常见的行内类型
-    const inlineTypes = ['text', 'strong', 'emphasis', 'inlineCode', 'link', 'image', 'break', 'html', 'htmlElement']
-    if (inlineTypes.includes(type)) {
-      // 如果是 htmlElement，检查是否是行内元素
-      if (type === 'htmlElement') {
-        return isInlineElement((child as unknown as HtmlElementNode).tagName)
-      }
-      return true
-    }
-    return false
-  })
-}
-
-/**
- * 将属性对象转换为 HTML 属性字符串（用于 v-bind）
- */
-function getAttrs(attrs: Record<string, string>): Record<string, string> {
-  // 过滤掉可能有问题的属性
-  const result: Record<string, string> = {}
-  for (const [key, value] of Object.entries(attrs)) {
-    // 跳过事件属性（已在解析时过滤，这里双重保险）
-    if (key.startsWith('on')) continue
-    result[key] = value
-  }
-  return result
-}
-</script>
-
-<template>
-  <component 
-    :is="node.tagName" 
-    v-bind="getAttrs(node.attrs)"
-    :class="['incremark-html-element', `incremark-${node.tagName}`]"
-  >
-    <!-- 自闭合元素没有子节点 -->
-    <template v-if="!isVoidElement(node.tagName)">
-      <!-- 如果子节点都是行内内容，使用 IncremarkInline -->
-      <template v-if="hasOnlyInlineChildren(node.children)">
-        <IncremarkInline :nodes="(node.children as PhrasingContent[])" />
-      </template>
-      
-      <!-- 否则递归渲染每个子节点 -->
-      <template v-else>
-        <template v-for="(child, idx) in node.children" :key="idx">
-          <!-- 如果子节点是 htmlElement，递归 -->
-          <IncremarkHtmlElement 
-            v-if="child.type === 'htmlElement'" 
-            :node="(child as unknown as HtmlElementNode)" 
-          />
-          <!-- 如果是文本节点 -->
-          <template v-else-if="child.type === 'text'">
-            {{ (child as any).value }}
-          </template>
-          <!-- 其他类型尝试用 IncremarkInline -->
-          <IncremarkInline 
-            v-else-if="['strong', 'emphasis', 'inlineCode', 'link', 'image', 'break'].includes(child.type)"
-            :nodes="[child as PhrasingContent]" 
-          />
-          <!-- 段落等块级元素 -->
-          <template v-else-if="child.type === 'paragraph'">
-            <p><IncremarkInline :nodes="((child as any).children as PhrasingContent[])" /></p>
-          </template>
-          <!-- 其他未知类型，显示原始 -->
-          <template v-else>
-            <div class="incremark-unknown-child">{{ child.type }}</div>
-          </template>
-        </template>
-      </template>
-    </template>
-  </component>
-</template>
-

package/src/components/IncremarkInline.vue

@@ -1,187 +0,0 @@
-<script setup lang="ts">
-import type { PhrasingContent, RootContent, ImageReference, LinkReference } from 'mdast'
-import type { TextChunk } from '@incremark/core'
-import {
-  type TextNodeWithChunks,
-  hasChunks,
-  getStableText,
-  isHtmlNode
-} from '@incremark/shared'
-import IncremarkMath from './IncremarkMath.vue'
-import IncremarkHtmlElement from './IncremarkHtmlElement.vue'
-import { useDefinationsContext } from '../composables/useDefinationsContext'
-
-// Math 节点类型
-interface MathNode {
-  type: 'math' | 'inlineMath'
-  value: string
-}
-
-// HtmlElement 节点类型
-interface HtmlElementNode {
-  type: 'htmlElement'
-  tagName: string
-  attrs: Record<string, string>
-  children: RootContent[]
-}
-
-/**
- * 类型守卫：检查是否是 htmlElement 节点
- */
-function isHtmlElementNode(node: PhrasingContent): node is PhrasingContent & HtmlElementNode {
-  return (node as unknown as HtmlElementNode).type === 'htmlElement'
-}
-
-/**
- * 类型守卫：检查是否是 imageReference 节点
- */
-function isImageReference(node: PhrasingContent): node is ImageReference {
-  return node.type === 'imageReference'
-}
-
-/**
- * 类型守卫：检查是否是 linkReference 节点
- */
-function isLinkReference(node: PhrasingContent): node is LinkReference {
-  return node.type === 'linkReference'
-}
-
-const props = defineProps<{
-  nodes: PhrasingContent[]
-}>()
-
-const {
-  definations,
-  footnoteDefinitions
-} = useDefinationsContext()
-
-/**
- * 获取节点的 chunks（类型安全）
- */
-function getChunks(node: PhrasingContent): TextChunk[] | undefined {
-  if (hasChunks(node)) {
-    return (node as TextNodeWithChunks).chunks
-  }
-  return undefined
-}
-
-/**
- * 类型守卫：检查是否是 inlineMath 节点
- * inlineMath 是 mdast-util-math 扩展的类型，不在标准 PhrasingContent 中
- */
-function isInlineMath(node: PhrasingContent): node is PhrasingContent & MathNode {
-  return (node as unknown as MathNode).type === 'inlineMath'
-}
-
-</script>
-
-<template>
-  <template v-for="(node, idx) in nodes" :key="idx">
-    <!-- 文本（支持 chunks 渐入动画） -->
-    <template v-if="node.type === 'text'">
-      <!-- 稳定文本（已经显示过的部分，无动画） -->
-      {{ getStableText(node as TextNodeWithChunks) }}
-      <!-- 新增的 chunk 部分（带渐入动画） -->
-      <span 
-        v-for="chunk in getChunks(node)" 
-        :key="chunk.createdAt"
-        class="incremark-fade-in"
-      >{{ chunk.text }}</span>
-    </template>
-
-    <!-- 行内公式 -->
-    <IncremarkMath v-else-if="isInlineMath(node)" :node="(node as unknown as MathNode)" />
-
-    <!-- htmlElement 节点（结构化的 HTML 元素） -->
-    <IncremarkHtmlElement 
-      v-else-if="isHtmlElementNode(node)" 
-      :node="(node as unknown as HtmlElementNode)" 
-    />
-
-    <!-- HTML 节点（原始 HTML，如未启用 htmlTree 选项） -->
-    <span v-else-if="isHtmlNode(node)" style="display: contents;" v-html="(node as any).value"></span>
-
-    <!-- 加粗 -->
-    <strong v-else-if="node.type === 'strong'">
-      <IncremarkInline :nodes="(node.children as PhrasingContent[])" />
-    </strong>
-
-    <!-- 斜体 -->
-    <em v-else-if="node.type === 'emphasis'">
-      <IncremarkInline :nodes="(node.children as PhrasingContent[])" />
-    </em>
-
-    <!-- 行内代码 -->
-    <code v-else-if="node.type === 'inlineCode'" class="incremark-inline-code">{{ (node as any).value }}</code>
-
-    <!-- 链接 -->
-    <a
-      v-else-if="node.type === 'link'"
-      class="incremark-link"
-      :href="node.url"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <IncremarkInline :nodes="(node.children as PhrasingContent[])" />
-    </a>
-
-    <!-- 图片 -->
-    <img
-      v-else-if="node.type === 'image'"
-      class="incremark-image"
-      :src="node.url"
-      :alt="node.alt || ''"
-      :title="(node as any).title || undefined"
-      loading="lazy"
-    />
-
-    <!-- 引用式图片（imageReference） -->
-    <template v-else-if="isImageReference(node)">
-      <img
-        v-if="definations[node.identifier]"
-        class="incremark-image incremark-reference-image"
-        :src="definations[node.identifier].url"
-        :alt="(node as ImageReference).alt || ''"
-        :title="definations[node.identifier].title || undefined"
-        loading="lazy"
-      />
-      <!-- 如果没有找到定义，渲染为原始文本（降级处理） -->
-      <span v-else class="incremark-image-ref-missing">
-        ![{{ (node as ImageReference).alt }}][{{ (node as ImageReference).identifier || (node as ImageReference).label }}]
-      </span>
-    </template>
-
-    <!-- 引用式链接（linkReference） -->
-    <template v-else-if="isLinkReference(node)">
-      <a
-        v-if="definations[node.identifier]"
-        class="incremark-link incremark-reference-link"
-        :href="definations[node.identifier].url"
-        :title="definations[node.identifier].title || undefined"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <IncremarkInline :nodes="((node as LinkReference).children as PhrasingContent[])" />
-      </a>
-      <!-- 如果没有找到定义，渲染为原始文本（降级处理） -->
-      <span v-else class="incremark-link-ref-missing">
-        [{{ ((node as LinkReference).children as any[]).map((c: any) => c.value).join('') }}][{{ (node as LinkReference).identifier || (node as LinkReference).label }}]
-      </span>
-    </template>
-
-    <!-- 脚注引用（footnoteReference） -->
-    <sup v-else-if="node.type === 'footnoteReference'" class="incremark-footnote-ref">
-      <a :href="`#fn-${(node as any).identifier}`" :id="`fnref-${(node as any).identifier}`">
-        [{{ (node as any).identifier }}]
-      </a>
-    </sup>
-
-    <!-- 换行 -->
-    <br v-else-if="node.type === 'break'" />
-
-    <!-- 删除线 -->
-    <del v-else-if="node.type === 'delete'">
-      <IncremarkInline :nodes="(node.children as PhrasingContent[])" />
-    </del>
-  </template>
-</template>

package/src/components/IncremarkList.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import type { List, ListItem, PhrasingContent } from 'mdast'
-import { computed } from 'vue'
-import IncremarkInline from './IncremarkInline.vue'
-
-const props = defineProps<{
-  node: List
-}>()
-
-const tag = computed(() => props.node.ordered ? 'ol' : 'ul')
-
-function getItemContent(item: ListItem): PhrasingContent[] {
-  const firstChild = item.children[0]
-  if (firstChild?.type === 'paragraph') {
-    return firstChild.children as PhrasingContent[]
-  }
-  return []
-}
-</script>
-
-<template>
-  <component :is="tag" class="incremark-list" :class="{ 'task-list': node.children.some(item => item.checked !== null && item.checked !== undefined) }">
-    <li 
-      v-for="(item, index) in node.children" 
-      :key="index" 
-      class="incremark-list-item"
-      :class="{ 'task-item': item.checked !== null && item.checked !== undefined }"
-    >
-      <label v-if="item.checked !== null && item.checked !== undefined" class="task-label">
-        <input 
-          type="checkbox" 
-          :checked="item.checked" 
-          disabled 
-          class="checkbox"
-        />
-        <span class="task-content">
-          <IncremarkInline :nodes="getItemContent(item)" />
-        </span>
-      </label>
-      <template v-else>
-        <IncremarkInline :nodes="getItemContent(item)" />
-      </template>
-    </li>
-  </component>
-</template>
-

package/src/components/IncremarkMath.vue

@@ -1,105 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch, shallowRef, onUnmounted } from 'vue'
-
-// Math 节点类型（来自 mdast-util-math）
-interface MathNode {
-  type: 'math' | 'inlineMath'
-  value: string
-  data?: {
-    hName?: string
-    hProperties?: Record<string, any>
-  }
-}
-
-const props = withDefaults(
-  defineProps<{
-    node: MathNode
-    /** 渲染延迟（毫秒），用于流式输入时防抖 */
-    renderDelay?: number
-  }>(),
-  {
-    renderDelay: 300
-  }
-)
-
-const renderedHtml = ref('')
-const renderError = ref('')
-const isLoading = ref(false)
-const katexRef = shallowRef<any>(null)
-let renderTimer: ReturnType<typeof setTimeout> | null = null
-
-const isInline = computed(() => props.node.type === 'inlineMath')
-const formula = computed(() => props.node.value)
-
-// 带防抖动的渲染
-function scheduleRender() {
-  if (!formula.value) {
-    renderedHtml.value = ''
-    return
-  }
-
-  // 清除之前的定时器
-  if (renderTimer) {
-    clearTimeout(renderTimer)
-  }
-
-  isLoading.value = true
-
-  // 防抖动延迟渲染
-  renderTimer = setTimeout(() => {
-    doRender()
-  }, props.renderDelay)
-}
-
-async function doRender() {
-  if (!formula.value) return
-
-  try {
-    // 动态导入 KaTeX
-    if (!katexRef.value) {
-      // @ts-ignore - katex 是可选依赖
-      const katexModule = await import('katex')
-      katexRef.value = katexModule.default
-    }
-
-    const katex = katexRef.value
-    renderedHtml.value = katex.renderToString(formula.value, {
-      displayMode: !isInline.value,
-      throwOnError: false,
-      strict: false
-    })
-    renderError.value = ''
-  } catch (e: any) {
-    // 静默失败，可能是公式不完整
-    renderError.value = ''
-    renderedHtml.value = ''
-  } finally {
-    isLoading.value = false
-  }
-}
-
-onUnmounted(() => {
-  if (renderTimer) {
-    clearTimeout(renderTimer)
-  }
-})
-
-watch(formula, scheduleRender, { immediate: true })
-</script>
-
-<template>
-  <!-- 行内公式 -->
-  <span v-if="isInline" class="incremark-math-inline">
-    <!-- 渲染成功 -->
-    <span v-if="renderedHtml && !isLoading" v-html="renderedHtml" />
-    <!-- 加载中或未渲染：显示源码 -->
-    <code v-else class="math-source">{{ formula }}</code>
-  </span>
-  <!-- 块级公式 -->
-  <div v-else class="incremark-math-block">
-    <!-- 渲染成功 -->
-    <div v-if="renderedHtml && !isLoading" v-html="renderedHtml" class="math-rendered" />
-    <!-- 加载中或未渲染：显示源码 -->
-    <pre v-else class="math-source-block"><code>{{ formula }}</code></pre>
-  </div>
-</template>

package/src/components/IncremarkParagraph.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { Paragraph } from 'mdast'
-import IncremarkInline from './IncremarkInline.vue'
-
-defineProps<{
-  node: Paragraph
-}>()
-</script>
-
-<template>
-  <p class="incremark-paragraph">
-    <IncremarkInline :nodes="node.children" />
-  </p>
-</template>

package/src/components/IncremarkRenderer.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import type { RootContent, HTML } from 'mdast'
-import type { Component } from 'vue'
-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'
-
-const props = defineProps<{
-  node: RootContent
-}>()
-
-const componentMap: Record<string, Component> = {
-  heading: IncremarkHeading,
-  paragraph: IncremarkParagraph,
-  code: IncremarkCode,
-  list: IncremarkList,
-  table: IncremarkTable,
-  blockquote: IncremarkBlockquote,
-  thematicBreak: IncremarkThematicBreak,
-  math: IncremarkMath,
-  inlineMath: IncremarkMath,
-  htmlElement: IncremarkHtmlElement,
-}
-
-function getComponent(type: string): Component {
-  return componentMap[type] || IncremarkDefault
-}
-
-/**
- * 检查是否是 html 节点
- */
-function isHtmlNode(node: RootContent): node is HTML {
-  return node.type === 'html'
-}
-</script>
-
-<template>
-  <!-- HTML 节点：渲染为代码块显示源代码 -->
-  <pre v-if="isHtmlNode(node)" class="incremark-html-code"><code>{{ (node as HTML).value }}</code></pre>
-  <!-- 其他节点：使用对应组件 -->
-  <component v-else :is="getComponent(node.type)" :node="node" />
-</template>
-

package/src/components/IncremarkTable.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import type { Table, TableCell, PhrasingContent } from 'mdast'
-import IncremarkInline from './IncremarkInline.vue'
-
-defineProps<{
-  node: Table
-}>()
-
-function getCellContent(cell: TableCell): PhrasingContent[] {
-  return cell.children as PhrasingContent[]
-}
-</script>
-
-<template>
-  <div class="incremark-table-wrapper">
-    <table class="incremark-table">
-      <thead>
-        <tr v-if="node.children[0]">
-          <th 
-            v-for="(cell, cellIndex) in node.children[0].children" 
-            :key="cellIndex"
-            :style="{ textAlign: node.align?.[cellIndex] || 'left' }"
-          >
-            <IncremarkInline :nodes="getCellContent(cell)" />
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(row, rowIndex) in node.children.slice(1)" :key="rowIndex">
-          <td 
-            v-for="(cell, cellIndex) in row.children" 
-            :key="cellIndex"
-            :style="{ textAlign: node.align?.[cellIndex] || 'left' }"
-          >
-            <IncremarkInline :nodes="getCellContent(cell)" />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-

package/src/components/IncremarkThematicBreak.vue

@@ -1,8 +0,0 @@
-<script setup lang="ts">
-// ThematicBreak 不需要 props
-</script>
-
-<template>
-  <hr class="incremark-hr" />
-</template>
-

package/src/composables/index.ts

@@ -1,11 +0,0 @@
-export { useIncremark } from './useIncremark'
-export type { UseIncremarkOptions, TypewriterOptions, TypewriterControls } from './useIncremark'
-
-export { useStreamRenderer } from './useStreamRenderer'
-export type { UseStreamRendererOptions } from './useStreamRenderer'
-
-export { useDevTools } from './useDevTools'
-export type { UseDevToolsOptions } from './useDevTools'
-
-export { useBlockTransformer } from './useBlockTransformer'
-export type { UseBlockTransformerOptions, UseBlockTransformerReturn } from './useBlockTransformer'