milkdown-inline-diff 1.0.2

package/dist/markdown-diff.d.ts

@@ -0,0 +1,52 @@
+import { Node, Schema } from '@milkdown/prose/model';
+import { Decoration, DecorationSet } from '@milkdown/prose/view';
+import { Ctx } from '@milkdown/ctx';
+export type ChangeType = "insert" | "delete" | "unchanged";
+export interface DiffState {
+    currentIndex: number;
+    count: number;
+}
+interface ExtractedBlock {
+    nodes: Node[];
+}
+export declare function nodesEqual(a: Node, b: Node): boolean;
+export declare function blockEqual(a: ExtractedBlock, b: ExtractedBlock): boolean;
+export declare function deepEquals(node: Node, other: Node): boolean;
+export interface BlockChange {
+    type: ChangeType;
+    A: ExtractedBlock | null;
+    B: ExtractedBlock | null;
+}
+export declare function blockDiff(docA: Node, docB: Node): BlockChange[];
+export interface DiffEditState {
+    mergedDoc: Node;
+    decorations: DecorationSet;
+    mergeGroups: VNode[][];
+}
+export interface DiffDecoration {
+    groupIndex: string;
+    delete: Decoration[];
+    insert: Decoration[];
+}
+export interface VNode {
+    node: Node;
+    children: VNode[];
+    changeType: ChangeType;
+    newNode?: Node;
+}
+export declare function getDiffDecorations(ctx: Ctx): DiffDecoration[];
+export declare function buildVNode(blockChanges: BlockChange[]): {
+    root: VNode;
+    mergeGroups: VNode[][];
+};
+export declare function createDiffEditState(originalDoc: Node, modifiedDoc: Node, schema: Schema): DiffEditState;
+export declare function getDecorationClass(type: "delete" | "insert" | "modify"): string;
+export declare function merge(ctx: Ctx, action: "accept" | "reject", index: number, mergeAll: boolean): boolean;
+export declare function getDiffState(ctx: Ctx): {
+    currentIndex: number;
+    count: number;
+};
+export declare function jumpTo(ctx: Ctx, index: number): void;
+export declare function diff(ctx: Ctx, newContent: string, originContent?: string): void;
+export {};
+//# sourceMappingURL=markdown-diff.d.ts.map

package/dist/markdown-diff.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-diff.d.ts","sourceRoot":"","sources":["../src/markdown-diff.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAY,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEjE,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAIpC,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,CAAC;AAE3D,MAAM,WAAW,SAAS;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf;AACD,UAAU,cAAc;IACtB,KAAK,EAAE,IAAI,EAAE,CAAC;CACf;AAsCD,wBAAgB,UAAU,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,GAAG,OAAO,CA0CpD;AAuBD,wBAAgB,UAAU,CAAC,CAAC,EAAE,cAAc,EAAE,CAAC,EAAE,cAAc,GAAG,OAAO,CAWxE;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAG,OAAO,CAE3D;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,UAAU,CAAC;IACjB,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACzB,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;CAC1B;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAG,WAAW,EAAE,CAgD/D;AA4GD,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,IAAI,CAAC;IAChB,WAAW,EAAE,aAAa,CAAC;IAC3B,WAAW,EAAE,KAAK,EAAE,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,EAAE,IAAI,CAAC;CAChB;AAED,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,GAAG,GAAG,cAAc,EAAE,CAgC7D;AAoFD,wBAAgB,UAAU,CAAC,YAAY,EAAE,WAAW,EAAE,GAAG;IACvD,IAAI,EAAE,KAAK,CAAC;IACZ,WAAW,EAAE,KAAK,EAAE,EAAE,CAAC;CACxB,CAmFA;AA+ED,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,IAAI,EACjB,WAAW,EAAE,IAAI,EACjB,MAAM,EAAE,MAAM,GACb,aAAa,CA4Bf;AAED,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GACnC,MAAM,CASR;AA6JD,wBAAgB,KAAK,CACnB,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,QAAQ,GAAG,QAAQ,EAC3B,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,OAAO,GAChB,OAAO,CA+ET;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,GAAG,GAAG;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf,CAoBA;AAED,wBAAgB,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,QAyB7C;AAED,wBAAgB,IAAI,CAClB,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,MAAM,EAClB,aAAa,CAAC,EAAE,MAAM,GACrB,IAAI,CA6BN"}

