@haklex/rich-diff 0.0.1

package/LICENSE

@@ -0,0 +1,28 @@
+MIT License
+
+Copyright (c) 2024 Innei
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+Additional Terms and Conditions
+
+----------------
+
+Use of this software is governed by the terms of MIT and, in addition, by the terms and conditions described in the additional file (ADDITIONAL_TERMS.md). By using this software, you agree to abide by these additional terms and conditions.

package/README.md

@@ -0,0 +1,31 @@
+# @haklex/rich-diff
+
+编辑器状态差异对比组件。
+
+## 安装
+
+```bash
+pnpm add @haklex/rich-diff @haklex/rich-editor
+```
+
+## 导出
+
+```ts
+export { RichDiff } from './RichDiff'
+export type { RichDiffProps } from './RichDiff'
+export { computeDiff } from './compute-diff'
+export type { DiffHunk, DiffOpType } from './compute-diff'
+```
+
+## 使用
+
+```tsx
+import { RichDiff } from '@haklex/rich-diff'
+import '@haklex/rich-diff/style.css'
+
+<RichDiff oldValue={oldState} newValue={newState} />
+```
+
+## License
+
+MIT

package/dist/RichDiff.d.ts

@@ -0,0 +1,13 @@
+import { RichRendererProps } from '@haklex/rich-editor';
+import { SerializedEditorState } from 'lexical';
+export interface RichDiffProps {
+    oldValue: SerializedEditorState;
+    newValue: SerializedEditorState;
+    variant?: RichRendererProps['variant'];
+    theme?: RichRendererProps['theme'];
+    rendererConfig?: RichRendererProps['rendererConfig'];
+    extraNodes?: RichRendererProps['extraNodes'];
+    className?: string;
+}
+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

