react-diff-viewer
react-diff-viewer copied to clipboard
praneshr
ShowDiffOnly collapsed line indicators in wrong places
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:
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.
