@jvs-milkdown/crepe 1.2.13 → 1.2.15

package/src/feature/inline-diff/change-panel.ts

@@ -0,0 +1,280 @@
+import { createApp, h, ref, computed, type App as VueApp } from 'vue'
+
+import type { ChangeInfo, ChangeType } from './doc-builder'
+
+type FilterTab = 'all' | ChangeType
+
+const typeLabels: Record<ChangeType, string> = {
+  added: '新增',
+  removed: '删除',
+}
+
+const typeColors: Record<ChangeType, string> = {
+  added: '#4caf50',
+  removed: '#c0392b',
+}
+export function mountChangePanel(
+  container: HTMLElement,
+  changes: ChangeInfo[],
+  onNavigate: (from: number) => void,
+  onClose?: () => void
+): VueApp {
+  const app = createApp({
+    setup() {
+      const activeTab = ref<FilterTab>('all')
+
+      const filteredChanges = computed(() => {
+        if (activeTab.value === 'all') return changes
+        return changes.filter((c) => c.type === activeTab.value)
+      })
+
+      const counts = computed(() => ({
+        all: changes.length,
+        removed: changes.filter((c) => c.type === 'removed').length,
+        added: changes.filter((c) => c.type === 'added').length,
+      }))
+
+      function renderTab(tab: FilterTab, label: string) {
+        const isActive = activeTab.value === tab
+        return h(
+          'button',
+          {
+            style: {
+              padding: '6px 10px',
+              border: 'none',
+              background: 'none',
+              cursor: 'pointer',
+              fontSize: '12px',
+              color: isActive ? '#1890ff' : '#666',
+              borderBottom: isActive
+                ? '2px solid #1890ff'
+                : '2px solid transparent',
+            },
+            onClick: () => {
+              activeTab.value = tab
+            },
+          },
+          label
+        )
+      }
+
+      function renderItem(change: ChangeInfo, index: number) {
+        const color = typeColors[change.type]
+        const children: ReturnType<typeof h>[] = [
+          h('div', { style: { marginBottom: '4px' } }, [
+            h(
+              'span',
+              {
+                style: {
+                  display: 'inline-block',
+                  padding: '1px 6px',
+                  borderRadius: '3px',
+                  color: '#fff',
+                  fontSize: '11px',
+                  fontWeight: '500',
+                  backgroundColor: color,
+                },
+              },
+              `${index} ${typeLabels[change.type]}`
+            ),
+          ]),
+        ]
+
+        if (change.oldText) {
+          children.push(
+            h(
+              'div',
+              {
+                style: {
+                  marginTop: '3px',
+                  fontSize: '12px',
+                  lineHeight: '1.5',
+                  color: '#555',
+                  wordBreak: 'break-all',
+                },
+              },
+              [
+                h(
+                  'span',
+                  { style: { color: '#999', fontSize: '11px' } },
+                  '原文: '
+                ),
+                h('span', null, change.oldText),
+              ]
+            )
+          )
+        }
+        if (change.newText) {
+          children.push(
+            h(
+              'div',
+              {
+                style: {
+                  marginTop: '3px',
+                  fontSize: '12px',
+                  lineHeight: '1.5',
+                  wordBreak: 'break-all',
+                },
+              },
+              [
+                h(
+                  'span',
+                  { style: { color: '#999', fontSize: '11px' } },
+                  '差异: '
+                ),
+                h('span', { style: { color } }, change.newText),
+              ]
+            )
+          )
+        }
+
+        return h(
+          'div',
+          {
+            style: {
+              padding: '8px 10px',
+              borderRadius: '4px',
+              marginBottom: '6px',
+              background: 'rgba(0,0,0,0.02)',
+              border: '1px solid #eee',
+              cursor: change.from > 0 ? 'pointer' : 'default',
+            },
+            onClick: () => {
+              if (change.from > 0) onNavigate(change.from)
+            },
+          },
+          children
+        )
+      }
+
+      return () =>
+        h(
+          'div',
+          {
+            style: {
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+              backgroundColor: 'var(--crepe-color-surface, #fff)',
+              boxSizing: 'border-box',
+              fontFamily:
+                '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+              fontSize: '13px',
+              color: 'var(--crepe-color-on-surface, #333)',
+              overflow: 'hidden',
+            },
+          },
+          [
+            // Header
+            h(
+              'div',
+              {
+                style: {
+                  padding: '12px 16px',
+                  fontSize: '14px',
+                  fontWeight: 'bold',
+                  borderBottom:
+                    '1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline, #ddd), transparent 80%))',
+                  color: 'var(--crepe-color-on-surface, #333)',
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  flexShrink: 0,
+                },
+              },
+              [
+                h('span', null, '文档差异变更'),
+                onClose
+                  ? h(
+                      'div',
+                      {
+                        style: {
+                          cursor: 'pointer',
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          width: '24px',
+                          height: '24px',
+                          borderRadius: '4px',
+                          color: 'var(--crepe-color-outline, #999)',
+                          transition: 'background-color 0.2s, color 0.2s',
+                        },
+                        onClick: onClose,
+                        onMouseenter: (e: MouseEvent) => {
+                          const target = e.currentTarget as HTMLElement
+                          target.style.backgroundColor =
+                            'var(--crepe-color-hover, rgba(0,0,0,0.05))'
+                          target.style.color =
+                            'var(--crepe-color-on-surface, #333)'
+                        },
+                        onMouseleave: (e: MouseEvent) => {
+                          const target = e.currentTarget as HTMLElement
+                          target.style.backgroundColor = 'transparent'
+                          target.style.color =
+                            'var(--crepe-color-outline, #999)'
+                        },
+                        title: '关闭差异',
+                      },
+                      [
+                        h(
+                          'svg',
+                          {
+                            width: '16',
+                            height: '16',
+                            viewBox: '0 0 24 24',
+                            fill: 'none',
+                            stroke: 'currentColor',
+                            strokeWidth: '2',
+                            strokeLinecap: 'round',
+                            strokeLinejoin: 'round',
+                          },
+                          [
+                            h('line', { x1: '18', y1: '6', x2: '6', y2: '18' }),
+                            h('line', { x1: '6', y1: '6', x2: '18', y2: '18' }),
+                          ]
+                        ),
+                      ]
+                    )
+                  : null,
+              ]
+            ),
+            // Tabs
+            h(
+              'div',
+              {
+                style: {
+                  display: 'flex',
+                  borderBottom: '1px solid #eee',
+                  padding: '0 8px',
+                  flexShrink: 0,
+                },
+              },
+              [
+                renderTab('all', `全部(${counts.value.all})`),
+                renderTab('removed', `删除(${counts.value.removed})`),
+                renderTab('added', `新增(${counts.value.added})`),
+              ]
+            ),
+            // List
+            h(
+              'div',
+              {
+                style: {
+                  flex: 1,
+                  overflowY: 'auto',
+                  padding: '8px',
+                },
+              },
+              filteredChanges.value.map((change, i) =>
+                renderItem(change, i + 1)
+              )
+            ),
+          ]
+        )
+    },
+  })
+
+  app.mount(container)
+  return app
+}

