luciano/diff2html
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #307 from rtfpessoa/fix-selection-empty-lines-side

Browse source 
fix: Skip selection of structural lines in side diff
This commit is contained in:
Rodrigo Fernandes 2020-02-09 19:23:33 +00:00 committed by GitHub
commit 884b95be07
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 132 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

244
src/__tests__/side-by-side-printer-tests.ts
View file

@ -78,81 +78,81 @@ describe('SideBySideRenderer', () => {
const fileHtml = sideBySideRenderer.generateFileHtml(file); const fileHtml = sideBySideRenderer.generateFileHtml(file);
expect(fileHtml).toMatchInlineSnapshot(` expect(fileHtml).toMatchInlineSnapshot(`
Object { Object {
"left": "<tr> "left": "<tr>
<td class=\\"d2h-code-side-linenumber d2h-info\\"></td> <td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
<td class=\\"d2h-info\\"> <td class=\\"d2h-info\\">
<div class=\\"d2h-code-side-line d2h-info\\">@@ -19,7 +19,7 @@</div> <div class=\\"d2h-code-side-line d2h-info\\">@@ -19,7 +19,7 @@</div>
</td> </td>
</tr><tr> </tr><tr>
<td class=\\"d2h-code-side-linenumber d2h-cntx\\"> <td class=\\"d2h-code-side-linenumber d2h-cntx\\">
19 19
</td> </td>
<td class=\\"d2h-cntx\\"> <td class=\\"d2h-cntx\\">
<div class=\\"d2h-code-side-line d2h-cntx\\"> <div class=\\"d2h-code-side-line d2h-cntx\\">
<span class=\\"d2h-code-line-prefix\\">&nbsp;</span> <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
<span class=\\"d2h-code-line-ctn\\">context</span> <span class=\\"d2h-code-line-ctn\\">context</span>
</div> </div>
</td> </td>
</tr><tr> </tr><tr>
<td class=\\"d2h-code-side-linenumber d2h-del d2h-change\\"> <td class=\\"d2h-code-side-linenumber d2h-del d2h-change\\">
20 20
</td> </td>
<td class=\\"d2h-del d2h-change\\"> <td class=\\"d2h-del d2h-change\\">
<div class=\\"d2h-code-side-line d2h-del d2h-change\\"> <div class=\\"d2h-code-side-line d2h-del d2h-change\\">
<span class=\\"d2h-code-line-prefix\\">-</span> <span class=\\"d2h-code-line-prefix\\">-</span>
<span class=\\"d2h-code-line-ctn\\"><del>removed</del></span> <span class=\\"d2h-code-line-ctn\\"><del>removed</del></span>
</div> </div>
</td> </td>
</tr><tr> </tr><tr>
<td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\"> <td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
</td> </td>
<td class=\\"d2h-cntx d2h-emptyplaceholder\\"> <td class=\\"d2h-cntx d2h-emptyplaceholder\\">
<div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder 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-prefix\\">&nbsp;</span>
<span class=\\"d2h-code-line-ctn\\">&nbsp;</span> <span class=\\"d2h-code-line-ctn\\"><br></span>
</div> </div>
</td> </td>
</tr>", </tr>",
"right": "<tr> "right": "<tr>
<td class=\\"d2h-code-side-linenumber d2h-info\\"></td> <td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
<td class=\\"d2h-info\\"> <td class=\\"d2h-info\\">
<div class=\\"d2h-code-side-line d2h-info\\"></div> <div class=\\"d2h-code-side-line d2h-info\\"></div>
</td> </td>
</tr><tr> </tr><tr>
<td class=\\"d2h-code-side-linenumber d2h-cntx\\"> <td class=\\"d2h-code-side-linenumber d2h-cntx\\">
19 19
</td> </td>
<td class=\\"d2h-cntx\\"> <td class=\\"d2h-cntx\\">
<div class=\\"d2h-code-side-line d2h-cntx\\"> <div class=\\"d2h-code-side-line d2h-cntx\\">
<span class=\\"d2h-code-line-prefix\\">&nbsp;</span> <span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
<span class=\\"d2h-code-line-ctn\\">context</span> <span class=\\"d2h-code-line-ctn\\">context</span>
</div> </div>
</td> </td>
</tr><tr> </tr><tr>
<td class=\\"d2h-code-side-linenumber d2h-ins d2h-change\\"> <td class=\\"d2h-code-side-linenumber d2h-ins d2h-change\\">
20 20
</td> </td>
<td class=\\"d2h-ins d2h-change\\"> <td class=\\"d2h-ins d2h-change\\">
<div class=\\"d2h-code-side-line d2h-ins d2h-change\\"> <div class=\\"d2h-code-side-line d2h-ins d2h-change\\">
<span class=\\"d2h-code-line-prefix\\">+</span> <span class=\\"d2h-code-line-prefix\\">+</span>
<span class=\\"d2h-code-line-ctn\\"><ins>added</ins></span> <span class=\\"d2h-code-line-ctn\\"><ins>added</ins></span>
</div> </div>
</td> </td>
</tr><tr> </tr><tr>
<td class=\\"d2h-code-side-linenumber d2h-ins\\"> <td class=\\"d2h-code-side-linenumber d2h-ins\\">
21 21
</td> </td>
<td class=\\"d2h-ins\\"> <td class=\\"d2h-ins\\">
<div class=\\"d2h-code-side-line d2h-ins\\"> <div class=\\"d2h-code-side-line d2h-ins\\">
<span class=\\"d2h-code-line-prefix\\">+</span> <span class=\\"d2h-code-line-prefix\\">+</span>
<span class=\\"d2h-code-line-ctn\\">another added</span> <span class=\\"d2h-code-line-ctn\\">another added</span>
</div> </div>
</td> </td>
</tr>", </tr>",
} }
`); `);
}); });
}); });
@ -168,31 +168,31 @@ describe('SideBySideRenderer', () => {
}); });
expect(fileHtml).toMatchInlineSnapshot(` expect(fileHtml).toMatchInlineSnapshot(`
Object { Object {
"left": "<tr> "left": "<tr>
<td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\"> <td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
</td> </td>
<td class=\\"d2h-cntx d2h-emptyplaceholder\\"> <td class=\\"d2h-cntx d2h-emptyplaceholder\\">
<div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder 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-prefix\\">&nbsp;</span>
<span class=\\"d2h-code-line-ctn\\">&nbsp;</span> <span class=\\"d2h-code-line-ctn\\"><br></span>
</div> </div>
</td> </td>
</tr>", </tr>",
"right": "<tr> "right": "<tr>
<td class=\\"d2h-code-side-linenumber d2h-ins\\"> <td class=\\"d2h-code-side-linenumber d2h-ins\\">
30 30
</td> </td>
<td class=\\"d2h-ins\\"> <td class=\\"d2h-ins\\">
<div class=\\"d2h-code-side-line d2h-ins\\"> <div class=\\"d2h-code-side-line d2h-ins\\">
<span class=\\"d2h-code-line-prefix\\">+</span> <span class=\\"d2h-code-line-prefix\\">+</span>
<span class=\\"d2h-code-line-ctn\\">test</span> <span class=\\"d2h-code-line-ctn\\">test</span>
</div> </div>
</td> </td>
</tr>", </tr>",
} }
`); `);
}); });
it('should work for deletions', () => { it('should work for deletions', () => {
const hoganUtils = new HoganJsUtils({}); const hoganUtils = new HoganJsUtils({});
@ -208,31 +208,31 @@ describe('SideBySideRenderer', () => {
); );
expect(fileHtml).toMatchInlineSnapshot(` expect(fileHtml).toMatchInlineSnapshot(`
Object { Object {
"left": "<tr> "left": "<tr>
<td class=\\"d2h-code-side-linenumber d2h-del\\"> <td class=\\"d2h-code-side-linenumber d2h-del\\">
30 30
</td> </td>
<td class=\\"d2h-del\\"> <td class=\\"d2h-del\\">
<div class=\\"d2h-code-side-line d2h-del\\"> <div class=\\"d2h-code-side-line d2h-del\\">
<span class=\\"d2h-code-line-prefix\\">-</span> <span class=\\"d2h-code-line-prefix\\">-</span>
<span class=\\"d2h-code-line-ctn\\">test</span> <span class=\\"d2h-code-line-ctn\\">test</span>
</div> </div>
</td> </td>
</tr>", </tr>",
"right": "<tr> "right": "<tr>
<td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\"> <td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
</td> </td>
<td class=\\"d2h-cntx d2h-emptyplaceholder\\"> <td class=\\"d2h-cntx d2h-emptyplaceholder\\">
<div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder 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-prefix\\">&nbsp;</span>
<span class=\\"d2h-code-line-ctn\\">&nbsp;</span> <span class=\\"d2h-code-line-ctn\\"><br></span>
</div> </div>
</td> </td>
</tr>", </tr>",
} }
`); `);
}); });
}); });