package/dist/myers-diff.d.ts

@@ -0,0 +1,7 @@
+export type DiffType = "equal" | "insert" | "delete";
+export interface DiffOp<T> {
+    type: DiffType;
+    items: T[];
+}
+export declare function myersDiff<T>(a: T[], b: T[], equal: (a: T, b: T) => boolean): DiffOp<T>[];
+//# sourceMappingURL=myers-diff.d.ts.map

package/dist/myers-diff.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"myers-diff.d.ts","sourceRoot":"","sources":["../src/myers-diff.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAEpD,MAAM,WAAW,MAAM,CAAC,CAAC;IACvB,IAAI,EAAE,QAAQ,CAAA;IACd,KAAK,EAAE,CAAC,EAAE,CAAA;CACX;AAED,wBAAgB,SAAS,CAAC,CAAC,EACzB,CAAC,EAAE,CAAC,EAAE,EACN,CAAC,EAAE,CAAC,EAAE,EACN,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,GAC7B,MAAM,CAAC,CAAC,CAAC,EAAE,CA+Cb"}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "milkdown-inline-diff",
+  "version": "1.0.2",
+  "description": "A Milkdown plugin for inline diff visualization and merge functionality",
+  "keywords": [
+    "milkdown",
+    "markdown",
+    "diff",
+    "merge",
+    "editor"
+  ],
+  "author": "张斌",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./src/style.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "@milkdown/core": "^7.18.0",
+    "@milkdown/ctx": "^7.18.0",
+    "@milkdown/preset-gfm": "^7.18.0",
+    "@milkdown/prose": "^7.18.0"
+  },
+  "dependencies": {
+    "@milkdown/crepe": "^7.19.2",
+    "@milkdown/ctx": "^7.18.0",
+    "@milkdown/kit": "^7.19.2",
+    "@milkdown/prose": "^7.18.0",
+    "@milkdown/react": "^7.19.2",
+    "@prosemirror-adapter/react": "^0.5.2"
+  },
+  "devDependencies": {
+    "@milkdown/core": "^7.18.0",
+    "@milkdown/preset-gfm": "^7.18.0",
+    "typescript": "^5.9.3",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^4.0.0"
+  }
+}

package/src/diff-config.ts

@@ -0,0 +1,28 @@
+import type { Ctx } from "@milkdown/ctx";
+import { $ctx } from "@milkdown/kit/utils";
+
+export interface DiffConfig {
+  acceptButtonTitle?: string;
+  rejectButtonTitle?: string;
+  originContent?: string;
+  modifiedContent?: string;
+}
+
+export const defaultDiffConfig: DiffConfig = {
+  acceptButtonTitle: "Accept",
+  rejectButtonTitle: "Reject",
+};
+
+export const diffConfigCtx = $ctx<DiffConfig, "diffInlineConfig">(
+  defaultDiffConfig,
+  "diffInlineConfig",
+);
+
+export function diffConfig(config: DiffConfig = {}) {
+  return (ctx: Ctx) => {
+    ctx.update(diffConfigCtx.key, (prev) => ({
+      ...prev,
+      ...config,
+    }));
+  };
+}

package/src/diff-tooltip.ts