package/src/feature/inline-diff/config.ts

@@ -0,0 +1,28 @@
+import { $ctx } from '@jvs-milkdown/kit/utils'
+
+export interface InlineDiffConfig {
+  addedClass: string
+  deletedClass: string
+}
+
+export interface InlineDiffApi {
+  showDiff: (oldMarkdown: string, newMarkdown?: string) => void
+  hideDiff: () => void
+  isShowing: () => boolean
+}
+
+export const inlineDiffConfig = $ctx(
+  {
+    addedClass: 'crepe-diff-added',
+    deletedClass: 'crepe-diff-deleted',
+  } as InlineDiffConfig,
+  'inlineDiffConfigCtx'
+)
+
+const noopApi: InlineDiffApi = {
+  showDiff: () => {},
+  hideDiff: () => {},
+  isShowing: () => false,
+}
+
+export const inlineDiffApiCtx = $ctx(noopApi, 'inlineDiffApiCtx')

package/src/feature/inline-diff/diff-engine.ts

@@ -0,0 +1,181 @@
+import type { Node as PMNode } from '@jvs-milkdown/kit/prose/model'
+
+import * as Diff from 'diff'
+
+export type DiffType = 'unchanged' | 'added' | 'removed'
+
+export interface CharPart {
+  type: 'equal' | 'insert' | 'delete'
+  value: string
+}
+
+export interface BlockDiff {
+  type: DiffType
+  oldNode?: PMNode
+  newNode?: PMNode
+  parts?: CharPart[]
+}
+
+export type ChunkStatus = 'pending' | 'accepted' | 'rejected'
+
+export interface DiffChunk {
+  id: string
+  diffs: BlockDiff[]
+  status: ChunkStatus
+}
+
+function lcs<T>(
+  a: T[],
+  b: T[],
+  eq: (x: T, y: T) => boolean
+): [number, number][] {
+  const m = a.length
+  const n = b.length
+  const dp: number[][] = Array.from({ length: m + 1 }, () =>
+    Array.from({ length: n + 1 }, () => 0)
+  )
+
+  for (let i = m - 1; i >= 0; i--) {
+    for (let j = n - 1; j >= 0; j--) {
+      const diag = dp[i + 1]?.[j + 1] ?? 0
+      const down = dp[i + 1]?.[j] ?? 0
+      const right = dp[i]?.[j + 1] ?? 0
+      dp[i]![j] = eq(a[i]!, b[j]!) ? 1 + diag : Math.max(down, right)
+    }
+  }
+
+  const pairs: [number, number][] = []
+  let i = 0
+  let j = 0
+  while (i < m && j < n) {
+    const down = dp[i + 1]?.[j] ?? 0
+    const right = dp[i]?.[j + 1] ?? 0
+    if (eq(a[i]!, b[j]!)) {
+      pairs.push([i, j])
+      i++
+      j++
+    } else if (down >= right) {
+      i++
+    } else {
+      j++
+    }
+  }
+  return pairs
+}
+
+export function computeDiff(
+  oldBlocks: PMNode[],
+  newBlocks: PMNode[]
+): DiffChunk[] {
+  const result: DiffChunk[] = []
+  let chunkCounter = 0
+
+  const pushChunk = (diffs: BlockDiff[]) => {
+    if (diffs.length > 0) {
+      result.push({
+        id: `chunk-${chunkCounter++}`,
+        diffs,
+        status: 'pending',
+      })
+    }
+  }
+
+  const pairs = lcs(
+    oldBlocks,
+    newBlocks,
+    (a, b) => a.textContent === b.textContent
+  )
+
+  let oi = 0
+  let ni = 0
+
+  for (const [pi, pj] of pairs) {
+    // Pair up unmatched blocks in the gap before this LCS match
+    const gapOld = pi - oi
+    const gapNew = pj - ni
+    const gapMax = Math.max(gapOld, gapNew)
+
+    for (let k = 0; k < gapMax; k++) {
+      const hasOld = oi + k < pi
+      const hasNew = ni + k < pj
+      const currentDiffs: BlockDiff[] = []
+
+      if (hasOld && hasNew) {
+        const oldNode = oldBlocks[oi + k]!
+        const newNode = newBlocks[ni + k]!
+        const changes = Diff.diffWordsWithSpace(
+          oldNode.textContent,
+          newNode.textContent
+        )
+        const parts: CharPart[] = changes.map((c) => ({
+          type: c.added ? 'insert' : c.removed ? 'delete' : 'equal',
+          value: c.value,
+        }))
+        currentDiffs.push({ type: 'removed', oldNode, parts })
+        currentDiffs.push({ type: 'added', newNode, parts })
+      } else if (hasOld) {
+        currentDiffs.push({ type: 'removed', oldNode: oldBlocks[oi + k]! })
+      } else {
+        currentDiffs.push({ type: 'added', newNode: newBlocks[ni + k]! })
+      }
+      pushChunk(currentDiffs)
+    }
+
+    // LCS match itself
+    const oldNode = oldBlocks[pi]!
+    const newNode = newBlocks[pj]!
+
+    if (oldNode.textContent === newNode.textContent && oldNode.eq(newNode)) {
+      pushChunk([{ type: 'unchanged', oldNode, newNode }])
+    } else {
+      const changes = Diff.diffWordsWithSpace(
+        oldNode.textContent,
+        newNode.textContent
+      )
+      const parts: CharPart[] = changes.map((c) => ({
+        type: c.added ? 'insert' : c.removed ? 'delete' : 'equal',
+        value: c.value,
+      }))
+      pushChunk([
+        { type: 'removed', oldNode, parts },
+        { type: 'added', newNode, parts },
+      ])
+    }
+
+    oi = pi + 1
+    ni = pj + 1
+  }
+
+  // Trailing gap
+  const trailOld = oldBlocks.length - oi
+  const trailNew = newBlocks.length - ni
+  const trailMax = Math.max(trailOld, trailNew)
+
+  for (let k = 0; k < trailMax; k++) {
+    const hasOld = oi + k < oldBlocks.length
+    const hasNew = ni + k < newBlocks.length
+    const currentDiffs: BlockDiff[] = []
+
+    if (hasOld && hasNew) {
+      const oldNode = oldBlocks[oi + k]!
+      const newNode = newBlocks[ni + k]!
+      const changes = Diff.diffWordsWithSpace(
+        oldNode.textContent,
+        newNode.textContent
+      )
+      const parts: CharPart[] = changes.map((c) => ({
+        type: c.added ? 'insert' : c.removed ? 'delete' : 'equal',
+        value: c.value,
+      }))
+      currentDiffs.push({ type: 'removed', oldNode, parts })
+      currentDiffs.push({ type: 'added', newNode, parts })
+    } else if (hasOld) {
+      currentDiffs.push({ type: 'removed', oldNode: oldBlocks[oi + k]! })
+    } else {
+      currentDiffs.push({ type: 'added', newNode: newBlocks[ni + k]! })
+    }
+    pushChunk(currentDiffs)
+  }
+
+  return result
+}

