milkdown-inline-diff 1.0.2

package/README.md

@@ -0,0 +1,207 @@
+# milkdown-inline-diff
+
+Block-level Markdown diff and merge controls for Milkdown editors.
+
+![milkdown-inline-diff demo](./docs/demo-page.png)
+
+## Overview
+
+`milkdown-inline-diff` compares Markdown documents as block structures instead of raw text lines. It is designed for in-editor review flows where users need to inspect and merge changes without leaving the editor.
+
+It works well for:
+
+- `heading`
+- `paragraph`
+- `blockquote`
+- nested `blockquote`
+- `list`
+- nested `list`
+- `table`
+- `code block`
+
+## Installation
+
+```bash
+pnpm add milkdown-inline-diff
+```
+
+You also need the normal Milkdown editor dependencies used by your app.
+
+## Quick Start
+
+```ts
+import { Editor } from "@milkdown/core";
+import { commonmark } from "@milkdown/preset-commonmark";
+import {
+  diffConfig,
+  diffPlugins,
+} from "milkdown-inline-diff";
+import "milkdown-inline-diff/style.css";
+
+const editor = Editor.make()
+  .use(commonmark)
+  .use(diffPlugins)
+  .config(
+    diffConfig({
+      acceptButtonTitle: "Accept Change",
+      rejectButtonTitle: "Keep Original",
+      originContent: "# Original",
+      modifiedContent: "# Modified",
+    }),
+  );
+
+await editor.create();
+```
+
+If both `originContent` and `modifiedContent` are provided, the plugin will automatically enter diff mode after the editor view is ready.
+
+## Public API
+
+### `diffPlugins`
+
+Milkdown plugin array used with:
+
+```ts
+editor.use(diffPlugins);
+```
+
+### `diffConfig(options)`
+
+Configuration helper used with:
+
+```ts
+editor.config(diffConfig({ ... }));
+```
+
+```ts
+interface DiffConfig {
+  acceptButtonTitle?: string;
+  rejectButtonTitle?: string;
+  originContent?: string;
+  modifiedContent?: string;
+}
+```
+
+### `diff(ctx, modifiedContent, originContent?)`
+
+Enters diff mode on demand.
+
+```ts
+editor.action((ctx) => {
+  diff(ctx, modifiedContent, originContent);
+});
+```
+
+Use this when you want to trigger comparison after editor creation, after loading remote content, or after switching between document versions.
+
+### `jumpTo(ctx, index)`
+
+Moves focus to a specific diff group.
+
+```ts
+editor.action((ctx) => {
+  jumpTo(ctx, 0);
+});
+```
+
+This is useful for custom navigation bars, side panels, or review workflows.
+
+### `merge(ctx, action, index, all?)`
+
+Accepts or rejects a diff group, or resolves all groups at once.
+
+```ts
+editor.action((ctx) => {
+  merge(ctx, "accept", 0);
+});
+
+editor.action((ctx) => {
+  merge(ctx, "reject", 0, true);
+});
+```
+
+### `getDiffState(ctx)`
+
+Returns the current diff state for external UI.
+
+```ts
+const state = editor.action((ctx) => getDiffState(ctx));
+```
+
+The returned state includes:
+
+- `count`: total number of diff groups
+- `currentIndex`: current focused diff group index, or `-1` before the first group
+
+This is the function to use when building your own merge bar, status panel, or conflict navigator.
+
+## Typical Review Flow
+
+```ts
+editor.use(diffPlugins).config(
+  diffConfig({
+    acceptButtonTitle: "Accept Change",
+    rejectButtonTitle: "Keep Original",
+  }),
+);
+
+editor.action((ctx) => {
+  diff(ctx, modifiedMarkdown, originMarkdown);
+});
+
+const state = editor.action((ctx) => getDiffState(ctx));
+
+editor.action((ctx) => {
+  jumpTo(ctx, state.currentIndex + 1);
+});
+
+editor.action((ctx) => {
+  merge(ctx, "accept", state.currentIndex);
+});
+```
+
+## Listening For Changes
+
+If you want to keep external UI in sync with the editor, listen to Milkdown or Crepe update events and read diff state inside the callback.
+
+```ts
+const syncDiffState = () => {
+  const state = editor.action((ctx) => getDiffState(ctx));
+  setDiffState(state);
+};
+
+crepe.on((listener) => {
+  listener.mounted(syncDiffState);
+  listener.updated(syncDiffState);
+  listener.selectionUpdated(syncDiffState);
+});
+```
+
+This pattern is used in the React demo to drive the custom merge bar.
+
+## Demo
+
+The repository includes a runnable React demo in [examples/react](/Users/binzhang/Documents/falcon/milkdown-inline-diff/examples/react).
+
+It demonstrates:
+
+- `editor.use(diffPlugins).config(diffConfig(...))`
+- automatic diff on initial content
+- custom tooltip button titles
+- custom merge bar UI driven by `getDiffState(ctx)`
+- `jumpTo` navigation
+- `merge(..., all)` bulk actions
+
+## Styling
+
+Import the plugin stylesheet once:
+
+```ts
+import "milkdown-inline-diff/style.css";
+```
+
+You can then override the tooltip and review UI styles in your app theme if needed.
+
+## License
+
+MIT

package/dist/diff-config.d.ts

