feat(ngx-diff): allow truncated placeholder lines to be expanded to reveal hidden content

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-diff",
-  "version": "6.0.1",
+  "version": "7.0.0-alpha.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

projects/ngx-diff/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-diff",
-  "version": "6.0.1",
+  "version": "7.0.0-alpha.0",
   "peerDependencies": {
     "@angular/common": ">=17.0.0",
     "@angular/core": ">=17.0.0",

projects/ngx-diff/src/lib/common/diff-calculation.interface.ts

@@ -6,7 +6,17 @@ import { LineDiffType } from './line-diff-type';
  *  > lineInNewText keeps track of the document line number in the [newText] input.
  */
 export interface IDiffCalculation {
-  lines: Array<[LineDiffType, number | null, number | null, string]>;
+  lines: Array<{
+    type: LineDiffType;
+    lineNumberInOldText: number | null;
+    lineNumberInNewText: number | null;
+    line: string;
+    args?: {
+      skippedLines?: string[];
+      lineInOldText?: number | null;
+      lineInNewText?: number | null;
+    };
+  }>;
   lineInOldText: number;
   lineInNewText: number;
 }

projects/ngx-diff/src/lib/common/line-diff-type.ts

@@ -2,4 +2,5 @@ export const enum LineDiffType {
   Equal = 1,
   Insert = 2,
   Delete = 3,
+  Placeholder = 4,
 }

projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.html

@@ -1,33 +1,37 @@
-<div class="inline-diff-no-changes-text" *ngIf="isContentEqual">
-  There are no changes to display.
-</div>
-<div class="inline-diff" *ngIf="!isContentEqual">
-  <div class="inline-diff-margin">
-    <div
-      class="line-selector"
-      [ngClass]="lineDiff === selectedLine ? [lineDiff[4], 'selected'] : [lineDiff[4]]"
-      *ngFor="let lineDiff of calculatedDiff; index as idx"
-      (click)="selectLine(idx, lineDiff)"
-    >
-      <div class="inline-diff-old">{{ lineDiff[1] | lineNumber }}</div>
-      <!-- No space
-      -->
-      <div class="inline-diff-new">{{ lineDiff[2] | lineNumber }}</div>
+@if (isContentEqual) {
+  <div class="inline-diff-no-changes-text">There are no changes to display.</div>
+}
+@if (!isContentEqual) {
+  <div class="inline-diff">
+    <div class="inline-diff-margin">
+      @for (lineDiff of calculatedDiff; track lineDiff; let idx = $index) {
+        <div
+          class="line-selector"
+          [ngClass]="
+            lineDiff === selectedLine ? [lineDiff.cssClass, 'selected'] : [lineDiff.cssClass]
+          "
+          (click)="selectLine(idx, lineDiff)"
+        >
+          <div class="inline-diff-old">{{ lineDiff.lineNumberInOldText | lineNumber }}</div>
+          <div class="inline-diff-new">{{ lineDiff.lineNumberInNewText | lineNumber }}</div>
+        </div>
+      }
+      <div class="dmp-margin-bottom-spacer"></div>
     </div>
-    <div class="dmp-margin-bottom-spacer"></div>
-  </div>
-  <!-- No space
-  -->
-  <div class="inline-diff-content">
-    <div class="inline-diff-content-wrapper">
-      <div
-        class="line-content"
-        [ngClass]="lineDiff === selectedLine ? [lineDiff[4], 'selected'] : [lineDiff[4]]"
-        *ngFor="let lineDiff of calculatedDiff"
-      >
-        <div class="inline-diff-text">{{ lineDiff[3] }}</div>
+    <div class="inline-diff-content">
+      <div class="inline-diff-content-wrapper">
+        @for (lineDiff of calculatedDiff; track lineDiff) {
+          <div
+            class="line-content"
+            [ngClass]="
+              lineDiff === selectedLine ? [lineDiff.cssClass, 'selected'] : [lineDiff.cssClass]
+            "
+          >
+            <div class="inline-diff-text">{{ lineDiff.line }}</div>
+          </div>
+        }
+        <div class="dmp-margin-bottom-spacer line-content"></div>
       </div>
-      <div class="dmp-margin-bottom-spacer line-content"></div>
     </div>
   </div>
-</div>
+}

projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.spec.ts

@@ -43,15 +43,15 @@ describe('InlineDiffComponent', () => {
   });
 
   it('should have correct line numbers', () => {
-    const leftLineNumbers = component.calculatedDiff.map((x) => x[1]);
+    const leftLineNumbers = component.calculatedDiff.map((x) => x.lineNumberInOldText);
     expect(leftLineNumbers).toEqual([1, 2, null, null, 3, 4, 5, 6]);
 
-    const rightLineNumbers = component.calculatedDiff.map((x) => x[2]);
+    const rightLineNumbers = component.calculatedDiff.map((x) => x.lineNumberInNewText);
     expect(rightLineNumbers).toEqual([1, 2, 3, 4, null, null, 5, 6]);
   });
 
   it('should have correct class annotations', () => {
-    const classes = component.calculatedDiff.map((x) => x[0]);
+    const classes = component.calculatedDiff.map((x) => x.type);
     expect(classes).toEqual([
       LineDiffType.Equal,
       LineDiffType.Equal,
@@ -65,7 +65,7 @@ describe('InlineDiffComponent', () => {
   });
 
   it('should have correct line contents', () => {
-    const contents = component.calculatedDiff.map((x) => x[3]);
+    const contents = component.calculatedDiff.map((x) => x.line);
     expect(contents).toEqual([
       'Diff One A',
       'Diff One B',

projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.ts

@@ -7,17 +7,24 @@ import { LineDiffType } from '../../common/line-diff-type';
 import { LineSelectEvent } from '../../common/line-select-event';
 import { DiffMatchPatchService } from '../../services/diff-match-patch/diff-match-patch.service';
 import { LineNumberPipe } from '../../pipes/line-number/line-number.pipe';
-import { NgIf, NgFor, NgClass } from '@angular/common';
+import { NgClass } from '@angular/common';
 
-type LineDiff = [LineDiffType, number | null, number | null, string, string];
+type LineDiff = {
+  type: LineDiffType;
+  lineNumberInOldText: number | null;
+  lineNumberInNewText: number | null;
+  line: string;
+  args?: { skippedLines?: string[]; lineInOldText?: number | null; lineInNewText?: number | null };
+  cssClass: string;
+};
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'inline-diff',
   templateUrl: './inline-diff.component.html',
   styleUrls: ['./inline-diff.component.scss'],
   standalone: true,
-  imports: [NgIf, NgFor, NgClass, LineNumberPipe],
+  imports: [NgClass, LineNumberPipe],
 })
 export class InlineDiffComponent implements OnInit, OnChanges {
   @Input()
@@ -51,7 +58,12 @@ export class InlineDiffComponent implements OnInit, OnChanges {
 
   public selectLine(index: number, lineDiff: LineDiff): void {
     this.selectedLine = lineDiff;
-    const [type, lineNumberInOldText, lineNumberInNewText, line] = lineDiff;
+    const { type, lineNumberInOldText, lineNumberInNewText, line } = lineDiff;
+
+    if (type === LineDiffType.Placeholder) {
+      this.expandPlaceholder(index, lineDiff);
+    }
+
     this.selectedLineChange.emit({
       index,
       type,
@@ -61,6 +73,82 @@ export class InlineDiffComponent implements OnInit, OnChanges {
     });
   }
 
+  private expandPlaceholder(index: number, placeholder: LineDiff): void {
+    const replacementLines = this.getPlaceholderReplacementLines(placeholder);
+    this.calculatedDiff.splice(index, 1, ...replacementLines);
+  }
+
+  private getPlaceholderReplacementLines(placeholder: LineDiff): LineDiff[] {
+    const skippedLines = placeholder.args?.skippedLines ?? [];
+    const lineInOldText = placeholder.args?.lineInOldText ?? 0;
+    const lineInNewText = placeholder.args?.lineInNewText ?? 0;
+
+    if (this.lineContextSize && skippedLines.length > 2 * this.lineContextSize) {
+      const prefix = skippedLines.slice(0, this.lineContextSize);
+      const remainingSkippedLines = skippedLines.slice(
+        this.lineContextSize,
+        skippedLines.length - this.lineContextSize,
+      );
+      const suffix = skippedLines.slice(
+        skippedLines.length - this.lineContextSize,
+        skippedLines.length,
+      );
+
+      const prefixLines = this.createLineDiffs(prefix, lineInOldText, lineInNewText);
+
+      const newPlaceholder: LineDiff = {
+        type: LineDiffType.Placeholder,
+        lineNumberInOldText: null,
+        lineNumberInNewText: null,
+        line: '...',
+        args: {
+          skippedLines: remainingSkippedLines,
+          lineInOldText: lineInOldText + prefix.length,
+          lineInNewText: lineInNewText + prefix.length,
+        },
+        cssClass: this.getCssClass(LineDiffType.Placeholder),
+      };
+
+      const numberOfPrefixAndSkippedLines = prefix.length + remainingSkippedLines.length;
+
+      const suffixLines = this.createLineDiffs(
+        suffix,
+        lineInOldText + numberOfPrefixAndSkippedLines,
+        lineInNewText + numberOfPrefixAndSkippedLines,
+      );
+
+      return [...prefixLines, newPlaceholder, ...suffixLines];
+    }
+
+    return this.createLineDiffs(skippedLines, lineInOldText, lineInNewText);
+  }
+
+  private createLineDiffs(
+    lines: string[],
+    startLineInOldText: number,
+    startLineInNewText: number,
+  ): LineDiff[] {
+    let lineNumberInOldText = startLineInOldText;
+    let lineNumberInNewText = startLineInNewText;
+
+    const cssClass = this.getCssClass(LineDiffType.Equal);
+    const linesToInsert: LineDiff[] = [];
+
+    for (const line of lines) {
+      linesToInsert.push({
+        type: LineDiffType.Equal,
+        lineNumberInOldText,
+        lineNumberInNewText,
+        line: line,
+        cssClass,
+      });
+      lineNumberInOldText++;
+      lineNumberInNewText++;
+    }
+
+    return linesToInsert;
+  }
+
   private updateHtml(): void {
     if (typeof this.oldText === 'number' || typeof this.oldText === 'boolean') {
       this.oldText = this.oldText.toString();
@@ -113,8 +201,15 @@ export class InlineDiffComponent implements OnInit, OnChanges {
     }
 
     this.calculatedDiff = diffCalculation.lines.map(
-      ([type, lineNumberInOldText, lineNumberInNewText, line]) => {
-        return [type, lineNumberInOldText, lineNumberInNewText, line, this.getCssClass(type)];
+      ({ type, lineNumberInOldText, lineNumberInNewText, line, args }) => {
+        return {
+          type,
+          lineNumberInOldText,
+          lineNumberInNewText,
+          line,
+          args,
+          cssClass: this.getCssClass(type),
+        };
       },
     );
   }
@@ -154,7 +249,20 @@ export class InlineDiffComponent implements OnInit, OnChanges {
         this.outputEqualDiffLines(diffLines.slice(0, this.lineContextSize), diffCalculation);
 
         // Output a special line indicating that some content is equal and has been skipped
-        diffCalculation.lines.push([LineDiffType.Equal, null, null, '...']);
+        diffCalculation.lines.push({
+          type: LineDiffType.Placeholder,
+          lineNumberInOldText: null,
+          lineNumberInNewText: null,
+          line: '...',
+          args: {
+            skippedLines: diffLines.slice(
+              this.lineContextSize,
+              diffLines.length - this.lineContextSize,
+            ),
+            lineInOldText: diffCalculation.lineInOldText,
+            lineInNewText: diffCalculation.lineInNewText,
+          },
+        });
         const numberOfSkippedLines = diffLines.length - 2 * this.lineContextSize;
         diffCalculation.lineInOldText += numberOfSkippedLines;
         diffCalculation.lineInNewText += numberOfSkippedLines;
@@ -174,33 +282,44 @@ export class InlineDiffComponent implements OnInit, OnChanges {
 
   private outputEqualDiffLines(diffLines: string[], diffCalculation: IDiffCalculation): void {
     for (const line of diffLines) {
-      diffCalculation.lines.push([
-        LineDiffType.Equal,
-        diffCalculation.lineInOldText,
-        diffCalculation.lineInNewText,
+      diffCalculation.lines.push({
+        type: LineDiffType.Equal,
+        lineNumberInOldText: diffCalculation.lineInOldText,
+        lineNumberInNewText: diffCalculation.lineInNewText,
         line,
-      ]);
+      });
       diffCalculation.lineInOldText++;
       diffCalculation.lineInNewText++;
     }
   }
 
   private outputDeleteDiff(diffLines: string[], diffCalculation: IDiffCalculation): void {
     for (const line of diffLines) {
-      diffCalculation.lines.push([LineDiffType.Delete, diffCalculation.lineInOldText, null, line]);
+      diffCalculation.lines.push({
+        type: LineDiffType.Delete,
+        lineNumberInOldText: diffCalculation.lineInOldText,
+        lineNumberInNewText: null,
+        line,
+      });
       diffCalculation.lineInOldText++;
     }
   }
 
   private outputInsertDiff(diffLines: string[], diffCalculation: IDiffCalculation): void {
     for (const line of diffLines) {
-      diffCalculation.lines.push([LineDiffType.Insert, null, diffCalculation.lineInNewText, line]);
+      diffCalculation.lines.push({
+        type: LineDiffType.Insert,
+        lineNumberInOldText: null,
+        lineNumberInNewText: diffCalculation.lineInNewText,
+        line,
+      });
       diffCalculation.lineInNewText++;
     }
   }
 
   private getCssClass(type: LineDiffType): string {
     switch (type) {
+      case LineDiffType.Placeholder:
       case LineDiffType.Equal:
         return 'inline-diff-equal';
       case LineDiffType.Insert: