@incremark/vue 0.1.0 → 0.2.0

package/src/components/IncremarkInline.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import type { PhrasingContent, Text, HTML } from 'mdast'
+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'
-
-// 扩展的文本节点类型（支持 chunks）
-interface TextNodeWithChunks extends Text {
-  stableLength?: number
-  chunks?: TextChunk[]
-}
+import IncremarkHtmlElement from './IncremarkHtmlElement.vue'
+import { useDefinationsContext } from '../composables/useDefinationsContext'
 
 // Math 节点类型
 interface MathNode {
@@ -15,44 +17,54 @@ interface MathNode {
   value: string
 }
 
-defineProps<{
-  nodes: PhrasingContent[]
-}>()
+// HtmlElement 节点类型
+interface HtmlElementNode {
+  type: 'htmlElement'
+  tagName: string
+  attrs: Record<string, string>
+  children: RootContent[]
+}
 
 /**
- * 获取文本节点的稳定部分（不需要动画）
+ * 类型守卫：检查是否是 htmlElement 节点
  */
-function getStableText(node: TextNodeWithChunks): string {
-  if (!node.chunks || node.chunks.length === 0) {
-    return node.value
-  }
-  return node.value.slice(0, node.stableLength ?? 0)
+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'
 }
 
 /**
- * 类型守卫：检查是否是带 chunks 的文本节点
+ * 类型守卫：检查是否是 linkReference 节点
  */
-function hasChunks(node: PhrasingContent): node is TextNodeWithChunks {
-  return node.type === 'text' && 'chunks' in node && Array.isArray((node as TextNodeWithChunks).chunks)
+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.chunks
+    return (node as TextNodeWithChunks).chunks
   }
   return undefined
 }
 
-/**
- * 类型守卫：检查是否是 HTML 节点
- */
-function isHtmlNode(node: PhrasingContent): node is HTML {
-  return node.type === 'html'
-}
-
 /**
  * 类型守卫：检查是否是 inlineMath 节点
  * inlineMath 是 mdast-util-math 扩展的类型，不在标准 PhrasingContent 中
@@ -60,6 +72,7 @@ function isHtmlNode(node: PhrasingContent): node is HTML {
 function isInlineMath(node: PhrasingContent): node is PhrasingContent & MathNode {
   return (node as unknown as MathNode).type === 'inlineMath'
 }
+
 </script>
 
 <template>
@@ -79,6 +92,15 @@ function isInlineMath(node: PhrasingContent): node is PhrasingContent & MathNode
     <!-- 行内公式 -->
     <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[])" />
@@ -90,14 +112,15 @@ function isInlineMath(node: PhrasingContent): node is PhrasingContent & MathNode
     </em>
 
     <!-- 行内代码 -->
-    <code v-else-if="node.type === 'inlineCode'" class="incremark-inline-code">{{ node.value }}</code>
+    <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"
+      rel="noopener noreferrer"
     >
       <IncremarkInline :nodes="(node.children as PhrasingContent[])" />
     </a>
@@ -105,11 +128,54 @@ function isInlineMath(node: PhrasingContent): node is PhrasingContent & MathNode
     <!-- 图片 -->
     <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'" />
 
@@ -117,32 +183,5 @@ function isInlineMath(node: PhrasingContent): node is PhrasingContent & MathNode
     <del v-else-if="node.type === 'delete'">
       <IncremarkInline :nodes="(node.children as PhrasingContent[])" />
     </del>
-
-    <!-- 原始 HTML -->
-    <span v-else-if="isHtmlNode(node)" v-html="node.value"></span>
   </template>
 </template>
-
-<style>
-.incremark-inline-code {
-  padding: 0.2em 0.4em;
-  background: rgba(0, 0, 0, 0.06);
-  border-radius: 4px;
-  font-family: 'Fira Code', 'SF Mono', Consolas, monospace;
-  font-size: 0.9em;
-}
-
-/* 渐入动画 */
-.incremark-fade-in {
-  animation: incremark-fade-in 0.4s ease-out;
-}
-
-@keyframes incremark-fade-in {
-  from { 
-    opacity: 0; 
-  }
-  to { 
-    opacity: 1; 
-  }
-}
-</style>

package/src/components/IncremarkList.vue

