Word wrap enabled and structure changes in the output

package.json

@@ -124,7 +124,7 @@
     "mini-css-extract-plugin": "2.7.7",
     "mkdirp": "3.0.1",
     "nopt": "7.2.0",
-    "postcss": "8.4.33",
+    "postcss": "^8.4.33",
     "postcss-cli": "11.0.0",
     "postcss-import": "16.0.0",
     "postcss-loader": "7.3.4",

src/diff2html.ts

@@ -19,6 +19,7 @@ export const defaultDiff2HtmlConfig = {
   ...defaultSideBySideRendererConfig,
   outputFormat: OutputFormatType.LINE_BY_LINE,
   drawFileList: true,
+  lineFolding: false
 };
 
 export function parse(diffInput: string, configuration: Diff2HtmlConfig = {}): DiffFile[] {

src/line-by-line-renderer.ts

@@ -16,6 +16,7 @@ export interface LineByLineRendererConfig extends renderUtils.RenderConfig {
   renderNothingWhenEmpty?: boolean;
   matchingMaxComparisons?: number;
   maxLineSizeInBlockForComparison?: number;
+  lineFolding?: boolean;
 }
 
 export const defaultLineByLineRendererConfig = {
@@ -23,6 +24,7 @@ export const defaultLineByLineRendererConfig = {
   renderNothingWhenEmpty: false,
   matchingMaxComparisons: 2500,
   maxLineSizeInBlockForComparison: 200,
+  lineFolding: true
 };
 
 const genericTemplatesPath = 'generic';
@@ -70,6 +72,7 @@ export default class LineByLineRenderer {
       file: file,
       fileHtmlId: renderUtils.getHtmlId(file),
       diffs: diffs,
+      diffClass: (this.config.lineFolding) ? 'd2h-wrapped-file-diff' : '',
       filePath: filePathTemplate.render(
         {
           fileDiffName: renderUtils.filenameDiff(file),
@@ -96,11 +99,13 @@ export default class LineByLineRenderer {
 
     return file.blocks
       .map(block => {
-        let lines = this.hoganUtils.render(genericTemplatesPath, 'block-header', {
+        let lines = this.hoganUtils.render(genericTemplatesPath, 'line', {
-          CSSLineClass: renderUtils.CSSLineClass,
+          lineContent: this.hoganUtils.render(genericTemplatesPath, 'block-header', {
-          blockHeader: file.isTooBig ? block.header : renderUtils.escapeForHtml(block.header),
+            CSSLineClass: renderUtils.CSSLineClass,
-          lineClass: 'd2h-code-linenumber',
+            blockHeader: file.isTooBig ? block.header : renderUtils.escapeForHtml(block.header),
-          contentClass: 'd2h-code-line',
+            lineClass: 'd2h-code-linenumber',
+            contentClass: 'd2h-code-line',
+          })
         });
 
         this.applyLineGroupping(block).forEach(([contextLines, oldLines, newLines]) => {
@@ -113,13 +118,15 @@ export default class LineByLineRenderer {
           } else if (contextLines.length) {
             contextLines.forEach(line => {
               const { prefix, content } = renderUtils.deconstructLine(line.content, file.isCombined);
-              lines += this.generateSingleLineHtml(file, {
+              lines += this.hoganUtils.render(genericTemplatesPath, 'line', {
-                type: renderUtils.CSSLineClass.CONTEXT,
+                lineContent: this.generateSingleLineHtml(file, {
-                prefix: prefix,
+                  type: renderUtils.CSSLineClass.CONTEXT,
-                content: content,
+                  prefix: prefix,
-                oldNumber: line.oldNumber,
+                  content: content,
-                newNumber: line.newNumber,
+                  oldNumber: line.oldNumber,
-              });
+                  newNumber: line.newNumber,
+                })
+              })
             });
           } else if (oldLines.length || newLines.length) {
             const { left, right } = this.processChangedLines(file, file.isCombined, oldLines, newLines);
@@ -253,8 +260,12 @@ export default class LineByLineRenderer {
 
   generateLineHtml(file: DiffFile, oldLine?: DiffPreparedLine, newLine?: DiffPreparedLine): FileHtml {
     return {
-      left: this.generateSingleLineHtml(file, oldLine),
+      left: this.hoganUtils.render(genericTemplatesPath, 'line', {
-      right: this.generateSingleLineHtml(file, newLine),
+        lineContent: this.generateSingleLineHtml(file, oldLine)
+      }),
+      right: this.hoganUtils.render(genericTemplatesPath, 'line', {
+        lineContent: this.generateSingleLineHtml(file, newLine),
+      })
     };
   }
 
@@ -266,7 +277,7 @@ export default class LineByLineRenderer {
       newNumber: line.newNumber || '',
     });
     
-    return this.hoganUtils.render(genericTemplatesPath, 'line', {
+    return this.hoganUtils.render(genericTemplatesPath, 'line-content', {
       type: line.type,
       lineClass: 'd2h-code-linenumber',
       contentClass: 'd2h-code-line',

src/render-utils.ts

@@ -46,6 +46,7 @@ export interface RenderConfig {
   maxLineLengthHighlight?: number;
   diffStyle?: DiffStyleType;
   colorScheme?: ColorSchemeType;
+  lineFolding?: boolean;
 }
 
 export const defaultRenderConfig = {

src/side-by-side-renderer.ts

@@ -16,6 +16,7 @@ export interface SideBySideRendererConfig extends renderUtils.RenderConfig {
   renderNothingWhenEmpty?: boolean;
   matchingMaxComparisons?: number;
   maxLineSizeInBlockForComparison?: number;
+  lineFolding?: boolean;
 }
 
 export const defaultSideBySideRendererConfig = {
@@ -23,6 +24,7 @@ export const defaultSideBySideRendererConfig = {
   renderNothingWhenEmpty: false,
   matchingMaxComparisons: 2500,
   maxLineSizeInBlockForComparison: 200,
+  lineFolding: true
 };
 
 const genericTemplatesPath = 'generic';
@@ -65,11 +67,12 @@ export default class SideBySideRenderer {
     const filePathTemplate = this.hoganUtils.template(genericTemplatesPath, 'file-path');
     const fileIconTemplate = this.hoganUtils.template(iconsBaseTemplatesPath, 'file');
     const fileTagTemplate = this.hoganUtils.template(tagsBaseTemplatesPath, renderUtils.getFileIcon(file));
-
+    debugger;
     return fileDiffTemplate.render({
       file: file,
       fileHtmlId: renderUtils.getHtmlId(file),
       diffs: diffs,
+      diffClass: (this.config.lineFolding) ? 'd2h-wrapped-file-diff' : '',
       filePath: filePathTemplate.render(
         {
           fileDiffName: renderUtils.filenameDiff(file),
@@ -207,12 +210,28 @@ export default class SideBySideRenderer {
   }
 
   makeHeaderHtml(blockHeader: string, file?: DiffFile): string {
-    return this.hoganUtils.render(genericTemplatesPath, 'block-header', {
+    const lineFolding = this.config.lineFolding;
+    let headerContent = this.hoganUtils.render(genericTemplatesPath, 'block-header', {
       CSSLineClass: renderUtils.CSSLineClass,
       blockHeader: file?.isTooBig ? blockHeader : renderUtils.escapeForHtml(blockHeader),
       lineClass: 'd2h-code-side-linenumber',
       contentClass: 'd2h-code-side-line',
     });
+    if(blockHeader.length !== 0) {
+      if(lineFolding) {
+        headerContent += this.hoganUtils.render(genericTemplatesPath, 'block-header', {
+          CSSLineClass: renderUtils.CSSLineClass,
+          blockHeader: "",
+          lineClass: 'd2h-code-side-linenumber',
+          contentClass: 'd2h-code-side-line',
+        });
+      } 
+      return this.hoganUtils.render(genericTemplatesPath, 'line', {
+        lineContent: headerContent
+      });
+    } else {
+      return blockHeader;
+    }
   }
 
   processChangedLines(isCombined: boolean, oldLines: DiffLine[], newLines: DiffLine[]): FileHtml {
@@ -274,17 +293,31 @@ export default class SideBySideRenderer {
   }
 
   generateLineHtml(oldLine?: DiffPreparedLine, newLine?: DiffPreparedLine): FileHtml {
-    return {
+    const lineFolding = this.config.lineFolding;
-      left: this.generateSingleHtml(oldLine),
+    if(lineFolding) {
-      right: this.generateSingleHtml(newLine),
+      return {
-    };
+        left: this.hoganUtils.render(genericTemplatesPath, 'line', {
+                lineContent: this.generateSingleHtml(oldLine) + this.generateSingleHtml(newLine)
+              }),
+        right: ''
+      };
+    } else {
+      return {
+        left: this.hoganUtils.render(genericTemplatesPath, 'line', {
+                lineContent: this.generateSingleHtml(oldLine)
+              }),
+        right: this.hoganUtils.render(genericTemplatesPath, 'line', {
+                lineContent: this.generateSingleHtml(newLine),
+              })
+      };
+    }
   }
 
   generateSingleHtml(line?: DiffPreparedLine): string {
     const lineClass = 'd2h-code-side-linenumber';
     const contentClass = 'd2h-code-side-line';
 
-    return this.hoganUtils.render(genericTemplatesPath, 'line', {
+    return this.hoganUtils.render(genericTemplatesPath, 'line-content', {
       type: line?.type || `${renderUtils.CSSLineClass.CONTEXT} d2h-emptyplaceholder`,
       lineClass: line !== undefined ? lineClass : `${lineClass} d2h-code-side-emptyplaceholder`,
       contentClass: line !== undefined ? contentClass : `${contentClass} d2h-code-side-emptyplaceholder`,

src/templates/generic-block-header.mustache

@@ -1,6 +1,5 @@
-<tr>
+<td class="{{lineClass}} {{CSSLineClass.INFO}}"></td>
-    <td class="{{lineClass}} {{CSSLineClass.INFO}}"></td>
+<td class="{{CSSLineClass.INFO}}">
-    <td class="{{CSSLineClass.INFO}}">
+    <div class="{{contentClass}}">{{#blockHeader}}{{{blockHeader}}}{{/blockHeader}}{{^blockHeader}}&nbsp;{{/blockHeader}}</div>
-        <div class="{{contentClass}}">{{#blockHeader}}{{{blockHeader}}}{{/blockHeader}}{{^blockHeader}}&nbsp;{{/blockHeader}}</div>
+</td>
-    </td>
+
-</tr>

src/templates/generic-line-content.mustache

@@ -0,0 +1,19 @@
+<td class="{{lineClass}} {{type}}">
+    {{{lineNumber}}}
+</td>
+<td class="{{type}}">
+    <div class="{{contentClass}}">
+    {{#prefix}}
+        <span class="d2h-code-line-prefix">{{{prefix}}}</span>
+    {{/prefix}}
+    {{^prefix}}
+        <span class="d2h-code-line-prefix">&nbsp;</span>
+    {{/prefix}}
+    {{#content}}
+        <span class="d2h-code-line-ctn">{{{content}}}</span>
+    {{/content}}
+    {{^content}}
+        <span class="d2h-code-line-ctn"><br></span>
+    {{/content}}
+    </div>
+</td>

src/templates/generic-line.mustache

@@ -1,21 +1,5 @@
+{{#lineContent}}
 <tr>
-    <td class="{{lineClass}} {{type}}">
+    {{{lineContent}}}
-      {{{lineNumber}}}
-    </td>
-    <td class="{{type}}">
-        <div class="{{contentClass}}">
-        {{#prefix}}
-            <span class="d2h-code-line-prefix">{{{prefix}}}</span>
-        {{/prefix}}
-        {{^prefix}}
-            <span class="d2h-code-line-prefix">&nbsp;</span>
-        {{/prefix}}
-        {{#content}}
-            <span class="d2h-code-line-ctn">{{{content}}}</span>
-        {{/content}}
-        {{^content}}
-            <span class="d2h-code-line-ctn"><br></span>
-        {{/content}}
-        </div>
-    </td>
 </tr>
+{{/lineContent}}

src/templates/line-by-line-file-diff.mustache

@@ -2,7 +2,7 @@
     <div class="d2h-file-header">
     {{{filePath}}}
     </div>
-    <div class="d2h-file-diff">
+    <div class="d2h-file-diff {{diffClass}}">
         <div class="d2h-code-wrapper">
             <table class="d2h-diff-table">
                 <tbody class="d2h-diff-tbody">

src/templates/side-by-side-file-diff.mustache

@@ -2,7 +2,7 @@
     <div class="d2h-file-header">
       {{{filePath}}}
     </div>
-    <div class="d2h-files-diff">
+    <div class="d2h-files-diff {{diffClass}}">
         <div class="d2h-file-side-diff">
             <div class="d2h-code-wrapper">
                 <table class="d2h-diff-table">
@@ -12,6 +12,7 @@
                 </table>
             </div>
         </div>
+        {{#diffs.right}}
         <div class="d2h-file-side-diff">
             <div class="d2h-code-wrapper">
                 <table class="d2h-diff-table">
@@ -21,5 +22,6 @@
                 </table>
             </div>
         </div>
+        {{/diffs.right}}
     </div>
 </div>

website/templates/pages/demo/content.handlebars

@@ -52,6 +52,12 @@
           </select>
         </label>
       </div>
+      <div class="column is-one-sixth-widescreen">
+        <label title="Show the file list summary before the diff">
+          <p>Line Folding</p>
+          <input class="options-label-value" id="diff-url-options-line-folding" type="checkbox" name="drawFileList"/>
+        </label>
+      </div>
       <div class="column is-one-sixth-widescreen">
         <label title="Show the file list summary before the diff">
           <p>File Summary</p>

website/templates/pages/demo/demo.ts

@@ -216,6 +216,7 @@ type Elements = {
   };
   checkboxes: {
     drawFileList: HTMLInputElement;
+    lineFolding: HTMLInputElement;
   };
 };
 
@@ -276,6 +277,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     },
     checkboxes: {
       drawFileList: getHTMLInputElementById('diff-url-options-show-files'),
+      lineFolding: getHTMLInputElementById('diff-url-options-line-folding')
     },
   };
 
@@ -285,6 +287,7 @@ document.addEventListener('DOMContentLoaded', async () => {
   config.outputFormat && (elements.options.outputFormat.value = config.outputFormat);
   config.colorScheme && (elements.options.colorScheme.value = config.colorScheme);
   config.drawFileList && (elements.checkboxes.drawFileList.checked = config.drawFileList);
+  config.lineFolding && (elements.checkboxes.lineFolding.checked = config.lineFolding);
   config.matching && (elements.options.matching.value = config.matching);
   config.matchWordsThreshold && (elements.options.wordsThreshold.value = config.matchWordsThreshold.toString());
   config.matchingMaxComparisons &&