Word wrapping doesn't work as it does in json-diff-kit

[matteotrapani]

Description:
Hello,

When JSON properties have long strings word wrapping is not working properly.

JSON examples

JSON 1

[
  {
    "test1": "UK",
    "test2": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  }
]

JSON 2

[
  {
    "test1": "UK",
    "test2": "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos."
  }
]

Expected Behavior:
The following screenshot is taken from json-diff-kit playground

Actual Behavior:
Screenshot taken from this lib playgroud

[utkuakyuz]

It happens due to virtualized row heights. I think we need to go through the code and calculate the row height according to row content length

[matteotrapani]

Ok, maybe just applying a correct overflow would be enough to avoid overlapping of texts. I'll see if I can make a PR for that.

[utkuakyuz]

Unfortunately it won't solve by itself. I passed virtual row height as a static variable.

The solution is calculating the row height after applying correct overflow. Calculation will include wrapped row count * row height.

This way if a row is wrapped 5 times, row height will be 20*5 and there will be no overlap.

I made the calculations in the code and right now reviewing my code, will create a PR soon.

It looks like this

---

Code includes rowHeights variable which observe the wrap count of rows.

const getItemSize = useCallback(
    (index: number) => {
      const leftLine = leftView[index];

      if (isCollapsed(leftLine)) {
        return COLLAPSED_ROW_HEIGHT;
      }

      const wraps = rowHeights[index] ?? 1;
      return wraps * ROW_HEIGHT;
    },
    [leftView, rowHeights],
  );

[utkuakyuz]

Hey @matteotrapani Check out the PR 9 and then I will be closing the issue after publishing 1.0.6

My prior task is managing the all observe-search-differ logic outside of the virtualized diff viewer component for better readability. I have a commit for that but will be pushing it for next version.

[utkuakyuz]

Version 1.0.6 published with row height corrections