milkdown-inline-diff 1.0.2

package/src/myers-diff.ts

@@ -0,0 +1,134 @@
+export type DiffType = "equal" | "insert" | "delete"
+
+export interface DiffOp<T> {
+  type: DiffType
+  items: T[]
+}
+
+export function myersDiff<T>(
+  a: T[],
+  b: T[],
+  equal: (a: T, b: T) => boolean
+): DiffOp<T>[] {
+  const N = a.length
+  const M = b.length
+
+  if (N === 0 && M === 0) return []
+  if (N === 0) return [{ type: "insert" as DiffType, items: [...b] }]
+  if (M === 0) return [{ type: "delete" as DiffType, items: [...a] }]
+
+  const MAX = N + M
+  const offset = MAX
+  const v: number[] = new Array(2 * MAX + 1).fill(0)
+  v[1 + offset] = 0
+
+  const trace: number[][] = []
+
+  for (let d = 0; d <= MAX; d++) {
+    trace.push([...v])
+
+    for (let k = -d; k <= d; k += 2) {
+      const kIndex = k + offset
+      let x: number
+
+      if (k === -d || (k !== d && v[k - 1 + offset] < v[k + 1 + offset])) {
+        x = v[k + 1 + offset]
+      } else {
+        x = v[k - 1 + offset] + 1
+      }
+
+      let y = x - k
+
+      while (x < N && y < M) {
+        const itemA = a[x]
+        const itemB = b[y]
+        if (!itemA || !itemB || !equal(itemA, itemB)) break
+        x++
+        y++
+      }
+
+      v[kIndex] = x
+
+      if (x >= N && y >= M) {
+        return buildDiff(trace, a, b, N, M, offset)
+      }
+    }
+  }
+
+  return []
+}
+
+function buildDiff<T>(
+  trace: number[][],
+  a: T[],
+  b: T[],
+  startX: number,
+  startY: number,
+  offset: number
+): DiffOp<T>[] {
+  let x = startX
+  let y = startY
+
+  const result: DiffOp<T>[] = []
+
+  for (let d = trace.length - 1; d >= 0; d--) {
+    const v = trace[d]
+    const k = x - y
+
+    let prevK: number
+
+    if (k === -d || (k !== d && v[k - 1 + offset] < v[k + 1 + offset])) {
+      prevK = k + 1
+    } else {
+      prevK = k - 1
+    }
+
+    const prevX = v[prevK + offset]
+    const prevY = prevX - prevK
+
+    while (x > prevX && y > prevY) {
+      const item = a[x - 1]
+      if (item) push(result, "equal", item)
+      x--
+      y--
+    }
+
+    if (d === 0) break
+
+    if (x === prevX) {
+      const item = b[y - 1]
+      if (item) push(result, "insert", item)
+      y--
+    } else {
+      const item = a[x - 1]
+      if (item) push(result, "delete", item)
+      x--
+    }
+  }
+
+  return mergeOps(result.reverse())
+}
+
+function push<T>(
+  ops: DiffOp<T>[],
+  type: DiffType,
+  item: T
+) {
+  ops.push({ type, items: [item] })
+}
+
+function mergeOps<T>(ops: DiffOp<T>[]): DiffOp<T>[] {
+  const result: DiffOp<T>[] = []
+
+  for (const op of ops) {
+    const prev = result[result.length - 1]
+
+    if (prev && prev.type === op.type) {
+      prev.items.push(...op.items)
+    } else {
+      result.push({ ...op })
+    }
+  }
+
+  return result
+}

package/src/style.css

