@x-oasis/diff-match-patch 0.1.0

package/examples/src/index.css

@@ -0,0 +1,251 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background: #f5f5f5;
+  padding: 20px;
+  line-height: 1.6;
+}
+
+.container {
+  max-width: 1400px;
+  margin: 0 auto;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  padding: 30px;
+}
+
+h1 {
+  color: #333;
+  margin-bottom: 10px;
+  font-size: 28px;
+}
+
+.subtitle {
+  color: #666;
+  margin-bottom: 30px;
+  font-size: 14px;
+}
+
+.section {
+  margin-bottom: 30px;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #e0e0e0;
+}
+
+.file-comparison {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.file-panel {
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.file-header {
+  background: #f8f8f8;
+  padding: 10px 15px;
+  font-weight: 600;
+  color: #555;
+  border-bottom: 1px solid #ddd;
+}
+
+.file-content {
+  padding: 15px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 13px;
+  line-height: 1.8;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  max-height: 400px;
+  overflow-y: auto;
+  background: #fff;
+  resize: vertical;
+  min-height: 200px;
+  width: 100%;
+  border: none;
+  outline: none;
+}
+
+.file-content:focus {
+  outline: none;
+}
+
+.controls {
+  display: grid;
+  grid-template-columns: 1fr 1fr auto;
+  gap: 15px;
+  margin-bottom: 20px;
+  align-items: end;
+}
+
+.control-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.control-group label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #555;
+  margin-bottom: 5px;
+}
+
+.control-group input {
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.control-group input:focus {
+  outline: none;
+  border-color: #4a90e2;
+  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
+}
+
+button {
+  padding: 10px 20px;
+  background: #4a90e2;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+button:hover {
+  background: #357abd;
+}
+
+button:active {
+  transform: translateY(1px);
+}
+
+.result-panel {
+  border: 2px solid #4a90e2;
+  border-radius: 4px;
+  padding: 15px;
+  background: #f0f7ff;
+  margin-top: 20px;
+}
+
+.result-title {
+  font-weight: 600;
+  color: #4a90e2;
+  margin-bottom: 10px;
+}
+
+.result-content {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 13px;
+  line-height: 1.8;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  background: white;
+  padding: 15px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.highlight {
+  background: #fff3cd;
+  padding: 2px 4px;
+  border-radius: 2px;
+  font-weight: 600;
+}
+
+.info-box {
+  background: #e7f3ff;
+  border-left: 4px solid #4a90e2;
+  padding: 12px;
+  margin-bottom: 20px;
+  border-radius: 4px;
+}
+
+.info-box strong {
+  color: #4a90e2;
+}
+
+.example-offsets {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+
+.example-btn {
+  padding: 6px 12px;
+  background: #e7f3ff;
+  color: #4a90e2;
+  border: 1px solid #4a90e2;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.example-btn:hover {
+  background: #4a90e2;
+  color: white;
+}
+
+.diff-container {
+  margin-top: 20px;
+}
+
+.offset-info {
+  margin-top: 10px;
+  padding: 10px;
+  background: #f6f8fa;
+  border-radius: 4px;
+  font-size: 12px;
+  border: 1px solid #d1d9e0;
+}
+
+.offset-info strong {
+  color: #0969da;
+}
+
+.offset-tag {
+  margin-left: 10px;
+  padding: 2px 6px;
+  background: #fff;
+  border-radius: 3px;
+  font-family: monospace;
+}
+
+.diff-insert {
+  background: #d4edda;
+  color: #155724;
+}
+
+.diff-delete {
+  background: #f8d7da;
+  color: #721c24;
+}
+
+.diff-equal {
+  color: #333;
+  background: #fff;
+}

package/examples/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/examples/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@x-oasis/diff-match-patch": ["../src/index.ts"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/examples/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/examples/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@x-oasis/diff-match-patch': path.resolve(__dirname, '../src/index.ts'),
+    },
+  },
+  server: {
+    port: 3000,
+    open: true,
+  },
+});

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@x-oasis/diff-match-patch",
+  "version": "0.1.0",
+  "description": "Restore file content to original version based on offset range",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "module": "dist/diff-match-patch.esm.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "tsdx": "^0.14.1"
+  },
+  "dependencies": {
+    "diff-match-patch": "^1.0.5"
+  },
+  "scripts": {
+    "build": "tsdx build --tsconfig tsconfig.build.json",
+    "clean": "rimraf ./dist",
+    "test": "vitest",
+    "compile": "tsc -p tsconfig.build.json"
+  }
+}

package/src/index.ts