@@ -0,0 +1,302 @@
+import type { Ctx, MilkdownPlugin } from "@milkdown/ctx";
+import { tooltipFactory, TooltipProvider } from "@milkdown/kit/plugin/tooltip";
+import { $ctx } from "@milkdown/kit/utils";
+import type { EditorState, PluginView } from "@milkdown/prose/state";
+import type { EditorView } from "@milkdown/prose/view";
+import { Decoration } from "@milkdown/prose/view";
+
+import { debounce } from "lodash";
+
+import { defaultDiffConfig, diffConfigCtx } from "./diff-config";
+import { getDiffDecorations, merge } from "./markdown-diff";
+
+export const onMergeCtx = $ctx<
+  ((action: "accept" | "reject", index: number) => void) | undefined,
+  "onMergeCtx"
+>(undefined, "onMergeCtx");
+
+export const diffToolTooltip = tooltipFactory("MERGE_TOOL");
+
+export class DiffTooltipView implements PluginView {
+  private tooltipProvider: TooltipProvider;
+  private showRect?: DOMRect;
+  private shouldShow = false;
+  private currentGroupIndex?: number;
+  private currentPos?: number;
+  private currentDisplayPos?: number;
+  private scrollTarget: EventTarget | null = null;
+
+  tooltipElement: HTMLDivElement;
+  acceptButton: HTMLButtonElement;
+  rejectButton: HTMLButtonElement;
+
+  constructor(private ctx: Ctx, private editView: EditorView) {
+    this.tooltipElement = document.createElement("div");
+    this.tooltipElement.className = "milkdown-merge-tool-tooltip";
+
+    const buttonContainer = document.createElement("div");
+    buttonContainer.className = "milkdown-merge-tool-button-container";
+
+    const config = ctx.get(diffConfigCtx.key);
+    const acceptButtonTitle =
+      config.acceptButtonTitle ?? defaultDiffConfig.acceptButtonTitle ?? "Accept";
+    const rejectButtonTitle =
+      config.rejectButtonTitle ?? defaultDiffConfig.rejectButtonTitle ?? "Reject";
+
+    this.acceptButton = document.createElement("button");
+    this.acceptButton.textContent = acceptButtonTitle;
+    this.acceptButton.className = "milkdown-merge-tool-button accept";
+    this.acceptButton.addEventListener("click", () => this.handleAccept());
+
+    this.rejectButton = document.createElement("button");
+    this.rejectButton.textContent = rejectButtonTitle;
+    this.rejectButton.className = "milkdown-merge-tool-button reject";
+    this.rejectButton.addEventListener("click", () => this.handleReject());
+
+    buttonContainer.appendChild(this.rejectButton);
+    buttonContainer.appendChild(this.acceptButton);
+    this.tooltipElement.appendChild(buttonContainer);
+
+    this.tooltipProvider = new TooltipProvider({
+      content: this.tooltipElement,
+      offset: -2,
+      shouldShow: (_view: EditorView) => false,
+      floatingUIOptions: {
+        placement: "top-end",
+      },
+    });
+
+    const container = editView.dom.parentElement ?? document.body;
+    container.appendChild(this.tooltipElement);
+
+    const scrollContext = findScrollContainer(editView.dom);
+    this.scrollTarget = scrollContext.target;
+
+    if (this.scrollTarget) {
+      this.scrollTarget.addEventListener("scroll", this.handleScroll);
+    }
+  }
+
+  handleScroll = () => {
+    if (this.shouldShow && this.currentDisplayPos !== undefined) {
+      updateTooltipForPos(
+        this,
+        this.ctx,
+        this.editView,
+        this.currentDisplayPos,
+      );
+    }
+  };
+
+  handleAccept(): void {
+    const callback = this.ctx.get(onMergeCtx.key);
+    callback?.("accept", this.currentGroupIndex!);
+    this.hideImmediate();
+  }
+
+  handleReject(): void {
+    const callback = this.ctx.get(onMergeCtx.key);
+    callback?.("reject", this.currentGroupIndex!);
+    this.hideImmediate();
+  }
+
+  toggleShow() {
+    if (this.shouldShow && this.showRect) {
+      this.tooltipProvider.show(
+        { getBoundingClientRect: () => this.showRect! },
+        this.editView,
+      );
+    } else {
+      this.tooltipProvider.hide();
+      this.currentGroupIndex = undefined;
+    }
+  }
+
+  show(groupIndex: number, rect: DOMRect, pos?: number) {
+    this.currentGroupIndex = groupIndex;
+    this.showRect = rect;
+    this.shouldShow = true;
+    if (pos !== undefined) {
+      this.currentDisplayPos = pos;
+    }
+    this.toggleShow();
+  }
+
+  hide = () => {
+    this.shouldShow = false;
+    this.toggleShow();
+  };
+
+  hideImmediate = () => {
+    this.shouldShow = false;
+    this.tooltipProvider.hide();
+    this.currentGroupIndex = undefined;
+  };
+
+  isVisible(): boolean {
+    return this.shouldShow;
+  }
+
+  update(view: EditorView, _prevState?: EditorState) {
+    const editState = view.state;
+    const selection = editState.selection;
+
+    const currentPos = selection.from;
+    if (this.currentPos !== currentPos) {
+      this.currentPos = currentPos;
+      updateTooltipForPos(this, this.ctx, view, currentPos);
+    }
+  }
+
+  destroy = () => {
+    if (this.scrollTarget) {
+      this.scrollTarget.removeEventListener("scroll", this.handleScroll);
+    }
+    this.tooltipProvider.destroy();
+    this.tooltipElement.remove();
+  };
+}
+
+const mergeToolPlugin: MilkdownPlugin = (ctx) => {
+  ctx.inject(onMergeCtx.key);
+
+  return async () => {
+    return () => {
+      ctx.remove(onMergeCtx.key);
+    };
+  };
+};
+
+export const diffTooltipPlugins: MilkdownPlugin[] = [
+  mergeToolPlugin,
+  ...diffToolTooltip,
+];
+
+export const tooltipViewConfig = (ctx: Ctx) => {
+  let tooltipView: DiffTooltipView | null = null;
+
+  const onMouseMove = debounce((view: EditorView, event: MouseEvent) => {
+    if (!tooltipView) return;
+
+    const pos = mouseToPos(view, event);
+    if (pos === undefined) {
+      tooltipView.hide();
+      return;
+    }
+
+    updateTooltipForPos(tooltipView, ctx, view, pos);
+  }, 0);
+
+  ctx.set(onMergeCtx.key, (action, index) => {
+    merge(ctx, action, index, false);
+  });
+
+  ctx.set(diffToolTooltip.key, {
+    props: {
+      handleDOMEvents: {
+        mousemove: onMouseMove,
+      },
+    },
+    view: (view) => {
+      tooltipView = new DiffTooltipView(ctx, view);
+      return tooltipView;
+    },
+  });
+};
+
+function mouseToPos(view: EditorView, event: MouseEvent): number | undefined {
+  const $pos = view.posAtCoords({ left: event.clientX, top: event.clientY });
+  return $pos?.pos;
+}
+
+function isScrollableElement(element: HTMLElement): boolean {
+  const style = window.getComputedStyle(element);
+  const overflowY = style.overflowY;
+  const overflowX = style.overflowX;
+  const overflow = style.overflow;
+  const canScrollY =
+    /(auto|scroll|overlay)/.test(overflowY) ||
+    /(auto|scroll|overlay)/.test(overflow);
+  const canScrollX =
+    /(auto|scroll|overlay)/.test(overflowX) ||
+    /(auto|scroll|overlay)/.test(overflow);
+
+  return (
+    (canScrollY && element.scrollHeight > element.clientHeight) ||
+    (canScrollX && element.scrollWidth > element.clientWidth)
+  );
+}
+
+function findScrollContainer(start: HTMLElement): {
+  element: HTMLElement | null;
+  target: EventTarget | null;
+} {
+  let current: HTMLElement | null = start.parentElement;
+
+  while (current) {
+    if (isScrollableElement(current)) {
+      return {
+        element: current,
+        target: current,
+      };
+    }
+    current = current.parentElement;
+  }
+
+  const scrollingElement =
+    document.scrollingElement instanceof HTMLElement
+      ? document.scrollingElement
+      : document.documentElement;
+
+  return {
+    element: scrollingElement,
+    target: window,
+  };
+}
+
+export function shouldShowMergeToolForPos(
+  ctx: Ctx,
+  pos: number,
+): { index: number; decoration: Decoration } | undefined {
+  const diffDecorations = getDiffDecorations(ctx);
+
+  const index = diffDecorations.findIndex((dec) => {
+    const all = [...dec.delete, ...dec.insert];
+    const start = all[0].from;
+    const end = all[all.length - 1].to;
+    return start <= pos && pos <= end;
+  });
+
+  if (index >= 0) {
+    const group = diffDecorations[index];
+    const decoration = group.delete[0] || group.insert[0];
+    return { index, decoration };
+  }
+
+  return undefined;
+}
+
+function updateTooltipForPos(
+  tooltipView: DiffTooltipView,
+  ctx: Ctx,
+  view: EditorView,
+  pos: number,
+): void {
+  const diffDecorations = getDiffDecorations(ctx);
+  if (diffDecorations.length === 0) {
+    tooltipView.hideImmediate();
+    return;
+  }
+
+  const result = shouldShowMergeToolForPos(ctx, pos);
+
+  if (result) {
+    const { index, decoration } = result;
+    const domPos = (decoration.spec as any)?.offset
+      ? decoration.from
+      : decoration.from + 1;
+    const dom = view.domAtPos(domPos).node as HTMLElement;
+    const domRect = dom.getBoundingClientRect();
+    tooltipView.show(index, domRect, pos);
+  }
+}