@@ -0,0 +1,152 @@
+:root {
+    --diff-delete-bg: #ffccc7;
+    --diff-delete-active: #ffb4ac;
+    --diff-insert-bg: #d9f7be;
+    --diff-insert-active: #c8e8a8;
+    --diff-modify-bg: #fffb8f;
+    --diff-modify-active: #fff570;
+    --diff-accept-btn: #52c41a;
+    --diff-reject-btn: #ff4d4f;
+}
+
+.diff-decoration-delete {
+    background-color: var(--diff-delete-bg);
+    border-radius: 2px;
+    padding: 2px 4px;
+}
+
+.diff-decoration-insert {
+    background-color: var(--diff-insert-bg);
+    border-radius: 2px;
+    padding: 2px 4px;
+}
+
+.diff-decoration-modify {
+    background-color: var(--diff-modify-bg);
+    border-radius: 2px;
+    padding: 2px 4px;
+}
+
+.milkdown-code-block.diff-decoration-delete {
+    background-color: var(--diff-delete-bg) !important;
+}
+
+.milkdown-code-block.diff-decoration-delete .cm-editor {
+    background-color: var(--diff-delete-bg) !important;
+}
+
+.milkdown-code-block.diff-decoration-delete .cm-lineNumbers,
+.milkdown-code-block.diff-decoration-delete .cm-gutter {
+    background-color: var(--diff-delete-bg) !important;
+}
+
+.milkdown-code-block.diff-decoration-delete .cm-focused .cm-activeLine {
+    background-color: var(--diff-delete-active) !important;
+}
+
+.milkdown-code-block.diff-decoration-delete .cm-focused .cm-activeLineGutter {
+    background-color: var(--diff-delete-active) !important;
+}
+
+.milkdown-code-block.diff-decoration-delete .cm-activeLineGutter {
+    background-color: var(--diff-delete-bg) !important;
+}
+
+.milkdown-code-block.diff-decoration-delete .cm-activeLine {
+    background-color: var(--diff-delete-bg) !important;
+}
+
+.milkdown-code-block.diff-decoration-insert {
+    background-color: var(--diff-insert-bg) !important;
+}
+
+.milkdown-code-block.diff-decoration-insert .cm-editor {
+    background-color: var(--diff-insert-bg) !important;
+}
+
+.milkdown-code-block.diff-decoration-insert .cm-lineNumbers,
+.milkdown-code-block.diff-decoration-insert .cm-gutter {
+    background-color: var(--diff-insert-bg) !important;
+}
+
+.milkdown-code-block.diff-decoration-insert .cm-focused .cm-activeLine {
+    background-color: var(--diff-insert-active) !important;
+}
+
+.milkdown-code-block.diff-decoration-insert .cm-focused .cm-activeLineGutter {
+    background-color: var(--diff-insert-active) !important;
+}
+
+.milkdown-code-block.diff-decoration-insert .cm-activeLineGutter {
+    background-color: var(--diff-insert-bg) !important;
+}
+
+.milkdown-code-block.diff-decoration-insert .cm-activeLine {
+    background-color: var(--diff-insert-bg) !important;
+}
+
+.milkdown-code-block.diff-decoration-modify {
+    background-color: var(--diff-modify-bg) !important;
+}
+
+.milkdown-code-block.diff-decoration-modify .cm-editor {
+    background-color: var(--diff-modify-bg) !important;
+}
+
+.milkdown-code-block.diff-decoration-modify .cm-lineNumbers,
+.milkdown-code-block.diff-decoration-modify .cm-gutter {
+    background-color: var(--diff-modify-bg) !important;
+}
+
+.milkdown-code-block.diff-decoration-modify .cm-focused .cm-activeLine {
+    background-color: var(--diff-modify-active) !important;
+}
+
+.milkdown-code-block.diff-decoration-modify .cm-focused .cm-activeLineGutter {
+    background-color: var(--diff-modify-active) !important;
+}
+
+.milkdown-code-block.diff-decoration-modify .cm-activeLineGutter {
+    background-color: var(--diff-modify-bg) !important;
+}
+
+.milkdown-code-block.diff-decoration-modify .cm-activeLine {
+    background-color: var(--diff-modify-bg) !important;
+}
+
+.milkdown-merge-tool-tooltip {
+    position: absolute;
+    z-index: 1000;
+    padding: 8px;
+    background:
+        var(--crepe-color-surface, var(--nord-editor-background, rgba(220, 231, 245, 0.98)));
+    border-radius: 10px;
+    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
+    backdrop-filter: blur(10px);
+}
+
+.milkdown-merge-tool-tooltip[data-show='false'] {
+    display: none;
+}
+
+.milkdown-merge-tool-button-container {
+    display: flex;
+    gap: 8px;
+}
+
+.milkdown-merge-tool-button {
+    padding: 6px 12px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: 600;
+    color: #f8fafc;
+}
+
+.milkdown-merge-tool-button.accept {
+    background: var(--diff-accept-btn);
+}
+
+.milkdown-merge-tool-button.reject {
+    background: var(--diff-reject-btn);
+}