@@ -0,0 +1,294 @@
+import { diff_match_patch } from 'diff-match-patch';
+
+const DIFF_DELETE = -1;
+const DIFF_INSERT = 1;
+const DIFF_EQUAL = 0;
+
+export interface RestoreRangeOptions {
+  startOffset: number;
+  endOffset: number;
+}
+
+/**
+ * 文件恢复管理器
+ * 用于将最新文件中的指定 range 恢复到原始版本
+ */
+export class FileRestoreManager {
+  private originalContent: string;
+  private dmp: diff_match_patch;
+
+  constructor(originalContent: string) {
+    this.originalContent = originalContent;
+    this.dmp = new diff_match_patch();
+  }
+
+  /**
+   * 将最新文件中指定 offset range 的内容恢复到原始版本
+   * @param currentContent 最新文件内容
+   * @param options 包含 startOffset 和 endOffset 的选项
+   * @returns 恢复后的文件内容
+   */
+  restoreRange(currentContent: string, options: RestoreRangeOptions): string {
+    const { startOffset, endOffset } = options;
+
+    if (startOffset < 0 || endOffset < 0 || startOffset > endOffset) {
+      throw new Error('Invalid offset range');
+    }
+
+    if (
+      startOffset > currentContent.length ||
+      endOffset > currentContent.length
+    ) {
+      throw new Error('Offset range exceeds current content length');
+    }
+
+    // 计算差异
+    const diffs = this.dmp.diff_main(this.originalContent, currentContent);
+    this.dmp.diff_cleanupSemantic(diffs);
+
+    // 找到最新文件中 startOffset 和 endOffset 对应的原始文件中的位置
+    const originalRange = this.mapCurrentRangeToOriginal(
+      diffs,
+      startOffset,
+      endOffset
+    );
+
+    // 从原始文件中提取对应范围的内容
+    const originalRangeContent = this.originalContent.substring(
+      originalRange.start,
+      originalRange.end
+    );
+
+    // 获取当前 range 的内容（用于调试）
+    const currentRangeContent = currentContent.substring(
+      startOffset,
+      endOffset
+    );
+
+    // 调试信息
+    console.log('[restoreRange] Debug Info:');
+    console.log(`  startOffset: ${startOffset}, endOffset: ${endOffset}`);
+    console.log(
+      `  Current range content: ${JSON.stringify(currentRangeContent)}`
+    );
+    console.log(
+      `  Original range mapping: ${originalRange.start}-${originalRange.end}`
+    );
+    console.log(`  Will restore to: ${JSON.stringify(originalRangeContent)}`);
+    console.log(
+      `  Content will change: ${currentRangeContent !== originalRangeContent}`
+    );
+
+    // 替换最新文件中指定 range 的内容
+    const restoredContent =
+      currentContent.substring(0, startOffset) +
+      originalRangeContent +
+      currentContent.substring(endOffset);
+
+    return restoredContent;
+  }
+
+  /**
+   * 将最新文件中的 offset range 映射到原始文件中的 offset range
+   */
+  private mapCurrentRangeToOriginal(
+    diffs: Array<[number, string]>,
+    currentStart: number,
+    currentEnd: number
+  ): { start: number; end: number } {
+    let currentOffset = 0; // 当前在最新文件中的 offset
+    let originalOffset = 0; // 当前在原始文件中的 offset
+    let originalStart: number | null = null;
+    let originalEnd: number | null = null;
+
+    for (let i = 0; i < diffs.length; i++) {
+      const [operation, text] = diffs[i];
+      const textLength = text.length;
+      const nextDiff = i < diffs.length - 1 ? diffs[i + 1] : null;
+
+      if (operation === DIFF_EQUAL) {
+        // 相等部分：两个文件的 offset 同步增加
+        const rangeStart = currentOffset;
+        const rangeEnd = currentOffset + textLength;
+
+        // 检查 currentStart 是否在这个 EQUAL 区间内
+        if (
+          originalStart === null &&
+          currentStart >= rangeStart &&
+          currentStart < rangeEnd
+        ) {
+          const offsetInRange = currentStart - rangeStart;
+          originalStart = originalOffset + offsetInRange;
+        }
+        // 检查 currentEnd 是否在这个 EQUAL 区间内
+        if (
+          originalEnd === null &&
+          currentEnd > rangeStart &&
+          currentEnd <= rangeEnd
+        ) {
+          const offsetInRange = currentEnd - rangeStart;
+          originalEnd = originalOffset + offsetInRange;
+
+          // 特殊处理：如果 currentEnd 正好在 EQUAL 的结束位置，且下一个 diff 是 DELETE
+          // 需要包含被删除的内容，以便正确恢复
+          //
+          // 示例：
+          //   原始文件: "...禁用按钮</button>..."
+          //   最新文件: "...禁用</button>..."
+          //   diff: [EQUAL: "...禁用"], [DELETE: "按钮"], [EQUAL: "</button>..."]
+          //
+          //   如果用户选择最新文件的 offset 1512-1514（"禁用"），
+          //   应该恢复为原始文件的 offset 1512-1516（"禁用按钮"）
+          //
+          //   如果不包含 DELETE 的内容，只会恢复到 "禁用"，而不是 "禁用按钮"
+          if (
+            currentEnd === rangeEnd &&
+            nextDiff &&
+            nextDiff[0] === DIFF_DELETE
+          ) {
+            originalEnd = originalOffset + textLength + nextDiff[1].length;
+          }
+        }
+
+        currentOffset += textLength;
+        originalOffset += textLength;
+      } else if (operation === DIFF_INSERT) {
+        // 插入部分：只在新文件中存在
+        const rangeStart = currentOffset;
+        const rangeEnd = currentOffset + textLength;
+
+        // 如果 currentStart 在插入内容中，映射到插入前的原始位置
+        if (
+          originalStart === null &&
+          currentStart >= rangeStart &&
+          currentStart < rangeEnd
+        ) {
+          originalStart = originalOffset;
+        }
+        // 如果 currentEnd 在插入内容中，映射到插入前的原始位置
+        if (
+          originalEnd === null &&
+          currentEnd > rangeStart &&
+          currentEnd <= rangeEnd
+        ) {
+          originalEnd = originalOffset;
+        }
+
+        currentOffset += textLength;
+        // INSERT 不增加 originalOffset
+      } else if (operation === DIFF_DELETE) {
+        // 删除部分：只在原始文件中存在
+        // 如果 currentStart 正好在删除位置之前，需要包含删除的内容
+        if (originalStart === null && currentStart === currentOffset) {
+          // currentStart 正好在删除位置，映射到删除开始的位置
+          originalStart = originalOffset;
+        } else if (originalStart === null && currentStart < currentOffset) {
+          // currentStart 在删除位置之前，映射到删除开始的位置
+          originalStart = originalOffset;
+        }
+
+        // 如果 currentEnd 正好在删除位置之前，需要包含删除的内容
+        if (originalEnd === null && currentEnd === currentOffset) {
+          // currentEnd 正好在删除位置，需要包含整个删除的内容
+          originalEnd = originalOffset + textLength;
+        } else if (originalEnd === null && currentEnd < currentOffset) {
+          // currentEnd 在删除位置之前，映射到删除开始的位置
+          originalEnd = originalOffset;
+        }
+
+        originalOffset += textLength;
+        // DELETE 不增加 currentOffset
+      }
+
+      // 如果两个位置都找到了，可以提前退出
+      if (originalStart !== null && originalEnd !== null) {
+        break;
+      }
+    }
+
+    // 处理边界情况：如果 range 在所有 diff 之后
+    if (originalStart === null) {
+      originalStart = originalOffset;
+    }
+    if (originalEnd === null) {
+      originalEnd = originalOffset;
+    }
+
+    return { start: originalStart, end: originalEnd };
+  }
+
+  /**
+   * 获取原始文件内容
+   */
+  getOriginalContent(): string {
+    return this.originalContent;
+  }
+
+  /**
+   * 更新原始文件内容
+   */
+  updateOriginalContent(newOriginalContent: string): void {
+    this.originalContent = newOriginalContent;
+  }
+
+  /**
+   * 调试方法：分析指定 range 的恢复情况
+   */
+  debugRestoreRange(
+    currentContent: string,
+    options: RestoreRangeOptions
+  ): {
+    hasChanges: boolean;
+    originalRange: { start: number; end: number };
+    currentRange: { start: number; end: number };
+    originalContent: string;
+    currentContent: string;
+    willChange: boolean;
+  } {
+    const { startOffset, endOffset } = options;
+
+    // 计算差异
+    const diffs = this.dmp.diff_main(this.originalContent, currentContent);
+    this.dmp.diff_cleanupSemantic(diffs);
+
+    // 找到映射
+    const originalRange = this.mapCurrentRangeToOriginal(
+      diffs,
+      startOffset,
+      endOffset
+    );
+
+    const originalRangeContent = this.originalContent.substring(
+      originalRange.start,
+      originalRange.end
+    );
+    const currentRangeContent = currentContent.substring(
+      startOffset,
+      endOffset
+    );
+
+    return {
+      hasChanges: this.originalContent !== currentContent,
+      originalRange,
+      currentRange: { start: startOffset, end: endOffset },
+      originalContent: originalRangeContent,
+      currentContent: currentRangeContent,
+      willChange: originalRangeContent !== currentRangeContent,
+    };
+  }
+}
+
+/**
+ * 便捷函数：直接恢复指定 range 的内容
+ */
+export function restoreRange(
+  originalContent: string,
+  currentContent: string,
+  startOffset: number,
+  endOffset: number
+): string {
+  const manager = new FileRestoreManager(originalContent);
+  return manager.restoreRange(currentContent, { startOffset, endOffset });
+}
+
+export default FileRestoreManager;

package/src/types.d.ts

@@ -0,0 +1,6 @@
+// declare module 'diff-match-patch' {
+//   export class diff_match_patch {
+//     diff_main(text1: string, text2: string): Array<[number, string]>;
+//     diff_cleanupSemantic(diffs: Array<[number, string]>): void;
+//   }
+// }