package/src/diffDecorationState.ts

@@ -0,0 +1,48 @@
+import { Plugin, PluginKey } from "@milkdown/prose/state";
+import { DecorationSet } from "@milkdown/prose/view";
+import { $ctx, $prose } from "@milkdown/kit/utils";
+
+export interface DiffDecorationState {
+  decorations: DecorationSet | null;
+}
+
+export const diffDecorationState = $ctx<
+  DiffDecorationState,
+  "diffDecorationState"
+>(
+  {
+    decorations: null,
+  },
+  "diffDecorationState",
+);
+
+export const diffDecorationPlugin = $prose((ctx) => {
+  const pluginKey = new PluginKey("MILKDOWN_DIFF_DECORATION");
+  ctx.inject(diffDecorationState.key);
+  return new Plugin({
+    key: pluginKey,
+    state: {
+      init() {
+        return DecorationSet.empty;
+      },
+      apply(tr, oldDeco) {
+        const ctxDeco = ctx.get(diffDecorationState.key).decorations;
+
+        if (ctxDeco && ctxDeco !== oldDeco) {
+          ctx.set(diffDecorationState.key, { decorations: ctxDeco });
+          return ctxDeco;
+        }
+
+        let rs = oldDeco.map(tr.mapping, tr.doc);
+
+        ctx.set(diffDecorationState.key, { decorations: rs });
+        return rs;
+      },
+    },
+    props: {
+      decorations(state) {
+        return this.getState(state);
+      },
+    },
+  });
+});