@@ -0,0 +1 @@
+{"version":3,"file":"RichDiff.d.ts","sourceRoot":"","sources":["../src/RichDiff.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAI5D,OAAO,KAAK,EAAE,qBAAqB,EAAyB,MAAM,SAAS,CAAA;AAM3E,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"}

package/dist/compute-diff.d.ts

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

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

@@ -0,0 +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"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export type { DiffHunk, DiffOpType } from './compute-diff';
+export { computeDiff } from './compute-diff';
+export type { RichDiffProps } from './RichDiff';
+export { RichDiff } from './RichDiff';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA"}

package/dist/index.mjs

@@ -0,0 +1,491 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getVariantClass, ColorSchemeProvider } from "@haklex/rich-editor";
+import { RichRenderer } from "@haklex/rich-editor/renderer";
+import { PortalThemeProvider } from "@haklex/rich-style-token";
+import { useMemo } from "react";
+const CHAR_DIFF_MAX_MATRIX_CELLS = 5e4;
+const DELETE_MARK_STYLE = "background-color: color-mix(in srgb, var(--rc-alert-caution) 22%, transparent); text-decoration: line-through;";
+const INSERT_MARK_STYLE = "background-color: color-mix(in srgb, var(--rc-alert-tip) 22%, transparent);";
+function getNodeTypeKey(node) {
+  const n = node;
+  if (n.type === "heading") return `heading:${n.tag}`;
+  if (n.type === "list") return `list:${n.listType}`;
+  return n.type || "unknown";
+}
+function nodesEqual(a, b) {
+  return JSON.stringify(a) === JSON.stringify(b);
+}
+function isTextNode(node) {
+  const n = node;
+  return n.type === "text" && typeof n.text === "string";
+}
+function getChildren(node) {
+  const n = node;
+  return Array.isArray(n.children) ? n.children : null;
+}
+function appendStyle(baseStyle, extraStyle) {
+  const normalizedBase = typeof baseStyle === "string" ? baseStyle.trim() : "";
+  if (!normalizedBase) return extraStyle;
+  return `${normalizedBase}${normalizedBase.endsWith(";") ? "" : ";"} ${extraStyle}`;
+}
+function cloneTextNode(node, text, markKind) {
+  let { style } = node;
+  if (markKind === "delete") {
+    style = appendStyle(style, DELETE_MARK_STYLE);
+  } else if (markKind === "insert") {
+    style = appendStyle(style, INSERT_MARK_STYLE);
+  }
+  const cloned = {
+    ...node,
+    text,
+    style
+  };
+  return cloned;
+}
+function cloneNodeWithChildren(node, children) {
+  return {
+    ...node,
+    children
+  };
+}
+function decorateSubtree(node, kind) {
+  if (isTextNode(node)) {
+    return cloneTextNode(node, node.text, kind);
+  }
+  const children = getChildren(node);
+  if (!children) return node;
+  return cloneNodeWithChildren(
+    node,
+    children.map((child) => decorateSubtree(child, kind))
+  );
+}
+function reverseText(value) {
+  return Array.from(value).reverse().join("");
+}
+function mergeTextOps(ops) {
+  const merged = [];
+  for (const op of ops) {
+    if (!op.text) continue;
+    const last = merged.at(-1);
+    if (last && last.kind === op.kind) {
+      last.text += op.text;
+    } else {
+      merged.push({ ...op });
+    }
+  }
+  return merged;
+}
+function diffMiddleChars(oldChars, newChars) {
+  const m = oldChars.length;
+  const n = newChars.length;
+  if (m === 0 && n === 0) return [];
+  if (m === 0) return [{ kind: "insert", text: newChars.join("") }];
+  if (n === 0) return [{ kind: "delete", text: oldChars.join("") }];
+  if (m * n > CHAR_DIFF_MAX_MATRIX_CELLS) {
+    return [
+      { kind: "delete", text: oldChars.join("") },
+      { kind: "insert", text: newChars.join("") }
+    ];
+  }
+  const dp = Array.from(
+    { length: m + 1 },
+    () => new Array(n + 1).fill(0)
+  );
+  for (let i2 = 1; i2 <= m; i2++) {
+    for (let j2 = 1; j2 <= n; j2++) {
+      if (oldChars[i2 - 1] === newChars[j2 - 1]) {
+        dp[i2][j2] = dp[i2 - 1][j2 - 1] + 1;
+      } else {
+        dp[i2][j2] = Math.max(dp[i2 - 1][j2], dp[i2][j2 - 1]);
+      }
+    }
+  }
+  const reversedOps = [];
+  let i = m;
+  let j = n;
+  while (i > 0 && j > 0) {
+    if (oldChars[i - 1] === newChars[j - 1]) {
+      const last = reversedOps.at(-1);
+      if (last && last.kind === "equal") {
+        last.text += oldChars[i - 1];
+      } else {
+        reversedOps.push({ kind: "equal", text: oldChars[i - 1] });
+      }
+      i--;
+      j--;
+      continue;
+    }
+    if (dp[i - 1][j] >= dp[i][j - 1]) {
+      const last = reversedOps.at(-1);
+      if (last && last.kind === "delete") {
+        last.text += oldChars[i - 1];
+      } else {
+        reversedOps.push({ kind: "delete", text: oldChars[i - 1] });
+      }
+      i--;
+    } else {
+      const last = reversedOps.at(-1);
+      if (last && last.kind === "insert") {
+        last.text += newChars[j - 1];
+      } else {
+        reversedOps.push({ kind: "insert", text: newChars[j - 1] });
+      }
+      j--;
+    }
+  }
+  while (i > 0) {
+    const last = reversedOps.at(-1);
+    if (last && last.kind === "delete") {
+      last.text += oldChars[i - 1];
+    } else {
+      reversedOps.push({ kind: "delete", text: oldChars[i - 1] });
+    }
+    i--;
+  }
+  while (j > 0) {
+    const last = reversedOps.at(-1);
+    if (last && last.kind === "insert") {
+      last.text += newChars[j - 1];
+    } else {
+      reversedOps.push({ kind: "insert", text: newChars[j - 1] });
+    }
+    j--;
+  }
+  const forwardOps = reversedOps.reverse().map((op) => ({ kind: op.kind, text: reverseText(op.text) }));
+  return mergeTextOps(forwardOps);
+}
+function diffTextByChar(oldText, newText) {
+  const oldChars = Array.from(oldText);
+  const newChars = Array.from(newText);
+  let prefix = 0;
+  while (prefix < oldChars.length && prefix < newChars.length && oldChars[prefix] === newChars[prefix]) {
+    prefix++;
+  }
+  let oldSuffix = oldChars.length - 1;
+  let newSuffix = newChars.length - 1;
+  while (oldSuffix >= prefix && newSuffix >= prefix && oldChars[oldSuffix] === newChars[newSuffix]) {
+    oldSuffix--;
+    newSuffix--;
+  }
+  const ops = [];
+  if (prefix > 0) {
+    ops.push({
+      kind: "equal",
+      text: oldChars.slice(0, prefix).join("")
+    });
+  }
+  ops.push(
+    ...diffMiddleChars(
+      oldChars.slice(prefix, oldSuffix + 1),
+      newChars.slice(prefix, newSuffix + 1)
+    )
+  );
+  if (oldSuffix < oldChars.length - 1) {
+    ops.push({
+      kind: "equal",
+      text: oldChars.slice(oldSuffix + 1).join("")
+    });
+  }
+  return mergeTextOps(ops);
+}
+function splitTextNodeByCharDiff(oldNode, newNode) {
+  const ops = diffTextByChar(oldNode.text, newNode.text);
+  const oldNodes = [];
+  const newNodes = [];
+  let changed = false;
+  for (const op of ops) {
+    if (!op.text) continue;
+    if (op.kind === "equal") {
+      oldNodes.push(cloneTextNode(oldNode, op.text));
+      newNodes.push(cloneTextNode(newNode, op.text));
+      continue;
+    }
+    changed = true;
+    if (op.kind === "delete") {
+      oldNodes.push(cloneTextNode(oldNode, op.text, "delete"));
+      continue;
+    }
+    newNodes.push(cloneTextNode(newNode, op.text, "insert"));
+  }
+  return {
+    oldNodes: oldNodes.length > 0 ? oldNodes : [oldNode],
+    newNodes: newNodes.length > 0 ? newNodes : [newNode],
+    changed
+  };
+}
+function alignNodes(oldNodes, newNodes) {
+  const m = oldNodes.length;
+  const n = newNodes.length;
+  const dp = Array.from(
+    { length: m + 1 },
+    () => new Array(n + 1).fill(0)
+  );
+  for (let i2 = 1; i2 <= m; i2++) {
+    for (let j2 = 1; j2 <= n; j2++) {
+      const skip = Math.max(dp[i2 - 1][j2], dp[i2][j2 - 1]);
+      if (getNodeTypeKey(oldNodes[i2 - 1]) === getNodeTypeKey(newNodes[j2 - 1])) {
+        const score = nodesEqual(oldNodes[i2 - 1], newNodes[j2 - 1]) ? 2 : 1;
+        dp[i2][j2] = Math.max(skip, dp[i2 - 1][j2 - 1] + score);
+      } else {
+        dp[i2][j2] = skip;
+      }
+    }
+  }
+  const ops = [];
+  let i = m;
+  let j = n;
+  while (i > 0 && j > 0) {
+    const typeMatch = getNodeTypeKey(oldNodes[i - 1]) === getNodeTypeKey(newNodes[j - 1]);
+    if (typeMatch) {
+      const exact = nodesEqual(oldNodes[i - 1], newNodes[j - 1]);
+      const score = exact ? 2 : 1;
+      if (dp[i][j] === dp[i - 1][j - 1] + score) {
+        ops.push(
+          exact ? { kind: "equal", node: oldNodes[i - 1] } : {
+            kind: "modify",
+            oldNode: oldNodes[i - 1],
+            newNode: newNodes[j - 1]
+          }
+        );
+        i--;
+        j--;
+        continue;
+      }
+    }
+    if (dp[i - 1][j] >= dp[i][j - 1]) {
+      ops.push({ kind: "delete", node: oldNodes[i - 1] });
+      i--;
+    } else {
+      ops.push({ kind: "insert", node: newNodes[j - 1] });
+      j--;
+    }
+  }
+  while (i > 0) {
+    ops.push({ kind: "delete", node: oldNodes[--i] });
+  }
+  while (j > 0) {
+    ops.push({ kind: "insert", node: newNodes[--j] });
+  }
+  ops.reverse();
+  return ops;
+}
+function diffChildrenInline(oldChildren, newChildren) {
+  const ops = alignNodes(oldChildren, newChildren);
+  const nextOldChildren = [];
+  const nextNewChildren = [];
+  let changed = false;
+  for (const op of ops) {
+    switch (op.kind) {
+      case "equal":
+        nextOldChildren.push(op.node);
+        nextNewChildren.push(op.node);
+        break;
+      case "delete":
+        changed = true;
+        nextOldChildren.push(decorateSubtree(op.node, "delete"));
+        break;
+      case "insert":
+        changed = true;
+        nextNewChildren.push(decorateSubtree(op.node, "insert"));
+        break;
+      case "modify": {
+        changed = true;
+        if (isTextNode(op.oldNode) && isTextNode(op.newNode)) {
+          const textDiff = splitTextNodeByCharDiff(op.oldNode, op.newNode);
+          nextOldChildren.push(...textDiff.oldNodes);
+          nextNewChildren.push(...textDiff.newNodes);
+          break;
+        }
+        const nested = diffNodeInline(op.oldNode, op.newNode);
+        if (nested) {
+          nextOldChildren.push(nested.oldNode);
+          nextNewChildren.push(nested.newNode);
+        } else {
+          nextOldChildren.push(decorateSubtree(op.oldNode, "delete"));
+          nextNewChildren.push(decorateSubtree(op.newNode, "insert"));
+        }
+        break;
+      }
+    }
+  }
+  return {
+    oldChildren: nextOldChildren,
+    newChildren: nextNewChildren,
+    changed
+  };
+}
+function diffNodeInline(oldNode, newNode) {
+  if (getNodeTypeKey(oldNode) !== getNodeTypeKey(newNode)) return null;
+  if (nodesEqual(oldNode, newNode)) {
+    return { oldNode, newNode, changed: false };
+  }
+  const oldChildren = getChildren(oldNode);
+  const newChildren = getChildren(newNode);
+  if (!oldChildren || !newChildren) return null;
+  const childDiff = diffChildrenInline(oldChildren, newChildren);
+  if (!childDiff.changed) {
+    return { oldNode, newNode, changed: false };
+  }
+  return {
+    oldNode: cloneNodeWithChildren(oldNode, childDiff.oldChildren),
+    newNode: cloneNodeWithChildren(newNode, childDiff.newChildren),
+    changed: true
+  };
+}
+function diffModifiedNode(oldNode, newNode) {
+  const nested = diffNodeInline(oldNode, newNode);
+  if (nested) {
+    return { oldNode: nested.oldNode, newNode: nested.newNode };
+  }
+  return {
+    oldNode: decorateSubtree(oldNode, "delete"),
+    newNode: decorateSubtree(newNode, "insert")
+  };
+}
+function computeDiff(oldState, newState) {
+  const ops = alignNodes(oldState.root.children, newState.root.children);
+  const hunks = [];
+  for (const op of ops) {
+    switch (op.kind) {
+      case "equal": {
+        const last = hunks.at(-1);
+        if (last && last.type === "equal") {
+          last.nodes.push(op.node);
+        } else {
+          hunks.push({ type: "equal", nodes: [op.node] });
+        }
+        break;
+      }
+      case "modify":
+        {
+          const inline = diffModifiedNode(op.oldNode, op.newNode);
+          hunks.push(
+            { type: "delete", nodes: [inline.oldNode] },
+            { type: "insert", nodes: [inline.newNode] }
+          );
+        }
+        break;
+      case "delete":
+        hunks.push({
+          type: "delete",
+          nodes: [decorateSubtree(op.node, "delete")]
+        });
+        break;
+      case "insert":
+        hunks.push({
+          type: "insert",
+          nodes: [decorateSubtree(op.node, "insert")]
+        });
+        break;
+    }
+  }
+  return hunks;
+}
+function buildRows(hunks) {
+  const rows = [];
+  let i = 0;
+  while (i < hunks.length) {
+    const hunk = hunks[i];
+    if (hunk.type === "equal") {
+      rows.push({ left: hunk, right: hunk });
+      i++;
+    } else {
+      const deletes = [];
+      const inserts = [];
+      while (i < hunks.length && hunks[i].type !== "equal") {
+        if (hunks[i].type === "delete") deletes.push(hunks[i]);
+        else inserts.push(hunks[i]);
+        i++;
+      }
+      const maxLen = Math.max(deletes.length, inserts.length);
+      for (let k = 0; k < maxLen; k++) {
+        rows.push({
+          left: k < deletes.length ? deletes[k] : null,
+          right: k < inserts.length ? inserts[k] : null
+        });
+      }
+    }
+  }
+  return rows;
+}
+function wrapDoc(nodes) {
+  return {
+    root: {
+      children: nodes,
+      direction: "ltr",
+      format: "",
+      indent: 0,
+      type: "root",
+      version: 1
+    }
+  };
+}
+function HunkRenderer({
+  hunk,
+  variant,
+  theme,
+  rendererConfig,
+  extraNodes
+}) {
+  const doc = useMemo(() => wrapDoc(hunk.nodes), [hunk.nodes]);
+  return /* @__PURE__ */ jsx(
+    RichRenderer,
+    {
+      value: doc,
+      variant,
+      theme,
+      rendererConfig,
+      extraNodes
+    }
+  );
+}
+function RichDiff({
+  oldValue,
+  newValue,
+  variant = "article",
+  theme = "light",
+  rendererConfig,
+  extraNodes,
+  className
+}) {
+  const hunks = useMemo(
+    () => computeDiff(oldValue, newValue),
+    [oldValue, newValue]
+  );
+  const rows = useMemo(() => buildRows(hunks), [hunks]);
+  const rendererProps = { variant, theme, rendererConfig, extraNodes };
+  const variantClass = getVariantClass(variant, theme);
+  return /* @__PURE__ */ jsx(PortalThemeProvider, { className: variantClass, children: /* @__PURE__ */ jsx(ColorSchemeProvider, { colorScheme: theme, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: variantClass,
+      style: { width: "100%", maxWidth: "100%" },
+      children: /* @__PURE__ */ jsxs("div", { className: `rich-diff ${className || ""}`, children: [
+        /* @__PURE__ */ jsxs("div", { className: "rich-diff-header", children: [
+          /* @__PURE__ */ jsx("div", { className: "rich-diff-header-cell rich-diff-header-old", children: "Old" }),
+          /* @__PURE__ */ jsx("div", { className: "rich-diff-header-cell rich-diff-header-new", children: "New" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "rich-diff-body", children: rows.map((row, i) => /* @__PURE__ */ jsxs("div", { className: "rich-diff-row", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `rich-diff-cell rich-diff-cell-old ${row.left ? row.left.type === "delete" ? "rich-diff-delete" : "" : "rich-diff-empty"}`,
+              children: row.left && /* @__PURE__ */ jsx(HunkRenderer, { hunk: row.left, ...rendererProps })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `rich-diff-cell rich-diff-cell-new ${row.right ? row.right.type === "insert" ? "rich-diff-insert" : "" : "rich-diff-empty"}`,
+              children: row.right && /* @__PURE__ */ jsx(HunkRenderer, { hunk: row.right, ...rendererProps })
+            }
+          )
+        ] }, i)) })
+      ] })
+    }
+  ) }) });
+}
+export {
+  RichDiff,
+  computeDiff
+};

