@jvs-milkdown/crepe 1.2.12 → 1.2.14

package/src/feature/fixed-toolbar/menu-bar.tsx

@@ -2,12 +2,16 @@ import type { Ctx } from '@jvs-milkdown/kit/ctx'
 
 import { Icon } from '@jvs-milkdown/kit/component'
 // @ts-ignore
-import { defineComponent, ref, onUnmounted, computed, onMounted, h } from 'vue'
+import { defineComponent, ref, onUnmounted, computed, onMounted, h, watch } from 'vue'
 
 import type { FixedToolbarConfig } from './index'
 
 import { i18n } from '../../core/locale'
 import { menuIcon } from '../../icons'
+import {
+  incrementPopupCount,
+  decrementPopupCount,
+} from '../../utils/fixed-toolbar-popup-state'
 import { randomCover } from './cover-defaults'
 import { viewMenuStateCtx, type EditorWidth } from './view-menu-state'
 
@@ -116,12 +120,19 @@ export const MenuBar = defineComponent({
     onUnmounted(() => {
       document.removeEventListener('click', closeMenu)
       if (rafId) cancelAnimationFrame(rafId)
+      if (showMenu.value) decrementPopupCount()
+    })
+
+    // Notify floating toolbar when the menu popup opens/closes
+    watch(showMenu, (val) => {
+      if (val) incrementPopupCount()
+      else decrementPopupCount()
     })
 
     const viewState = computed(() => props.ctx.get(viewMenuStateCtx.key))
 
     const bgColors = [
-      { name: '默认', value: null },
+      { name: '白色', value: '#FFFFFF' },
       { name: '浅灰', value: '#F7F7F5' },
       { name: '浅棕', value: '#F4EEDB' },
       { name: '浅橙', value: '#FBECDD' },

package/src/feature/fixed-toolbar/outline-panel.tsx

@@ -283,11 +283,12 @@ export const OutlinePanel = defineComponent({
           {/* Header */}
           <div
             style={{
-              padding: '20px 16px',
+              padding: '12px 16px',
               fontWeight: 'bold',
               fontSize: '14px',
               color: 'var(--crepe-color-on-surface)',
-              borderBottom: '1px solid var(--crepe-color-outline-variant)',
+              borderBottom:
+                '1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline, #ddd), transparent 80%))',
               display: 'flex',
               justifyContent: 'space-between',
               alignItems: 'center',

package/src/feature/fixed-toolbar/shortcut-help-modal.tsx

@@ -65,7 +65,7 @@ const rightGroups: ShortcutGroup[] = [
     titleKey: 'shortcuts.history',
     items: [
       { labelKey: 'shortcuts.undo', keys: ['Mod+z'] },
-      { labelKey: 'shortcuts.redo', keys: ['Mod+y', 'Shift+Mod+z'] },
+      { labelKey: 'shortcuts.redo', keys: ['Mod+y', 'Shift+Mod+Z'] },
     ],
   },
 ]

package/src/feature/fixed-toolbar/view-menu-state.ts

@@ -26,7 +26,7 @@ export const createViewMenuState = () =>
     outlineVisible: false,
     outlinePosition: 'left',
     outlineWidth: 250,
-    documentBackground: null,
+    documentBackground: '#FFFFFF',
     showTitle: false,
     showCover: false,
     coverUrl: '',

package/src/feature/image-block/index.ts

@@ -178,7 +178,7 @@ const imageBlockConverter = $prose((ctx) => {
         tr.replaceWith(r.from, r.to, r.blocks)
       }
 
-      return tr
+      return tr.setMeta('addToHistory', false)
     },
   })
 })

package/src/feature/index.ts

@@ -2,8 +2,10 @@ import type { AttachmentFeatureConfig } from './attachment/config'
 import type { BlockEditFeatureConfig } from './block-edit'
 import type { CodeMirrorFeatureConfig } from './code-mirror'
 import type { CursorFeatureConfig } from './cursor'
+import type { DiffBlockFeatureConfig } from './diff-block'
 import type { FixedToolbarFeatureConfig } from './fixed-toolbar'
 import type { ImageBlockFeatureConfig } from './image-block'
+import type { InlineDiffFeatureConfig } from './inline-diff'
 import type { LatexFeatureConfig } from './latex'
 import type { LinkTooltipFeatureConfig } from './link-tooltip'
 import type { ListItemFeatureConfig } from './list-item'
@@ -50,6 +52,12 @@ export enum CrepeFeature {
 
   /// File attachment uploads
   Attachment = 'attachment',
+
+  /// Inline diff comparison between two document versions, similar to Word track changes.
+  InlineDiff = 'inline-diff',
+
+  /// Diff comparison block for showing code differences
+  DiffBlock = 'diff-block',
 }
 
 export interface CrepeFeatureConfig {
@@ -65,6 +73,8 @@ export interface CrepeFeatureConfig {
   [CrepeFeature.Table]?: TableFeatureConfig
   [CrepeFeature.Latex]?: LatexFeatureConfig
   [CrepeFeature.Attachment]?: AttachmentFeatureConfig
+  [CrepeFeature.InlineDiff]?: InlineDiffFeatureConfig
+  [CrepeFeature.DiffBlock]?: DiffBlockFeatureConfig
 }
 
 export const defaultFeatures: Record<CrepeFeature, boolean> = {
@@ -80,4 +90,6 @@ export const defaultFeatures: Record<CrepeFeature, boolean> = {
   [CrepeFeature.Table]: true,
   [CrepeFeature.Latex]: true,
   [CrepeFeature.Attachment]: true,
+  [CrepeFeature.InlineDiff]: false,
+  [CrepeFeature.DiffBlock]: true,
 }

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 {}