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

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

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

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

@ -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}}

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

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