package/dist/rich-diff.css

@@ -0,0 +1,67 @@
+.rich-diff {
+  border: 1px solid var(--rc-border);
+  border-radius: 6px;
+  overflow: hidden;
+  font-size: 14px;
+}
+
+.rich-diff-header {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border-bottom: 1px solid var(--rc-border);
+  background: var(--rc-bg-secondary);
+}
+
+.rich-diff-header-cell {
+  padding: 8px 16px;
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--rc-text-secondary);
+}
+
+.rich-diff-header-old {
+  border-right: 1px solid var(--rc-border);
+}
+
+.rich-diff-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.rich-diff-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border-bottom: 1px solid var(--rc-border);
+}
+
+.rich-diff-row:last-child {
+  border-bottom: none;
+}
+
+.rich-diff-cell {
+  padding: 4px 12px;
+  min-height: 32px;
+  overflow: hidden;
+}
+
+.rich-diff-cell-old {
+  border-right: 1px solid var(--rc-border);
+}
+
+.rich-diff-delete {
+  background-color: color-mix(in srgb, var(--rc-alert-caution) 15%, transparent);
+}
+
+.rich-diff-delete .rich-content__body {
+  opacity: 0.85;
+}
+
+.rich-diff-insert {
+  background-color: color-mix(in srgb, var(--rc-alert-tip) 15%, transparent);
+}
+
+.rich-diff-empty {
+  background-color: var(--rc-bg-secondary);
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@haklex/rich-diff",
+  "version": "0.0.1",
+  "description": "Rich diff editor",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/rich-diff.css"
+  },
+  "main": "./dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "lexical": "^0.39.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "typescript": "^5.9.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.0",
+    "@haklex/rich-editor": "0.0.1",
+    "@haklex/rich-style-token": "0.0.1"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19",
+    "@haklex/rich-editor": "0.0.1",
+    "@haklex/rich-style-token": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev:build": "vite build --watch"
+  },
+  "types": "./dist/index.d.ts"
+}