@jvs-milkdown/crepe 1.2.13 → 1.2.15

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

@@ -0,0 +1,514 @@
+import type { Ctx } from '@jvs-milkdown/kit/ctx'
+import type { Node as PMNode } from '@jvs-milkdown/kit/prose/model'
+import type { PluginView } from '@jvs-milkdown/kit/prose/state'
+import type { EditorView } from '@jvs-milkdown/kit/prose/view'
+
+import { parserCtx } from '@jvs-milkdown/kit/core'
+import { Plugin, PluginKey } from '@jvs-milkdown/kit/prose/state'
+import { Decoration, DecorationSet } from '@jvs-milkdown/kit/prose/view'
+import { $prose } from '@jvs-milkdown/kit/utils'
+
+import type { DefineFeature } from '../shared'
+
+import { i18n } from '../../core/locale'
+import { crepeFeatureConfig } from '../../core/slice'
+import { CrepeFeature } from '../index'
+import { mountChangePanel } from './change-panel'
+import {
+  inlineDiffConfig,
+  inlineDiffApiCtx,
+  type InlineDiffConfig,
+  type InlineDiffApi,
+} from './config'
+import { computeDiff, type DiffChunk } from './diff-engine'
+import { buildNewDoc, type ChangeInfo } from './doc-builder'
+
+export type InlineDiffFeatureConfig = Partial<InlineDiffConfig>
+
+export { inlineDiffApiCtx, type InlineDiffApi }
+
+export const inlineDiffKey = new PluginKey('CREPE_INLINE_DIFF')
+
+const PANEL_WIDTH = 280
+
+let sharedDecorationSet = DecorationSet.empty
+
+class InlineDiffView implements PluginView {
+  #ctx: Ctx
+  #view: EditorView
+  #isActive = false
+  #panelApp: ReturnType<typeof mountChangePanel> | null = null
+  #panelContainer: HTMLElement | null = null
+  #resizeObserver: ResizeObserver | null = null
+  #scrollContainers: Element[] = []
+  #updateGeometry: (() => void) | null = null
+  #originalEditable: ((state: any) => boolean) | null = null
+  #chunks: DiffChunk[] = []
+  #schema: any = null
+
+  constructor(ctx: Ctx, view: EditorView) {
+    this.#ctx = ctx
+    this.#view = view
+
+    const api: InlineDiffApi = {
+      showDiff: (oldMd: string, newMd?: string) => this.showDiff(oldMd, newMd),
+      hideDiff: () => this.hideDiff(),
+      isShowing: () => this.#isActive,
+    }
+    ctx.set(inlineDiffApiCtx.key, api)
+  }
+
+  showDiff = (oldMarkdown: string, newMarkdown?: string): void => {
+    if (this.#isActive) return
+
+    const parser = this.#ctx.get(parserCtx)
+    this.#schema = this.#view.state.schema
+
+    let oldDoc: PMNode
+    let newDoc: PMNode
+    try {
+      oldDoc = parser(oldMarkdown)
+      if (typeof newMarkdown === 'string' && newMarkdown.trim() !== '') {
+        newDoc = parser(newMarkdown)
+      } else {
+        newDoc = this.#view.state.doc
+      }
+    } catch {
+      return
+    }
+
+    const oldBlocks: PMNode[] = []
+    const newBlocks: PMNode[] = []
+    oldDoc.forEach((node) => oldBlocks.push(node))
+    newDoc.forEach((node) => newBlocks.push(node))
+
+    this.#chunks = computeDiff(oldBlocks, newBlocks)
+
+    const { changes } = buildNewDoc(this.#chunks, this.#schema)
+    if (changes.length === 0) {
+      return
+    }
+
+    if (!this.#originalEditable) {
+      this.#originalEditable =
+        (this.#view.someProp('editable') as any) || (() => true)
+    }
+    this.#view.setProps({
+      editable: () => false,
+    })
+
+    this.#isActive = true
+    this.#render(true)
+  }
+
+  #render = (initPanel = false) => {
+    const { doc: newDocWithPos, changes } = buildNewDoc(
+      this.#chunks,
+      this.#schema
+    )
+    const acceptText = i18n(this.#ctx, 'inlineDiff.accept')
+    const rejectText = i18n(this.#ctx, 'inlineDiff.reject')
+
+    const ds = buildDecorations(
+      newDocWithPos,
+      changes,
+      (id) => this.acceptChunk(id),
+      (id) => this.rejectChunk(id),
+      acceptText,
+      rejectText
+    )
+    sharedDecorationSet = ds
+
+    const tr = this.#view.state.tr.replaceWith(
+      0,
+      this.#view.state.doc.content.size,
+      newDocWithPos.content
+    )
+    this.#view.dispatch(tr)
+
+    if (initPanel) {
+      this.#createPanel(changes)
+    } else if (this.#panelApp) {
+      this.#createPanel(changes)
+    }
+  }
+
+  acceptChunk = (id: string) => {
+    const chunk = this.#chunks.find((c) => c.id === id)
+    if (chunk) {
+      chunk.status = 'accepted'
+      const hasPending = this.#chunks.some(
+        (c) =>
+          c.status === 'pending' && c.diffs.some((d) => d.type !== 'unchanged')
+      )
+      if (!hasPending) {
+        this.hideDiff()
+      } else {
+        this.#render()
+      }
+    }
+  }
+
+  rejectChunk = (id: string) => {
+    const chunk = this.#chunks.find((c) => c.id === id)
+    if (chunk) {
+      chunk.status = 'rejected'
+      const hasPending = this.#chunks.some(
+        (c) =>
+          c.status === 'pending' && c.diffs.some((d) => d.type !== 'unchanged')
+      )
+      if (!hasPending) {
+        this.hideDiff()
+      } else {
+        this.#render()
+      }
+    }
+  }
+
+  hideDiff = (): void => {
+    if (!this.#isActive) return
+    this.#removePanel()
+
+    for (const chunk of this.#chunks) {
+      if (chunk.status === 'pending') {
+        chunk.status = 'accepted'
+      }
+    }
+
+    const { doc: finalDoc } = buildNewDoc(this.#chunks, this.#schema)
+    const tr = this.#view.state.tr.replaceWith(
+      0,
+      this.#view.state.doc.content.size,
+      finalDoc.content
+    )
+
+    sharedDecorationSet = DecorationSet.empty
+    this.#isActive = false
+    this.#chunks = []
+
+    this.#view.dispatch(tr)
+
+    if (this.#originalEditable) {
+      this.#view.setProps({
+        editable: this.#originalEditable,
+      })
+      this.#originalEditable = null
+    } else {
+      this.#view.setProps({
+        editable: () => true,
+      })
+    }
+  }
+
+  update = (view: EditorView) => {
+    this.#view = view
+  }
+
+  destroy = () => {
+    this.#removePanel()
+  }
+
+  #scrollTo(pos: number) {
+    try {
+      const view = this.#view
+      const coords = view.coordsAtPos(pos)
+
+      let scrollTarget: HTMLElement | null = view.dom as HTMLElement
+      while (scrollTarget) {
+        const { overflowY } = getComputedStyle(scrollTarget)
+        if (
+          (overflowY === 'auto' || overflowY === 'scroll') &&
+          scrollTarget.scrollHeight > scrollTarget.clientHeight
+        ) {
+          break
+        }
+        scrollTarget = scrollTarget.parentElement
+      }
+
+      if (scrollTarget) {
+        const targetRect = scrollTarget.getBoundingClientRect()
+        const scrollOffset =
+          coords.top - targetRect.top + scrollTarget.scrollTop - 60
+        scrollTarget.scrollTo({ top: scrollOffset, behavior: 'smooth' })
+      } else {
+        window.scrollTo({
+          top: coords.top + window.scrollY - 100,
+          behavior: 'smooth',
+        })
+      }
+    } catch {
+      // ignore
+    }
+  }
+
+  #createPanel(changes: ChangeInfo[]) {
+    this.#removePanel()
+
+    const editorContainer = this.#view.dom.parentElement
+    if (!editorContainer) return
+    const root = editorContainer.parentElement
+    if (!root) return
+
+    // Create fixed-positioned container — same pattern as outline panel
+    const container = document.createElement('div')
+    container.style.position = 'fixed'
+    container.style.zIndex = '100'
+    container.style.width = `${PANEL_WIDTH}px`
+    container.style.overflow = 'hidden'
+    container.style.borderLeft =
+      '1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline, #ddd), transparent 80%))'
+    container.style.backgroundColor = 'var(--crepe-color-surface, #fff)'
+    root.appendChild(container)
+    this.#panelContainer = container
+
+    // Push editor content left to make room for panel
+    editorContainer.style.paddingRight = `${PANEL_WIDTH}px`
+
+    this.#panelApp = mountChangePanel(
+      container,
+      changes,
+      (from) => this.#scrollTo(from),
+      () => this.hideDiff()
+    )
+
+    // Geometry: compute top/right/height to align with editor area
+    this.#updateGeometry = () => {
+      const rootRect = root.getBoundingClientRect()
+      let top = rootRect.top
+
+      const toolbar = root.querySelector(
+        '.milkdown-fixed-toolbar'
+      ) as HTMLElement | null
+      if (toolbar && toolbar.offsetHeight > 0) {
+        const toolbarRect = toolbar.getBoundingClientRect()
+        top = Math.max(top, toolbarRect.bottom)
+      }
+
+      const coverEl = root.querySelector(
+        '.milkdown-document-cover'
+      ) as HTMLElement | null
+      if (coverEl && coverEl.offsetHeight > 0) {
+        top = Math.max(top, coverEl.getBoundingClientRect().bottom)
+      }
+
+      let height = window.innerHeight - top
+      if (top + height > rootRect.bottom) {
+        height = Math.max(0, rootRect.bottom - top)
+      }
+      container.style.top = `${top}px`
+      container.style.height = `${height}px`
+      container.style.left = 'auto'
+
+      let baseOffset = window.innerWidth - rootRect.right
+      let rightOffset = baseOffset
+      let hasVScroll = false
+      if (document.documentElement.scrollHeight > window.innerHeight) {
+        hasVScroll = true
+      }
+      let parent: HTMLElement | null = root
+      while (parent && parent !== document.body) {
+        const { overflowY } = getComputedStyle(parent)
+        if (overflowY === 'auto' || overflowY === 'scroll') {
+          if (parent.scrollHeight > parent.clientHeight) {
+            hasVScroll = true
+            break
+          }
+        }
+        parent = parent.parentElement
+      }
+      if (hasVScroll) {
+        rightOffset = Math.max(rightOffset, 32)
+      } else {
+        rightOffset = Math.max(rightOffset, 0)
+      }
+      container.style.right = `${rightOffset}px`
+
+      // Ensure paddingRight is set to accommodate the differences panel
+      editorContainer.style.paddingRight = `${PANEL_WIDTH}px`
+    }
+
+    this.#updateGeometry()
+
+    setTimeout(() => {
+      this.#updateGeometry?.()
+    }, 100)
+
+    // Re-evaluate on resize / scroll
+    this.#resizeObserver = new ResizeObserver(this.#updateGeometry)
+    this.#resizeObserver.observe(root)
+    window.addEventListener('resize', this.#updateGeometry)
+    window.addEventListener('scroll', this.#updateGeometry, {
+      capture: true,
+      passive: true,
+    })
+
+    let scrollerNode: Node | null = root
+    while (scrollerNode && scrollerNode !== document) {
+      if (scrollerNode instanceof Element) {
+        scrollerNode.addEventListener('scroll', this.#updateGeometry, {
+          passive: true,
+        })
+        this.#scrollContainers.push(scrollerNode)
+      }
+      scrollerNode =
+        scrollerNode.parentNode || (scrollerNode as ShadowRoot).host
+    }
+  }
+
+  #removePanel() {
+    if (this.#panelApp) {
+      this.#panelApp.unmount()
+      this.#panelApp = null
+    }
+    if (this.#panelContainer) {
+      this.#panelContainer.remove()
+      this.#panelContainer = null
+    }
+
+    if (this.#resizeObserver) {
+      this.#resizeObserver.disconnect()
+      this.#resizeObserver = null
+    }
+
+    if (this.#updateGeometry) {
+      window.removeEventListener('resize', this.#updateGeometry)
+      window.removeEventListener('scroll', this.#updateGeometry, {
+        capture: true,
+      })
+
+      for (const container of this.#scrollContainers) {
+        container.removeEventListener('scroll', this.#updateGeometry)
+      }
+      this.#scrollContainers = []
+      this.#updateGeometry = null
+    }
+
+    const editorContainer = this.#view.dom.parentElement
+    if (editorContainer) {
+      editorContainer.style.paddingRight = ''
+    }
+  }
+}
+
+function buildDecorations(
+  doc: PMNode,
+  changes: ChangeInfo[],
+  onAccept: (id: string) => void,
+  onReject: (id: string) => void,
+  acceptText: string,
+  rejectText: string
+): DecorationSet {
+  const decorations: Decoration[] = []
+  const addedWidgets = new Set<string>()
+
+  for (const change of changes) {
+    if (!addedWidgets.has(change.chunkId)) {
+      addedWidgets.add(change.chunkId)
+
+      decorations.push(
+        Decoration.widget(
+          change.blockRange.from,
+          () => {
+            const wrapper = document.createElement('div')
+            wrapper.style.position = 'relative'
+            wrapper.style.width = '100%'
+            wrapper.style.height = '0'
+            wrapper.style.overflow = 'visible'
+
+            const container = document.createElement('div')
+            container.className = 'crepe-diff-actions'
+            container.style.position = 'absolute'
+            container.style.right = '4px'
+            container.style.top = '4px'
+            container.style.zIndex = '10'
+            container.style.display = 'flex'
+            container.style.gap = '4px'
+
+            const btnAccept = document.createElement('button')
+            btnAccept.textContent = acceptText
+            btnAccept.style.backgroundColor = '#2ea043'
+            btnAccept.style.color = 'white'
+            btnAccept.style.border = 'none'
+            btnAccept.style.borderRadius = '4px'
+            btnAccept.style.padding = '2px 8px'
+            btnAccept.style.cursor = 'pointer'
+            btnAccept.style.fontSize = '12px'
+            btnAccept.addEventListener('mousedown', (e) => {
+              e.preventDefault()
+              onAccept(change.chunkId)
+            })
+
+            const btnReject = document.createElement('button')
+            btnReject.textContent = rejectText
+            btnReject.style.backgroundColor = '#f85149'
+            btnReject.style.color = 'white'
+            btnReject.style.border = 'none'
+            btnReject.style.borderRadius = '4px'
+            btnReject.style.padding = '2px 8px'
+            btnReject.style.cursor = 'pointer'
+            btnReject.style.fontSize = '12px'
+            btnReject.addEventListener('mousedown', (e) => {
+              e.preventDefault()
+              onReject(change.chunkId)
+            })
+
+            container.appendChild(btnAccept)
+            container.appendChild(btnReject)
+            wrapper.appendChild(container)
+            return wrapper
+          },
+          { side: -1 }
+        )
+      )
+    }
+
+    const blockCls =
+      change.type === 'added' ? 'crepe-diff-added' : 'crepe-diff-deleted'
+    decorations.push(
+      Decoration.node(change.blockRange.from, change.blockRange.to, {
+        class: blockCls,
+      })
+    )
+
+    const inlineCls =
+      change.type === 'added'
+        ? 'crepe-diff-inline-added'
+        : 'crepe-diff-inline-deleted'
+    for (const r of change.inlineRanges) {
+      if (r.to > r.from) {
+        decorations.push(Decoration.inline(r.from, r.to, { class: inlineCls }))
+      }
+    }
+  }
+
+  return DecorationSet.create(doc, decorations)
+}
+
+export const inlineDiffPlugin = $prose((ctx) => {
+  return new Plugin({
+    key: inlineDiffKey,
+    view: (view) => new InlineDiffView(ctx, view),
+    props: {
+      decorations: () => sharedDecorationSet,
+    },
+  })
+})
+
+export const inlineDiff: DefineFeature<InlineDiffFeatureConfig> = (
+  editor,
+  config
+) => {
+  editor
+    .config(crepeFeatureConfig(CrepeFeature.InlineDiff))
+    .config((ctx) => {
+      if (config) {
+        ctx.update(inlineDiffConfig.key, (prev) => ({
+          ...prev,
+          ...config,
+        }))
+      }
+    })
+    .use(inlineDiffApiCtx)
+    .use(inlineDiffConfig)
+    .use(inlineDiffPlugin)
+}