package/src/extended-table-schema.ts

@@ -0,0 +1,11 @@
+import { tableSchema as officialTableSchema } from "@milkdown/preset-gfm";
+
+export const extendedTableSchema = officialTableSchema.extendSchema((prev) => {
+  return (ctx) => {
+    const baseSchema = prev(ctx);
+    return {
+      ...baseSchema,
+      content: "table_header_row+ table_row+",
+    };
+  };
+});

package/src/index.ts

@@ -0,0 +1,43 @@
+import { ConfigReady, EditorViewReady } from "@milkdown/core";
+import type { MilkdownPlugin } from "@milkdown/ctx";
+
+import { diffConfigCtx, type DiffConfig, diffConfig } from "./diff-config";
+import { diffDecorationPlugin } from "./diffDecorationState";
+import { extendedTableSchema } from "./extended-table-schema";
+import {
+  diffTooltipPlugins,
+  tooltipViewConfig,
+} from "./diff-tooltip";
+import { diff, getDiffState, jumpTo, merge } from "./markdown-diff";
+
+const extendedTablePlugins =
+  extendedTableSchema as unknown as MilkdownPlugin[];
+
+const diffAutoApplyPlugin: MilkdownPlugin = (ctx) => async () => {
+  await ctx.wait(ConfigReady);
+  await ctx.wait(EditorViewReady);
+
+  const { originContent, modifiedContent } = ctx.get(diffConfigCtx.key);
+  if (originContent !== undefined && modifiedContent !== undefined) {
+    diff(ctx, modifiedContent, originContent);
+  }
+};
+
+const diffTooltipConfigPlugin: MilkdownPlugin = (ctx) => {
+  tooltipViewConfig(ctx);
+  return async () => {};
+};
+
+export const diffPlugins: MilkdownPlugin[] = [
+  diffConfigCtx,
+  ...extendedTablePlugins,
+  diffDecorationPlugin,
+  ...diffTooltipPlugins,
+  diffTooltipConfigPlugin,
+  diffAutoApplyPlugin,
+];
+
+export const diffPlugIns = diffPlugins;
+
+export type { DiffConfig };
+export { diffConfig, diff, getDiffState, jumpTo, merge };