@@ -44,40 +44,3 @@ function getItemContent(item: ListItem): PhrasingContent[] {
   </component>
 </template>
 
-<style scoped>
-.incremark-list {
-  margin: 0.75em 0;
-  padding-left: 2em;
-}
-
-.incremark-list.task-list {
-  list-style: none;
-  padding-left: 0;
-}
-
-.incremark-list-item {
-  margin: 0.25em 0;
-  line-height: 1.6;
-}
-
-.task-item {
-  list-style: none;
-}
-
-.task-label {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.5em;
-  cursor: default;
-}
-
-.checkbox {
-  margin-top: 0.3em;
-  flex-shrink: 0;
-}
-
-.task-content {
-  flex: 1;
-}
-</style>
-

package/src/components/IncremarkMath.vue

@@ -103,48 +103,3 @@ watch(formula, scheduleRender, { immediate: true })
     <pre v-else class="math-source-block"><code>{{ formula }}</code></pre>
   </div>
 </template>
-
-<style scoped>
-.incremark-math-inline {
-  display: inline;
-}
-
-.incremark-math-block {
-  margin: 1em 0;
-  padding: 1em;
-  overflow-x: auto;
-  text-align: center;
-}
-
-.math-source {
-  background: #f3f4f6;
-  padding: 0.1em 0.3em;
-  border-radius: 3px;
-  font-size: 0.9em;
-  color: #6b7280;
-}
-
-.math-source-block {
-  margin: 0;
-  padding: 1em;
-  background: #f3f4f6;
-  border-radius: 6px;
-  text-align: left;
-}
-
-.math-source-block code {
-  font-family: 'Fira Code', monospace;
-  font-size: 0.9em;
-  color: #374151;
-}
-
-.math-rendered :deep(.katex) {
-  font-size: 1.1em;
-}
-
-.math-rendered :deep(.katex-display) {
-  margin: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-</style>

package/src/components/IncremarkParagraph.vue

@@ -12,10 +12,3 @@ defineProps<{
     <IncremarkInline :nodes="node.children" />
   </p>
 </template>
-
-<style scoped>
-.incremark-paragraph {
-  margin: 0.75em 0;
-  line-height: 1.6;
-}
-</style>

package/src/components/IncremarkRenderer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { RootContent } from 'mdast'
+import type { RootContent, HTML } from 'mdast'
 import type { Component } from 'vue'
 import IncremarkHeading from './IncremarkHeading.vue'
 import IncremarkParagraph from './IncremarkParagraph.vue'
@@ -9,9 +9,10 @@ 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'
 
-defineProps<{
+const props = defineProps<{
   node: RootContent
 }>()
 
@@ -25,14 +26,25 @@ const componentMap: Record<string, Component> = {
   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>
-  <component :is="getComponent(node.type)" :node="node" />
+  <!-- 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

@@ -40,35 +40,3 @@ function getCellContent(cell: TableCell): PhrasingContent[] {
   </div>
 </template>
 
-<style scoped>
-.incremark-table-wrapper {
-  overflow-x: auto;
-  margin: 1em 0;
-}
-
-.incremark-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 14px;
-}
-
-.incremark-table th,
-.incremark-table td {
-  border: 1px solid #ddd;
-  padding: 10px 14px;
-}
-
-.incremark-table th {
-  background: #f8f9fa;
-  font-weight: 600;
-}
-
-.incremark-table tr:nth-child(even) {
-  background: #fafafa;
-}
-
-.incremark-table tr:hover {
-  background: #f0f0f0;
-}
-</style>
-

package/src/components/IncremarkThematicBreak.vue

@@ -6,11 +6,3 @@
   <hr class="incremark-hr" />
 </template>
 
-<style scoped>
-.incremark-hr {
-  margin: 2em 0;
-  border: none;
-  border-top: 2px solid #e5e5e5;
-}
-</style>
-

package/src/components/index.ts

@@ -15,7 +15,9 @@ export { default as IncremarkBlockquote } from './IncremarkBlockquote.vue'
 export { default as IncremarkThematicBreak } from './IncremarkThematicBreak.vue'
 export { default as IncremarkInline } from './IncremarkInline.vue'
 export { default as IncremarkMath } from './IncremarkMath.vue'
+export { default as IncremarkHtmlElement } from './IncremarkHtmlElement.vue'
 export { default as IncremarkDefault } from './IncremarkDefault.vue'
+export { default as IncremarkFootnotes } from './IncremarkFootnotes.vue'
 
 // 工具组件
 export { default as AutoScrollContainer } from './AutoScrollContainer.vue'

package/src/composables/useDefinationsContext.ts

@@ -0,0 +1,16 @@
+import { inject } from 'vue'
+import { definationsInjectionKey } from './useProvideDefinations'
+
+/**
+ * support definations and footnoteDefinitions
+ * @returns 
+ */
+export function useDefinationsContext() {
+  const definationContext = inject(definationsInjectionKey);
+
+  if (!definationContext) {
+    throw new Error('definationContext not found');
+  }
+
+  return definationContext;
+}