package/src/feature/loader.ts

@@ -4,9 +4,11 @@ import { attachment } from './attachment'
 import { blockEdit } from './block-edit'
 import { codeMirror } from './code-mirror'
 import { cursor } from './cursor'
+import { diffBlockFeature } from './diff-block'
 import { fixedToolbar } from './fixed-toolbar'
 import { imageBlock } from './image-block'
 import { CrepeFeature } from './index'
+import { inlineDiff } from './inline-diff'
 import { latex } from './latex'
 import { linkTooltip } from './link-tooltip'
 import { listItem } from './list-item'
@@ -56,5 +58,11 @@ export function loadFeature(
     case CrepeFeature.Attachment: {
       return attachment(editor, config)
     }
+    case CrepeFeature.InlineDiff: {
+      return inlineDiff(editor, config)
+    }
+    case CrepeFeature.DiffBlock: {
+      return diffBlockFeature(editor, config)
+    }
   }
 }

package/src/feature/toolbar/component.tsx

@@ -93,11 +93,11 @@ import {
   splitCellIcon,
   formatPainterIcon,
 } from '../../icons'
-import { keepAlive } from '../../utils/keep-alive'
 import {
   incrementPopupCount,
   decrementPopupCount,
 } from '../../utils/fixed-toolbar-popup-state'
