Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ShowDiffOnly collapsed line indicators in wrong places #113

Open
whiterook6 opened this issue Mar 16, 2021 · 4 comments
Open

ShowDiffOnly collapsed line indicators in wrong places #113

whiterook6 opened this issue Mar 16, 2021 · 4 comments

Comments

@whiterook6
Copy link

whiterook6 commented Mar 16, 2021

Hello. We use react-diff-viewer at my office and I love it. We use it for diffing JSON objects. I just upgraded from version 1.1 to version 3.1.1 to take advantage of the showDiffOnly option. But there appears to be an error with where the viewer is inserting "Expanding {number} lines..." controls:

Screen Shot 2021-03-16 at 9 52 05 AM

As you can see, the blue bars with "Expand {number} lines..." options are not in the right place. I expect the changes code to be right in the middle between each blue bar, and for there to be a blue bar on both sides of each block of changed lines, with a 3-line buffer. Additonally, though the line numbers are correct, it isn't adding the correct unfolded lines at the start: in the screenshot, line 356 should have lines 353, 354, and 355 before it, but instead there are 6 lines after it.

These are the props I'm using:

<ReactDiffViewer
  newValue={current}
  oldValue={previous}
  splitView={true}
  compareMethod={DiffMethod.LINES}
  showDiffOnly={true}
  styles={{
    variables: {
      light: {
        diffViewerBackground: "#efebeb",
        gutterBackground: "#efebeb", // color to match well
      }
    },
    line: {
      color: "#4d4d4d", // keep lines looking like code sample
      marginTop: 0,
      lineHeight: "25px",
    },
    marker: {
      // keep + / - markers from getting too wide, also center
      width: "25px",
      minWidth: "25px",
      textAlign: "center",
    },
    diffContainer: {
      // various spacings to look like our code sample
      borderSpacing: 0,
      td: {
        padding: 0,
      },
      tbody: {
        tr: {
          "&:first-child": {
            td: {
              paddingTop: 0,
            },
          },
          "&:last-child": {
            td: {
              paddingBottom: 0,
            },
          },
        },
      },
    },
  }}
/>

I can't include the actual newValue and oldValue objects in here because there's some sensitive work data in these JSON objects. They are just regular javascript objects that have been JSON.stringify()ed.

@whiterook6
Copy link
Author

bump

1 similar comment
@whiterook6
Copy link
Author

bump

@patrickschmelter
Copy link

having the same issue

@samtes
Copy link

samtes commented Jan 24, 2023

Any update on this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants