Issues when used with table content

[krouskop]

This may be outside the scope you intend to support (and addressing it, I think, would massively increase the complexity of what you've built), but there are issues trying to use this tool with markdown content that includes tables.

Content changes within a single cell work great.

But, here are some things that don't work:

• Adding a row causes only the first cell of the added row to be highlighted.
• Likewise, deleting a row strikes the first cell and makes it look like later cells remained unchanged.
• Deleting an entire table gets rid of the table, but doesn't show any strike-ing-out.
• Deleting multiple rows leaves the table looking like it did not change.

Here is some markdown you can use to reproduce these issues:

starting content

### Content Changes

| Col A | Col B |
|:------|:------|
| A1    | B1    |
| A2  x | B2    |
| A3    | B3  x |


### Add Row

| Col A | Col B |
|:------|:------|
| A1    | B1    |
| A2    | B2    |
| A3    | B3    |


### Delete Row

| Col A | Col B |
|:------|:------|
| A1    | B1    |
| A2    | B2    |
| A3    | B3    |


### Delete First Row, Add New Row At End

| Col A | Col B |
|:------|:------|
| A1    | B1    |
| A2    | B2    |
| A3    | B3    |


### Delete Table

(bye bye)


### Delete Two Rows

| Col A | Col B |
|:------|:------|
| A1    | B1    |
| AX    | BX    |
| AY    | BY    |
| A2    | B2    |

modified content to 'diff' against

### Content Changes

| Col A | Col B |
|:------|:------|
| A1 x  | B1    |
| A2    | B2 x  |
| A3    | B3    |


### Add Row

| Col A | Col B |
|:------|:------|
| A1    | B1    |
| A3    | B3    |


### Delete Row

| Col A | Col B |
|:------|:------|
| A1    | B1    |
| A2    | B2    |
| AX    | BX    |
| A3    | B3    |


### Delete First Row, Add New Row At End

| Col A | Col B |
|:------|:------|
| AX    | BX    |
| A1    | B1    |
| A2    | B2    |


### Delete Table

| Col A | Col B |
|:------|:------|
| A1    | B1    |
| A2    | B2    |
| A3    | B3    |


### Delete Two Rows

| Col A | Col B |
|:------|:------|
| A1    | B1    |
| A2    | B2    |

Here's how "diff"-ing that content renders, using strike out for what would get strike-out'd+red-background'd and bold for what would get underline'd+green-background'd.

Content Changes

Col A	Col B
A1 x	B1
A2 x	B2 x
A3	B3 x

Add Row

Col A	Col B
A1	B1
A2	B2
A3	B3

Delete Row

Col A	Col B
A1	B1
A2	B2
AX	BX
A3	B3

Delete First Row, Add New Row At End

Col A	Col B
AX	BX
A1	B1
A2	B2
	A3

Delete Table

(bye bye)

Delete Two Rows

Col A	Col B
A1	B1
AX	BX
AY	BY
A2	B2

The crux of the issue is that the script generates output that looks like this:

| Col A | Col B |
|:------|:------|
| A1    | B1    |
| <ins class="ins">A2    | B2    |
|</ins> A3    | B3    |

note how the <ins> starts within the cell but the </ins> doesn't show up until inside the first cell of the next row.

That then turns into this HTML for the rows:

<tr class="even">
<td style="text-align: left;"><ins class="ins">A2</td>
<td style="text-align: left;">B2</td>
</tr>
<tr class="odd">
<td style="text-align: left;"></ins> A3</td>
<td style="text-align: left;">B3</td>
</tr>

reflecting roughly the same position of the start and close ins tags, but when the browser renders that syntactically incorrect HTML, the browser closes off the <ins> when it hits the closing </td>.