Teamwork/visual-dom-diff

Table shown as added/deleted even if there are no changes to the table

janhavi529 opened this issue · 5 comments

@gkubisa @ipip2005 Appreciate the work on this library! It perfectly fits our requirements except for the behaviour with tables.

I have a table where there are no changes, it is still shown as deleted and then added in the final differenced HTML. Is there a way this can be omitted from the output? Also, if I have made any changes inside the table, it should show that only that specific change has been done in that cell and not that the entire table has changed.

Most likely you have some spaces/tabs between tags in your source HTML. Once you remove them, the table should diff correctly. visual-dom-diff assumes that the input is "normalized" to simplify its implementation and improve performance.

Here's a working example from https://teamwork.github.io/visual-dom-diff/.

visual-dom-diff

@gkubisa Thank you so much for the quick response! I did have some spaces between the tags, it works now!

@gkubisa I am trying to add the following table in the HTML and it does not have any changes, but this is still shown as removed and then added. Is it because I have added a lot of different elements inside the table cells?

<table><tbody><tr><th><p>Header 1</p></th><th><p>Header 2</p></th><th><p>Header 3</p></th></tr><tr><td colspan="2"><p>Merged</p><p>Data 1</p><p>Data 2</p><p>Data 3</p></td><td><p>Data 3</p><ul><li><p>Item 1</p><ul><li><p>Item 1.1</p><ul><li><p>Item 1.1.1</p></li></ul></li></ul></li><li><p>Item 2</p><ul><li><p>Item 2.1</p></li><li><p>Item 2.2</p><ul><li><p>Item 2.2.1 changed</p></li></ul></li><li><p>Item 2.3</p></li></ul></li><li><p>Item 3</p></li></ul></td></tr><tr><td><p></p></td><td><p>Data 5</p><p>Data 6</p></td><td><p>Split</p></td></tr><tr><td><p>Data 7</p><ul><li><p>List of links</p></li><li><p><a href="https://www.google.com" rel="noopener noreferrer nofollow">Link 1</a></p></li><li><p><a href="https://www.google.com" rel="noopener noreferrer nofollow">Link 2</a></p></li><li><p><a href="https://www.google.com" rel="noopener noreferrer nofollow">Link 3</a></p></li></ul></td><td><p>Data 8 Link to Google</p><p>Removed link above</p></td><td><p>Data 9</p><ol><li><p>Item 1</p><ol><li><p>Item 1.1</p><ol><li><p>Item 1.1.1</p></li></ol></li></ol></li><li><p>Item 2</p><ol><li><p>Item 2.1</p></li><li><p>Item 2.2</p><ol><li><p>Item 2.2.1</p></li></ol></li><li><p>Item 2.3</p></li></ol></li><li><p>Item 3</p></li></ol></td></tr></tbody></table>

visual-dom-diff currently does not support colspan other than "1". I'm (almost) sure this limitation could be removed at least in some cases, for example when no columns are added nor removed. The main challenge with diffing tables is to keep columns and rows aligned when columns and rows are added or removed. Unfortunately I don't have time to look into it in the foreseeable future.

@gkubisa Thank you for your response. I understand it is a challenge covering all scenarios. Really appreciate your work on this library!