package/src/feature/inline-diff/diff-view.ts

@@ -0,0 +1,2 @@
+// Diff view logic is now in index.ts as InlineDiffView class
+export {}

package/src/feature/inline-diff/doc-builder.ts

@@ -0,0 +1,139 @@
+import type { Schema, Node as PMNode } from '@jvs-milkdown/kit/prose/model'
+
+import type { DiffChunk, CharPart } from './diff-engine'
+
+export type ChangeType = 'added' | 'removed'
+
+export interface ContentRange {
+  from: number
+  to: number
+}
+
+export interface ChangeInfo {
+  type: ChangeType
+  from: number
+  oldText: string
+  newText: string
+  blockRange: ContentRange
+  inlineRanges: ContentRange[]
+  chunkId: string
+}
+
+interface PendingChange {
+  type: ChangeType
+  childIndex: number
+  oldText: string
+  newText: string
+  parts?: CharPart[]
+  chunkId: string
+}
+
+export function buildNewDoc(
+  chunks: DiffChunk[],
+  schema: Schema
+): { doc: PMNode; changes: ChangeInfo[] } {
+  const children: PMNode[] = []
+  const pending: PendingChange[] = []
+
+  for (const chunk of chunks) {
+    if (chunk.status === 'accepted') {
+      for (const diff of chunk.diffs) {
+        if (diff.type === 'added') children.push(diff.newNode!)
+        if (diff.type === 'unchanged') children.push(diff.newNode!)
+      }
+    } else if (chunk.status === 'rejected') {
+      for (const diff of chunk.diffs) {
+        if (diff.type === 'removed') children.push(diff.oldNode!)
+        if (diff.type === 'unchanged') children.push(diff.oldNode!)
+      }
+    } else {
+      // pending
+      for (const diff of chunk.diffs) {
+        if (diff.type === 'unchanged') {
+          children.push(diff.newNode!)
+        } else if (diff.type === 'added') {
+          pending.push({
+            type: 'added',
+            childIndex: children.length,
+            oldText: '',
+            newText: diff.newNode?.textContent ?? '',
+            parts: diff.parts,
+            chunkId: chunk.id,
+          })
+          children.push(diff.newNode!)
+        } else if (diff.type === 'removed') {
+          pending.push({
+            type: 'removed',
+            childIndex: children.length,
+            oldText: diff.oldNode?.textContent ?? '',
+            newText: '',
+            parts: diff.parts,
+            chunkId: chunk.id,
+          })
+          children.push(diff.oldNode!)
+        }
+      }
+    }
+  }
+
+  if (children.length === 0) {
+    children.push(schema.node('paragraph', null, []))
+  }
+
+  const doc = schema.node('doc', null, children)
+
+  let pos = 0
+  const positions: ContentRange[] = []
+  for (const child of children) {
+    positions.push({ from: pos, to: pos + child.nodeSize })
+    pos += child.nodeSize
+  }
+
+  const changes: ChangeInfo[] = pending.map((pc) => {
+    const cp = positions[pc.childIndex]!
+
+    const inlineRanges: ContentRange[] = []
+    let offset = cp.from + 1
+
+    if (pc.type === 'removed') {
+      for (const part of pc.parts ?? []) {
+        if (part.type === 'delete') {
+          inlineRanges.push({ from: offset, to: offset + part.value.length })
+          offset += part.value.length
+        } else if (part.type === 'equal') {
+          offset += part.value.length
+        }
+      }
+      return {
+        type: 'removed',
+        from: cp.from,
+        oldText: pc.oldText,
+        newText: '',
+        blockRange: { from: cp.from, to: cp.to },
+        inlineRanges,
+        chunkId: pc.chunkId,
+      }
+    }
+
+    // pc.type === 'added'
+    for (const part of pc.parts ?? []) {
+      if (part.type === 'insert') {
+        inlineRanges.push({ from: offset, to: offset + part.value.length })
+        offset += part.value.length
+      } else if (part.type === 'equal') {
+        offset += part.value.length
+      }
+    }
+    return {
+      type: 'added',
+      from: cp.from,
+      oldText: '',
+      newText: pc.newText,
+      blockRange: { from: cp.from, to: cp.to },
+      inlineRanges,
+      chunkId: pc.chunkId,
+    }
+  })
+
+  return { doc, changes }
+}