fix: Skip selection of structural lines in side diff

src/__tests__/side-by-side-printer-tests.ts

@@ -78,13 +78,13 @@ describe('SideBySideRenderer', () => {
       const fileHtml = sideBySideRenderer.generateFileHtml(file);
 
       expect(fileHtml).toMatchInlineSnapshot(`
-        Object {
+Object {
   "left": "<tr>
     <td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
     <td class=\\"d2h-info\\">
         <div class=\\"d2h-code-side-line d2h-info\\">@@ -19,7 +19,7 @@</div>
     </td>
-        </tr><tr>
+</tr><tr>
     <td class=\\"d2h-code-side-linenumber d2h-cntx\\">
       19
     </td>
@@ -94,7 +94,7 @@ describe('SideBySideRenderer', () => {
             <span class=\\"d2h-code-line-ctn\\">context</span>
         </div>
     </td>
-        </tr><tr>
+</tr><tr>
     <td class=\\"d2h-code-side-linenumber d2h-del d2h-change\\">
       20
     </td>
@@ -104,23 +104,23 @@ describe('SideBySideRenderer', () => {
             <span class=\\"d2h-code-line-ctn\\"><del>removed</del></span>
         </div>
     </td>
-        </tr><tr>
+</tr><tr>
     <td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
       
     </td>
     <td class=\\"d2h-cntx d2h-emptyplaceholder\\">
         <div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
             <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
-                    <span class=\\"d2h-code-line-ctn\\">&nbsp;</span>
+            <span class=\\"d2h-code-line-ctn\\"><br></span>
         </div>
     </td>
-        </tr>",
+</tr>",
   "right": "<tr>
     <td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
     <td class=\\"d2h-info\\">
         <div class=\\"d2h-code-side-line d2h-info\\"></div>
     </td>
-        </tr><tr>
+</tr><tr>
     <td class=\\"d2h-code-side-linenumber d2h-cntx\\">
       19
     </td>
@@ -130,7 +130,7 @@ describe('SideBySideRenderer', () => {
             <span class=\\"d2h-code-line-ctn\\">context</span>
         </div>
     </td>
-        </tr><tr>
+</tr><tr>
     <td class=\\"d2h-code-side-linenumber d2h-ins d2h-change\\">
       20
     </td>
@@ -140,7 +140,7 @@ describe('SideBySideRenderer', () => {
             <span class=\\"d2h-code-line-ctn\\"><ins>added</ins></span>
         </div>
     </td>
-        </tr><tr>
+</tr><tr>
     <td class=\\"d2h-code-side-linenumber d2h-ins\\">
       21
     </td>
@@ -150,9 +150,9 @@ describe('SideBySideRenderer', () => {
             <span class=\\"d2h-code-line-ctn\\">another added</span>
         </div>
     </td>
-        </tr>",
-        }
-      `);
+</tr>",
+}
+`);
     });
   });
 
@@ -168,7 +168,7 @@ describe('SideBySideRenderer', () => {
       });
 
       expect(fileHtml).toMatchInlineSnapshot(`
-        Object {
+Object {
   "left": "<tr>
     <td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
       
@@ -176,10 +176,10 @@ describe('SideBySideRenderer', () => {
     <td class=\\"d2h-cntx d2h-emptyplaceholder\\">
         <div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
             <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
-                    <span class=\\"d2h-code-line-ctn\\">&nbsp;</span>
+            <span class=\\"d2h-code-line-ctn\\"><br></span>
         </div>
     </td>
-        </tr>",
+</tr>",
   "right": "<tr>
     <td class=\\"d2h-code-side-linenumber d2h-ins\\">
       30
@@ -190,9 +190,9 @@ describe('SideBySideRenderer', () => {
             <span class=\\"d2h-code-line-ctn\\">test</span>
         </div>
     </td>
-        </tr>",
-        }
-      `);
+</tr>",
+}
+`);
     });
     it('should work for deletions', () => {
       const hoganUtils = new HoganJsUtils({});
@@ -208,7 +208,7 @@ describe('SideBySideRenderer', () => {
       );
 
       expect(fileHtml).toMatchInlineSnapshot(`
-        Object {
+Object {
   "left": "<tr>
     <td class=\\"d2h-code-side-linenumber d2h-del\\">
       30
@@ -219,7 +219,7 @@ describe('SideBySideRenderer', () => {
             <span class=\\"d2h-code-line-ctn\\">test</span>
         </div>
     </td>
-        </tr>",
+</tr>",
   "right": "<tr>
     <td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
       
@@ -227,12 +227,12 @@ describe('SideBySideRenderer', () => {
     <td class=\\"d2h-cntx d2h-emptyplaceholder\\">
         <div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
             <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
-                    <span class=\\"d2h-code-line-ctn\\">&nbsp;</span>
+            <span class=\\"d2h-code-line-ctn\\"><br></span>
         </div>
     </td>
-        </tr>",
-        }
-      `);
+</tr>",
+}
+`);
     });
   });
 

src/side-by-side-renderer.ts

@@ -285,8 +285,8 @@ export default class SideBySideRenderer {
       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`,
-      prefix: line?.prefix === ' ' ? ' ' : line?.prefix || ' ',
-      content: line?.content || ' ',
+      prefix: line?.prefix === ' ' ? ' ' : line?.prefix,
+      content: line?.content,
       lineNumber: line?.number,
     });
   }

src/templates/generic-line.mustache

@@ -7,6 +7,9 @@
         {{#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}}

src/ui/css/diff2html.css

@@ -207,7 +207,8 @@
 
 .d2h-code-linenumber,
 .d2h-code-side-linenumber,
-.d2h-code-line-prefix {
+.d2h-code-line-prefix,
+.d2h-emptyplaceholder {
   user-select: none;
 }