@@ -0,0 +1,11 @@
+import { Ctx } from '@milkdown/ctx';
+export interface DiffConfig {
+    acceptButtonTitle?: string;
+    rejectButtonTitle?: string;
+    originContent?: string;
+    modifiedContent?: string;
+}
+export declare const defaultDiffConfig: DiffConfig;
+export declare const diffConfigCtx: import('@milkdown/kit/utils').$Ctx<DiffConfig, "diffInlineConfig">;
+export declare function diffConfig(config?: DiffConfig): (ctx: Ctx) => void;
+//# sourceMappingURL=diff-config.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diff-config.d.ts","sourceRoot":"","sources":["../src/diff-config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAGzC,MAAM,WAAW,UAAU;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,iBAAiB,EAAE,UAG/B,CAAC;AAEF,eAAO,MAAM,aAAa,oEAGzB,CAAC;AAEF,wBAAgB,UAAU,CAAC,MAAM,GAAE,UAAe,IACxC,KAAK,GAAG,UAMjB"}

package/dist/diff-tooltip.d.ts

@@ -0,0 +1,37 @@
+import { Ctx, MilkdownPlugin } from '@milkdown/ctx';
+import { EditorState, PluginView } from '@milkdown/prose/state';
+import { EditorView, Decoration } from '@milkdown/prose/view';
+export declare const onMergeCtx: import('@milkdown/kit/utils').$Ctx<((action: "accept" | "reject", index: number) => void) | undefined, "onMergeCtx">;
+export declare const diffToolTooltip: import('@milkdown/kit/plugin/tooltip').TooltipPlugin<"MERGE_TOOL", any>;
+export declare class DiffTooltipView implements PluginView {
+    private ctx;
+    private editView;
+    private tooltipProvider;
+    private showRect?;
+    private shouldShow;
+    private currentGroupIndex?;
+    private currentPos?;
+    private currentDisplayPos?;
+    private scrollTarget;
+    tooltipElement: HTMLDivElement;
+    acceptButton: HTMLButtonElement;
+    rejectButton: HTMLButtonElement;
+    constructor(ctx: Ctx, editView: EditorView);
+    handleScroll: () => void;
+    handleAccept(): void;
+    handleReject(): void;
+    toggleShow(): void;
+    show(groupIndex: number, rect: DOMRect, pos?: number): void;
+    hide: () => void;
+    hideImmediate: () => void;
+    isVisible(): boolean;
+    update(view: EditorView, _prevState?: EditorState): void;
+    destroy: () => void;
+}
+export declare const diffTooltipPlugins: MilkdownPlugin[];
+export declare const tooltipViewConfig: (ctx: Ctx) => void;
+export declare function shouldShowMergeToolForPos(ctx: Ctx, pos: number): {
+    index: number;
+    decoration: Decoration;
+} | undefined;
+//# sourceMappingURL=diff-tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diff-tooltip.d.ts","sourceRoot":"","sources":["../src/diff-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAGzD,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAOlD,eAAO,MAAM,UAAU,+CACX,QAAQ,GAAG,QAAQ,SAAS,MAAM,KAAK,IAAI,4BAE7B,CAAC;AAE3B,eAAO,MAAM,eAAe,yEAA+B,CAAC;AAE5D,qBAAa,eAAgB,YAAW,UAAU;IAapC,OAAO,CAAC,GAAG;IAAO,OAAO,CAAC,QAAQ;IAZ9C,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,QAAQ,CAAC,CAAU;IAC3B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,iBAAiB,CAAC,CAAS;IACnC,OAAO,CAAC,UAAU,CAAC,CAAS;IAC5B,OAAO,CAAC,iBAAiB,CAAC,CAAS;IACnC,OAAO,CAAC,YAAY,CAA4B;IAEhD,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,EAAE,iBAAiB,CAAC;IAChC,YAAY,EAAE,iBAAiB,CAAC;gBAEZ,GAAG,EAAE,GAAG,EAAU,QAAQ,EAAE,UAAU;IA+C1D,YAAY,aASV;IAEF,YAAY,IAAI,IAAI;IAMpB,YAAY,IAAI,IAAI;IAMpB,UAAU;IAYV,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,CAAC,EAAE,MAAM;IAUpD,IAAI,aAGF;IAEF,aAAa,aAIX;IAEF,SAAS,IAAI,OAAO;IAIpB,MAAM,CAAC,IAAI,EAAE,UAAU,EAAE,UAAU,CAAC,EAAE,WAAW;IAWjD,OAAO,aAML;CACH;AAYD,eAAO,MAAM,kBAAkB,EAAE,cAAc,EAG9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,KAAK,GAAG,SA8BzC,CAAC;AAoDF,wBAAgB,yBAAyB,CACvC,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,MAAM,GACV;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,UAAU,CAAA;CAAE,GAAG,SAAS,CAiBvD"}

package/dist/diffDecorationState.d.ts

@@ -0,0 +1,7 @@
+import { DecorationSet } from '@milkdown/prose/view';
+export interface DiffDecorationState {
+    decorations: DecorationSet | null;
+}
+export declare const diffDecorationState: import('@milkdown/kit/utils').$Ctx<DiffDecorationState, "diffDecorationState">;
+export declare const diffDecorationPlugin: import('@milkdown/kit/utils').$Prose;
+//# sourceMappingURL=diffDecorationState.d.ts.map

package/dist/diffDecorationState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diffDecorationState.d.ts","sourceRoot":"","sources":["../src/diffDecorationState.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGrD,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,aAAa,GAAG,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,mBAAmB,gFAQ/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,sCA6B/B,CAAC"}

package/dist/extended-table-schema.d.ts

@@ -0,0 +1,2 @@
+export declare const extendedTableSchema: import('@milkdown/kit/utils').$NodeSchema<"table">;
+//# sourceMappingURL=extended-table-schema.d.ts.map

package/dist/extended-table-schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extended-table-schema.d.ts","sourceRoot":"","sources":["../src/extended-table-schema.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,oDAQ9B,CAAC"}