Fixing line level diff bug. (#33)

Fixing line level diff bug.

Author: praneshr

src/compute-lines.ts

@@ -126,21 +126,23 @@ const computeLineInformation = (
   let lineInformation: LineInformation[] = [];
   let counter = 0;
   const diffLines: number[] = [];
-  const ignoreDiffIndexes: number[] = [];
+  const ignoreDiffIndexes: string[] = [];
   const getLineInformation = (
     value: string,
     diffIndex: number,
     added?: boolean,
     removed?: boolean,
+    evaluateOnlyFirstLine?: boolean,
   ): LineInformation[] => {
-    if (ignoreDiffIndexes.includes(diffIndex)) {
-      return [];
-    }
     const lines = constructLines(value);
 
-    return lines.map((line: string): LineInformation => {
+    return lines.map((line: string, lineIndex): LineInformation => {
       const left: DiffInformation = {};
       const right: DiffInformation = {};
+      if (ignoreDiffIndexes.includes(`${diffIndex}-${lineIndex}`)
+        || (evaluateOnlyFirstLine && lineIndex !== 0)) {
+        return undefined;
+      }
       if (added || removed) {
         if (!diffLines.includes(counter)) {
           diffLines.push(counter);
@@ -156,25 +158,28 @@ const computeLineInformation = (
           // current line is a modification.
           const nextDiff = diffArray[diffIndex + 1];
           if (nextDiff && nextDiff.added) {
-            const {
-              value: rightValue,
-              lineNumber,
-              type,
-            } = getLineInformation(nextDiff.value, diffIndex, true)[0].right;
-            // When identified as modification, push the next diff to ignore
-            // list as the next value will be added in this line computation as
-            // right and left values.
-            ignoreDiffIndexes.push(diffIndex + 1);
-            right.lineNumber = lineNumber;
-            right.type = type;
-            // Do word level diff and assign the corresponding values to the
-            // left and right diff information object.
-            if (disableWordDiff) {
-              right.value = rightValue;
-            } else {
-              const wordDiff = computeWordDiff(line, rightValue as string);
-              right.value = wordDiff.right;
-              left.value = wordDiff.left;
+            const nextDiffLines = constructLines(nextDiff.value)[lineIndex];
+            if (nextDiffLines) {
+              const {
+                value: rightValue,
+                lineNumber,
+                type,
+              } = getLineInformation(nextDiff.value, diffIndex, true, false, true)[0].right;
+              // When identified as modification, push the next diff to ignore
+              // list as the next value will be added in this line computation as
+              // right and left values.
+              ignoreDiffIndexes.push(`${diffIndex + 1}-${lineIndex}`);
+              right.lineNumber = lineNumber;
+              right.type = type;
+              // Do word level diff and assign the corresponding values to the
+              // left and right diff information object.
+              if (disableWordDiff) {
+                right.value = rightValue;
+              } else {
+                const wordDiff = computeWordDiff(line, rightValue as string);
+                right.value = wordDiff.right;
+                left.value = wordDiff.left;
+              }
             }
           }
         } else {
@@ -197,7 +202,7 @@ const computeLineInformation = (
 
       counter += 1;
       return { right, left };
-    });
+    }).filter(Boolean);
   };
 
   diffArray

src/index.tsx

@@ -462,7 +462,7 @@ class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerSt
           ? this.renderSplitView(line, i)
           : this.renderInlineView(line, i);
 
-        if (currentPosition === extraLines && skippedLines.length > 1) {
+        if (currentPosition === extraLines && skippedLines.length > 0) {
           const { length } = skippedLines;
           skippedLines = [];
           return (

test/react-diff-viewer-test.tsx

@@ -39,7 +39,7 @@ describe('Testing react diff viewer', (): void => {
       newValue={newCode}
     />);
 
-    expect(node.find('table > tbody tr').length).toEqual(6);
+    expect(node.find('table > tbody tr').length).toEqual(7);
   });
 
   it('It should render diff lines in inline view', (): void => {