+import { keepAlive } from '../../utils/keep-alive'
 import { menuAPI } from '../block-edit/menu'
 import { getGroups as getBlockGroups } from '../block-edit/menu/config'
 import {
@@ -571,7 +571,8 @@ export const Toolbar = defineComponent<ToolbarProps>({
           containerWidth = container.clientWidth
         }
       } else {
-        containerWidth = container.clientWidth
+        const view = ctx.get(editorViewCtx)
+        containerWidth = view.dom.clientWidth - 32
       }
 
       if (containerWidth === lastContainerWidth) {

package/src/theme/common/diff-block.css

@@ -0,0 +1,43 @@
+.milkdown {
+  .milkdown-diff-block {
+    display: block;
+    position: relative;
+    padding: 16px 0;
+    margin: 20px 0;
+    border-radius: 8px;
+    background: var(--crepe-color-surface-low);
+    overflow: hidden;
+
+    .cm-editor {
+      outline: none !important;
+      background: transparent;
+    }
+
+    .cm-merge-a .cm-merge-chunk {
+      background-color: rgba(244, 63, 94, 0.15) !important;
+    }
+
+    .cm-merge-b .cm-merge-chunk {
+      background-color: rgba(16, 185, 129, 0.15) !important;
+    }
+
+    .cm-merge-chunk-a {
+      background-color: rgba(244, 63, 94, 0.3) !important;
+    }
+
+    .cm-merge-chunk-b {
+      background-color: rgba(16, 185, 129, 0.3) !important;
+    }
+
+    .cm-merge-spacer {
+      background-color: transparent !important;
+      background-image: repeating-linear-gradient(
+        45deg,
+        rgba(150, 150, 150, 0.05),
+        rgba(150, 150, 150, 0.05) 10px,
+        transparent 10px,
+        transparent 20px
+      );
+    }
+  }
+}