Skip to content

Commit 063d3ee

Browse files
SuttonKyleSuttonKyle
authored
Merge pull request mblink#10 from mblink/bug-fix-currSegment
fix bug with segment vs currSegment that was causing rendering issues
2 parents 5cd4734 + 7536a9f commit 063d3ee

File tree

5 files changed

+130
-10
lines changed

5 files changed

+130
-10
lines changed

‎dist/htmldiff.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/htmldiff.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/htmldiff.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ function isEndOfStyleTag(word: string, tag: string) {
132132
return word.substring(word.length - tag.length - 2) === ('</' + tag);
133133
}
134134

135-
const tableTagsRegExp = /^<(table|tbody|thead|tr|th|td|blockquote)(^(?!\w)|>)/;
135+
const tableTagsRegExp = /^<(table|tbody|thead|tr|th|td|blockquote|ul|ol|li)(^(?!\w)|>)/;
136136
/**
137137
* Checks if the current word is the beginning of a table tag. A table tag is one whose
138138
* child nodes should be compared, but the entire tag should be treated as one token. This
@@ -732,7 +732,7 @@ export function findMatchingBlocks(segment: Segment): Match[] {
732732
// If there's an unmatched area at the start of the segment, create a new segment
733733
// from that area and throw it into the segments array to get processed.
734734
if (match.segmentStartInBefore > 0 && match.segmentStartInAfter > 0){
735-
const leftBeforeTokens = segment.beforeTokens.slice(
735+
const leftBeforeTokens = currSegment.beforeTokens.slice(
736736
0, match.segmentStartInBefore);
737737
const leftAfterTokens = currSegment.afterTokens.slice(0, match.segmentStartInAfter);
738738

‎test/find_matching_blocks.spec.js

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,5 +162,121 @@ describe('findMatchingBlocks', function(){
162162
expect(res[2].length).eql(1);
163163
});
164164
});
165+
166+
describe('HTML special case', function(){
167+
beforeEach(function(){
168+
const before = htmlToTokens('<div>Hello <p>foo</p> world! Hello Earth!</div>');
169+
const after = htmlToTokens('<div>Hello <p>foo</p> world! <p>bar</p> baz!</div>');
170+
segment = createSegment(before, after, 0, 0);
171+
res = cut(segment);
172+
});
173+
174+
it('should return 2 matches', function(){
175+
expect(res.length).to.equal(2);
176+
});
177+
178+
it('should match "<div>Hello <p>foo</p> world!"', function(){
179+
expect(res[0].startInBefore).eql(0);
180+
expect(res[0].startInAfter).eql(0);
181+
expect(res[0].endInBefore).eql(8);
182+
expect(res[0].endInAfter).eql(8);
183+
expect(res[0].length).eql(9);
184+
});
185+
186+
it('should match "</div>"', function(){
187+
expect(res[1].startInBefore).eql(12);
188+
expect(res[1].startInAfter).eql(14);
189+
expect(res[1].endInBefore).eql(12);
190+
expect(res[1].endInAfter).eql(14);
191+
expect(res[1].length).eql(1);
192+
});
193+
});
194+
195+
describe('HTML special case -- reverse', function(){
196+
beforeEach(function(){
197+
const before = htmlToTokens('<div>Hello <p>foo</p> world! <p>bar</p> baz!</div>');
198+
const after = htmlToTokens('<div>Hello <p>foo</p> world! Hello Earth!</div>');
199+
segment = createSegment(before, after, 0, 0);
200+
res = cut(segment);
201+
});
202+
203+
it('should return 2 matches', function(){
204+
expect(res.length).to.equal(2);
205+
});
206+
207+
it('should match "<div>Hello <p>foo</p> world!"', function(){
208+
expect(res[0].startInBefore).eql(0);
209+
expect(res[0].startInAfter).eql(0);
210+
expect(res[0].endInBefore).eql(8);
211+
expect(res[0].endInAfter).eql(8);
212+
expect(res[0].length).eql(9);
213+
});
214+
215+
it('should match "</div>"', function(){
216+
expect(res[1].startInBefore).eql(14);
217+
expect(res[1].startInAfter).eql(12);
218+
expect(res[1].endInBefore).eql(14);
219+
expect(res[1].endInAfter).eql(12);
220+
expect(res[1].length).eql(1);
221+
});
222+
});
223+
224+
describe('HTML special case with blockquote', function(){
225+
beforeEach(function(){
226+
const before = htmlToTokens('<div>Hello <p>foo</p> world! <blockquote>Hello Earth!</blockquote></div>');
227+
const after = htmlToTokens('<div>Hello <p>foo</p> world! <p>Hello Earth!</p></div>');
228+
segment = createSegment(before, after, 0, 0);
229+
res = cut(segment);
230+
});
231+
232+
it('should return 2 matches', function(){
233+
expect(res.length).to.equal(2);
234+
});
235+
236+
it('should match "<div>Hello <p>foo</p> world!"', function(){
237+
expect(res[0].startInBefore).eql(0);
238+
expect(res[0].startInAfter).eql(0);
239+
expect(res[0].endInBefore).eql(8);
240+
expect(res[0].endInAfter).eql(8);
241+
expect(res[0].length).eql(9);
242+
});
243+
244+
it('should match "</div>"', function(){
245+
expect(res[1].startInBefore).eql(14);
246+
expect(res[1].startInAfter).eql(14);
247+
expect(res[1].endInBefore).eql(14);
248+
expect(res[1].endInAfter).eql(14);
249+
expect(res[1].length).eql(1);
250+
});
251+
});
252+
253+
describe('HTML special case with blockquote -- reverse', function(){
254+
beforeEach(function(){
255+
const before = htmlToTokens('<div>Hello <p>foo</p> world! <p>Hello Earth!</p></div>');
256+
const after = htmlToTokens('<div>Hello <p>foo</p> world! <blockquote>Hello Earth!</blockquote></div>');
257+
segment = createSegment(before, after, 0, 0);
258+
res = cut(segment);
259+
});
260+
261+
it('should return 2 matches', function(){
262+
expect(res.length).to.equal(2);
263+
});
264+
265+
it('should match "<div>Hello <p>foo</p> world!"', function(){
266+
expect(res[0].startInBefore).eql(0);
267+
expect(res[0].startInAfter).eql(0);
268+
expect(res[0].endInBefore).eql(8);
269+
expect(res[0].endInAfter).eql(8);
270+
expect(res[0].length).eql(9);
271+
});
272+
273+
it('should match "</div>"', function(){
274+
expect(res[1].startInBefore).eql(14);
275+
expect(res[1].startInAfter).eql(14);
276+
expect(res[1].endInBefore).eql(14);
277+
expect(res[1].endInAfter).eql(14);
278+
expect(res[1].length).eql(1);
279+
});
280+
});
165281
});
166282
});

‎test/pain_games.spec.js

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -123,10 +123,12 @@ const basicToFancy = `<table>
123123
</thead>
124124
<tbody>
125125
<tr>
126-
<td><del data-operation-index="1">a</del></td><td><del data-operation-index="1">b</del><p data-diff-node="ins" data-operation-index="1"><ins data-operation-index="1">a</ins></p><p data-diff-node="ins" data-operation-index="1"><ins data-operation-index="1">aa</ins></p></td><td><ins data-operation-index="1">b</ins><br data-diff-node="ins" data-operation-index="1"></br><ins data-operation-index="1">bb</ins></td>
126+
<td><p>a</p><p data-diff-node="ins" data-operation-index="3"><ins data-operation-index="3">aa</ins></p></td>
127+
<td>b<br data-diff-node="ins" data-operation-index="5"></br><ins data-operation-index="5">bb</ins></td>
127128
</tr>
128129
<tr>
129-
<td><del data-operation-index="3">c</del></td><td><del data-operation-index="3">d</del><ul data-diff-node="ins" data-operation-index="3"><li data-diff-node="ins" data-operation-index="3"><ins data-operation-index="3">c</ins></li><li data-diff-node="ins" data-operation-index="3"><ins data-operation-index="3">cc</ins></li></ul></td><td><ol data-diff-node="ins" data-operation-index="3"><li data-diff-node="ins" data-operation-index="3"><ins data-operation-index="3">c</ins></li><li data-diff-node="ins" data-operation-index="3"><ins data-operation-index="3">cc</ins></li></ol></td>
130+
<td><del data-operation-index="7">c</del><ul data-diff-node="ins" data-operation-index="7"><li data-diff-node="ins" data-operation-index="7"><ins data-operation-index="7">c</ins></li><li data-diff-node="ins" data-operation-index="7"><ins data-operation-index="7">cc</ins></li></ul></td>
131+
<td><del data-operation-index="9">d</del><ol data-diff-node="ins" data-operation-index="9"><li data-diff-node="ins" data-operation-index="9"><ins data-operation-index="9">c</ins></li><li data-diff-node="ins" data-operation-index="9"><ins data-operation-index="9">cc</ins></li></ol></td>
130132
</tr>
131133
</tbody>
132134
</table>`;
@@ -140,10 +142,12 @@ const fancyToBasic = `<table>
140142
</thead>
141143
<tbody>
142144
<tr>
143-
<td><del data-operation-index="1">a</del></td><td><del data-operation-index="1">b</del><p data-diff-node="ins" data-operation-index="1"><ins data-operation-index="1">a</ins></p><p data-diff-node="ins" data-operation-index="1"><ins data-operation-index="1">aa</ins></p></td><td><ins data-operation-index="1">b</ins><br data-diff-node="ins" data-operation-index="1"></br><ins data-operation-index="1">bb</ins></td>
145+
<td><p>a</p><p data-diff-node="del" data-operation-index="3"><del data-operation-index="3">aa</del></p></td>
146+
<td>b<br data-diff-node="del" data-operation-index="5"></br><del data-operation-index="5">bb</del></td>
144147
</tr>
145148
<tr>
146-
<td><del data-operation-index="3">c</del></td><td><del data-operation-index="3">d</del><ul data-diff-node="ins" data-operation-index="3"><li data-diff-node="ins" data-operation-index="3"><ins data-operation-index="3">c</ins></li><li data-diff-node="ins" data-operation-index="3"><ins data-operation-index="3">cc</ins></li></ul></td><td><ol data-diff-node="ins" data-operation-index="3"><li data-diff-node="ins" data-operation-index="3"><ins data-operation-index="3">c</ins></li><li data-diff-node="ins" data-operation-index="3"><ins data-operation-index="3">cc</ins></li></ol></td>
149+
<td><ul data-diff-node="del" data-operation-index="7"><li data-diff-node="del" data-operation-index="7"><del data-operation-index="7">c</del></li><li data-diff-node="del" data-operation-index="7"><del data-operation-index="7">cc</del></li></ul><ins data-operation-index="7">c</ins></td>
150+
<td><ol data-diff-node="del" data-operation-index="9"><li data-diff-node="del" data-operation-index="9"><del data-operation-index="9">c</del></li><li data-diff-node="del" data-operation-index="9"><del data-operation-index="9">cc</del></li></ol><ins data-operation-index="9">d</ins></td>
147151
</tr>
148152
</tbody>
149153
</table>`;
@@ -264,7 +268,7 @@ describe('Pain Games', function(){
264268
expect(res).to.equal(basicToFancy);
265269
});
266270
it ('should do alright converting a fancy table to a basic one', function(){
267-
res = cut(tableBasic, tableFancy);
271+
res = cut(tableFancy, tableBasic);
268272
expect(res).to.equal(fancyToBasic);
269273
});
270274
});

0 commit comments

Comments
 (0)