4
src/side-by-side-renderer.ts
View file

@ -285,8 +285,8 @@ export default class SideBySideRenderer {
type: line?.type || `${renderUtils.CSSLineClass.CONTEXT} d2h-emptyplaceholder`, type: line?.type || `${renderUtils.CSSLineClass.CONTEXT} d2h-emptyplaceholder`,
lineClass: line !== undefined ? lineClass : `${lineClass} d2h-code-side-emptyplaceholder`, lineClass: line !== undefined ? lineClass : `${lineClass} d2h-code-side-emptyplaceholder`,
contentClass: line !== undefined ? contentClass : `${contentClass} d2h-code-side-emptyplaceholder`, contentClass: line !== undefined ? contentClass : `${contentClass} d2h-code-side-emptyplaceholder`,
prefix: line?.prefix === ' ' ? '&nbsp;' : line?.prefix || '&nbsp;', prefix: line?.prefix === ' ' ? '&nbsp;' : line?.prefix,
content: line?.content || '&nbsp;', content: line?.content,
lineNumber: line?.number, lineNumber: line?.number,
}); });
} }

3
src/templates/generic-line.mustache
View file

@ -7,6 +7,9 @@
{{#prefix}} {{#prefix}}
<span class="d2h-code-line-prefix">{{{prefix}}}</span> <span class="d2h-code-line-prefix">{{{prefix}}}</span>
{{/prefix}} {{/prefix}}
{{^prefix}}
<span class="d2h-code-line-prefix">&nbsp;</span>
{{/prefix}}
{{#content}} {{#content}}
<span class="d2h-code-line-ctn">{{{content}}}</span> <span class="d2h-code-line-ctn">{{{content}}}</span>
{{/content}} {{/content}}

3
src/ui/css/diff2html.css
View file

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