@haklex/rich-diff 0.0.65 → 0.0.67

package/README.md

@@ -1,31 +1,71 @@
 # @haklex/rich-diff
 
-编辑器状态差异对比组件。
+Diff viewer for comparing two Lexical editor states side-by-side.
 
-## 安装
+## Installation
 
 ```bash
-pnpm add @haklex/rich-diff @haklex/rich-editor
+pnpm add @haklex/rich-diff
 ```
 
-## 导出
+## Peer Dependencies
 
-```ts
-export { RichDiff } from './RichDiff'
-export type { RichDiffProps } from './RichDiff'
-export { computeDiff } from './compute-diff'
-export type { DiffHunk, DiffOpType } from './compute-diff'
-```
+| Package | Version |
+| --- | --- |
+| `react` | `>=19` |
+| `react-dom` | `>=19` |
 
-## 使用
+## Usage
 
 ```tsx
 import { RichDiff } from '@haklex/rich-diff'
 import '@haklex/rich-diff/style.css'
 
-<RichDiff oldValue={oldState} newValue={newState} />
+<RichDiff before={previousEditorState} after={currentEditorState} />
 ```
 
+### Programmatic Diff
+
+```ts
+import { computeDiff } from '@haklex/rich-diff'
+
+const hunks = computeDiff(beforeState, afterState)
+// hunks: DiffHunk[] with op type (add, remove, equal) and content
+```
+
+## Exports
+
+### Components
+
+| Export | Description |
+| --- | --- |
+| `RichDiff` | Side-by-side diff viewer component |
+
+### Functions
+
+| Export | Description |
+| --- | --- |
+| `computeDiff(before, after)` | Compute diff hunks between two editor states |
+
+### Types
+
+| Export | Description |
+| --- | --- |
+| `RichDiffProps` | Props for `RichDiff` |
+| `DiffHunk` | A single diff hunk with operation type and content |
+| `DiffOpType` | Diff operation type (`'add'` / `'remove'` / `'equal'`) |
+
+### Sub-path Exports
+
+| Import Path | Description |
+| --- | --- |
+| `@haklex/rich-diff` | All components, functions, and types |
+| `@haklex/rich-diff/style.css` | Compiled diff viewer stylesheet |
+
+## Part of Haklex
+
+This package is part of the [Haklex](../../README.md) rich editor ecosystem.
+
 ## License
 
 MIT

package/dist/RichDiff.d.ts

@@ -1,13 +1,13 @@
 import { RichRendererProps } from '@haklex/rich-static-renderer';
 import { SerializedEditorState } from 'lexical';
 export interface RichDiffProps {
-    oldValue: SerializedEditorState;
+    className?: string;
+    extraNodes?: RichRendererProps['extraNodes'];
     newValue: SerializedEditorState;
-    variant?: RichRendererProps['variant'];
-    theme?: RichRendererProps['theme'];
+    oldValue: SerializedEditorState;
     rendererConfig?: RichRendererProps['rendererConfig'];
-    extraNodes?: RichRendererProps['extraNodes'];
-    className?: string;
+    theme?: RichRendererProps['theme'];
+    variant?: RichRendererProps['variant'];
 }
 export declare function RichDiff({ oldValue, newValue, variant, theme, rendererConfig, extraNodes, className, }: RichDiffProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RichDiff.d.ts.map

package/dist/RichDiff.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichDiff.d.ts","sourceRoot":"","sources":["../src/RichDiff.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAA;AAGrE,OAAO,KAAK,EAAE,qBAAqB,EAAyB,MAAM,SAAS,CAAA;AAO3E,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,qBAAqB,CAAA;IAC/B,QAAQ,EAAE,qBAAqB,CAAA;IAC/B,OAAO,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAA;IACtC,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAA;IAClC,cAAc,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;IACpD,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA2ED,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,QAAQ,EACR,OAAmB,EACnB,KAAe,EACf,cAAc,EACd,UAAU,EACV,SAAS,GACV,EAAE,aAAa,2CA+Df"}
+{"version":3,"file":"RichDiff.d.ts","sourceRoot":"","sources":["../src/RichDiff.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAGtE,OAAO,KAAK,EAAE,qBAAqB,EAAyB,MAAM,SAAS,CAAC;AAO5E,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAC7C,QAAQ,EAAE,qBAAqB,CAAC;IAChC,QAAQ,EAAE,qBAAqB,CAAC;IAChC,cAAc,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACrD,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;CACxC;AA2ED,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,QAAQ,EACR,OAAmB,EACnB,KAAe,EACf,cAAc,EACd,UAAU,EACV,SAAS,GACV,EAAE,aAAa,2CAiDf"}

package/dist/compute-diff.d.ts

@@ -1,8 +1,8 @@
 import { SerializedEditorState, SerializedLexicalNode } from 'lexical';
 export type DiffOpType = 'equal' | 'insert' | 'delete';
 export interface DiffHunk {
-    type: DiffOpType;
     nodes: SerializedLexicalNode[];
+    type: DiffOpType;
 }
 export declare function computeDiff(oldState: SerializedEditorState, newState: SerializedEditorState): DiffHunk[];
 //# sourceMappingURL=compute-diff.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"compute-diff.d.ts","sourceRoot":"","sources":["../src/compute-diff.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAE3E,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAEtD,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE,qBAAqB,EAAE,CAAA;CAC/B;AA0fD,wBAAgB,WAAW,CACzB,QAAQ,EAAE,qBAAqB,EAC/B,QAAQ,EAAE,qBAAqB,GAC9B,QAAQ,EAAE,CA0CZ"}
+{"version":3,"file":"compute-diff.d.ts","sourceRoot":"","sources":["../src/compute-diff.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAE5E,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEvD,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,IAAI,EAAE,UAAU,CAAC;CAClB;AAgfD,wBAAgB,WAAW,CACzB,QAAQ,EAAE,qBAAqB,EAC/B,QAAQ,EAAE,qBAAqB,GAC9B,QAAQ,EAAE,CA6CZ"}

package/dist/index.mjs

@@ -100,7 +100,7 @@ function diffMiddleChars(oldChars, newChars) {
   }
   const dp = Array.from(
     { length: m + 1 },
-    () => new Array(n + 1).fill(0)
+    () => Array.from({ length: n + 1 }).fill(0)
   );
   for (let i2 = 1; i2 <= m; i2++) {
     for (let j2 = 1; j2 <= n; j2++) {
@@ -229,7 +229,7 @@ function alignNodes(oldNodes, newNodes) {
   const n = newNodes.length;
   const dp = Array.from(
     { length: m + 1 },
-    () => new Array(n + 1).fill(0)
+    () => Array.from({ length: n + 1 }).fill(0)
   );
   for (let i2 = 1; i2 <= m; i2++) {
     for (let j2 = 1; j2 <= n; j2++) {
@@ -287,18 +287,21 @@ function diffChildrenInline(oldChildren, newChildren) {
   let changed = false;
   for (const op of ops) {
     switch (op.kind) {
-      case "equal":
+      case "equal": {
         nextOldChildren.push(op.node);
         nextNewChildren.push(op.node);
         break;
-      case "delete":
+      }
+      case "delete": {
         changed = true;
         nextOldChildren.push(decorateSubtree(op.node, "delete"));
         break;
-      case "insert":
+      }
+      case "insert": {
         changed = true;
         nextNewChildren.push(decorateSubtree(op.node, "insert"));
         break;
+      }
       case "modify": {
         changed = true;
         if (isTextNode(op.oldNode) && isTextNode(op.newNode)) {
@@ -367,7 +370,7 @@ function computeDiff(oldState, newState) {
         }
         break;
       }
-      case "modify":
+      case "modify": {
         {
           const inline = diffModifiedNode(op.oldNode, op.newNode);
           hunks.push(
@@ -376,18 +379,21 @@ function computeDiff(oldState, newState) {
           );
         }
         break;
-      case "delete":
+      }
+      case "delete": {
         hunks.push({
           type: "delete",
           nodes: [decorateSubtree(op.node, "delete")]
         });
         break;
-      case "insert":
+      }
+      case "insert": {
         hunks.push({
           type: "insert",
           nodes: [decorateSubtree(op.node, "insert")]
         });
         break;
+      }
     }
   }
   return hunks;
@@ -442,11 +448,11 @@ function HunkRenderer({
   return /* @__PURE__ */ jsx(
     RichRenderer,
     {
-      value: doc,
-      variant,
-      theme,
+      extraNodes,
       rendererConfig,
-      extraNodes
+      theme,
+      value: doc,
+      variant
     }
   );
 }
@@ -459,48 +465,32 @@ function RichDiff({
   extraNodes,
   className
 }) {
-  const hunks = useMemo(
-    () => computeDiff(oldValue, newValue),
-    [oldValue, newValue]
-  );
+  const hunks = useMemo(() => computeDiff(oldValue, newValue), [oldValue, newValue]);
   const rows = useMemo(() => buildRows(hunks), [hunks]);
   const rendererProps = { variant, theme, rendererConfig, extraNodes };
   const variantClass = getVariantClass(variant);
-  return /* @__PURE__ */ jsx(PortalThemeProvider, { className: variantClass, theme, children: /* @__PURE__ */ jsx(ColorSchemeProvider, { colorScheme: theme, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: variantClass,
-      style: { width: "100%", maxWidth: "100%" },
-      children: /* @__PURE__ */ jsxs("div", { className: `${root} ${className ?? ""}`.trim(), children: [
-        /* @__PURE__ */ jsxs("div", { className: header, children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `${headerCell} ${headerOld}`,
-              children: "Old"
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: headerCell, children: "New" })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: body, children: rows.map((row$1, i) => /* @__PURE__ */ jsxs("div", { className: row, children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `${cell} ${cellOld} ${row$1.left ? row$1.left.type === "delete" ? delete_ : "" : empty}`.trim(),
-              children: row$1.left && /* @__PURE__ */ jsx(HunkRenderer, { hunk: row$1.left, ...rendererProps })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `${cell} ${row$1.right ? row$1.right.type === "insert" ? insert : "" : empty}`.trim(),
-              children: row$1.right && /* @__PURE__ */ jsx(HunkRenderer, { hunk: row$1.right, ...rendererProps })
-            }
-          )
-        ] }, i)) })
-      ] })
-    }
-  ) }) });
+  return /* @__PURE__ */ jsx(PortalThemeProvider, { className: variantClass, theme, children: /* @__PURE__ */ jsx(ColorSchemeProvider, { colorScheme: theme, children: /* @__PURE__ */ jsx("div", { className: variantClass, style: { width: "100%", maxWidth: "100%" }, children: /* @__PURE__ */ jsxs("div", { className: `${root} ${className ?? ""}`.trim(), children: [
+    /* @__PURE__ */ jsxs("div", { className: header, children: [
+      /* @__PURE__ */ jsx("div", { className: `${headerCell} ${headerOld}`, children: "Old" }),
+      /* @__PURE__ */ jsx("div", { className: headerCell, children: "New" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: body, children: rows.map((row$1, i) => /* @__PURE__ */ jsxs("div", { className: row, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${cell} ${cellOld} ${row$1.left ? row$1.left.type === "delete" ? delete_ : "" : empty}`.trim(),
+          children: row$1.left && /* @__PURE__ */ jsx(HunkRenderer, { hunk: row$1.left, ...rendererProps })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${cell} ${row$1.right ? row$1.right.type === "insert" ? insert : "" : empty}`.trim(),
+          children: row$1.right && /* @__PURE__ */ jsx(HunkRenderer, { hunk: row$1.right, ...rendererProps })
+        }
+      )
+    ] }, i)) })
+  ] }) }) }) });
 }
 export {
   RichDiff,

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "@haklex/rich-diff",
-  "type": "module",
-  "version": "0.0.65",
+  "version": "0.0.67",
   "description": "Rich diff editor",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Innei/haklex.git",
+    "directory": "packages/rich-diff"
+  },
   "license": "MIT",
+  "type": "module",
   "exports": {
     ".": {
       "import": "./dist/index.mjs",
@@ -15,14 +20,10 @@
   "files": [
     "dist"
   ],
-  "peerDependencies": {
-    "react": ">=19",
-    "react-dom": ">=19"
-  },
   "dependencies": {
-    "@haklex/rich-style-token": "0.0.65",
-    "@haklex/rich-editor": "0.0.65",
-    "@haklex/rich-static-renderer": "0.0.65"
+    "@haklex/rich-static-renderer": "0.0.67",
+    "@haklex/rich-style-token": "0.0.67",
+    "@haklex/rich-editor": "0.0.67"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",
@@ -36,6 +37,10 @@
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"
   },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
   "publishConfig": {
     "access": "public"
   },